Skip to content

Commit

Permalink
feat(packages:ui) - Add the new Cartesi logo
Browse files Browse the repository at this point in the history
  • Loading branch information
@brunomenezes
brunomenezes committed Jul 12, 2023
1 parent cb72e28 commit d8ce621
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 162 deletions.
25 changes: 25 additions & 0 deletions packages/ui/src/components/Icons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,31 @@ export const PencilIcon = createIcon({
defaultProps: { width: '22', height: '21' },
});

export const CartesiLogo = createIcon({
displayName: 'CartesiLogo',
viewBox: '0 0 1356.98 344.03',
path: (
<g id="Layer_1-2" fill="currentColor" data-name="Layer 1-2">
<g>
<polygon points="123.88 237.88 167.37 344.03 264.23 245.24 190.79 245.24 171.19 189.63 123.88 237.88" />
<polygon points="241.5 117.93 186.03 174.49 204.23 226.11 350.2 226.11 312.07 117.93 241.5 117.93" />
<polygon points="0 117.93 38.13 226.11 108.7 226.11 164.12 169.59 145.91 117.93 0 117.93" />
<polygon points="182.83 0 85.99 98.79 159.35 98.79 178.97 154.45 226.32 106.15 182.83 0" />
<g>
<path d="m840.3,117.68v-29.17h-31.96v167.02h32.66v-83.68c0-36.81,18.4-53.82,45.84-53.82h13.42v-29.51h-10.87c-17.02,0-36.94,3.47-49.09,29.17h0Z" />
<path d="m1082.32,83.62c-42,0-79.83,35.71-79.83,88.04,0,56.51,39.23,89.09,84,89.09,38.57,0,65.18-22.86,74.75-52h-32.41c-7.51,13.55-20.52,23.23-42.34,23.23-28.11,0-49.63-20.8-50.33-50.61h125.65c.36-2.08.7-6.24.7-10.4,0-52-28.81-87.36-80.19-87.36h0Zm-45.13,71.42c1.39-21.49,18.05-42.64,45.47-42.64,29.51,0,45.13,18.72,45.82,42.64h-91.29,0Z" />
<rect x="1318.53" y="88.87" width="31.09" height="166.65" />
<path d="m1333.9,26.67c-12.55,0-22.73,10.15-22.73,23.01s10.18,22.68,22.73,22.68,23.08-10.16,23.08-22.68-10.18-23.01-23.08-23.01Z" />
<path d="m946.88,35.73h-32.65v187.92c0,17.6,14.27,31.87,31.87,31.87h48.48v-29.51h-47.71v-107.99h47.71v-29.51h-47.71v-52.77h.01Z" />
<path d="m552.59,230.6c-26.95,0-50.94-20.75-50.94-58.59s24.26-58.23,50.6-58.23c21.26,0,33.39,10.67,39.9,22.88h34.25c-6.94-25.31-29.8-53.04-74.15-53.04-47.47,0-83.86,36.4-83.86,88.39s35.69,88.74,84.2,88.74c43.31,0,67.22-28.08,75.18-52h-34.13c-5.19,9-16.62,21.84-41.06,21.84h.01Z" />
<path d="m1256.95,159.54l-26.98-5.89c-12.8-2.77-19.04-10.05-19.04-20.11,0-11.44,10.07-22.18,26.69-22.18,23.16,0,31.16,14.49,32.84,24.23h30.28c-4.14-31.47-25.88-51.96-63.12-51.96-32.52,0-58.17,24.27-58.17,52.69,0,23.58,15.58,41.25,41.52,46.8l28.37,6.24c13.85,3.12,21.46,11.09,21.46,21.49,0,11.79-10.04,22.18-28.38,22.18-20.28,0-32.83-10.32-37.24-24.27h-32.34c6.17,35.4,31.02,52,69.24,52,41.17,0,60.89-28.08,60.89-51.65s-15.9-42.99-46.02-49.57h0Z" />
<path d="m712.97,83.63c-39.52,0-65.21,25.73-68.11,53.03h32.7c4.48-15.02,16.65-25.3,36.1-25.3,25.29,0,36.02,13.52,36.02,29.81,0,5.89-2.77,11.09-12.82,12.48l-45.02,6.59c-28.75,4.15-50.58,20.79-50.58,50.6,0,26.35,21.83,49.92,55.78,49.92,29.79,0,46.41-15.94,53.7-27.73v22.53h31.52v-110.92c0-32.58-19.4-61.01-69.29-61.01h0Zm36.72,100.53c0,36.39-21.48,49.22-48.15,49.22-16.62,0-27.03-11.79-27.03-24.27,0-14.9,10.41-22.87,24.26-24.95l50.91-7.63v7.63h.01Z" />
</g>
</g>
</g>
),
});

