refactor: upgrade packages + berga changes + layout changes

vocdoni · Feb 5, 2025 · c371dec · c371dec
1 parent 1a8e9da
commit c371dec
Show file tree

Hide file tree

Showing 13 changed files with 1,080 additions and 170 deletions.
diff --git a/package.json b/package.json
@@ -17,9 +17,9 @@
     "@emotion/styled": "^11.10.6",
     "@rainbow-me/rainbowkit": "^2.1.2",
     "@tanstack/react-query": "^5.40.1",
-    "@vocdoni/chakra-components": "~0.8.3",
-    "@vocdoni/sdk": "~0.8.1",
-    "date-fns": "^3.6.0",
+    "@vocdoni/chakra-components": "~0.9.7",
+    "@vocdoni/sdk": "~0.9.1",
+    "date-fns": "^4.1.0",
     "ethers": "^5.7.2",
     "framer-motion": "^11.2.10",
     "i18next": "^23.11.5",

diff --git a/public/assets/berga/berga.jpg b/public/assets/berga/berga.jpg
diff --git a/src/Layout.tsx b/src/Layout.tsx
@@ -3,6 +3,7 @@ import { Outlet } from 'react-router-dom'
 import { ColorModeSwitcher } from '~components/ColorModeSwitcher'
 import { LanguagesMenu } from '~components/Layout/LanguagesList'
 import { VocdoniAppURL } from '~constants'
