fixed btn issues

vocdoni · Jun 14, 2024 · 0242ee3 · 0242ee3 · github-actions · Jun 14, 2024
1 parent b753f17
commit 0242ee3
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 34 deletions.
diff --git a/src/components/Process/Aside.tsx b/src/components/Process/Aside.tsx
@@ -249,12 +249,6 @@ export const VoteButton = ({ ...props }: FlexProps) => {
           <CVoteButton
             w='100%'
             fontSize='lg'
-            bgColor={{ base: 'process.vote_button.mobile_bg', md: 'process.vote_button.mobile_color' }}
-            color={{ base: 'process.vote_button.mobile_color', md: 'process.vote_button.mobile_bg' }}
-            _hover={{
-              bgColor: { base: 'process.vote_button.mobile_bg', md: 'process.vote_button.mobile_color' },
-              color: { base: 'process.vote_button.mobile_color', md: 'process.vote_button.mobile_bg' },
-            }}
             sx={{
               '&::disabled': {
                 opacity: '0.8',

diff --git a/src/components/Process/Chained.tsx b/src/components/Process/Chained.tsx
@@ -50,13 +50,10 @@ const ChainedProcessesInner = () => {
   }
 
   return (
-    <Box className='md-sizes' mb='100px' pt='25px'>
+    <Box className='md-sizes' mb='50px' pt='25px'>
       <ElectionQuestions
         confirmContents={(election, answers) => <ConfirmVoteModal election={election} answers={answers} />}
       />
-      <Box position='sticky' bottom={0} left={0} pb={1} pt={1} display={{ base: 'none', lg2: 'block' }}>
-        <VoteButton />
-      </Box>
     </Box>
   )
 }
@@ -108,7 +105,16 @@ const ChainedProcessesWrapper = () => {
       <ElectionProvider key={current} election={processes[current]} ConnectButton={ConnectButton} fetchCensus>
         <ChainedProcessesInner />
       </ElectionProvider>
-      {!connected && election.get('census.type') === 'spreadsheet' && <SpreadsheetAccess />}
+      <Box
+        bottom={0}
+        left={0}
+        pt={1}
+        position={{ base: 'sticky', lg2: 'relative' }}
+        bgColor={{ base: 'white', lg2: 'transparent' }}
+      >
+        {!connected && election.get('census.type') === 'spreadsheet' && <SpreadsheetAccess />}
+        <VoteButton />
+      </Box>
     </>
   )
 }

diff --git a/src/components/Process/Header.tsx b/src/components/Process/Header.tsx
@@ -49,6 +49,8 @@ const ProcessHeader = () => {
     election?.maxCensusSize &&
     election.maxCensusSize < censusInfo.size
 
+  if (!election) return
+
   return (
     <Box mb={10}>
       <Image src={ercHeader} maxW='400px' mb={'32px'} />
@@ -63,11 +65,7 @@ const ProcessHeader = () => {
                 </Text>
                 <ElectionStatusBadge />
               </Flex>
-              <Flex
-                flexDirection={{ base: 'column', xl: 'row' }}
-                alignItems={{ base: 'start', xl: 'center' }}
-                gap={{ xl: 3 }}
-              >
+              <Flex alignItems='center' gap={1} flexWrap='wrap'>
                 <Text as='span' color='process.label' fontSize='sm'>
                   {t('process.schedule')}
                 </Text>
@@ -93,6 +91,7 @@ const ProcessHeader = () => {
         </Box>
 
         <Flex
+          display={{ base: 'none', lg2: 'flex' }}
           flex={{ lg2: '1 1 20%' }}
           position='relative'
           flexDirection={{ base: 'row', lg2: 'column' }}
@@ -212,11 +211,12 @@ const ProcessHeader = () => {
 }
 
 const formatDate = (startDate: Date, endDate: Date) => {
-  const startTime = startDate.toLocaleTimeString('en-US')
+  const timeOptions: Intl.DateTimeFormatOptions = { hour: '2-digit', minute: '2-digit' }
+  const startTime = startDate.toLocaleTimeString('en-US', timeOptions)
   const startDay = startDate.getDate()
   const startMonth = startDate.toLocaleString('ca', { month: 'long' }).replace(/^\w/, (c) => c.toUpperCase())
 
-  const endTime = endDate.toLocaleTimeString('en-US')
+  const endTime = endDate.toLocaleTimeString('en-US', timeOptions)
   const endDay = endDate.getDate()
   const endMonth = endDate.toLocaleString('ca', { month: 'long' }).replace(/^\w/, (c) => c.toUpperCase())
   return `${startTime} del ${startDay} ${startMonth} al ${endTime} del ${endDay} ${endMonth}`

diff --git a/src/components/Process/View.tsx b/src/components/Process/View.tsx
@@ -18,13 +18,12 @@ import {
 } from '@chakra-ui/react'
 import { Link as ReactRouterLink } from 'react-router-dom'
 
-import { ElectionQuestions, ElectionResults } from '@vocdoni/chakra-components'
 import { useElection } from '@vocdoni/react-providers'
 import { ElectionStatus, PublishedElection } from '@vocdoni/sdk'
 import { useEffect, useRef, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import ReactPlayer from 'react-player'
-import ProcessAside, { VoteButton } from './Aside'
+import ProcessAside from './Aside'
 import { ChainedProcesses, ChainedResults } from './Chained'
 import Header from './Header'
 import { SuccessVoteModal } from './SuccessVoteModal'
@@ -160,24 +159,14 @@ export const ProcessView = () => {
             mx={{ base: 'auto', lg2: 0 }}
             position={{ lg2: 'sticky' }}
             top={'300px'}
-            mt={10}
+            mt={{ lg2: 10 }}
             maxW={{ lg2: '290px' }}
             mb={10}
           >
             <ProcessAside />
           </Flex>
         </Flex>
       </Box>
-      <Box
-        position='sticky'
-        bottom={0}
-        left={0}
-        bgColor='process.vote_button.wrapper_bg'
-        pt={1}
-        display={{ base: 'block', md: 'none' }}
-      >
-        <VoteButton />
-      </Box>
 
       <VotingVoteModal />
       <SuccessVoteModal />

diff --git a/src/theme/components/SpreadSheet.ts b/src/theme/components/SpreadSheet.ts
@@ -7,11 +7,11 @@ const baseStyle = definePartsStyle({
   button: {
     w: '100%',
     borderRadius: 30,
-    bgColor: { base: 'process.vote_button.mobile_bg', md: 'process.vote_button.mobile_color' },
-    color: { base: 'process.vote_button.mobile_color', md: 'process.vote_button.mobile_bg' },
+    bgColor: 'process.vote_button.mobile_color',
+    color: 'process.vote_button.mobile_bg',
 
     _hover: {
-      bgColor: { base: 'process.vote_button.mobile_bg', md: 'process.vote_button.mobile_color' },
+      bgColor: 'process.vote_button.mobile_color',
     },
   },