feat: [closes #1] display logo (#10)

* feat: display logo
* chore: credit ramyashreeshetty for logo
This commit is contained in:
Jeremy Kahn 2022-09-11 17:27:16 -05:00 committed by GitHub
parent 7f958e4ebe
commit 1ea67e2c3a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 510 additions and 1 deletions

View File

@ -1,5 +1,9 @@
# Chitchatter
![Chitchatter logo](./public/logo/logo.svg)
<sub>Logo provided by [@ramyashreeshetty](https://github.com/ramyashreeshetty)</sub>
Chitchatter is a free (as in both price and freedom) communication tool. It is designed with security and privacy in mind. To that end, it is:
- Fully open source (licensed under [GPL v2](./LICENSE))

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 7.4 KiB

View File

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

266
public/logo/logo.svg Normal file
View File

@ -0,0 +1,266 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="472.85938"
zoomAndPan="magnify"
viewBox="0 0 354.64453 128.97656"
height="171.96875"
preserveAspectRatio="xMidYMid"
version="1.0"
id="svg110"
sodipodi:docname="logo.svg"
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview112"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
showgrid="false"
inkscape:zoom="1.3350176"
inkscape:cx="234.45384"
inkscape:cy="86.141186"
inkscape:window-width="1728"
inkscape:window-height="1043"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg110" />
<defs
id="defs10">
<g
id="g2" />
<clipPath
id="3bacd8e954">
<path
d="M 11.863281,122.92969 H 113.10938 v 101.0625 H 11.863281 Z m 0,0"
clip-rule="nonzero"
id="path4" />
</clipPath>
<clipPath
id="abfee98d57">
<path
d="m 50.867188,216.45703 h 58.414062 v 35.44922 H 50.867188 Z m 0,0"
clip-rule="nonzero"
id="path7" />
</clipPath>
</defs>
<g
clip-path="url(#3bacd8e954)"
id="g14"
transform="translate(-11.863281,-122.92969)">
<path
fill="#1976d2"
d="M 45.214844,214.47266 C 32.179688,207.12891 23.378906,193.1875 23.378906,177.19531 c 0,-23.6289 19.214844,-42.78906 42.917969,-42.78906 13.101563,0 24.828125,5.85547 32.703125,15.08203 h 14.10938 c -9.49219,-15.90234 -26.902349,-26.55859 -46.812505,-26.55859 -30.0625,0 -54.433594,24.29687 -54.433594,54.26562 0,19.8711 10.710938,37.24219 26.691407,46.69922 l 6.660156,-9.42187"
fill-opacity="1"
fill-rule="nonzero"
id="path12" />
</g>
<g
clip-path="url(#abfee98d57)"
id="g18"
transform="translate(-11.863281,-122.92969)">
<path
fill="#1976d2"
d="m 79.015625,218.07422 c -0.476563,0.14844 -0.953125,0.28906 -1.4375,0.41797 l -26.652344,10.77734 c 1.820313,0.53125 3.675781,0.97266 5.566407,1.31641 l 52.726562,21.32422 -24.984375,-35.34375 c -1.699219,0.61718 -3.441406,1.12109 -5.21875,1.50781"
fill-opacity="1"
fill-rule="nonzero"
id="path16" />
</g>
<path
fill="#d9d9d9"
d="m 58.480469,83.542972 c 15.527344,0 28.113281,-12.54688 28.113281,-28.02344 0,-15.48047 -12.585937,-28.02735 -28.113281,-28.02735 -8.582031,0 -16.261719,3.83204 -21.417969,9.875 h -9.242187 c 6.21875,-10.41406 17.621094,-17.39453 30.660156,-17.39453 19.691406,0 35.65234,15.91407 35.65234,35.54688 0,17.4414 -12.601559,31.95312 -29.226559,34.96875 L 30.371094,104.45312 46.902344,81.062502 c 3.53125,1.59375 7.449219,2.48047 11.578125,2.48047"
fill-opacity="1"
fill-rule="nonzero"
id="path20" />
<path
fill="#1976d2"
d="m 47.800781,54.269532 c 0,2.54297 -2.066406,4.60547 -4.621093,4.60547 -2.550781,0 -4.617188,-2.0625 -4.617188,-4.60547 0,-2.54688 2.066407,-4.60938 4.617188,-4.60938 2.554687,0 4.621093,2.0625 4.621093,4.60938"
fill-opacity="1"
fill-rule="nonzero"
id="path22" />
<path
fill="#1976d2"
d="m 61.714844,54.269532 c 0,2.54297 -2.066406,4.60547 -4.621094,4.60547 -2.550781,0 -4.617187,-2.0625 -4.617187,-4.60547 0,-2.54688 2.066406,-4.60938 4.617187,-4.60938 2.554688,0 4.621094,2.0625 4.621094,4.60938"
fill-opacity="1"
fill-rule="nonzero"
id="path24" />
<path
fill="#1976d2"
d="m 75.628907,54.269532 c 0,2.54297 -2.070313,4.60547 -4.621094,4.60547 -2.550782,0 -4.621094,-2.0625 -4.621094,-4.60547 0,-2.54688 2.070312,-4.60938 4.621094,-4.60938 2.550781,0 4.621094,2.0625 4.621094,4.60938"
fill-opacity="1"
fill-rule="nonzero"
id="path26" />
<path
fill="#1976d2"
d="m 104.62891,40.363282 h 250.01562 v 48.73828 H 104.62891 v -48.73828"
fill-opacity="1"
fill-rule="nonzero"
id="path28" />
<g
fill="#ffffff"
fill-opacity="1"
id="g36"
transform="translate(-11.863281,-122.92969)">
<g
transform="translate(124.78224,199.77909)"
id="g34">
<g
id="g32">
<path
d="m 2.4375,0 0.332031,-24.335938 h 4.507813 v 11.015626 h 9.480468 v -11.015626 h 4.542969 L 21.601562,0 h -4.84375 V -7.746094 H 7.277344 V 0 Z m 0,0"
id="path30" />
</g>
</g>
</g>
<g
fill="#ffffff"
fill-opacity="1"
id="g44"
transform="translate(-11.863281,-122.92969)">
<g
transform="translate(148.85163,199.77909)"
id="g42">
<g
id="g40">
<path
d="m 2.4375,0 0.5,-24.335938 H 7.144531 L 7.445312,0 Z m 0,0"
id="path38" />
</g>
</g>
</g>
<g
fill="#ffffff"
fill-opacity="1"
id="g52"
transform="translate(-11.863281,-122.92969)">
<g
transform="translate(158.7331,199.77909)"
id="g50">
<g
id="g48">
<path
d="m 2.4375,-20.464844 v -3.871094 h 20.796875 v 3.90625 L 15.054688,-20.765625 15.65625,0 h -5.640625 l 0.601563,-20.765625 z m 0,0"
id="path46" />
</g>
</g>
</g>
<g
fill="#ffffff"
fill-opacity="1"
id="g60"
transform="translate(-11.863281,-122.92969)">
<g
transform="translate(184.40489,199.77909)"
id="g58">
<g
id="g56">
<path
d="m 22.300781,-18.027344 c -3.707031,-2.539062 -5.742187,-2.90625 -8.277343,-2.90625 -4.910157,0 -7.046876,3.039063 -7.046876,8.78125 0.066407,4.972656 2.503907,6.609375 7.546876,6.609375 2.535156,0 5.039062,-1.199219 7.777343,-3.703125 v 7.175782 c -2.46875,1.667968 -5.074219,2.539062 -7.945312,2.539062 -7.378907,0 -11.917969,-4.875 -11.917969,-12.621094 0,-7.710937 4.039062,-12.285156 11.417969,-12.621094 2.835937,-0.132812 5.007812,0.03516 8.445312,1.703126 z m 0,0"
id="path54" />
</g>
</g>
</g>
<g
fill="#ffffff"
fill-opacity="1"
id="g68"
transform="translate(-11.863281,-122.92969)">
<g
transform="translate(209.14196,199.77909)"
id="g66">
<g
id="g64">
<path
d="m 2.4375,0 0.332031,-24.335938 h 4.507813 v 11.015626 h 9.480468 v -11.015626 h 4.542969 L 21.601562,0 h -4.84375 V -7.746094 H 7.277344 V 0 Z m 0,0"
id="path62" />
</g>
</g>
</g>
<g
fill="#ffffff"
fill-opacity="1"
id="g76"
transform="translate(-11.863281,-122.92969)">
<g
transform="translate(233.21136,199.77909)"
id="g74">
<g
id="g72">
<path
d="m 17.359375,-8.679688 -3.4375,-10.183593 c -0.265625,0.867187 -0.566406,1.703125 -0.835937,2.539062 -0.265626,0.832031 -0.535157,1.667969 -0.800782,2.46875 -0.300781,0.835938 -0.566406,1.671875 -0.867187,2.539063 -0.265625,0.867187 -0.566407,1.734375 -0.867188,2.636718 z M 2.4375,0 12.050781,-24.335938 h 3.773438 L 25.4375,0 H 19.53125 L 18.664062,-3.773438 H 9.179688 L 8.011719,0 Z m 0,0"
id="path70" />
</g>
</g>
</g>
<g
fill="#ffffff"
fill-opacity="1"
id="g84"
transform="translate(-11.863281,-122.92969)">
<g
transform="translate(261.08647,199.77909)"
id="g82">
<g
id="g80">
<path
d="m 2.4375,-20.464844 v -3.871094 h 20.796875 v 3.90625 L 15.054688,-20.765625 15.65625,0 h -5.640625 l 0.601563,-20.765625 z m 0,0"
id="path78" />
</g>
</g>
</g>
<g
fill="#ffffff"
fill-opacity="1"
id="g92"
transform="translate(-11.863281,-122.92969)">
<g
transform="translate(286.75826,199.77909)"
id="g90">
<g
id="g88">
<path
d="m 2.4375,-20.464844 v -3.871094 h 20.796875 v 3.90625 L 15.054688,-20.765625 15.65625,0 h -5.640625 l 0.601563,-20.765625 z m 0,0"
id="path86" />
</g>
</g>
</g>
<g
fill="#ffffff"
fill-opacity="1"
id="g100"
transform="translate(-11.863281,-122.92969)">
<g
transform="translate(312.43006,199.77909)"
id="g98">
<g
id="g96">
<path
d="m 2.4375,0 v -24.335938 h 15.855469 v 3.871094 H 6.808594 v 5.609375 h 10.984375 v 3.839844 H 6.808594 v 4.972656 H 18.5625 V 0 Z m 0,0"
id="path94" />
</g>
</g>
</g>
<g
fill="#ffffff"
fill-opacity="1"
id="g108"
transform="translate(-11.863281,-122.92969)">
<g
transform="translate(333.42821,199.77909)"
id="g106">
<g
id="g104">
<path
d="m 18.128906,-17.058594 c 0,2.636719 -1.003906,4.574219 -2.773437,5.640625 1.101562,0.835938 2.070312,2.269531 3.074219,4.207031 0.53125,1.035157 1.167968,2.335938 1.835937,3.640626 0.632813,1.265624 1.300781,2.535156 1.800781,3.570312 h -5.875 l -2.46875,-6.308594 v 0.03125 C 12.320312,-9.179688 11.316406,-9.75 9.113281,-9.75 H 7.410156 V 0 H 2.4375 v -24.335938 h 7.679688 c 2.535156,0 4.503906,0.597657 5.875,1.800782 1.402343,1.203125 2.136718,3.039062 2.136718,5.476562 z m -11.019531,-4.40625 v 7.277344 h 3.339844 c 2.101562,0 4.238281,-1.4375 4.238281,-2.871094 0,-3.472656 -2.167969,-4.40625 -4.238281,-4.40625 z m 0,0"
id="path102" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 9.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 36 KiB

238
src/img/logo.svg Normal file
View File

@ -0,0 +1,238 @@
<svg
width="100%"
zoomAndPan="magnify"
viewBox="0 0 354.64453 128.97656"
height="unset"
preserveAspectRatio="xMidYMid"
version="1.0"
id="svg110">
<defs
id="defs10">
<clipPath
id="3bacd8e954">
<path
d="M 11.863281,122.92969 H 113.10938 v 101.0625 H 11.863281 Z m 0,0"
clip-rule="nonzero"
id="path4" />
</clipPath>
<clipPath
id="abfee98d57">
<path
d="m 50.867188,216.45703 h 58.414062 v 35.44922 H 50.867188 Z m 0,0"
clip-rule="nonzero"
id="path7" />
</clipPath>
</defs>
<g
clip-path="url(#3bacd8e954)"
id="g14"
transform="translate(-11.863281,-122.92969)">
<path
fill="#1976d2"
d="M 45.214844,214.47266 C 32.179688,207.12891 23.378906,193.1875 23.378906,177.19531 c 0,-23.6289 19.214844,-42.78906 42.917969,-42.78906 13.101563,0 24.828125,5.85547 32.703125,15.08203 h 14.10938 c -9.49219,-15.90234 -26.902349,-26.55859 -46.812505,-26.55859 -30.0625,0 -54.433594,24.29687 -54.433594,54.26562 0,19.8711 10.710938,37.24219 26.691407,46.69922 l 6.660156,-9.42187"
fill-opacity="1"
fill-rule="nonzero"
id="path12" />
</g>
<g
clip-path="url(#abfee98d57)"
id="g18"
transform="translate(-11.863281,-122.92969)">
<path
fill="#1976d2"
d="m 79.015625,218.07422 c -0.476563,0.14844 -0.953125,0.28906 -1.4375,0.41797 l -26.652344,10.77734 c 1.820313,0.53125 3.675781,0.97266 5.566407,1.31641 l 52.726562,21.32422 -24.984375,-35.34375 c -1.699219,0.61718 -3.441406,1.12109 -5.21875,1.50781"
fill-opacity="1"
fill-rule="nonzero"
id="path16" />
</g>
<path
fill="#d9d9d9"
d="m 58.480469,83.542972 c 15.527344,0 28.113281,-12.54688 28.113281,-28.02344 0,-15.48047 -12.585937,-28.02735 -28.113281,-28.02735 -8.582031,0 -16.261719,3.83204 -21.417969,9.875 h -9.242187 c 6.21875,-10.41406 17.621094,-17.39453 30.660156,-17.39453 19.691406,0 35.65234,15.91407 35.65234,35.54688 0,17.4414 -12.601559,31.95312 -29.226559,34.96875 L 30.371094,104.45312 46.902344,81.062502 c 3.53125,1.59375 7.449219,2.48047 11.578125,2.48047"
fill-opacity="1"
fill-rule="nonzero"
id="path20" />
<path
fill="#1976d2"
d="m 47.800781,54.269532 c 0,2.54297 -2.066406,4.60547 -4.621093,4.60547 -2.550781,0 -4.617188,-2.0625 -4.617188,-4.60547 0,-2.54688 2.066407,-4.60938 4.617188,-4.60938 2.554687,0 4.621093,2.0625 4.621093,4.60938"
fill-opacity="1"
fill-rule="nonzero"
id="path22" />
<path
fill="#1976d2"
d="m 61.714844,54.269532 c 0,2.54297 -2.066406,4.60547 -4.621094,4.60547 -2.550781,0 -4.617187,-2.0625 -4.617187,-4.60547 0,-2.54688 2.066406,-4.60938 4.617187,-4.60938 2.554688,0 4.621094,2.0625 4.621094,4.60938"
fill-opacity="1"
fill-rule="nonzero"
id="path24" />
<path
fill="#1976d2"
d="m 75.628907,54.269532 c 0,2.54297 -2.070313,4.60547 -4.621094,4.60547 -2.550782,0 -4.621094,-2.0625 -4.621094,-4.60547 0,-2.54688 2.070312,-4.60938 4.621094,-4.60938 2.550781,0 4.621094,2.0625 4.621094,4.60938"
fill-opacity="1"
fill-rule="nonzero"
id="path26" />
<path
fill="#1976d2"
d="m 104.62891,40.363282 h 250.01562 v 48.73828 H 104.62891 v -48.73828"
fill-opacity="1"
fill-rule="nonzero"
id="path28" />
<g
fill="#ffffff"
fill-opacity="1"
id="g36"
transform="translate(-11.863281,-122.92969)">
<g
transform="translate(124.78224,199.77909)"
id="g34">
<g
id="g32">
<path
d="m 2.4375,0 0.332031,-24.335938 h 4.507813 v 11.015626 h 9.480468 v -11.015626 h 4.542969 L 21.601562,0 h -4.84375 V -7.746094 H 7.277344 V 0 Z m 0,0"
id="path30" />
</g>
</g>
</g>
<g
fill="#ffffff"
fill-opacity="1"
id="g44"
transform="translate(-11.863281,-122.92969)">
<g
transform="translate(148.85163,199.77909)"
id="g42">
<g
id="g40">
<path
d="m 2.4375,0 0.5,-24.335938 H 7.144531 L 7.445312,0 Z m 0,0"
id="path38" />
</g>
</g>
</g>
<g
fill="#ffffff"
fill-opacity="1"
id="g52"
transform="translate(-11.863281,-122.92969)">
<g
transform="translate(158.7331,199.77909)"
id="g50">
<g
id="g48">
<path
d="m 2.4375,-20.464844 v -3.871094 h 20.796875 v 3.90625 L 15.054688,-20.765625 15.65625,0 h -5.640625 l 0.601563,-20.765625 z m 0,0"
id="path46" />
</g>
</g>
</g>
<g
fill="#ffffff"
fill-opacity="1"
id="g60"
transform="translate(-11.863281,-122.92969)">
<g
transform="translate(184.40489,199.77909)"
id="g58">
<g
id="g56">
<path
d="m 22.300781,-18.027344 c -3.707031,-2.539062 -5.742187,-2.90625 -8.277343,-2.90625 -4.910157,0 -7.046876,3.039063 -7.046876,8.78125 0.066407,4.972656 2.503907,6.609375 7.546876,6.609375 2.535156,0 5.039062,-1.199219 7.777343,-3.703125 v 7.175782 c -2.46875,1.667968 -5.074219,2.539062 -7.945312,2.539062 -7.378907,0 -11.917969,-4.875 -11.917969,-12.621094 0,-7.710937 4.039062,-12.285156 11.417969,-12.621094 2.835937,-0.132812 5.007812,0.03516 8.445312,1.703126 z m 0,0"
id="path54" />
</g>
</g>
</g>
<g
fill="#ffffff"
fill-opacity="1"
id="g68"
transform="translate(-11.863281,-122.92969)">
<g
transform="translate(209.14196,199.77909)"
id="g66">
<g
id="g64">
<path
d="m 2.4375,0 0.332031,-24.335938 h 4.507813 v 11.015626 h 9.480468 v -11.015626 h 4.542969 L 21.601562,0 h -4.84375 V -7.746094 H 7.277344 V 0 Z m 0,0"
id="path62" />
</g>
</g>
</g>
<g
fill="#ffffff"
fill-opacity="1"
id="g76"
transform="translate(-11.863281,-122.92969)">
<g
transform="translate(233.21136,199.77909)"
id="g74">
<g
id="g72">
<path
d="m 17.359375,-8.679688 -3.4375,-10.183593 c -0.265625,0.867187 -0.566406,1.703125 -0.835937,2.539062 -0.265626,0.832031 -0.535157,1.667969 -0.800782,2.46875 -0.300781,0.835938 -0.566406,1.671875 -0.867187,2.539063 -0.265625,0.867187 -0.566407,1.734375 -0.867188,2.636718 z M 2.4375,0 12.050781,-24.335938 h 3.773438 L 25.4375,0 H 19.53125 L 18.664062,-3.773438 H 9.179688 L 8.011719,0 Z m 0,0"
id="path70" />
</g>
</g>
</g>
<g
fill="#ffffff"
fill-opacity="1"
id="g84"
transform="translate(-11.863281,-122.92969)">
<g
transform="translate(261.08647,199.77909)"
id="g82">
<g
id="g80">
<path
d="m 2.4375,-20.464844 v -3.871094 h 20.796875 v 3.90625 L 15.054688,-20.765625 15.65625,0 h -5.640625 l 0.601563,-20.765625 z m 0,0"
id="path78" />
</g>
</g>
</g>
<g
fill="#ffffff"
fill-opacity="1"
id="g92"
transform="translate(-11.863281,-122.92969)">
<g
transform="translate(286.75826,199.77909)"
id="g90">
<g
id="g88">
<path
d="m 2.4375,-20.464844 v -3.871094 h 20.796875 v 3.90625 L 15.054688,-20.765625 15.65625,0 h -5.640625 l 0.601563,-20.765625 z m 0,0"
id="path86" />
</g>
</g>
</g>
<g
fill="#ffffff"
fill-opacity="1"
id="g100"
transform="translate(-11.863281,-122.92969)">
<g
transform="translate(312.43006,199.77909)"
id="g98">
<g
id="g96">
<path
d="m 2.4375,0 v -24.335938 h 15.855469 v 3.871094 H 6.808594 v 5.609375 h 10.984375 v 3.839844 H 6.808594 v 4.972656 H 18.5625 V 0 Z m 0,0"
id="path94" />
</g>
</g>
</g>
<g
fill="#ffffff"
fill-opacity="1"
id="g108"
transform="translate(-11.863281,-122.92969)">
<g
transform="translate(333.42821,199.77909)"
id="g106">
<g
id="g104">
<path
d="m 18.128906,-17.058594 c 0,2.636719 -1.003906,4.574219 -2.773437,5.640625 1.101562,0.835938 2.070312,2.269531 3.074219,4.207031 0.53125,1.035157 1.167968,2.335938 1.835937,3.640626 0.632813,1.265624 1.300781,2.535156 1.800781,3.570312 h -5.875 l -2.46875,-6.308594 v 0.03125 C 12.320312,-9.179688 11.316406,-9.75 9.113281,-9.75 H 7.410156 V 0 H 2.4375 v -24.335938 h 7.679688 c 2.535156,0 4.503906,0.597657 5.875,1.800782 1.402343,1.203125 2.136718,3.039062 2.136718,5.476562 z m -11.019531,-4.40625 v 7.277344 h 3.339844 c 2.101562,0 4.238281,-1.4375 4.238281,-2.871094 0,-3.472656 -2.167969,-4.40625 -4.238281,-4.40625 z m 0,0"
id="path102" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.5 KiB

View File

@ -14,6 +14,7 @@ import { v4 as uuid } from 'uuid'
import { ShellContext } from 'contexts/ShellContext'
import { PeerNameDisplay } from 'components/PeerNameDisplay'
import { ReactComponent as Logo } from 'img/logo.svg'
interface HomeProps {
userId: string
@ -41,6 +42,7 @@ export function Home({ userId }: HomeProps) {
return (
<Box className="Home">
<main className="mt-6 px-4 max-w-3xl text-center mx-auto">
<Logo className="px-1 pb-4 mx-auto max-w-md" />
<form onSubmit={handleFormSubmit} className="max-w-xl mx-auto">
<Typography sx={{ mb: 2 }}>
Your user name:{' '}