fixing footers and headers

figma · Jun 9, 2024 · 2151703 · 2151703
1 parent 8e21105
commit 2151703
Show file tree

Hide file tree

Showing 8 changed files with 125 additions and 42 deletions.
diff --git a/src/theme.css b/src/theme.css
@@ -444,7 +444,9 @@
   --sds-typography-body-size-lg: var(--sds-typography-scale-04);
   --sds-typography-body-size-md: var(--sds-typography-scale-03);
   --sds-typography-body-size-sm: var(--sds-typography-scale-02);
-  --sds-typography-body-weight-emphasis: var(--sds-typography-weight-regular-italic);
+  --sds-typography-body-weight-emphasis: var(
+    --sds-typography-weight-regular-italic
+  );
   --sds-typography-body-weight-regular: var(--sds-typography-weight-regular);
   --sds-typography-body-weight-strong: var(--sds-typography-weight-semibold);
   --sds-typography-code-family: var(--sds-typography-family-mono);
@@ -541,23 +543,60 @@
 }
 /* styles */
 :root {
-  --sds-font-body-strong: normal var(--sds-typography-body-weight-strong) var(--sds-typography-body-size-md) var(--sds-typography-body-family);
-  --sds-font-body-base: normal var(--sds-typography-body-weight-regular) var(--sds-typography-body-size-md) var(--sds-typography-body-family);
-  --sds-font-input: normal var(--sds-typography-input-weight) var(--sds-typography-input-size-md) var(--sds-typography-input-family);
-  --sds-font-utilities-component-notes-regular: normal var(--sds-typography-weight-regular) var(--sds-typography-scale-03) var(--sds-typography-family-mono);
-  --sds-font-subheading: normal var(--sds-typography-subheading-weight) var(--sds-typography-subheading-size-md) var(--sds-typography-subheading-family);
-  --sds-font-title-hero: normal var(--sds-typography-title-hero-weight) var(--sds-typography-title-hero-size) var(--sds-typography-title-hero-family);
-  --sds-font-body-code: normal var(--sds-typography-code-weight) var(--sds-typography-code-size-md) var(--sds-typography-code-family);
-  --sds-font-title-page: normal var(--sds-typography-title-page-weight) var(--sds-typography-title-page-size-md) var(--sds-typography-title-page-family);
-  --sds-font-subtitle: normal var(--sds-typography-subtitle-weight) var(--sds-typography-subtitle-size-md) var(--sds-typography-subtitle-family);
-  --sds-font-heading: normal var(--sds-typography-heading-weight) var(--sds-typography-heading-size-md) var(--sds-typography-heading-family);
-  --sds-font-body-emphasis: var(--sds-typography-body-weight-emphasis)  var(--sds-typography-body-size-md) var(--sds-typography-body-family);
-  --sds-font-body-link: normal var(--sds-typography-body-weight-regular) var(--sds-typography-body-size-md) var(--sds-typography-body-family);
-  --sds-font-body-small: normal var(--sds-typography-body-weight-regular) var(--sds-typography-body-size-sm) var(--sds-typography-body-family);
-  --sds-effects-shadows-drop-shadow-200: var(--sds-size-depth-none) var(--sds-size-depth-xs) var(--sds-size-depth-sm) var(--sds-size-depth-none) var(--sds-color-black-100), var(--sds-size-depth-none) var(--sds-size-depth-xs) var(--sds-size-depth-sm) var(--sds-size-depth-none) var(--sds-color-black-200);
-  --sds-effects-shadows-drop-shadow-100: var(--sds-size-depth-none) var(--sds-size-depth-xs) var(--sds-size-depth-sm) var(--sds-size-depth-none) var(--sds-color-black-100);
-  --sds-effects-shadows-drop-shadow-300: var(--sds-size-depth-none) var(--sds-size-depth-sm) var(--sds-size-depth-sm) var(--sds-size-depth-negative-xs) var(--sds-color-black-100), var(--sds-size-depth-none) var(--sds-size-depth-sm) var(--sds-size-depth-md) var(--sds-size-depth-negative-xs) var(--sds-color-black-200);
-  --sds-effects-shadows-drop-shadow-400: var(--sds-size-depth-none) var(--sds-size-depth-sm) var(--sds-size-depth-md) var(--sds-size-depth-negative-sm) var(--sds-color-black-100), var(--sds-size-depth-none) var(--sds-size-depth-lg) var(--sds-size-depth-xl) var(--sds-size-depth-negative-sm) var(--sds-color-black-200);
-  --sds-effects-shadows-drop-shadow-500: var(--sds-size-depth-none) var(--sds-size-depth-sm) var(--sds-size-depth-md) var(--sds-size-depth-negative-sm) var(--sds-color-black-100), var(--sds-size-depth-none) var(--sds-size-depth-lg) var(--sds-size-depth-lg) var(--sds-size-depth-negative-md) var(--sds-color-black-200);
-  --sds-effects-shadows-drop-shadow-600: var(--sds-size-depth-none) var(--sds-size-depth-lg) var(--sds-size-depth-xl) var(--sds-size-depth-negative-md) var(--sds-color-black-400);
-}
+  --sds-font-body-strong: normal var(--sds-typography-body-weight-strong)
+    var(--sds-typography-body-size-md) var(--sds-typography-body-family);
+  --sds-font-body-base: normal var(--sds-typography-body-weight-regular)
+    var(--sds-typography-body-size-md) var(--sds-typography-body-family);
+  --sds-font-input: normal var(--sds-typography-input-weight)
+    var(--sds-typography-input-size-md) var(--sds-typography-input-family);
+  --sds-font-utilities-component-notes-regular: normal
+    var(--sds-typography-weight-regular) var(--sds-typography-scale-03)
+    var(--sds-typography-family-mono);
+  --sds-font-subheading: normal var(--sds-typography-subheading-weight)
+    var(--sds-typography-subheading-size-md)
+    var(--sds-typography-subheading-family);
+  --sds-font-title-hero: normal var(--sds-typography-title-hero-weight)
+    var(--sds-typography-title-hero-size)
+    var(--sds-typography-title-hero-family);
+  --sds-font-body-code: normal var(--sds-typography-code-weight)
+    var(--sds-typography-code-size-md) var(--sds-typography-code-family);
+  --sds-font-title-page: normal var(--sds-typography-title-page-weight)
+    var(--sds-typography-title-page-size-md)
+    var(--sds-typography-title-page-family);
+  --sds-font-subtitle: normal var(--sds-typography-subtitle-weight)
+    var(--sds-typography-subtitle-size-md) var(--sds-typography-subtitle-family);
+  --sds-font-heading: normal var(--sds-typography-heading-weight)
+    var(--sds-typography-heading-size-md) var(--sds-typography-heading-family);
+  --sds-font-body-emphasis: var(--sds-typography-body-weight-emphasis)
+    var(--sds-typography-body-size-md) var(--sds-typography-body-family);
+  --sds-font-body-link: normal var(--sds-typography-body-weight-regular)
+    var(--sds-typography-body-size-md) var(--sds-typography-body-family);
+  --sds-font-body-small: normal var(--sds-typography-body-weight-regular)
+    var(--sds-typography-body-size-sm) var(--sds-typography-body-family);
+  --sds-effects-shadows-drop-shadow-200: var(--sds-size-depth-none)
+      var(--sds-size-depth-xs) var(--sds-size-depth-sm)
+      var(--sds-size-depth-none) var(--sds-color-black-100),
+    var(--sds-size-depth-none) var(--sds-size-depth-xs) var(--sds-size-depth-sm)
+      var(--sds-size-depth-none) var(--sds-color-black-200);
+  --sds-effects-shadows-drop-shadow-100: var(--sds-size-depth-none)
+    var(--sds-size-depth-xs) var(--sds-size-depth-sm) var(--sds-size-depth-none)
+    var(--sds-color-black-100);
+  --sds-effects-shadows-drop-shadow-300: var(--sds-size-depth-none)
+      var(--sds-size-depth-sm) var(--sds-size-depth-sm)
+      var(--sds-size-depth-negative-xs) var(--sds-color-black-100),
+    var(--sds-size-depth-none) var(--sds-size-depth-sm) var(--sds-size-depth-md)
+      var(--sds-size-depth-negative-xs) var(--sds-color-black-200);
+  --sds-effects-shadows-drop-shadow-400: var(--sds-size-depth-none)
+      var(--sds-size-depth-sm) var(--sds-size-depth-md)
+      var(--sds-size-depth-negative-sm) var(--sds-color-black-100),
+    var(--sds-size-depth-none) var(--sds-size-depth-lg) var(--sds-size-depth-xl)
+      var(--sds-size-depth-negative-sm) var(--sds-color-black-200);
+  --sds-effects-shadows-drop-shadow-500: var(--sds-size-depth-none)
+      var(--sds-size-depth-sm) var(--sds-size-depth-md)
+      var(--sds-size-depth-negative-sm) var(--sds-color-black-100),
+    var(--sds-size-depth-none) var(--sds-size-depth-lg) var(--sds-size-depth-lg)
+      var(--sds-size-depth-negative-md) var(--sds-color-black-200);
+  --sds-effects-shadows-drop-shadow-600: var(--sds-size-depth-none)
+    var(--sds-size-depth-lg) var(--sds-size-depth-xl)
+    var(--sds-size-depth-negative-md) var(--sds-color-black-400);
+}
diff --git a/src/ui/components/Cards/cards.css b/src/ui/components/Cards/cards.css
@@ -18,7 +18,7 @@
     box-shadow:
       inset 0 0 0 var(--sds-size-border-width)
         var(--sds-color-border-default-default),
