Fix header and footer links after changes && tokens improvements (#1156)

starknet-io · Aug 7, 2023 · 52d66f2 · 52d66f2
1 parent bb6e72d
commit 52d66f2
Show file tree

Hide file tree

Showing 10 changed files with 30 additions and 27 deletions.
diff --git a/workspaces/website/src/components/Footer/Footer.tsx b/workspaces/website/src/components/Footer/Footer.tsx
@@ -51,8 +51,7 @@ type RootProps = {
 
 const Root = ({ children, seo, ...rest }: RootProps) => {
   return (
-    <Box as="footer" role="contentinfo" {...rest} margin="auto" maxWidth="auto">
-      <Box>
+    <Box as="footer" role="contentinfo" {...rest} margin="auto" maxWidth="auto" overflowX='hidden' color='fg-default'>
         <Box display="flex" justifyContent="center">
           <Container as="footer" role="contentinfo" maxWidth="auto" px="0">
             <Box
@@ -96,7 +95,7 @@ const Root = ({ children, seo, ...rest }: RootProps) => {
                       opacity="1"
                     />
                   </Center>
-                  <Text fontSize="sm" color="footer-link-fg">
+                  <Text fontSize="sm">
                     {seo?.footerText}
                   </Text>
                 </HStack>
@@ -115,7 +114,7 @@ const Root = ({ children, seo, ...rest }: RootProps) => {
                       size="small"
                       fontWeight="normal"
                       variant="unstyled"
-                      color="footer-link-fg"
+                      color="fg-default-light"
                       _hover={{
                         color: "fg-default-hover",
                       }}
@@ -133,7 +132,6 @@ const Root = ({ children, seo, ...rest }: RootProps) => {
             </Box>
           </Container>
         </Box>
-      </Box>
     </Box>
   );
 };
@@ -200,7 +198,7 @@ const Column = ({ title, children, color, sx }: ColumnProps) => {
           "& > *": {
             paddingBlock: "0.5rem",
           },
-          color: "footer-link-fg",
+          color: "fg-default-light",
         }}
       >
         {children}
@@ -225,6 +223,8 @@ const FooterLink = ({ children, href, isExternal }: FooterLinkProps) => {
       justifyContent="flex-start"
       textDecoration="none"
       gap="4px"
+      color="fg-default-light"
+      fontWeight={400}
       _hover={{
         color: "fg-default-hover",
       }}

diff --git a/workspaces/website/src/components/Layout/Navbar/MenuItemWithDropdown.tsx b/workspaces/website/src/components/Layout/Navbar/MenuItemWithDropdown.tsx
@@ -26,7 +26,7 @@ export const MenuItemWithDropdown = ({ children, label }: Props) => (
       <>
         <PopoverTrigger>
           <Button
-            color="fg-default"
+            color="fg-default-light"
             _hover={{ color: "fg-default-hover" , bg: 'transparent'}}
             size="sm"
             height="40px"

diff --git a/workspaces/website/src/components/Layout/Navbar/NavBarLink.tsx b/workspaces/website/src/components/Layout/Navbar/NavBarLink.tsx
@@ -9,14 +9,15 @@ export const NavBarLink = (props: Props) => {
       fontSize="sm"
       px={4}
       height="36px"
-      color="fg-default"
+      color="fg-default-light"
       borderRadius={18}
       display="flex"
       alignItems="center"
       justifyContent="flex-start"
       textDecoration="none"
       mt="0px!important"
       gap={1}
+      fontWeight={400}
       _hover={{
         color: "fg-default-hover",
       }}

diff --git a/workspaces/website/src/components/Layout/Navbar/NavbarHeading.tsx b/workspaces/website/src/components/Layout/Navbar/NavbarHeading.tsx
@@ -19,6 +19,7 @@ export const NavbarHeading = ({
       pl="16px"
       mb="16px"
       pt={pt}
+      fontWeight={600}
     >
       {children}
     </Heading>

diff --git a/workspaces/website/src/components/LinkList/LinkList.tsx b/workspaces/website/src/components/LinkList/LinkList.tsx
@@ -163,10 +163,10 @@ const Item = ({ subLabel, link, avatar, ...rest }: ItemProps) => {
           >
             {subLabel.label && (
               <Flex gap="8px">
-                <Text display={{ base: "none", md: "flex" }} color="fg-body">
+                <Text display={{ base: "none", md: "flex" }} color="fg-default">
                   •
                 </Text>
-                <Text noOfLines={1} color="fg-body">
+                <Text noOfLines={1} color="fg-default">
                   {subLabel.label}
                 </Text>
               </Flex>

diff --git a/workspaces/website/src/pages/(components)/Navbar.tsx b/workspaces/website/src/pages/(components)/Navbar.tsx
@@ -56,6 +56,11 @@ export default function Navbar({
                 maxW="900px"
                 mx="auto"
                 gap="48px"
+                // sx={{
+                //   '& a': {
+                //     fontWeight: 'normal',
+                //   },
+                // }}
               >
                 {mainMenuItem.columns?.length &&
                   mainMenuItem.columns?.map((column, columnIndex) => (

diff --git a/workspaces/website/src/pages/roadmap/@slug/(components)/RoadmapPost.tsx b/workspaces/website/src/pages/roadmap/@slug/(components)/RoadmapPost.tsx
@@ -119,7 +119,7 @@ export default function RoadmapPost({
           <Flex direction="row" alignItems="center" mt="6" mb="32px" justifyContent="space-between">
             <Flex direction="row" alignItems="center">
               <Text variant="cardBody"><strong>STAGE:</strong> {stages[roadmapPost?.stage]}</Text>
-              <Heading variant="h4" fontSize="sm" mt="0" ml="2" pl="2" borderLeftWidth="1px" mb="0" sx={{borderWeight: "solid", borderColor: "fg-body"}}>
+              <Heading variant="h4" fontSize="sm" mt="0" ml="2" pl="2" borderLeftWidth="1px" mb="0" sx={{borderWeight: "solid", borderColor: "fg-default"}}>
               {roadmapPost.availability}
               </Heading>
               {roadmapPost?.state ? <Flex alignItems="center">{roadmapPost?.specific_info ? <Text variant="cardBody" ml="2">{roadmapPost?.specific_info}</Text> : null}</Flex> : null}

diff --git a/workspaces/website/src/style/algolia/overrides.css b/workspaces/website/src/style/algolia/overrides.css
@@ -144,7 +144,7 @@ body.chakra-ui-dark .aa-Item[aria-selected=true] svg{
   min-width: 177px;
   border-radius: 8px;
   border: 0px;
-  color: var(--chakra-colors-fg-default);
+  color: var(--chakra-colors-fg-default-light);
   background-color: var(--chakra-colors-nav-searchinput-bg);
 }
 .aa-DetachedSearchButtonIcon {

diff --git a/workspaces/website/src/style/global-styles.ts b/workspaces/website/src/style/global-styles.ts
@@ -6,7 +6,7 @@ export const styles = {
     },
     body: {
       background: "bg-default",
-      color: "fg-body",
+      color: "fg-default",
     },
     "p + h3, ul + h3, .hljs-box + h3": {
       marginTop: "48px",

diff --git a/workspaces/website/src/style/tokens.ts b/workspaces/website/src/style/tokens.ts
@@ -5,8 +5,8 @@ export const tokens = {
       "link-fg": "#3F8CFF",
       "link-hover-fg": "#2C73DD",
       "bg-default": "#FBFBFB",
-      "fg-body": "#6B7280",
-      "fg-default": "#04030DAB",
+      "fg-default": "#6B7280",
+      "fg-default-light": "rgba(4, 3, 13, 0.67)",
       "fg-default-hover": "#0C0C4F",
       "fg-muted": "#858585",
       "fg-accent": "#E97880",
@@ -56,7 +56,6 @@ export const tokens = {
       "navbar-link-fg": "#6B7280",
       "navbar-link-hover-bg": "#FBFBFB",
       "navbar-link-hover-fg": "#5C94FF",
-      "footer-link-fg": "rgba(4, 3, 13, 0.67)",
       "navbar-link-active-fg": "#2166EF",
       "nav-dialog-bg": "#FBFBFB",
       "nav-header-bg": "#ffffff",
@@ -154,8 +153,8 @@ export const tokens = {
       "link-fg": "#5C9EFF",
       "link-hover-fg": "#2C73DD",
       "bg-default": "#0B0B0B",
-      "fg-body": "#CCCCCC",
-      "fg-default": "#F8F7FDCC",
+      "fg-default": "#CCCCCC",
+      "fg-default-light": "rgba(248, 247, 253, 0.80)",
       "fg-default-hover": "#FFFFFF",
       "fg-muted": "#7E7E7E",
       "fg-accent": "#FE9E92",
@@ -168,6 +167,8 @@ export const tokens = {
       "button-nav-active-fg": "#7E7E7E",
       "button-nav-active-icon-fg": "#7E7E7E",
       "btn-outline-border": "#7E7E7E",
+      "btn-outline-hover-fg": "#9EBFFF",
+      "btn-outline-hover-bg": "transparent",
       "btn-primary-hover-bg": "#8B8BE5",
       "btn-primary-disabled-bg": "#2E2E32",
       "btn-primary-disabled-fg": "#706F78",
@@ -203,7 +204,6 @@ export const tokens = {
       "navbar-link-fg": "#CCCCCC",
       "navbar-link-hover-bg": "#121212",
       "navbar-link-hover-fg": "#9EBFFF",
-      "footer-link-fg": "#858585",
       "navbar-link-active-fg": "#2166EF",
       "nav-dialog-bg": "#1B1B1B",
       "nav-header-bg": "#000000",
@@ -314,14 +314,14 @@ export const semanticTokens = {
       default: tokens.colors.light["bg-default"],
       _dark: tokens.colors.dark["bg-default"],
     },
-    "fg-body": {
-      default: tokens.colors.light["fg-body"],
-      _dark: tokens.colors.dark["fg-body"],
-    },
     "fg-default": {
       default: tokens.colors.light["fg-default"],
       _dark: tokens.colors.dark["fg-default"],
     },
+    "fg-default-light": {
+      default: tokens.colors.light["fg-default-light"],
+      _dark: tokens.colors.dark["fg-default-light"],
+    },
     "fg-default-hover": {
       default: tokens.colors.light["fg-default-hover"],
       _dark: tokens.colors.dark["fg-default-hover"],
@@ -474,10 +474,6 @@ export const semanticTokens = {
       default: tokens.colors.light["navbar-link-hover-fg"],
       _dark: tokens.colors.dark["navbar-link-hover-fg"],
     },
-    "footer-link-fg": {
-      default: tokens.colors.light["footer-link-fg"],
-      _dark: tokens.colors.dark["footer-link-fg"],
-    },
     "navbar-link-active-fg": {
       default: tokens.colors.light["navbar-link-active-fg"],
       _dark: tokens.colors.dark["navbar-link-active-fg"],