+import Footer from './theme/components/Footer'
 
 const Layout = () => (
   <Box>
@@ -15,6 +16,7 @@ const Layout = () => (
         <ColorModeSwitcher />
       </Stack>
       <Outlet />
+      <Footer />
     </Grid>
   </Box>
 )

diff --git a/src/components/Layout/Logo.tsx b/src/components/Layout/Logo.tsx
@@ -1,19 +1,82 @@
-import { Flex, Img } from '@chakra-ui/react'
-import { NavLink } from 'react-router-dom'
-import vocicon from '/assets/vocdoni_icon.png'
+import { chakra, ChakraProps, useColorModeValue } from '@chakra-ui/react'
+interface VocdoniLogoProps extends ChakraProps {
+  minimal?: boolean
+}
 
-export const LogoImage = () => <Img src={vocicon} alt='vocdoni icon' maxWidth={10} />
-export const LogoMbl = () => <Img src={vocicon} alt='vocdoni icon' maxWidth={10} />
+export const VocdoniLogo = ({ minimal = false, ...props }: VocdoniLogoProps) => {
+  const fill = useColorModeValue('black', 'white')
 
-const Logo = ({ ...props }) => (
-  <NavLink to='/'>
-    <Flex alignItems='center' gap={2} display={{ base: 'none', lg: 'flex' }}>
-      <LogoImage />
-    </Flex>
-    <Flex alignItems='center' gap={2} display={{ base: 'flex', lg: 'none' }}>
-      <LogoMbl />
-    </Flex>
-  </NavLink>
-)
+  // Adjust viewBox depending on whether minimal is true or false
+  const viewBox = minimal ? '0 0 165 155' : '0 0 1000 215'
 
-export default Logo
+  return (
+    <chakra.svg viewBox={viewBox} fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+      <path
+        d='m 648.53,548.952 -62.85,36.29 -62.84,-36.28 -62.84,-36.29 v 62.85 l 62.84,36.28 62.84,36.28 62.84,-36.28 62.85,-36.28 v -62.85 z'
+        fill={fill}
+        id='path9'
+        transform='translate(-460,-433.082)'
+      />
+      <path
+        d='m 614.16,433.082 -62.84,36.28 v 62.85 l 62.84,-36.29 z'
+        fill={fill}
+        id='path10'
+        transform='translate(-460,-433.082)'
+      />
+      {!minimal && (
+        <g id='text'>
+          <path
+            d='m 875.09,512.702 -50.43,97.7 -50.45,-97.7 h 29.28 l 21.17,41.08 21.17,-41.08 z'
+            fill={fill}
+            id='path1'
+            transform='translate(-460,-433.082)'
+          />
+          <path
+            d='m 878.57,559.802 c 0,-14 4.8,-25.76 14.22,-35.18 9.62,-9.42 21.54,-14.22 35.57,-14.22 14.03,0 26,4.8 35.37,14.22 9.613,9.42 14.42,21.147 14.42,35.18 0,14 -4.81,25.76 -14.23,35.18 -9.42,9.42 -21.33,14 -35.56,14 -14.23,0 -26.15,-4.62 -35.57,-14 -9.42,-9.38 -14.22,-21.14 -14.22,-35.18 z m 27.87,0 c 0,6.92 2.12,12.69 6.16,17.11 2.037,2.127 4.483,3.82 7.192,4.977 2.708,1.156 5.623,1.752 8.568,1.752 2.945,0 5.86,-0.596 8.568,-1.752 2.709,-1.157 5.155,-2.85 7.192,-4.977 4,-4.42 6.15,-10.19 6.15,-17.11 0,-6.92 -2.11,-12.68 -6.15,-17.11 -2.039,-2.125 -4.485,-3.815 -7.194,-4.97 -2.708,-1.155 -5.622,-1.75 -8.566,-1.75 -2.944,0 -5.858,0.595 -8.567,1.75 -2.708,1.155 -5.155,2.845 -7.193,4.97 -4.04,4.43 -6.16,10.19 -6.16,17.11 z'
+            fill={fill}
+            id='path2'
+            transform='translate(-460,-433.082)'
+          />
+          <path
+            d='m 1084.23,589.022 c -10.19,13.27 -23.83,20 -41.33,20 -14.22,0 -26.14,-4.62 -35.56,-14 -9.42,-9.38 -14.23,-21.14 -14.23,-35.18 0,-14.04 4.81,-25.76 14.23,-35.18 9.61,-9.42 21.53,-14.22 35.56,-14.22 15,0 28.07,6.34 39.41,18.84 l -18.48,17.84 c -6,-7.31 -12.69,-11 -20,-11 -13.07,0 -22.87,9.8 -22.87,23.64 0,13.84 9.8,23.65 22.87,23.65 8.27,0 15.57,-4 21.92,-12.3 z'
+            fill={fill}
+            id='path3'
+            transform='translate(-460,-433.082)'
+          />
+          <path
+            d='m 1107.94,524.242 c 9,-9.23 20.38,-13.84 33.64,-13.84 9.81,0 17.88,2.69 24.22,8.26 v -46.52 h 27.3 v 134.76 h -26.91 v -6.73 c -6.15,6 -14.42,8.85 -24.61,8.85 -13.26,0 -24.61,-4.42 -33.64,-13.46 -9.03,-9.04 -13.46,-21 -13.46,-35.76 0,-14.61 4.42,-26.52 13.46,-35.56 z m 58.25,35.56 c 0,-7.11 -2.12,-13.07 -6.35,-17.68 -1.91,-2.245 -4.3,-4.032 -7,-5.229 -2.69,-1.198 -5.62,-1.776 -8.57,-1.691 -2.97,-0.065 -5.92,0.521 -8.65,1.717 -2.72,1.195 -5.15,2.971 -7.11,5.203 -4,4.61 -6.15,10.57 -6.15,17.68 0,7.11 2.11,13.08 6.15,17.69 1.97,2.231 4.39,4.006 7.12,5.201 2.72,1.195 5.67,1.782 8.64,1.719 2.95,0.083 5.88,-0.496 8.57,-1.693 2.69,-1.198 5.09,-2.984 7,-5.227 4.23,-4.61 6.35,-10.57 6.35,-17.69 z'
+            fill={fill}
+            id='path4'
+            transform='translate(-460,-433.082)'
+          />
+          <path
+            d='m 1210,559.802 c 0,-14 4.81,-25.76 14.23,-35.18 9.61,-9.42 21.53,-14.22 35.57,-14.22 14.04,0 26,4.8 35.37,14.22 9.61,9.42 14.42,21.147 14.42,35.18 0,14 -4.81,25.76 -14.23,35.18 -9.42,9.42 -21.34,14 -35.56,14 -14.22,0 -26.15,-4.62 -35.57,-14 -9.42,-9.38 -14.23,-21.14 -14.23,-35.18 z m 27.88,0 c 0,6.92 2.11,12.69 6.15,17.11 2.04,2.128 4.48,3.821 7.19,4.977 2.71,1.157 5.63,1.753 8.57,1.753 2.95,0 5.87,-0.596 8.58,-1.753 2.7,-1.156 5.15,-2.849 7.19,-4.977 4,-4.42 6.15,-10.19 6.15,-17.11 0,-6.92 -2.11,-12.68 -6.15,-17.11 -2.04,-2.125 -4.49,-3.816 -7.2,-4.971 -2.71,-1.154 -5.62,-1.75 -8.57,-1.75 -2.94,0 -5.85,0.596 -8.56,1.75 -2.71,1.155 -5.16,2.846 -7.2,4.971 -4.04,4.43 -6.15,10.19 -6.15,17.11 z'
+            fill={fill}
+            id='path5'
+            transform='translate(-460,-433.082)'
+          />
+          <path
+            d='m 1324.83,512.702 h 46.09 c 11.07,0.003 21.68,4.402 29.51,12.229 7.82,7.828 12.22,18.443 12.22,29.511 v 52.46 h -27.52 v -52.32 c -0.07,-4.423 -1.87,-8.643 -5.02,-11.756 -3.14,-3.113 -7.38,-4.873 -11.8,-4.904 h -16.21 v 69 h -27.27 z'
+            fill={fill}
+            id='path6'
+            transform='translate(-460,-433.082)'
+          />
+          <path
+            d='m 1432.51,606.902 v -94.2 H 1460 v 94.2 z'
+            fill={fill}
+            id='path7'
+            transform='translate(-460,-433.082)'
+          />
+          <path
+            d='m 1460,472.152 h -27.44 v 27.44 H 1460 Z'
+            fill={fill}
+            id='path8'
+            transform='translate(-460,-433.082)'
+          />
+        </g>
+      )}
+    </chakra.svg>
+  )
+}
+
+export default VocdoniLogo
diff --git a/src/elements/Home.tsx b/src/elements/Home.tsx
diff --git a/src/elements/Home/Berga.tsx b/src/elements/Home/Berga.tsx
@@ -0,0 +1,101 @@
+import { Box, Flex, Image, Link, Text } from '@chakra-ui/react'
+import { PropsWithChildren } from 'react'
+import { Link as ReactRouterLink } from 'react-router-dom'
+import VocdoniLogo from '~components/Layout/Logo'
+import bergaImg from '/assets/berga/berga.jpg'
+
+const Berga = () => (
+  <Flex flexDirection='column' gap={10} maxW='900px' mx='auto' p={5} minH='100vh'>
+    <Image src={bergaImg} width='300px' alt='ajuntament berga escut' mx='auto' />
+    <Box>
+      <Text as='h1' fontWeight='bold' fontSize='36px' textAlign='center'>
+        Pressupostos Participatius 2025
+      </Text>
+      <Text as='h2' fontSize='16px' textAlign='center'>
+        Ajuntament de Berga
+      </Text>
+    </Box>
+    <Text>
+      <Text as='h3' fontWeight='bold'>
+        Pressupost Participatiu de Berga 2025
+      </Text>
+      <Text>
+        El pressupost participatiu és una eina de participació ciutadana per a què els veïns i les veïnes puguin decidir
+        a quins projectes o activitats es destina una part del pressupost públic municipal.
+        <br />
+        <br />
+        L'Ajuntament de Berga promou per sisé any consecutiu el pressupost participatiu. Comptarà amb una partida de
+        XX.000€, els quals es podran destinar tant a propostes d'inversió (màxim de XX.000 €) com de programació
+        cultural (màxim de XX.000€). En la votació de l'any passat (2024) va resultar guanyadora la millora de l'entorn
+        de la residència Sant Bernabé amb la creació d'un espai de jardí tancat, net i controlat amb col·locació d'una
+        tanca emmarcada dins l'àmbit de "Inversió" i el projecte de Art Urbà: els murs pel canvi dins l'àmbit de
+        "Cultura".
+      </Text>
+    </Text>
+    <Text>
+      <Text as='h3' fontWeight='bold'>
+        Pressupost Participatiu Juvenil
+      </Text>
+      <Text>
+        El consistori promou per tercer any el pressupost participatiu adreçat a joves de 12 a 15 anys que s'organitzarà
+        a través dels centres educatius de la ciutat. Comptarà amb una partida de X.000€ que es podran destinar tant a
+        propostes d'inversió com de programació cultural.
+        <br />
+        <br />
+        En la tercera edició (2024) va resultar guanyadora la organització d'activitats en oci nocturn: DJs, festa major
+        jove, etc. Dues o tres nits de DJ's, disco mòbil o altres activitats musicals, en places de Berga.
+      </Text>
+    </Text>
+    <Box>
+      <Text alignSelf='start' mb={10}>
+        <strong>Seleccioneu</strong> una opció depenent de la teva edat
+      </Text>
+      <Flex gap={5} flexDirection={{ base: 'column', md: 'row' }}>
+        <ProcessLink id='6be21a5a9dc0d60812a70bb63b3693846873c371c2463472a4d3020800000002'>
+          <Text fontSize='18px'>Accedeix a la votació Juvenil</Text>
+          <Text>12 - 15 anys</Text>
+        </ProcessLink>
+        <ProcessLink id='6be21a5a9dc0d60812a70bb63b3693846873c371c2463472a4d3020000000003'>
+          <Text fontSize='18px'>Accedeix a la votació General</Text>
+          <Text>+16 anys</Text>
+        </ProcessLink>
+      </Flex>
+    </Box>
+    <Text>
+      Per poder accedir a la votació, us demanarem el vostre número de DNI (Document Nacional d'Identitat) i data de
+      naixement. Posteriorment, podreu seleccionar les vostres opcions i enviar el vot de forma segura.
+    </Text>
+    <Flex as={Link} justifyContent='center' mt='auto' href='https://vocdoni.io' isExternal>
+      <VocdoniLogo maxW='200px' />
+    </Flex>
+  </Flex>
+)
+
+const ProcessLink = ({ id, ...rest }: PropsWithChildren<{ id: string }>) => (
+  <Link
+    as={ReactRouterLink}
+    flexGrow={1}
+    display='flex'
+    justifyContent='center'
+    alignItems='center'
+    flexWrap='wrap'
+    flexDir='column'
+    h={{ base: '100px', md: '200px' }}
+    borderRadius='md'
+    color='black'
+    textDecoration='none'
+    textAlign='center'
+    fontWeight='bold'
+    boxShadow='0px 0px 10px 2px lightgray'
+    _hover={{
+      bgColor: 'lightgray',
+    }}
+    _active={{
+      transform: 'scale(0.9)',
+    }}
+    to={`/${id}`}
+    {...rest}
+  />
+)
+
+export default Berga
diff --git a/src/elements/Home/Home.tsx b/src/elements/Home/Home.tsx
@@ -0,0 +1,21 @@
+import { Text, VStack } from '@chakra-ui/react'
+import { ElectionTitle } from '@vocdoni/chakra-components'
+import { ElectionProvider } from '@vocdoni/react-providers'
+import { Link } from 'react-router-dom'
+
+const Home = () => {
+  return (
+    <VStack spacing={8}>
+      <Text>This would be the landing page for multiple processes:</Text>
+      {import.meta.env.PROCESS_IDS.map((id: string) => (
+        <ElectionProvider id={id} key={id}>
+          <Link to={`/${id}`}>
+            <ElectionTitle />
+          </Link>
+        </ElectionProvider>
+      ))}
+    </VStack>
+  )
+}
+
+export default Home
diff --git a/src/i18n/locales/ca.json b/src/i18n/locales/ca.json
@@ -82,23 +82,16 @@
   "copy": {
     "copied_title": "Copiat!"
   },
+  "error": {
+    "election_is_invalid": "Invalid election"
+  },
   "footer": {
+    "about_us": "Quant a",
     "company": "Empresa",
-    "demo": "Tipus de Votació",
-    "demo1": "Elecció Simple",
-    "demo2": "Elecció Múltiple",
-    "demo3": "Votació per Aprovació",
-    "demo4": "Votació per Classificació",
-    "demo5": "Pressupostos Participatius",
-    "demo6": "Votació Ponderada",
+    "contact": "Contacte",
+    "developer_portal": "Portal del desenvolupador",
     "footer_subtitle": "El Protocol de Votació Global",
-    "terms_and_privacy": "<link1>Termes d'ús</link1> i <link2>Política de privacitat</link2>",
-    "uses_cases": "Casos d'Ús",
-    "uses_cases1": "Assemblees Generals d'Accionistes (AGMs)",
-    "uses_cases2": "Eleccions",
-    "uses_cases3": "Pressupostos Participatius",
-    "uses_cases4": "Votació Digital",
-    "uses_cases5": "Enquesta Digital Tancada"
+    "terms_and_privacy": "<link1>Termes d'ús</link1> i <link2>Política de privacitat</link2>"
   },
   "link": {
     "discord": "Enllaç al Discord de Vocdoni",

diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
@@ -82,23 +82,16 @@
   "copy": {
     "copied_title": "¡Copiado!"
   },
+  "error": {
+    "election_is_invalid": "Invalid election"
+  },
   "footer": {
+    "about_us": "Cuanto a",
     "company": "Empresa",
-    "demo": "Tipos de Votación",
-    "demo1": "Elección Simple",
-    "demo2": "Elección Múltiple",
-    "demo3": "Votación por Aprobación",
-    "demo4": "Votación por Clasificación",
-    "demo5": "Presupuestos Participativos",
-    "demo6": "Votación Ponderada",
+    "contact": "Contacta",
+    "developer_portal": "Portal del desarrollador",
     "footer_subtitle": "El Protocolo de Votación Global",
-    "terms_and_privacy": "<link1>Términos de uso</link1> y <link2>Política de privacidad</link2>",
-    "uses_cases": "Casos de Uso",
-    "uses_cases1": "Asambleas Generales de Accionistas (AGMs)",
-    "uses_cases2": "Elecciones",
-    "uses_cases3": "Presupuestos Participativos",
-    "uses_cases4": "Votación Digital",
-    "uses_cases5": "Encuesta Digital Cerrada"
+    "terms_and_privacy": "<link1>Términos de uso</link1> y <link2>Política de privacidad</link2>"
   },
   "link": {
     "discord": "Enlace al Discord de Vocdoni",

diff --git a/src/router/index.tsx b/src/router/index.tsx
@@ -7,7 +7,16 @@ import RouteError from '~elements/RouteError'
 import Layout from '~src/Layout'
 import { SuspenseLoader } from './SuspenseLoader'
 
-const Home = lazy(() => import('~elements/Home'))
+// Map of available home components
+const HomeComponents = {
+  Home: () => import('~elements/Home/Home'),
+  Berga: () => import('~elements/Home/Berga'),
+}
+
+// @ts-ignore
+const homeComponent = HomeComponents[import.meta.env.HOME] || HomeComponents.Home
+/* @vite-ignore */
+const Home = lazy(homeComponent)
 const Vote = lazy(() => import('~elements/Vote'))
 
 export const RoutesProvider = () => {