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

Port 87024b9e1c 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 = {
-//   args: {
-//     variant: 'subtle',
-//   },
-// };
+export const Subtle: Story = {
+  args: {
+    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;
   }
 }