🎨 Improve here and there

GregdTd · Jan 26, 2024 · ebd6afa · ebd6afa
1 parent fd62d8e
commit ebd6afa
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 67 deletions.
diff --git a/biome.json b/biome.json
@@ -11,7 +11,8 @@
     "rules": {
       "recommended": true,
       "a11y": {
-        "useValidAriaValues": "off"
+        "useValidAriaValues": "off",
+        "useKeyWithClickEvents": "off"
       },
       "style": {
         "noImplicitBoolean": "error"

diff --git a/src/components/Arrow.tsx b/src/components/Arrow.tsx
@@ -3,12 +3,25 @@ import styled, { keyframes } from 'styled-components'
 import { Colors } from '../styles/Colors'
 import { mobile } from '../styles/media-queries'
 
-export const Arrow = () => (
-    <span onClick={() => scroller.scrollTo('program', { smooth: true, duration: 500 })}>
-        <ArrowSVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 14">
-            <path fill="none" fillRule="evenodd" stroke={Colors.white} strokeLinecap="round" strokeLinejoin="round" strokeWidth="4" d="M22 2L12 12 2 2" />
-        </ArrowSVG>
-    </span>
+export const Arrow = ({ className }: { className?: string }) => (
+  <span
+    className={className}
+    onClick={() =>
+      scroller.scrollTo('program', { smooth: true, duration: 500 })
+    }
+  >
+    <ArrowSVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 14">
+      <path
+        fill="none"
+        fillRule="evenodd"
+        stroke={Colors.white}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="4"
+        d="M22 2L12 12 2 2"
+      />
+    </ArrowSVG>
+  </span>
 )
 
 const bounce = keyframes`

diff --git a/src/components/NavigationBar.tsx b/src/components/NavigationBar.tsx
@@ -11,39 +11,55 @@ import { Menu } from './Menu'
 const TITLE = 'Vendredi 14 juin'
 
 export const NavigationBar = () => {
-    const [open, setOpen] = useState(false)
-    const [current, setCurrent] = useState('')
-    const showDrawer = () => {
-        setOpen(!open)
-    }
-    const isTabletOrMobile = useMedia(`screen and (max-width: 1024px)`)
+  const [open, setOpen] = useState(false)
+  const [current, setCurrent] = useState('')
+  const showDrawer = () => {
+    setOpen(!open)
+  }
+  const isTabletOrMobile = useMedia('screen and (max-width: 1024px)')
 
-    const onTitleClick = () => {
-        setCurrent('')
-        animateScroll.scrollToTop({ duration: 500, smooth: true })
-    }
+  const onTitleClick = () => {
+    setCurrent('')
+    animateScroll.scrollToTop({ duration: 500, smooth: true })
+  }
 
-    return (
-        <Header>
-            <nav>
-                <Title onClick={onTitleClick}>{TITLE}</Title>
-                <NavBarMenu>
-                    {isTabletOrMobile ? (
-                        <>
-                            <BurgerButton type="text" onClick={showDrawer}>
-                                <MenuOutlined />
-                            </BurgerButton>
-                            <Drawer title={TITLE} placement="right" closable={true} onClose={showDrawer} open={open} style={{ zIndex: 99999 }}>
-                                <Menu mode="inline" showDrawer={showDrawer} currentValueSelected={current} setCurrentValue={setCurrent} />
-                            </Drawer>
-                        </>
-                    ) : (
-                        <Menu mode="horizontal" currentValueSelected={current} setCurrentValue={setCurrent} />
-                    )}
-                </NavBarMenu>
-            </nav>
-        </Header>
-    )
+  return (
+    <Header>
+      <nav>
+        <Title onClick={onTitleClick}>{TITLE}</Title>
+        <NavBarMenu>
+          {isTabletOrMobile ? (
+            <>
+              <BurgerButton type="text" onClick={showDrawer}>
+                <MenuOutlined />
+              </BurgerButton>
+              <Drawer
+                title={TITLE}
+                placement="right"
+                closable={true}
+                onClose={showDrawer}
+                open={open}
+                style={{ zIndex: 99999 }}
+              >
+                <Menu
+                  mode="inline"
+                  showDrawer={showDrawer}
+                  currentValueSelected={current}
+                  setCurrentValue={setCurrent}
+                />
+              </Drawer>
+            </>
+          ) : (
+            <Menu
+              mode="horizontal"
+              currentValueSelected={current}
+              setCurrentValue={setCurrent}
+            />
+          )}
+        </NavBarMenu>
+      </nav>
+    </Header>
+  )
 }
 
 const TITLE_WIDTH = 230
@@ -70,6 +86,7 @@ const Title = styled.div`
 `
 
 const NavBarMenu = styled.div`
+    font-weight: bold;
     width: calc(100% - ${TITLE_WIDTH}px);
     float: left;
 `

diff --git a/src/pages/Welcome.tsx b/src/pages/Welcome.tsx
@@ -2,30 +2,35 @@
 import styled from 'styled-components'
 import BaseJulieGregPhoto from '../assets/jugreg.svg?react'
 
-import { Arrow } from '../components/Arrow'
+import { Arrow as BaseArrow } from '../components/Arrow'
 import { SectionWrapper as BaseSectionWrapper } from '../styles/Layout'
 import { mobile } from '../styles/media-queries'
 import { Pages } from '../utils/types'
 
 export const Welcome: React.FC = () => {
-    return (
-        <SectionWrapper id={Pages.WELCOME}>
-            <Title>
-                Bienvenue sur le site du mariage de<Surname>Julie et Grégoire</Surname>
-            </Title>
-            <Wrapper>
-                <WrapperText>
-                    <Text>Nous sommes très heureux et impatients de tous vous retrouver en juin pour célébrer l’amour et faire la fête.</Text>
-                    <Text>
-                        En attendant, nous vous avons concocté ce site sur lequel vous retrouverez toutes les infos nécessaires à la préparation de votre séjour breton: programme,
-                        logements, propositions d’activités, plans d’accès et liste de mariage.
-                    </Text>
-                </WrapperText>
-                <JulieGregPhoto />
-            </Wrapper>
-            <Arrow />
-        </SectionWrapper>
-    )
+  return (
+    <SectionWrapper id={Pages.WELCOME}>
+      <Title>
+        Bienvenue sur le site du mariage de<Surname>Julie et Grégoire</Surname>
+      </Title>
+      <Wrapper>
+        <WrapperText>
+          <Text>
+            Nous sommes très heureux et impatients de tous vous retrouver en
+            juin pour célébrer l’amour et faire la fête.
+          </Text>
+          <Text>
+            En attendant, nous vous avons concocté ce site sur lequel vous
+            retrouverez toutes les infos nécessaires à la préparation de votre
+            séjour breton: programme, logements, propositions d’activités, plans
+            d’accès et liste de mariage.
+          </Text>
+        </WrapperText>
+        <JulieGregPhoto />
+      </Wrapper>
+      <Arrow />
+    </SectionWrapper>
+  )
 }
 
 const SectionWrapper = styled(BaseSectionWrapper)`
@@ -49,7 +54,7 @@ const JulieGregPhoto = styled(BaseJulieGregPhoto)`
     height: auto;
 
     @media ${mobile} {
-        width: 100%;
+        width: 50vw;
         padding-top: 16px;
     }
 `
@@ -88,3 +93,8 @@ const Text = styled.div`
     hyphens: auto;
     padding-top: 24px;
 `
+
+const Arrow = styled(BaseArrow)`
+    position: absolute;
+    bottom: 0;
+`
diff --git a/src/styles/Layout.tsx b/src/styles/Layout.tsx
@@ -2,25 +2,31 @@ import styled from 'styled-components'
 import { Pages, PagesTitles } from '../utils/types'
 import { Colors } from './Colors'
 
-export const SectionWrapper: React.FC<{ id: Pages; children?: React.ReactNode; className?: string }> = ({ id, children, className }) => {
-    return (
-        <Wrapper>
-            <Section id={id} className={className}>
-                {PagesTitles[id] && <Title>{PagesTitles[id]}</Title>}
-                {children}
-            </Section>
-        </Wrapper>
-    )
+export const SectionWrapper: React.FC<{
+  id: Pages
+  children?: React.ReactNode
+  className?: string
+}> = ({ id, children, className }) => {
+  return (
+    <Wrapper>
+      <Section id={id} className={className}>
+        {PagesTitles[id] && <Title>{PagesTitles[id]}</Title>}
+        {children}
+      </Section>
+    </Wrapper>
+  )
 }
 
 const Wrapper = styled.div`
+    height: 100vh;
     padding: 0px 16px;
     background-color: ${Colors.white};
 `
 
 const Section = styled.section`
     background-color: ${Colors.green};
     width: 100%;
+    height: 100%;
     text-align: center;
     padding-top: 80px;
 `