SaaS voting (#826)

* saas voting view * dark disabled question radio bg and results * read more issue * readmore and links * fixed issues * ReadMoreMarkdownWrapper default props value * changed read more colors from :root to colors * removed comment * remove btn and links styles, variants and fix some visual issues * fixed issue dashboard read more * fixed issue
vocdoni · Nov 5, 2024 · 829bd04 · 829bd04 · github-actions · Nov 5, 2024
1 parent 8ef2e29
commit 829bd04
Show file tree

Hide file tree

Showing 14 changed files with 605 additions and 159 deletions.
diff --git a/src/components/Dashboard/ProcessView.tsx b/src/components/Dashboard/ProcessView.tsx
@@ -47,7 +47,7 @@ import { Routes } from '~src/router/routes'
 export const ProcessView = () => {
   const { setTitle, setBack } = useOutletContext<DashboardLayoutContext>()
   const { id, election, participation, turnout } = useElection()
-  const { ReadMoreMarkdownWrapper } = useReadMoreMarkdown('rgba(242, 242, 242, 0)', 'rgba(242, 242, 242, 1)', 600, 20)
+  const { ReadMoreMarkdownWrapper, ReadMoreMarkdownButton } = useReadMoreMarkdown(600, 20)
 
   const votingLink = `${document.location.origin}${generatePath(Routes.processes.view, { id })}`
   const { hasCopied, onCopy } = useClipboard(votingLink)
@@ -66,9 +66,16 @@ export const ProcessView = () => {
         <ElectionSchedule showRemaining as={Tag} />
         <ElectionTitle variant='contents-title' />
         {election instanceof PublishedElection && election.description && (
-          <ReadMoreMarkdownWrapper from='rgba(250, 250, 250, 0)' to='rgba(250, 250, 250, 1)'>
-            <ElectionDescription mb={0} fontSize='lg' lineHeight={1.5} color='process.description' />
-          </ReadMoreMarkdownWrapper>
+          <>
+            <ReadMoreMarkdownWrapper
+              from={'var(--chakra-colors-dashboard-read_more-from)'}
+              toLight={'var(--chakra-colors-dashboard-read_more-to-light)'}
+              toDark={'var(--chakra-colors-dashboard-read_more-to-dark)'}
+            >
+              <ElectionDescription mb={0} fontSize='lg' lineHeight={1.5} color='process.description' />
+            </ReadMoreMarkdownWrapper>
+            <ReadMoreMarkdownButton alignSelf='center' />
+          </>
         )}
 
         {/* Calendar */}

diff --git a/src/components/Layout/use-read-more.tsx b/src/components/Layout/use-read-more.tsx
@@ -1,18 +1,19 @@
 import { Box, Button } from '@chakra-ui/react'
-import { useEffect, useRef, useState } from 'react'
+import { ReactNode, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-export const useReadMoreMarkdown = (
-  colorFrom: string,
-  colorTo: string,
-  containerMaxHeightPx: number,
-  tantPerCentGradient?: number
-) => {
+interface ReadMoreMarkdownWrapperProps {
+  children: ReactNode
+  from?: string
+  toLight?: string
+  toDark?: string
+}
+
+export const useReadMoreMarkdown = (containerMaxHeightPx: number, tantPerCentGradient?: number) => {
   const { t } = useTranslation()
   const containerRef = useRef<HTMLDivElement>(null)
   const [isTruncated, setIsTruncated] = useState(false)
   const [readMore, setReadMore] = useState(false)
-
   const handleReadMore = () => setReadMore((prev) => !prev)
 
   useEffect(() => {
@@ -26,32 +27,40 @@ export const useReadMoreMarkdown = (
     }
   }, [])
 
-  const ReadMoreMarkdownWrapper = ({ children, from, to, ...props }: any) => (
-    <Box
-      {...props}
-      ref={containerRef}
-      position='relative'
-      height={readMore ? `${containerMaxHeightPx}px` : 'auto'}
-      overflow='hidden'
-      sx={{
-        '&::before': {
-          content: '""',
-          position: 'absolute',
-          height: isTruncated
-            ? `${(containerMaxHeightPx * (tantPerCentGradient ? tantPerCentGradient : containerMaxHeightPx)) / 100}px`
-            : '0',
-          width: '100%',
-          bottom: 0,
-          background:
-            isTruncated && readMore
-              ? `linear-gradient(to bottom, ${from ? from : colorFrom} 0%, ${to ? to : colorTo} 100%)`
-              : '',
-        },
-      }}
-    >
-      {children}
-    </Box>
-  )
+  const ReadMoreMarkdownWrapper = ({
+    children,
+    from = 'var(--chakra-colors-read_more-from)',
+    toLight = 'var(--chakra-colors-read_more-to-light)',
+    toDark = 'var(--chakra-colors-read_more-to-dark)',
+    ...props
+  }: ReadMoreMarkdownWrapperProps) => {
+    return (
+      <Box
+        {...props}
+        ref={containerRef}
+        position='relative'
+        height={readMore ? `${containerMaxHeightPx}px` : 'auto'}
+        overflow='hidden'
+      >
+        <Box
+          position='absolute'
+          height={
+            isTruncated
+              ? `${(containerMaxHeightPx * (tantPerCentGradient ? tantPerCentGradient : containerMaxHeightPx)) / 100}px`
+              : 0
+          }
+          w='full'
+          bottom={0}
+          pointerEvents='none'
+          background={isTruncated && readMore ? `linear-gradient(to bottom, ${from} 0%, ${toLight} 100%)` : 'none'}
+          _dark={{
+            background: isTruncated && readMore ? `linear-gradient(to bottom, ${from} 0%, ${toDark} 100%)` : 'none',
+          }}
+        ></Box>
+        {children}
+      </Box>
+    )
+  }
   const ReadMoreMarkdownButton = ({ ...props }: any) =>
     isTruncated ? (
       <Button onClick={handleReadMore} variant='' color='read_more' {...props}>

diff --git a/src/components/Organization/Header.tsx b/src/components/Organization/Header.tsx
@@ -13,11 +13,7 @@ const OrganizationHeader = () => {
   const { organization } = useOrganization()
   const { account } = useClient()
 
-  const { ReadMoreMarkdownWrapper, ReadMoreMarkdownButton } = useReadMoreMarkdown(
-    'rgba(242, 242, 242, 0)',
-    'rgba(242, 242, 242, 1)',
-    110
-  )
+  const { ReadMoreMarkdownWrapper, ReadMoreMarkdownButton } = useReadMoreMarkdown(600, 20)
 
   const { containerRef, isTruncated, readMore, handleReadMore } = useReadMoreTitle()
 
@@ -98,7 +94,7 @@ const OrganizationHeader = () => {
           <ReadMoreMarkdownWrapper>
             <OrganizationDescription fontSize='lg' lineHeight={1.7} />
           </ReadMoreMarkdownWrapper>
-          <ReadMoreMarkdownButton colorScheme='primary' alignSelf='center' />
+          <ReadMoreMarkdownButton alignSelf='center' />
         </Flex>
         <AddressBtn />
       </Flex>

diff --git a/src/components/Process/Aside.tsx b/src/components/Process/Aside.tsx
@@ -64,14 +64,7 @@ const ProcessAside = () => {
           </Text>
 
           {showVoters && !showVotes && (
-            <Box
-              className='brand-theme'
-              display='flex'
-              flexDirection='row'
-              justifyContent='center'
-              alignItems='center'
-              gap={2}
-            >
+            <Box display='flex' flexDirection='row' justifyContent='center' alignItems='center' gap={2}>
               <Trans
                 i18nKey='aside.votes'
                 components={{
@@ -84,12 +77,12 @@ const ProcessAside = () => {
           )}
 
           {showVotes && (
-            <Flex className='brand-theme' direction='column' justifyContent='center' alignItems='center' gap={2}>
+            <Flex direction='column' justifyContent='center' alignItems='center' gap={2}>
               <Flex direction={'row'} justifyContent='center' alignItems='center' gap={2}>
                 <Trans
                   i18nKey='aside.votes_weight'
                   components={{
-                    span: <Text as='span' fontWeight='bold' fontSize='xl3' textAlign='center' lineHeight={1} />,
+                    span: <Text as='span' fontWeight='bold' fontSize='3xl' textAlign='center' lineHeight={1} />,
                     text: <Text fontSize='xl' textAlign='center' lineHeight={1.3} />,
                   }}
                   count={votes}
@@ -159,30 +152,10 @@ const ProcessAside = () => {
         )}
       </Card>
       {(connected || isConnected) && (
-        <Box
-          alignSelf='center'
-          sx={{
-            '& button': {
-              color: 'process.spreadsheet.disconnect_color_desktop',
-              bgColor: 'transparent',
-              borderColor: 'transparent',
-
-              _before: {
-                bgColor: 'transparent',
-              },
-              _after: {
-                bgColor: 'transparent',
-              },
-            },
-          }}
-          mb={{ base: 10, md: 0 }}
-        >
+        <Box alignSelf='center' mb={{ base: 10, md: 0 }}>
           {connected && <SpreadsheetAccess />}
           {isConnected && election?.get('census.type') !== 'spreadsheet' && (
             <Button
-              variant='text'
-              textDecor='underline'
-              _hover={{ textDecor: 'none' }}
               onClick={() => {
                 disconnect()
                 clear()

diff --git a/src/components/Process/CardDetailed.tsx b/src/components/Process/CardDetailed.tsx
@@ -66,7 +66,7 @@ const ProcessDetailedCardTitle = () => {
 const ProcessDetailedCardDescription = () => {
   const { election } = useElection()
   const { t } = useTranslation()
-  const { ReadMoreMarkdownWrapper } = useReadMoreMarkdown('rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 1)', 100)
+  const { ReadMoreMarkdownWrapper } = useReadMoreMarkdown(100)
 
   if (election instanceof InvalidElection) {
     return null

diff --git a/src/components/Process/Header.tsx b/src/components/Process/Header.tsx
@@ -1,20 +1,15 @@
 import { InfoIcon, WarningIcon } from '@chakra-ui/icons'
-import { Box, Button, Flex, Icon, Image, Text, Tooltip } from '@chakra-ui/react'
-import {
-  ElectionDescription,
-  ElectionSchedule,
-  ElectionStatusBadge,
-  ElectionTitle,
-  OrganizationName,
-} from '@vocdoni/chakra-components'
+import { Box, Flex, Icon, IconButton, Image, Text, Tooltip } from '@chakra-ui/react'
+import { ElectionDescription, ElectionSchedule, ElectionStatusBadge, ElectionTitle } from '@vocdoni/chakra-components'
 import { useClient, useElection, useOrganization } from '@vocdoni/react-providers'
-import { CensusType, ElectionStatus, InvalidElection, PublishedElection, Strategy } from '@vocdoni/sdk'
+import { CensusType, ElectionStatus, ensure0x, InvalidElection, PublishedElection, Strategy } from '@vocdoni/sdk'
 import { ReactNode, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Link } from 'react-router-dom'
+import { MdKeyboardArrowLeft } from 'react-icons/md'
+import { generatePath, Link as ReactRouterLink } from 'react-router-dom'
 import { useReadMoreMarkdown } from '~components/Layout/use-read-more'
 import { ShareModalButton } from '~components/Share'
-import { GoBack } from '~theme/icons'
+import { Routes } from '~src/router/routes'
 import { ActionsMenu } from './ActionsMenu'
 import { StampIcon } from './Census/StampIcon'
 import { CreatedBy } from './CreatedBy'
@@ -28,12 +23,7 @@ const ProcessHeader = () => {
   const { organization, loaded } = useOrganization()
   const { account, client } = useClient()
   const [censusInfo, setCensusInfo] = useState<CensusInfo>()
-  const { ReadMoreMarkdownWrapper, ReadMoreMarkdownButton } = useReadMoreMarkdown(
-    'rgba(242, 242, 242, 0)',
-    'rgba(242, 242, 242, 1)',
-    600,
-    20
-  )
+  const { ReadMoreMarkdownWrapper, ReadMoreMarkdownButton } = useReadMoreMarkdown(600, 20)
   const strategy = useStrategy()
 
   // Get the census info to show the total size if the maxCensusSize is less than the total size
@@ -56,46 +46,44 @@ const ProcessHeader = () => {
   const showTotalCensusSize = censusInfo?.size && election?.maxCensusSize && election.maxCensusSize < censusInfo.size
 
   return (
-    <Box mb={10}>
+    <Box>
       {showOrgInformation && (
-        <Button as={Link} to={`/organization/0x${election?.organizationId}`} variant='go-back' mt={5}>
-          <GoBack />
-          <OrganizationName as='span' />
-        </Button>
+        <IconButton
+          as={ReactRouterLink}
+          to={generatePath(Routes.organization, { address: ensure0x(election?.organizationId) })}
+          aria-label='Back'
+          icon={<MdKeyboardArrowLeft />}
+        />
       )}
       {election?.header && (
         <Box w='100%' mx='auto' maxH='300px' my='30px' overflow='hidden'>
           <Image src={election?.header} w='100%' h='auto' objectFit='cover' />
         </Box>
       )}
-      <Flex direction={{ base: 'column', lg2: 'row' }} mb={7} gap={10}>
-        <Box flex={{ lg2: '1 1 80%' }}>
-          <ElectionTitle fontSize='heading' textAlign='left' my={5} />
+      <Flex direction={{ base: 'column', xl2: 'row' }} mb={7} gap={10}>
+        <Box flex={{ xl2: '1 1 80%' }}>
+          <ElectionTitle fontSize='4xl' textAlign='left' my={5} />
           <Flex flexDirection={{ base: 'column', xl: 'row' }} mb={4} justifyContent='space-between'>
-            <Flex gap={4} flexDirection={{ base: 'column', xl: 'row' }} alignItems={{ base: 'start', xl: 'center' }}>
+            <Flex gap={2} flexDirection={{ base: 'column', xl: 'row' }} alignItems={{ base: 'start', xl: 'center' }}>
               <Flex gap={3} justifyContent={'space-between'} w={{ base: '100%', xl: 'fit-content' }}>
-                <Flex gap={3} alignItems='center'>
-                  <Text as='span' color='process.label' fontSize='text-sm'>
+                <Flex gap={2} alignItems='center'>
+                  <Text as='span' color='process.label'>
                     {t('process.state')}
                   </Text>
-                  <ElectionStatusBadge fontSize='text-sm' />
+                  <ElectionStatusBadge />
                 </Flex>
-                <Box display={{ base: 'flex', xl: 'none' }} fontSize='text-sm'>
+                <Box display={{ base: 'flex', xl: 'none' }}>
                   <ShareModalButton
                     caption={t('share.election_share_text')}
                     text={t('share.election_share_btn_text')}
                   />
                 </Box>
               </Flex>
-              <Flex
-                flexDirection={{ base: 'column', xl: 'row' }}
-                alignItems={{ base: 'start', xl: 'center' }}
-                gap={{ xl: 3 }}
-              >
-                <Text as='span' color='process.label' fontSize='text-sm'>
+              <Flex flexDirection='row' alignItems='center' gap={1} flexWrap='wrap'>
+                <Text as='span' color='process.label'>
                   {t('process.schedule')}
                 </Text>
-                <ElectionSchedule textAlign='left' color='process.info_title' fontSize='text-sm' />
+                <ElectionSchedule textAlign='left' color='process.info_title' />
               </Flex>
             </Flex>
             <Box display={{ base: 'none', xl: 'flex' }}>
@@ -104,34 +92,33 @@ const ProcessHeader = () => {
           </Flex>
           <Flex flexDirection='column'>
             {!election?.description?.default.length && (
-              <Text textAlign='center' mt={5} color='process.no_description'>
+              <Text textAlign='center' mt={5} color='process.description'>
                 {t('process.no_description')}
               </Text>
             )}
             <Box className='md-sizes'>
-              <ReadMoreMarkdownWrapper from='rgba(250, 250, 250, 0)' to='rgba(250, 250, 250, 1)'>
+              <ReadMoreMarkdownWrapper>
                 <ElectionDescription mb={0} fontSize='lg' lineHeight={1.5} color='process.description' />
               </ReadMoreMarkdownWrapper>
             </Box>
-            <ReadMoreMarkdownButton colorScheme='primary' alignSelf='center' fontSize='text' />
+            <ReadMoreMarkdownButton colorScheme='primary' alignSelf='center' />
           </Flex>
         </Box>
 
         <Flex
-          flex={{ lg2: '1 1 20%' }}
+          flex={{ xl2: '1 1 20%' }}
           position='relative'
-          flexDirection={{ base: 'row', lg2: 'column' }}
+          flexDirection={{ base: 'row', xl2: 'column' }}
           alignItems='start'
           flexWrap='wrap'
-          justifyContent='start'
-          gap={{ base: 4, sm: 6, md: 8, lg: 4 }}
+          justifyContent={{ base: 'center', xl2: 'start' }}
+          gap={{ base: 4, sm: 10, xl2: 4 }}
           opacity={0.85}
           _hover={{
             opacity: 1,
           }}
-          fontSize='text-sm'
         >
-          <Box flexDir='row' display='flex' justifyContent='space-between' w={{ lg2: 'full' }}>
+          <Box flexDir='row' display='flex' justifyContent='space-between' w={{ xl2: 'full' }}>
             {election?.status !== ElectionStatus.CANCELED ? (
               <ProcessDate />
             ) : (
@@ -149,7 +136,7 @@ const ProcessHeader = () => {
           )}
           <Box cursor='help'>
             <Text fontWeight='bold'>
-              {t('process.census')} {showTotalCensusSize && <InfoIcon color='process_create.alert_info.color' ml={1} />}
+              {t('process.census')} {showTotalCensusSize && <InfoIcon ml={1} />}
             </Text>
             {showTotalCensusSize ? (
               <Tooltip
@@ -186,7 +173,7 @@ const ProcessHeader = () => {
             </>
           )}
           {showOrgInformation && (
-            <Box w={{ lg2: 'full' }}>
+            <Box w={{ xl2: 'full' }}>
               <Text fontWeight='bold' mb={1}>
                 {t('process.created_by')}
               </Text>
@@ -200,10 +187,9 @@ const ProcessHeader = () => {
                     flexWrap: 'wrap',
                   },
                   '& p strong': {
-                    maxW: { base: '100%', md: '220px', md2: '250px' },
+                    maxW: { base: '100%', md: '220px', xl2: '120px' },
                     isTruncated: true,
                     mr: 1,
-                    color: 'process.created_by',
                   },
                 }}
               />