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,