[Glitch] Fix alignment of icon and text in Callout component

Port 87024b9e1cf7f0945eae457501899216d79c9073 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/callout/callout.stories.tsx

@@ -34,6 +34,15 @@ export const Default: Story = {
   },
 };
 
+export const NoTitle: Story = {
+  args: {
+    title: '',
+    primaryLabel: '',
+    secondaryLabel: '',
+    onClose: undefined,
+  },
+};
+
 export const NoIcon: Story = {
   args: {
     icon: false,
@@ -56,11 +65,11 @@ export const OnlyText: Story = {
   },
 };
 
-// export const Subtle: Story = {
+export const Subtle: Story = {
-//   args: {
+  args: {
-//     variant: 'subtle',
+    variant: 'subtle',
-//   },
+  },
-// };
+};
 
 export const Feature: Story = {
   args: {

app/javascript/flavours/glitch/components/callout/styles.module.css

@@ -7,6 +7,7 @@
   color: var(--color-text-primary);
   border-radius: 12px;
   font-size: 15px;
+  line-height: 1.3333;
 }
 
 .icon {
@@ -14,7 +15,7 @@
   border-radius: 9999px;
   width: 1rem;
   height: 1rem;
-  margin-top: -2px;
+  margin-block: -2px;
 }
 
 .content,
@@ -46,7 +47,7 @@
 
   h3 {
     font-weight: 500;
-    margin-bottom: 5px;
+    margin-bottom: 3px;
   }
 }
 

app/javascript/flavours/glitch/styles/mastodon/admin.scss

@@ -456,6 +456,7 @@ $content-width: 840px;
     color: var(--color-text-primary);
     border-radius: 12px;
     font-size: 15px;
+    line-height: 1.3333;
     margin-bottom: 30px;
 
     .icon {
@@ -463,7 +464,7 @@ $content-width: 840px;
       border-radius: 9999px;
       width: 1rem;
       height: 1rem;
-      margin-top: -2px;
+      margin-block: -2px;
       background-color: var(--color-bg-brand-soft);
     }
 
@@ -501,7 +502,7 @@ $content-width: 840px;
 
     .title {
       font-weight: 600;
-      margin-bottom: 8px;
+      margin-bottom: 6px;
       font-size: inherit;
       line-height: inherit;
     }