diff --git a/app/javascript/flavours/glitch/components/callout/callout.stories.tsx b/app/javascript/flavours/glitch/components/callout/callout.stories.tsx index f9bba1ec14..bb973ab71f 100644 --- a/app/javascript/flavours/glitch/components/callout/callout.stories.tsx +++ b/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: { diff --git a/app/javascript/flavours/glitch/components/callout/styles.module.css b/app/javascript/flavours/glitch/components/callout/styles.module.css index fc05e57ab3..dd2c753525 100644 --- a/app/javascript/flavours/glitch/components/callout/styles.module.css +++ b/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; } } diff --git a/app/javascript/flavours/glitch/styles/mastodon/admin.scss b/app/javascript/flavours/glitch/styles/mastodon/admin.scss index 5950bc32cb..a5c2f3183f 100644 --- a/app/javascript/flavours/glitch/styles/mastodon/admin.scss +++ b/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; }