export const PencilIconWhite = createIcon({
displayName: 'PencilIconWhite',
viewBox: '0 0 24 24',
Expand Down
178 changes: 16 additions & 162 deletions packages/ui/src/components/header/Logo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,167 +9,21 @@
// WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
// PARTICULAR PURPOSE. See the GNU General Public License for more details.

import { FC } from 'react';
import { Box, BoxProps, Link, useToken } from '@chakra-ui/react';
import NextLink from 'next/link';
import { Box, BoxProps, Link } from '@chakra-ui/react';
import { FC } from 'react';
import { CartesiLogo } from '../Icons';

export const Logo: FC<BoxProps> = (props) => {
const [width, height] = useToken('space', ['48', '20']);

export const Logo: FC<BoxProps> = (props) => (
<Box {...props}>
<NextLink href="/" passHref>
<Link _focus={{ outline: 'none' }} title="Cartesi logo">
<svg
id="logo"
xmlns="http://www.w3.org/2000/svg"
width={152}
height={51.706}
viewBox="0 0 152 51.706"
className="fill-current"
style={{
maxWidth: '100%',
fill: 'white',
}}
>
<path
id="Path_61"
data-name="Path 61"
d="M196.793,236.6H204.8v.956h-3.407v8.463h-1.2v-8.463H196.78Z"
transform="translate(-161.744 -194.496)"
/>
<path
id="Path_62"
data-name="Path 62"
d="M248.7,236.6h1.151v3.659h.131a2.3,2.3,0,0,1,2.192-1.046,2.249,2.249,0,0,1,2.511,2.392v4.423h-1.151v-4.3a1.468,1.468,0,0,0-1.636-1.614,1.981,1.981,0,0,0-2.053,2.192v3.721H248.7Z"
transform="translate(-204.353 -194.496)"
/>
<path
id="Path_63"
data-name="Path 63"
d="M293.287,251.08a2.88,2.88,0,0,1,3.076,3.2v.538h-5.2c.027,1.465.823,2.374,2.118,2.374a1.751,1.751,0,0,0,1.9-1.374h1.033v.2a2.7,2.7,0,0,1-2.923,2.046c-1.987,0-3.244-1.223-3.244-3.492S291.332,251.08,293.287,251.08Zm1.973,2.891a1.846,1.846,0,0,0-1.982-2.021,1.977,1.977,0,0,0-2.093,2.021Z"
transform="translate(-238.287 -206.379)"
/>
<path
id="Path_64"
data-name="Path 64"
d="M353.61,236.6h4.159c1.648,0,2.918.8,2.918,2.362a2,2,0,0,1-1.6,2.125v.131a2.112,2.112,0,0,1,1.772,2.244c0,1.727-1.354,2.557-3.049,2.557h-4.2Zm1.191.956v3.2h2.825c1.065,0,1.928-.438,1.928-1.6s-.863-1.6-1.928-1.6Zm0,4.152v3.355h2.869c1.151,0,2.021-.477,2.021-1.68s-.87-1.675-2.021-1.675Z"
transform="translate(-290.448 -194.496)"
/>
<path
id="Path_65"
data-name="Path 65"
d="M403.48,246.019h-1.15V236.6h1.15Z"
transform="translate(-330.431 -194.496)"
/>
<path
id="Path_66"
data-name="Path 66"
d="M420.459,251.08a3.494,3.494,0,1,1-3.329,3.494A3.153,3.153,0,0,1,420.459,251.08Zm0,6.083c1.3,0,2.165-.9,2.165-2.591s-.863-2.6-2.165-2.6-2.165.9-2.165,2.6S419.164,257.163,420.459,257.163Z"
transform="translate(-342.576 -206.379)"
/>
<path
id="Path_67"
data-name="Path 67"
d="M463.7,251.08c1.973,0,2.869,1.211,2.956,2.256v.2h-1.076a1.687,1.687,0,0,0-1.858-1.557c-1.327,0-2.177.909-2.177,2.6s.846,2.591,2.179,2.591a1.693,1.693,0,0,0,1.878-1.6h1.076v.2a2.668,2.668,0,0,1-2.975,2.3,3.494,3.494,0,0,1,0-6.978Z"
transform="translate(-378.078 -206.379)"
/>
<path
id="Path_68"
data-name="Path 68"
d="M505.7,242.533l3.748,3.286v.2H508.1l-3.343-2.959h-.129v2.963H503.48V236.6h1.151v5.452h.129l3.277-2.69h1.322v.2Z"
transform="translate(-413.44 -194.496)"
/>
<path
id="Path_69"
data-name="Path 69"
d="M542.826,251.08c1.973,0,2.87,1.211,2.956,2.256v.2h-1.076a1.687,1.687,0,0,0-1.858-1.557c-1.327,0-2.177.909-2.177,2.6s.839,2.591,2.174,2.591a1.692,1.692,0,0,0,1.878-1.6H545.8v.2a2.668,2.668,0,0,1-2.972,2.3,3.495,3.495,0,0,1,0-6.98Z"
transform="translate(-443.009 -206.379)"
/>
<path
id="Path_70"
data-name="Path 70"
d="M582.545,236.6H583.7v3.659h.131a2.3,2.3,0,0,1,2.19-1.046,2.248,2.248,0,0,1,2.511,2.392v4.423h-1.151v-4.3a1.467,1.467,0,0,0-1.634-1.614,1.981,1.981,0,0,0-2.053,2.192v3.721H582.54Z"
transform="translate(-478.322 -194.496)"
/>
<path
id="Path_71"
data-name="Path 71"
d="M624.308,253.291v-.2c.138-1.243,1.2-2.014,2.923-2.014s2.733.771,2.733,2.434V257.9h-1.085v-.956h-.131a2.365,2.365,0,0,1-2.331,1.1c-1.417,0-2.407-.717-2.407-1.973,0-1.295,1-1.838,2.348-2.009l2.493-.308v-.3c0-1.076-.563-1.51-1.648-1.51s-1.727.438-1.818,1.354Zm2.331,3.892a2.042,2.042,0,0,0,2.217-2.192v-.4l-2.283.3c-.877.117-1.435.43-1.435,1.157s.583,1.139,1.492,1.139Z"
transform="translate(-512.354 -206.379)"
/>
<path
id="Path_72"
data-name="Path 72"
d="M667,238.57h1.334v1.255H667Zm1.239,2.409v6.664h-1.15v-6.664Z"
transform="translate(-547.635 -196.113)"
/>
<path
id="Path_73"
data-name="Path 73"
d="M684.487,251.311h1.119v.942h.131a2.319,2.319,0,0,1,2.224-1.092,2.249,2.249,0,0,1,2.511,2.392v4.423H689.32v-4.3a1.468,1.468,0,0,0-1.636-1.614,1.981,1.981,0,0,0-2.053,2.192v3.721H684.48Z"
transform="translate(-561.98 -206.445)"
/>
<path
id="Path_74"
data-name="Path 74"
d="M750.045,235.58c2.792,0,4.7,1.767,4.7,4.892s-1.9,4.892-4.7,4.892-4.7-1.767-4.7-4.892S747.26,235.58,750.045,235.58Zm0,8.8c2.105,0,3.472-1.42,3.472-3.911s-1.367-3.92-3.472-3.92-3.479,1.426-3.479,3.917S747.94,244.384,750.045,244.384Z"
transform="translate(-611.933 -193.659)"
/>
<path
id="Path_75"
data-name="Path 75"
d="M807.631,235.76c2.217,0,3.587,1.008,3.714,2.807v.2h-1.132c-.072-1.483-1.15-2.079-2.563-2.079s-2.362.6-2.362,1.614.793,1.419,2.053,1.634l1.067.179c1.838.307,2.982.961,2.982,2.649s-1.307,2.728-3.565,2.728-3.8-1.04-3.956-2.869v-.2h1.125c.163,1.542,1.347,2.152,2.812,2.152s2.414-.6,2.414-1.72-.882-1.523-2.152-1.732L807,240.943c-1.831-.3-2.891-1.04-2.891-2.6S805.414,235.76,807.631,235.76Z"
transform="translate(-659.958 -193.807)"
/>
<path
id="Path_76"
data-name="Path 76"
d="M825.579,53.69V78.749H821.4V53.69Z"
transform="translate(-674.344 -44.389)"
/>
<rect
id="Rectangle_235"
data-name="Rectangle 235"
width="5.726"
height="5.287"
transform="translate(146.274)"
/>
<path
id="Path_77"
data-name="Path 77"
d="M531.12,49.16c7.306,0,11.819,5.079,11.819,12.484v1.863H522.953c.1,5.149,3.372,8.978,8.275,8.978,4.708,0,7.079-3.19,7.52-5.692h3.981v.735c-.687,3.138-3.96,8.268-11.512,8.268-7.306,0-12.457-5.079-12.457-13.318S523.911,49.16,531.12,49.16Zm7.627,11.055c-.147-4.315-2.773-7.744-7.627-7.744-4.758,0-7.776,3.429-8.167,7.744Z"
transform="translate(-425.98 -40.672)"
/>
<path
id="Path_78"
data-name="Path 78"
d="M682.62,49.16c6.424,0,10.2,3.069,10.838,7.579v.737h-3.972c-.244-3.336-2.941-5.005-6.865-5.005-3.874,0-6.415,1.614-6.415,4.024s2.2,3.228,4.894,3.727l4.071.735c5,.882,8.485,2.6,8.485,7.062,0,4.414-3.729,7.776-10.594,7.776s-10.985-3.363-11.722-8.217v-.735h3.983c.441,3.824,3.52,5.642,7.69,5.642,4.216,0,6.472-1.768,6.472-4.22,0-2.355-2.01-3.189-5.3-3.777l-4.071-.735c-4.663-.834-7.891-2.748-7.891-7.062C672.224,52.229,676.2,49.16,682.62,49.16Z"
transform="translate(-551.196 -40.672)"
/>
<path
id="Path_79"
data-name="Path 79"
d="M439.06,8.93h4.193v8.027h7.38V20.6h-7.38V37.85l.325.393h7.285v3.78h-6.2c-3.375,0-5.6-2.059-5.6-6.13Z"
transform="translate(-360.573 -7.657)"
/>
<path
id="Path_80"
data-name="Path 80"
d="M193.744,57.279c.832-4.663,4.953-8.119,11.132-8.119s10.447,3.459,10.447,9.541V75.032h-4.193V71.3h-.271c-1.076,1.765-3.678,4.484-8.876,4.484-5.346,0-9.123-2.97-9.123-7.434,0-4.663,3.777-6.865,8.877-7.353l9.514-.791V58.6c0-4.069-2.55-6.205-6.474-6.205-3.972,0-6.61,2.136-7.052,5.617h-3.981Zm8.967,15.206c4.561,0,8.538-2.633,8.538-8.273v-.687l-8.926.621c-3.228.294-5.482,1.128-5.482,4.021,0,3.253,2.487,4.319,5.872,4.319Z"
transform="translate(-158.527 -40.672)"
/>
<path
id="Path_81"
data-name="Path 81"
d="M348.673,53.69v3.642h.339c.884-1.865,2.4-3.633,6.132-3.633h2.55v3.633h-2.511c-4.708,0-6.523,2.69-6.523,7.8V78.76h-4.18V53.69Z"
transform="translate(-282.955 -44.389)"
/>
<path
id="Path_82"
data-name="Path 82"
d="M17.641,1.83c9.584,0,13.843,6.067,14.433,10.811v.717H28.092c-.4-3.422-3.18-8.034-10.45-8.034-7.2,0-12.24,5.249-12.24,14.076s4.962,14.076,12.163,14.076S27.738,28.7,28.282,25.254h3.793v.717c-.708,4.6-4.756,11-14.433,11C7.1,36.972,1.42,29.181,1.42,19.409,1.42,8.718,8.011,1.83,17.641,1.83Z"
transform="translate(-1.42 -1.83)"
/>
</svg>
</Link>
</NextLink>
</Box>
);
return (
<Box {...props}>
<NextLink href="/" passHref>
<Link _focus={{ outline: 'none' }} title="Cartesi logo">
<CartesiLogo color="white" width={width} height={height} />
</Link>
</NextLink>
</Box>
);
};

0 comments on commit d8ce621

Please sign in to comment.