💄(frontend) update callout styles

Updated the callout block styles, centered the emoji and aligned the
text to be in the center of the block.

Signed-off-by: ZouicheOmar <[email protected]>

Author: ZouicheOmar

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx

@@ -70,8 +70,10 @@ export const CalloutBlock = createReactBlockSpec(
               }
             `}
             $align="center"
+            $justify="center"
             $height="28px"
             $width="28px"
+            $minWidth="28px"
             $radius="4px"
           >
             {block.props.emoji}
@@ -85,7 +87,13 @@ export const CalloutBlock = createReactBlockSpec(
               onEmojiSelect={onEmojiSelect}
             />
           )}
-          <Box as="p" className="inline-content" ref={contentRef} />
+          <Box as="p" className="inline-content" ref={contentRef}
+            $css={css`
+              & > div {
+                padding-top: 2px;
+              }
+              `}
+          />
         </Box>
       );
     },
@@ -97,19 +105,19 @@ export const getCalloutReactSlashMenuItems = (
   t: TFunction<'translation', undefined>,
   group: string,
 ) => [
-  {
-    title: t('Callout'),
-    onItemClick: () => {
-      insertOrUpdateBlock(editor, {
-        type: 'callout',
-      });
+    {
+      title: t('Callout'),
+      onItemClick: () => {
+        insertOrUpdateBlock(editor, {
+          type: 'callout',
+        });
+      },
+      aliases: ['callout', 'encadré', 'hervorhebung', 'benadrukken'],
+      group,
+      icon: <Icon iconName="lightbulb" $size="18px" />,
+      subtext: t('Add a callout block'),
     },
-    aliases: ['callout', 'encadré', 'hervorhebung', 'benadrukken'],
-    group,
-    icon: <Icon iconName="lightbulb" $size="18px" />,
-    subtext: t('Add a callout block'),
-  },
-];
+  ];
 
 export const getCalloutFormattingToolbarItems = (
   t: TFunction<'translation', undefined>,