saas voting

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 } = useReadMoreMarkdown(600, 20)
 
   const votingLink = `${document.location.origin}${generatePath(Routes.processes.view, { id })}`
   const { hasCopied, onCopy } = useClipboard(votingLink)
@@ -66,7 +66,7 @@ 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)'>
+          <ReadMoreMarkdownWrapper>
             <ElectionDescription mb={0} fontSize='lg' lineHeight={1.5} color='process.description' />
           </ReadMoreMarkdownWrapper>
         )}

src/components/Layout/use-read-more.tsx

@@ -1,18 +1,20 @@
 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
+  fromLight?: string
+  toLight?: string
+  fromDark?: 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 +28,41 @@ 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,
+    fromLight = 'var(--read-more-from-light)',
+    fromDark = 'var(--read-more-from-dark)',
+    toLight = 'var(--read-more-to-light)',
+    toDark = 'var(--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, ${fromLight} 0%, ${toLight} 100%)` : 'none'}
+          _dark={{
+            background: isTruncated && readMore ? `linear-gradient(to bottom, ${fromDark} 0%, ${toDark} 100%)` : 'none',
+          }}
+        ></Box>
+        {children}
+      </Box>
+    )
+  }
   const ReadMoreMarkdownButton = ({ ...props }: any) =>
     isTruncated ? (
       <Button onClick={handleReadMore} variant='' color='read_more' {...props}>
@@ -68,3 +79,37 @@ export const useReadMoreMarkdown = (
     ReadMoreMarkdownButton,
   }
 }
+
+{
+  /* <Box
+{...props}
+ref={containerRef}
+position='relative'
+height={readMore ? `${containerMaxHeightPx}px` : 'auto'}
+overflow='hidden'
+_before={{
+  content: '""',
+  position: 'absolute',
+  height: isTruncated
+    ? `${(containerMaxHeightPx * (tantPerCentGradient ? tantPerCentGradient : containerMaxHeightPx)) / 100}px`
+    : '0',
+  width: '100%',
+  bottom: 0,
+  background: isTruncated && readMore ? `linear-gradient(to bottom, ${fromLight} 0%, ${toLight} 100%)` : '',
+}}
+_dark={{
+  _before: {
+    content: '""',
+    position: 'absolute',
+    height: isTruncated
+      ? `${(containerMaxHeightPx * (tantPerCentGradient ? tantPerCentGradient : containerMaxHeightPx)) / 100}px`
+      : '0',
+    width: '100%',
+    bottom: 0,
+    background: isTruncated && readMore ? `linear-gradient(to bottom, ${fromDark} 0%, ${toDark} 100%)` : '',
+  },
+}}
+>
+{children}
+</Box> */
+}

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()
 

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}

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

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
@@ -58,10 +48,12 @@ const ProcessHeader = () => {
   return (
     <Box mb={10}>
       {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'>
@@ -109,7 +101,7 @@ const ProcessHeader = () => {
               </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>

src/components/Process/View.tsx

@@ -106,8 +106,19 @@ export const ProcessView = () => {
   }, [formErrors])
 
   return (
-    <Box>
-      <Box className='site-wrapper' mb={44}>
+    <Box
+      position='relative'
+      width='full'
+      m='0 auto'
+      maxW='1920px'
+      px={{
+        base: '10px',
+        sm: '20px',
+        md: '80px',
+      }}
+      py={{ base: '0px', sm: '15px', md: '30px' }}
+    >
+      <Box>
         <Header />
 
         {election instanceof PublishedElection && election?.streamUri && (
@@ -143,7 +154,7 @@ export const ProcessView = () => {
             </TabList>
             <TabPanels>
               <TabPanel>
-                <Box ref={electionRef} className='md-sizes' mb='100px' pt='25px'>
+                <Box ref={electionRef} mb='100px' pt='25px'>
                   <ElectionQuestions
                     onInvalid={(args) => {
                       setFormErrors(args)

src/elements/Layout.tsx

@@ -7,7 +7,16 @@ const Layout = () => {
   const location = useLocation()
 
   return (
-    <Flex position='relative' flexDirection='column' minH='100vh' mx='auto' bgColor='bg'>
+    <Flex
+      position='relative'
+      flexDirection='column'
+      minH='100vh'
+      mx='auto'
+      bgColor={'process_view.bg_light'}
+      _dark={{
+        bgColor: 'process_view.bg_dark',
+      }}
+    >
       <HStack as='header' position='sticky' top={0} w='full' backdropFilter='blur(40px)' zIndex={30}>
         <Navbar />
       </HStack>

src/theme/colors.ts

@@ -5,6 +5,7 @@ export const colorsBase = {
     grayish: '#2B2A33',
     dark: '#1A202C',
   },
+  gradient: 'linear-gradient(to right, #546E39, #2E441A)',
   gray: {
     light: '#E2E8F0',
     normal: '#718096',
@@ -153,6 +154,55 @@ export const colors = {
     },
   },
   org_text_secondary: colorsBase.gray.normal,
+
+  process: {
+    aside: {
+      bg: colorsBase.gradient,
+      color: colorsBase.white.pure,
+      vote_btn_color: colorsBase.black,
+      vote_btn_bg: colorsBase.primary,
+      aside_footer_mbl_border: colorsBase.white.dark,
+      verify_link: colorsBase.white.pure,
+    },
+    questions: {
+      alert: {
+        bg: colorsBase.primary,
+        color: colorsBase.white.pure,
+        link_color: colorsBase.black,
+        link_bg: colorsBase.white.pure,
+      },
+      question_selected: {
+        bg: colorsBase.primary,
+        color: colorsBase.white.pure,
+      },
+      hover: {
+        light: colorsBase.white.pure,
+        dark: colorsBase.blue.grayish,
+      },
+      disabled: {
+        light: colorsBase.white.pure,
+        dark: colorsBase.blue.grayish,
+      },
+      description: colorsBase.gray.normal,
+      title: {
+        ligth: colorsBase.primary,
+        dark: colorsBase.white.pure,
+      },
+    },
+    results: {
+      alert_bg: colorsBase.primary,
+      alert_color: colorsBase.white.pure,
+      bg: colorsBase.gray.light,
+      description: colorsBase.gray.normal,
+      progressbar_bg: colorsBase.gray.light,
+      title: colorsBase.primary,
+    },
+    tabs: {
+      active_bg: colorsBase.gray.light,
+      hover_bg: colorsBase.gray.light,
+      border_bottom_list: colorsBase.gray.light,
+    },
+  },
   process_create: {
     bg: {
       dark: colorsBase.blue.dark,
@@ -174,6 +224,10 @@ export const colors = {
     text_secondary: colorsBase.gray.normal,
     question_index: colorsBase.primary,
   },
+  process_view: {
+    bg_light: colorsBase.white.dark,
+    bg_dark: colorsBase.blue.dark,
+  },
 
   tab: {
     variant: {