Skip to content

Commit

Permalink
Adapt the SVG logo to also render a minimal version (when 'minimal' p…
Browse files Browse the repository at this point in the history 
…rop is set)
  • Loading branch information
@elboletaire
elboletaire committed Nov 7, 2024
1 parent 829bd04 commit a7ee585
Showing 1 changed file with 41 additions and 28 deletions.
69 changes: 41 additions & 28 deletions src/components/Layout/Logo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { chakra, ChakraProps, Flex, useColorModeValue } from '@chakra-ui/react'
import { NavLink } from 'react-router-dom'
import { Logo as LogoImage, LogoMbl } from '~theme/icons'

// This Logo should be updated to use VocdoniLogo or simply deprecated.
const Logo = ({ ...props }) => {
const invert = useColorModeValue('invert(0%)', 'invert(100%)')

Expand All @@ -17,36 +18,18 @@ const Logo = ({ ...props }) => {
)
}

export const VocdoniLogo = (props: ChakraProps) => {
interface VocdoniLogoProps extends ChakraProps {
minimal?: boolean
}

export const VocdoniLogo = ({ minimal = false, ...props }: VocdoniLogoProps) => {
const fill = useColorModeValue('black', 'white')

// Adjust viewBox depending on whether minimal is true or false
const viewBox = minimal ? '0 0 165 155' : '0 0 642 155'

return (
<chakra.svg viewBox='0 0 642 155' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
<path
d='M227.354 122.969H242.78L267.039 56.5208H250.163L235.001 103.72L219.839 56.5208H203.095L227.354 122.969Z'
fill={fill}
/>
<path
d='M298.192 124.024C318.363 124.024 332.866 109.521 332.866 89.745C332.866 69.9687 318.363 55.4661 298.192 55.4661C278.02 55.4661 263.517 69.9687 263.517 89.745C263.517 109.521 278.02 124.024 298.192 124.024ZM298.192 109.653C287.38 109.653 280.261 101.611 280.261 89.745C280.261 77.8792 287.38 69.8369 298.192 69.8369C308.871 69.8369 316.122 77.8792 316.122 89.745C316.122 101.611 308.871 109.653 298.192 109.653Z'
fill={fill}
/>
<path
d='M371.226 124.024C387.97 124.024 399.967 115.586 402.472 101.611L386.256 98.3148C384.674 105.434 379.532 109.653 371.753 109.653C361.47 109.653 354.746 101.875 354.746 89.745C354.746 77.6155 361.47 69.8369 371.753 69.8369C379.532 69.8369 385.069 74.5832 386.256 81.5708L402.472 78.4066C400.231 64.2995 388.234 55.4661 371.226 55.4661C351.318 55.4661 337.474 69.4413 337.474 89.745C337.474 110.049 351.318 124.024 371.226 124.024Z'
fill={fill}
/>
<path
d='M437.746 124.024C446.053 124.024 453.436 120.596 456.732 115.322V122.969H473.344V29.625H456.732V63.904C452.908 58.894 445.789 55.4661 437.483 55.4661C417.838 55.4661 406.104 69.4413 406.104 89.745C406.104 110.049 417.838 124.024 437.746 124.024ZM440.12 109.653C429.572 109.653 422.585 101.743 422.585 89.745C422.585 77.7474 429.572 69.8369 440.12 69.8369C450.799 69.8369 457.786 77.7474 457.786 89.745C457.786 101.743 450.799 109.653 440.12 109.653Z'
fill={fill}
/>
<path
d='M513.349 124.024C533.521 124.024 548.023 109.521 548.023 89.745C548.023 69.9687 533.521 55.4661 513.349 55.4661C493.177 55.4661 478.674 69.9687 478.674 89.745C478.674 109.521 493.177 124.024 513.349 124.024ZM513.349 109.653C502.538 109.653 495.418 101.611 495.418 89.745C495.418 77.8792 502.538 69.8369 513.349 69.8369C524.028 69.8369 531.279 77.8792 531.279 89.745C531.279 101.611 524.028 109.653 513.349 109.653Z'
fill={fill}
/>
<path
d='M553.259 122.969H569.871V93.8321C569.871 78.934 575.804 70.2324 585.956 70.2324C593.735 70.2324 598.613 75.6379 598.613 83.4166V122.969H615.225V79.4613C615.225 64.9587 605.469 55.4661 590.966 55.4661C581.605 55.4661 574.09 60.0805 569.871 66.5408V56.5208H553.259V122.969Z'
fill={fill}
/>
<path d='M624.027 122.969H640.639V56.5208H624.027V122.969Z' fill={fill} />
<circle cx='632.047' cy='39.7005' r='9.91294' fill={fill} />
<chakra.svg viewBox={viewBox} fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
<path
d='M7.62939e-05 65.4419V102.983C7.62939e-05 104.723 0.915519 106.335 2.41003 107.226L79.97 153.475C81.5287 154.405 83.4715 154.405 85.0302 153.475L162.59 107.226C164.085 106.335 165 104.723 165 102.983V65.4419C165 64.0067 163.439 63.1166 162.204 63.8479L85.0173 109.557C83.465 110.476 81.5351 110.476 79.9829 109.557L2.79654 63.8479C1.56164 63.1166 7.62939e-05 64.0067 7.62939e-05 65.4419Z'
fill={fill}
Expand All @@ -55,6 +38,36 @@ export const VocdoniLogo = (props: ChakraProps) => {
d='M52.1503 3.26841V40.9576C52.1503 42.6993 53.0675 44.3123 54.5642 45.2029L94.9643 69.2426C96.1991 69.9774 97.7641 69.0875 97.7641 67.6506V30.1117C97.7641 28.3748 96.852 26.7655 95.3618 25.8733L54.9545 1.67903C53.7197 0.939694 52.1503 1.82922 52.1503 3.26841Z'
fill={fill}
/>
{!minimal && (
<>
<path
d='M227.354 122.969H242.78L267.039 56.5208H250.163L235.001 103.72L219.839 56.5208H203.095L227.354 122.969Z'
fill={fill}
/>
<path
d='M298.192 124.024C318.363 124.024 332.866 109.521 332.866 89.745C332.866 69.9687 318.363 55.4661 298.192 55.4661C278.02 55.4661 263.517 69.9687 263.517 89.745C263.517 109.521 278.02 124.024 298.192 124.024ZM298.192 109.653C287.38 109.653 280.261 101.611 280.261 89.745C280.261 77.8792 287.38 69.8369 298.192 69.8369C308.871 69.8369 316.122 77.8792 316.122 89.745C316.122 101.611 308.871 109.653 298.192 109.653Z'
fill={fill}
/>
<path
d='M371.226 124.024C387.97 124.024 399.967 115.586 402.472 101.611L386.256 98.3148C384.674 105.434 379.532 109.653 371.753 109.653C361.47 109.653 354.746 101.875 354.746 89.745C354.746 77.6155 361.47 69.8369 371.753 69.8369C379.532 69.8369 385.069 74.5832 386.256 81.5708L402.472 78.4066C400.231 64.2995 388.234 55.4661 371.226 55.4661C351.318 55.4661 337.474 69.4413 337.474 89.745C337.474 110.049 351.318 124.024 371.226 124.024Z'
fill={fill}
/>
<path
d='M437.746 124.024C446.053 124.024 453.436 120.596 456.732 115.322V122.969H473.344V29.625H456.732V63.904C452.908 58.894 445.789 55.4661 437.483 55.4661C417.838 55.4661 406.104 69.4413 406.104 89.745C406.104 110.049 417.838 124.024 437.746 124.024ZM440.12 109.653C429.572 109.653 422.585 101.743 422.585 89.745C422.585 77.7474 429.572 69.8369 440.12 69.8369C450.799 69.8369 457.786 77.7474 457.786 89.745C457.786 101.743 450.799 109.653 440.12 109.653Z'
fill={fill}
/>
<path
d='M513.349 124.024C533.521 124.024 548.023 109.521 548.023 89.745C548.023 69.9687 533.521 55.4661 513.349 55.4661C493.177 55.4661 478.674 69.9687 478.674 89.745C478.674 109.521 493.177 124.024 513.349 124.024ZM513.349 109.653C502.538 109.653 495.418 101.611 495.418 89.745C495.418 77.8792 502.538 69.8369 513.349 69.8369C524.028 69.8369 531.279 77.8792 531.279 89.745C531.279 101.611 524.028 109.653 513.349 109.653Z'
fill={fill}
/>
<path
d='M553.259 122.969H569.871V93.8321C569.871 78.934 575.804 70.2324 585.956 70.2324C593.735 70.2324 598.613 75.6379 598.613 83.4166V122.969H615.225V79.4613C615.225 64.9587 605.469 55.4661 590.966 55.4661C581.605 55.4661 574.09 60.0805 569.871 66.5408V56.5208H553.259V122.969Z'
fill={fill}
/>
<path d='M624.027 122.969H640.639V56.5208H624.027V122.969Z' fill={fill} />
<circle cx='632.047' cy='39.7005' r='9.91294' fill={fill} />
</>
)}
</chakra.svg>
)
}
Expand Down

2 comments on commit a7ee585

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Published on https://vocdoni-app-stg.netlify.app as production
🚀 Deployed on https://672c999da59638443e1b6172--vocdoni-app-stg.netlify.app

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Published on https://vocdoni-app-dev.netlify.app as production
🚀 Deployed on https://672c99a2dff07e44f614aef7--vocdoni-app-dev.netlify.app

Please sign in to comment.