Change spreadsheet acces theme

To show it more similar as vote button

Author: selankon

src/components/Process/Chained.tsx

@@ -1,4 +1,4 @@
-import { Box, Progress, useBreakpointValue } from '@chakra-ui/react'
+import { Box, Flex, Progress, useBreakpointValue } from '@chakra-ui/react'
 import { ConnectButton } from '@rainbow-me/rainbowkit'
 import {
   ElectionQuestions,
@@ -17,7 +17,7 @@ import BlindCSPConnect from '~components/Process/BlindCSPConnect'
 import { ConfirmVoteModal } from '~components/Process/ConfirmVoteModal'
 import { MultiElectionSuccessVoteModal, SuccessVoteModal } from '~components/Process/SuccessVoteModal'
 import VotingVoteModal, { MultiElectionVotingVoteModal } from '~components/Process/VotingVoteModal'
-import { ChainedProvider, useChainedProcesses } from '~components/Process/ChainedContext'
+import { ChainedProvider, useChainedProcesses } from './ChainedContext'
 
 type ChainedProcessesInnerProps = {
   connected: boolean
@@ -33,14 +33,14 @@ const VoteButtonContainer = ({ children }: PropsWithChildren) => {
         left={0}
         bgColor='process.aside.aside_footer_mbl_border'
         pt={1}
-        display={{ base: 'block', lg2: 'none' }}
+        display={isBreakPoint ? 'block' : 'none'}
       >
         {children}
       </Box>
     )
   }
   return (
-    <Box position='sticky' bottom={0} left={0} pb={1} pt={1} display={{ base: 'none', lg2: 'block' }}>
+    <Box position='sticky' bottom={0} left={0} pb={1} pt={1} display={isBreakPoint ? 'none' : 'block'}>
       {children}
     </Box>
   )
@@ -195,8 +195,10 @@ const ChainedProcessesWrapper = () => {
         </ElectionProvider>
       )}
       <VoteButtonContainer>
-        {!connected && election.get('census.type') === 'spreadsheet' && <SpreadsheetAccess />}
-        {isBlindCsp && !connected && <BlindCSPConnect />}
+        <Flex justifyContent='center' alignItems='center' direction={'column'} py={3} px={{ base: 3, lg2: 0 }}>
+          {!connected && election.get('census.type') === 'spreadsheet' && <SpreadsheetAccess />}
+          {isBlindCsp && !connected && <BlindCSPConnect />}
+        </Flex>
       </VoteButtonContainer>
     </Box>
   )

src/theme/components/SpreadSheet.ts

@@ -5,14 +5,16 @@ const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpe
 
 const baseStyle = definePartsStyle({
   button: {
-    w: '100%',
+    w: '60%',
     borderRadius: 30,
     fontSize: { base: 'lg', xl: 'md' },
     bgColor: 'process.aside.vote_btn_bg',
-
     _hover: {
       bgColor: 'process.aside.vote_btn_bg',
     },
+    mb: 4,
+    py: 3,
+    height: '50px',
   },
 
   disconnect: {
@@ -41,16 +43,8 @@ const baseStyle = definePartsStyle({
   submit: {
     width: '60%',
     mx: 'auto',
-    bgColor: 'process.identify_btn.bg',
-    color: 'process.identify_btn.color',
     borderRadius: '30px',
-
-    _hover: {
-      bgColor: 'process.identify_btn.bg_hover',
-    },
-    _active: {
-      bgColor: 'process.identify_btn.bg_active',
-    },
+    color: 'process.spreadsheet.color',
   },
 })