diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index f538094a..9b533ade 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -79,8 +79,6 @@ const Navbar = () => { src={account?.account.avatar} name={account?.account.name.default || account?.address} size='xs' - bg='primary.main' - color='white' /> {isOpen ? ( diff --git a/src/components/Process/ActionsMenu.tsx b/src/components/Process/ActionsMenu.tsx index dff50790..976d71ea 100644 --- a/src/components/Process/ActionsMenu.tsx +++ b/src/components/Process/ActionsMenu.tsx @@ -52,6 +52,12 @@ const ActionsMenuList = (props: MenuListProps) => { justifyContent='start' isLoading={loading.continue} variant='' + sx={{ + '& span': { + display: 'flex', + alignItems: 'center', + }, + }} > {t('process_actions.start')} @@ -64,6 +70,12 @@ const ActionsMenuList = (props: MenuListProps) => { justifyContent='start' isLoading={loading.pause} variant='' + sx={{ + '& span': { + display: 'flex', + alignItems: 'center', + }, + }} > {t('process_actions.pause')} @@ -76,6 +88,12 @@ const ActionsMenuList = (props: MenuListProps) => { isLoading={loading.end} variant='solid' colorScheme='gray' + sx={{ + '& span': { + display: 'flex', + alignItems: 'center', + }, + }} > {t('process_actions.end')} @@ -88,6 +106,12 @@ const ActionsMenuList = (props: MenuListProps) => { isLoading={loading.cancel} variant='solid' colorScheme='gray' + sx={{ + '& span': { + display: 'flex', + alignItems: 'center', + }, + }} > {t('process_actions.cancel')} diff --git a/src/components/Process/Aside.tsx b/src/components/Process/Aside.tsx index 857b9036..64778f0e 100644 --- a/src/components/Process/Aside.tsx +++ b/src/components/Process/Aside.tsx @@ -138,7 +138,7 @@ const ProcessAside = () => { ) } -export const VoteButton = ({ setQuestionsTab }: { setQuestionsTab: () => void }) => { +export const VoteButton = ({ setQuestionsTab, ...props }: { setQuestionsTab: () => void }) => { const { t } = useTranslation() const { election, connected, isAbleToVote, isInCensus } = useElection() @@ -159,6 +159,7 @@ export const VoteButton = ({ setQuestionsTab }: { setQuestionsTab: () => void }) color='process.aside.color' py={3} px={{ base: 3, lg2: 0 }} + {...props} > {census?.type !== 'spreadsheet' && !connected && ( @@ -193,7 +194,17 @@ export const VoteButton = ({ setQuestionsTab }: { setQuestionsTab: () => void }) )} {census?.type === 'spreadsheet' && !connected && } - {isAbleToVote && } + {isAbleToVote && ( + + )} ) } diff --git a/src/components/Process/CreatedBy.tsx b/src/components/Process/CreatedBy.tsx index 8ef09566..5b285d08 100644 --- a/src/components/Process/CreatedBy.tsx +++ b/src/components/Process/CreatedBy.tsx @@ -9,12 +9,7 @@ export const CreatedBy = (props: FlexProps) => { return ( - + @@ -52,7 +47,7 @@ const CopyAddressBtn = () => { return ( } + icon={} aria-label='copy address' onClick={() => { toast({ diff --git a/src/components/Process/View.tsx b/src/components/Process/View.tsx index 37241645..63ffd7d4 100644 --- a/src/components/Process/View.tsx +++ b/src/components/Process/View.tsx @@ -76,6 +76,7 @@ export const ProcessView = () => {
+ {election?.streamUri && ( { - + } /> diff --git a/src/themes/default/colors.ts b/src/themes/default/colors.ts index 971089e1..50be0e2f 100644 --- a/src/themes/default/colors.ts +++ b/src/themes/default/colors.ts @@ -34,6 +34,10 @@ export const colors = { 700: colorsBase.primary.dark2, }, + avatar: { + bg: colorsBase.primary.main, + color: colorsBase.white.pure, + }, black: { 50: colorsBase.white.pure, 500: colorsBase.black, diff --git a/src/themes/default/components/Actions.ts b/src/themes/default/components/Actions.ts deleted file mode 100644 index 4dc9e255..00000000 --- a/src/themes/default/components/Actions.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { createMultiStyleConfigHelpers } from '@chakra-ui/react' -import { questionsAnatomy } from '@vocdoni/chakra-components' - -const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(questionsAnatomy) - -const baseStyle = definePartsStyle({ - group: { - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center', - }, - - buttons: { - border: '3px solid black !important', - borderRadius: '50% !important', - transform: 'scale(0.8) !important', - - _hover: { - opacity: 0.75, - }, - }, - - icons: { - color: 'black !important', - }, -}) - -export const ElectionActions = defineMultiStyleConfig({ - baseStyle, -}) diff --git a/src/themes/default/components/Avatar.ts b/src/themes/default/components/Avatar.ts new file mode 100644 index 00000000..a48a5133 --- /dev/null +++ b/src/themes/default/components/Avatar.ts @@ -0,0 +1,16 @@ +import { avatarAnatomy } from '@chakra-ui/anatomy' +import { createMultiStyleConfigHelpers } from '@chakra-ui/react' + +const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(avatarAnatomy.keys) + +const baseStyle = definePartsStyle({ + // define the part you're going to style + + container: { + borderRadius: 'full', + bg: 'avatar.bg', + color: 'avatar.color', + }, +}) + +export const Avatar = defineMultiStyleConfig({ baseStyle }) diff --git a/src/themes/default/components/Questions.ts b/src/themes/default/components/Questions.ts index 4c42299f..0a504123 100644 --- a/src/themes/default/components/Questions.ts +++ b/src/themes/default/components/Questions.ts @@ -105,13 +105,17 @@ const baseStyle = definePartsStyle({ alignItems: 'center', gap: 2, w: { lg2: '99%' }, + _hover: { + bgColor: '#eee', + }, '& span:nth-of-type(1)': { display: { base: 'none', md: 'block' }, + position: 'absolute', width: '30px', height: '30px', background: 'transparent', - ml: '5px', + ml: '10px', borderRadius: 'none', '&[data-checked=""]': { @@ -120,9 +124,9 @@ const baseStyle = definePartsStyle({ bgColor: 'transparent', }, - border: 'none', background: 'process.questions.question_selected.bg', - borderColor: 'process.questions.question_selected.bg', + borderColor: 'white', + borderWidth: '1px', bgSize: '15px', bgRepeat: 'no-repeat', bgPosition: 'center', @@ -146,6 +150,7 @@ const baseStyle = definePartsStyle({ }, '& span:nth-of-type(2)': { p: 2, + pl: { md: 12 }, m: 0, border: '1px solid lightgray', w: '100%', diff --git a/src/themes/default/components/index.ts b/src/themes/default/components/index.ts index 50e018bd..c244692f 100644 --- a/src/themes/default/components/index.ts +++ b/src/themes/default/components/index.ts @@ -1,4 +1,3 @@ -import { ElectionActions } from './Actions' import { Alert } from './Alert' import { Badge } from './Badge' import { Button } from './Button' @@ -16,15 +15,16 @@ import { SpreadsheetAccess } from './SpreadSheet' import { Stepper } from './Stepper' import { Tabs } from './Tabs' import { Textarea } from './Textarea' +import { Avatar } from './Avatar' export { Alert, + Avatar, Badge, Button, Card, Checkbox, ConfirmModal, - ElectionActions, ElectionQuestions, ElectionResults, Form, @@ -39,8 +39,8 @@ export { } export const components = { - ElectionActions, Alert, + Avatar, Badge, Button, Card,