[frontend] Fully responsive (#39)

Fixes #34 From this point we should only push responsive style --------- Co-authored-by: Abdel @ StarkWare <[email protected]>
keep-starknet-strange · Dec 13, 2023 · de2fd3a · de2fd3a
1 parent 5e66bd8
commit de2fd3a
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 19 deletions.
diff --git a/frontend/src/components/NavBar/Mobile/style.css.ts b/frontend/src/components/NavBar/Mobile/style.css.ts
@@ -20,6 +20,7 @@ export const navBarContainer = style([
     display: {
       md: 'none',
     },
+    zIndex: 'sticky',
   }),
 ])
 

diff --git a/frontend/src/components/NavBar/index.tsx b/frontend/src/components/NavBar/index.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import Box from 'src/theme/components/Box'
 import { Row } from 'src/theme/components/Flex'
@@ -23,10 +24,23 @@ export const links = [
 ]
 
 export default function NavBar() {
+  // state
+  const [scrolledOnTop, setScrolledOnTop] = useState(true)
+
   const navigate = useNavigate()
 
+  useEffect(() => {
+    const scrollListener = () => {
+      setScrolledOnTop(!window.scrollY)
+    }
+
+    window.addEventListener('scroll', scrollListener)
+
+    return () => window.removeEventListener('scroll', scrollListener)
+  }, [])
+
   return (
-    <Box as="nav" className={styles.nav}>
+    <Box as="nav" className={styles.nav({ onTop: scrolledOnTop })}>
       <Row justifyContent="space-between">
         <Row gap="24">
           <Box className={styles.logoContainer}>

diff --git a/frontend/src/components/NavBar/style.css.ts b/frontend/src/components/NavBar/style.css.ts
@@ -1,14 +1,37 @@
 import { style } from '@vanilla-extract/css'
+import { recipe } from '@vanilla-extract/recipes'
 import { sprinkles } from 'src/theme/css/sprinkles.css'
 
-export const nav = style([
-  sprinkles({
-    position: 'sticky',
-    top: '0',
-    padding: '24',
-    zIndex: 'sticky',
-  }),
-])
+export const nav = recipe({
+  base: [
+    sprinkles({
+      position: 'sticky',
+      top: '0',
+      padding: '24',
+      zIndex: 'sticky',
+      transition: '125',
+    }),
+  ],
+
+  variants: {
+    onTop: {
+      true: {},
+      false: [
+        sprinkles({
+          background: 'bg2',
+          borderWidth: '0px',
+          borderBottomWidth: '1px',
+          borderColor: 'border1',
+          borderStyle: 'solid',
+        }),
+      ],
+    },
+  },
+
+  defaultVariants: {
+    onTop: true,
+  },
+})
 
 export const logoContainer = style([
   {

diff --git a/frontend/src/pages/Home/style.css.ts b/frontend/src/pages/Home/style.css.ts
@@ -3,14 +3,18 @@ import { transparentize } from 'polished'
 import { sprinkles, vars } from 'src/theme/css/sprinkles.css'
 
 export const container = style([
-  {
+  sprinkles({
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',
     textAlign: 'center',
     overflow: 'auto',
-  },
+    paddingBottom: {
+      sm: '88',
+      md: '32',
+    },
+  }),
 ])
 
 export const backgroundContainer = style([

diff --git a/frontend/src/pages/Launch/index.tsx b/frontend/src/pages/Launch/index.tsx
@@ -147,7 +147,7 @@ export default function LaunchPage() {
             <div />
 
             <PrimaryButton disabled={!account} className={styles.deployButton}>
-              {account ? 'DEPLOY' : 'CONNECT WALLET'}
+              {account ? 'Deploy' : 'Connect wallet'}
             </PrimaryButton>
           </Column>
         </Box>

diff --git a/frontend/src/pages/Launch/style.css.ts b/frontend/src/pages/Launch/style.css.ts
@@ -2,12 +2,18 @@ import { style } from '@vanilla-extract/css'
 import { sprinkles } from 'src/theme/css/sprinkles.css'
 
 export const wrapper = style([
-  {
-    padding: '68px 0px',
-  },
   sprinkles({
     width: 'full',
     justifyContent: 'center',
+    paddingX: '12',
+    paddingTop: {
+      sm: '20',
+      md: '64',
+    },
+    paddingBottom: {
+      sm: '88',
+      md: '32',
+    },
   }),
 ])
 
@@ -31,7 +37,7 @@ export const deployButton = style([
   },
   sprinkles({
     fontSize: '24',
-    fontWeight: 'bold',
+    fontWeight: 'semibold',
   }),
 ])
 

diff --git a/frontend/src/theme/css/global.css.ts b/frontend/src/theme/css/global.css.ts
@@ -4,13 +4,12 @@ import { vars } from './sprinkles.css'
 
 globalStyle('*', {
   fontFamily: "'Inter', sans-serif",
+  boxSizing: 'border-box',
 })
 
 globalStyle('html, body', {
   margin: 0,
   padding: 0,
-  height: '100vh',
-  overflow: 'hidden',
 })
 
 globalStyle('html', {

diff --git a/frontend/src/theme/css/sprinkles.css.ts b/frontend/src/theme/css/sprinkles.css.ts
@@ -77,6 +77,7 @@ const spacing = {
   '32': '32px',
   '42': '42px',
   '64': '64px',
+  '88': '88px',
   '128': '128px',
   '256': '256px',
   '1/2': '50%',
@@ -261,11 +262,11 @@ const layoutStyles = defineProperties({
     minWidth: dimensions,
     maxHeight: dimensions,
     minHeight: dimensions,
+    padding: spacing,
     paddingBottom: spacing,
     paddingLeft: spacing,
     paddingRight: spacing,
     paddingTop: spacing,
-    padding: spacing,
     bottom: spacing,
     left: spacing,
     right: spacing,
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,6 +20,7 @@ export const navBarContainer = style([ @@
         display: {
           md: 'none',
         },
+        zIndex: 'sticky',
       }),
     ])
@@ Expand Down @@