-      var(--sds-effects-shadows-sm);
+      var(--sds-effects-shadows-drop-shadow-300);
     padding: var(--sds-size-padding-xl);
   }
 

diff --git a/src/ui/components/Footers/Footers.tsx b/src/ui/components/Footers/Footers.tsx
@@ -34,41 +34,77 @@ export function StandardFooter({ className, ...props }: StandardFooterProps) {
           </Flex>
         </FlexItem>
         <FlexItem size="minor">
-          <TextLinkList title={<TextStrong>Something 1</TextStrong>}>
+          <TextLinkList title={<TextStrong>Use cases</TextStrong>}>
             <TextListItem>
-              <TextLink href="#">List item 1</TextLink>
+              <TextLink href="#">UI design</TextLink>
             </TextListItem>
             <TextListItem>
-              <TextLink href="#">List item 2</TextLink>
+              <TextLink href="#">UX design</TextLink>
             </TextListItem>
             <TextListItem>
-              <TextLink href="#">List item 3</TextLink>
+              <TextLink href="#">Wireframing</TextLink>
+            </TextListItem>
+            <TextListItem>
+              <TextLink href="#">Diagramming</TextLink>
+            </TextListItem>
+            <TextListItem>
+              <TextLink href="#">Brainstorming</TextLink>
+            </TextListItem>
+            <TextListItem>
+              <TextLink href="#">Online whiteboard</TextLink>
+            </TextListItem>
+            <TextListItem>
+              <TextLink href="#">Team collaboration</TextLink>
             </TextListItem>
           </TextLinkList>
         </FlexItem>
         <FlexItem size="minor">
-          <TextLinkList title={<TextStrong>Something 2</TextStrong>}>
+          <TextLinkList title={<TextStrong>Explore</TextStrong>}>
+            <TextListItem>
+              <TextLink href="#">Design</TextLink>
+            </TextListItem>
+            <TextListItem>
+              <TextLink href="#">Prototyping</TextLink>
+            </TextListItem>
             <TextListItem>
-              <TextLink href="#">List item 1</TextLink>
+              <TextLink href="#">Development features</TextLink>
             </TextListItem>
             <TextListItem>
-              <TextLink href="#">List item 2</TextLink>
+              <TextLink href="#">Design systems</TextLink>
             </TextListItem>
             <TextListItem>
-              <TextLink href="#">List item 3</TextLink>
+              <TextLink href="#">Collaboration features</TextLink>
+            </TextListItem>
+            <TextListItem>
+              <TextLink href="#">Design process</TextLink>
+            </TextListItem>
+            <TextListItem>
+              <TextLink href="#">FigJam</TextLink>
             </TextListItem>
           </TextLinkList>
         </FlexItem>
         <FlexItem size="minor">
-          <TextLinkList title={<TextStrong>Something 3</TextStrong>}>
+          <TextLinkList title={<TextStrong>Resources</TextStrong>}>
+            <TextListItem>
+              <TextLink href="#">Blog</TextLink>
+            </TextListItem>
+            <TextListItem>
+              <TextLink href="#">Best practices</TextLink>
+            </TextListItem>
+            <TextListItem>
+              <TextLink href="#">Colors</TextLink>
+            </TextListItem>
+            <TextListItem>
+              <TextLink href="#">Color wheel</TextLink>
+            </TextListItem>
             <TextListItem>
-              <TextLink href="#">List item 1</TextLink>
+              <TextLink href="#">Support</TextLink>
             </TextListItem>
             <TextListItem>
-              <TextLink href="#">List item 2</TextLink>
+              <TextLink href="#">Developers</TextLink>
             </TextListItem>
             <TextListItem>
-              <TextLink href="#">List item 3</TextLink>
+              <TextLink href="#">Resource library</TextLink>
             </TextListItem>
           </TextLinkList>
         </FlexItem>

diff --git a/src/ui/components/Headers/Headers.tsx b/src/ui/components/Headers/Headers.tsx
@@ -83,8 +83,12 @@ export function HeaderAuth() {
         <FlexItem className="display-none-to-flex">
           <Flex gap="lg" alignSecondary="center">
             <Navigation>
-              <NavigationItem isSelected>Home</NavigationItem>
-              <NavigationItem>About</NavigationItem>
+              <NavigationItem isSelected>Pricing</NavigationItem>
+              <NavigationItem>Solutions</NavigationItem>
+              <NavigationItem>Community</NavigationItem>
+              <NavigationItem>Resources</NavigationItem>
+              <NavigationItem>Pricing</NavigationItem>
+              <NavigationItem>Contact</NavigationItem>
             </Navigation>
             {currentUser ? (
               <MenuTrigger>
@@ -129,8 +133,12 @@ export function HeaderAuth() {
           </IconButton>
           <Flex direction="column" alignPrimary="space-between">
             <Navigation>
-              <NavigationItem isSelected>Home</NavigationItem>
-              <NavigationItem>About</NavigationItem>
+              <NavigationItem isSelected>Pricing</NavigationItem>
+              <NavigationItem>Solutions</NavigationItem>
+              <NavigationItem>Community</NavigationItem>
+              <NavigationItem>Resources</NavigationItem>
+              <NavigationItem>Pricing</NavigationItem>
+              <NavigationItem>Contact</NavigationItem>
             </Navigation>
             {currentUser ? (
               <Flex alignSecondary="center" gap="sm" direction="column">

diff --git a/src/ui/primitives/Avatar/avatar.css b/src/ui/primitives/Avatar/avatar.css
@@ -114,7 +114,7 @@
   &.avatar-group-overlap {
     --avatar-group-gap-factor: -1;
     > .avatar {
-      box-shadow: var(--sds-effects-shadows-sm);
+      box-shadow: var(--sds-effects-shadows-drop-shadow-300);
     }
   }
   &.avatar-group-spacing-xs {

diff --git a/src/ui/primitives/Dialog/dialog.css b/src/ui/primitives/Dialog/dialog.css
@@ -29,7 +29,7 @@
   border-radius: var(--sds-size-radius-md);
   border: var(--sds-size-border-width) solid
     var(--sds-color-border-default-default);
-  box-shadow: var(--sds-effects-shadows-md);
+  box-shadow: var(--sds-effects-shadows-drop-shadow-400);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;

diff --git a/src/ui/primitives/ListBox/listBox.css b/src/ui/primitives/ListBox/listBox.css
@@ -4,7 +4,7 @@
   border-radius: var(--sds-size-radius-sm);
   box-shadow:
     0 0 0 var(--sds-size-border-width) var(--sds-color-border-default-default),
-    var(--sds-effects-shadows-md);
+    var(--sds-effects-shadows-drop-shadow-400);
   display: flex;
   flex-direction: column;
   outline: none;

diff --git a/src/ui/primitives/Menu/menu.css b/src/ui/primitives/Menu/menu.css
@@ -8,7 +8,7 @@
   box-shadow:
     inset 0 0 0 var(--sds-size-border-width)
       var(--sds-color-border-default-default),
-    var(--sds-effects-shadows-md);
+    var(--sds-effects-shadows-drop-shadow-400);
   outline: none;
   overflow-y: auto;
   padding: var(--sds-size-padding-sm);