Style tweaks for tips and unverified

MuckRock · Nov 20, 2024 · 87815ad · 87815ad
1 parent bcfd044
commit 87815ad
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/src/lib/components/accounts/Unverified.svelte b/src/lib/components/accounts/Unverified.svelte
@@ -6,6 +6,7 @@ a user who is logged in but has `verified_journalist = false`.
   import type { Nullable, User } from "$lib/api/types";
 
   import { _ } from "svelte-i18n";
+  import { Unverified24 } from "svelte-octicons";
 
   import Button from "../common/Button.svelte";
   import Flex from "../common/Flex.svelte";
@@ -45,6 +46,7 @@ a user who is logged in but has `verified_journalist = false`.
 </script>
 
 <Tip>
+  <Unverified24 slot="icon" />
   <p>{$_("unverified.verify")}</p>
   <Flex class="buttons" gap={1}>
     <Button href={SQUARELET_ORGS_URL} target="_blank">

diff --git a/src/lib/components/common/Tip.svelte b/src/lib/components/common/Tip.svelte
@@ -14,21 +14,21 @@
 <style>
   .tip {
     display: flex;
+    align-items: flex-start;
     gap: var(--gap, 1rem);
     padding: var(--padding, 1rem);
     border-radius: var(--border-radius, 1rem);
     color: var(--color, var(--gray-5, #233944));
     fill: var(--fill, var(--gray-4, #5c717c));
     background-color: var(--background-color, var(--gray-1, #f5f6f7));
     border: 1px solid var(--border-color, var(--gray-3, #99a8b3));
-
-    font-weight: var(--font-semibold);
   }
   .icon {
     display: flex;
     align-items: center;
   }
   .inner {
+    margin-top: 0.125rem;
     width: 100%;
     display: flex;
     flex-direction: column;

diff --git a/src/lib/components/common/stories/Tip.stories.svelte b/src/lib/components/common/stories/Tip.stories.svelte
@@ -24,7 +24,7 @@
 
 <Story name="With Icon" let:args>
   <Tip {...args}>
-    <Pin slot="icon" />
+    <Pin size={1.5} slot="icon" />
     Pinned items will appear here.
   </Tip>
 </Story>