From 86f4466afbfb72f321e5aac84738a7b90c5cf901 Mon Sep 17 00:00:00 2001
From: Timothy Carambat <rambat1010@gmail.com>
Date: Fri, 6 Sep 2024 12:29:11 -0700
Subject: [PATCH] remove Jazzicons & Add default pfps (#2233)
remove Jazzicons
update pfps
---
frontend/package.json | 3 +-
frontend/src/components/UserIcon/index.jsx | 51 ++++++++++--------
frontend/src/components/UserIcon/user.svg | 12 +++++
.../src/components/UserIcon/workspace.png | Bin 1486 -> 0 bytes
.../src/components/UserIcon/workspace.svg | 20 +++++++
frontend/yarn.lock | 38 +------------
6 files changed, 64 insertions(+), 60 deletions(-)
create mode 100644 frontend/src/components/UserIcon/user.svg
delete mode 100644 frontend/src/components/UserIcon/workspace.png
create mode 100644 frontend/src/components/UserIcon/workspace.svg
diff --git a/frontend/package.json b/frontend/package.json
index 8a60c1109..524f90fa6 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,7 +11,6 @@
"preview": "vite preview"
},
"dependencies": {
- "@metamask/jazzicon": "^2.0.0",
"@microsoft/fetch-event-source": "^2.0.1",
"@mintplex-labs/piper-tts-web": "^1.0.4",
"@phosphor-icons/react": "^2.1.7",
@@ -71,4 +70,4 @@
"tailwindcss": "^3.3.1",
"vite": "^4.3.0"
}
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/UserIcon/index.jsx b/frontend/src/components/UserIcon/index.jsx
index 7fc6b8df6..037a2aff0 100644
--- a/frontend/src/components/UserIcon/index.jsx
+++ b/frontend/src/components/UserIcon/index.jsx
@@ -1,35 +1,42 @@
-import React, { useRef, useEffect } from "react";
-import JAZZ from "@metamask/jazzicon";
+import React, { memo } from "react";
import usePfp from "../../hooks/usePfp";
+import UserDefaultPfp from "./user.svg";
+import WorkspaceDefaultPfp from "./workspace.svg";
-export default function UserIcon({ size = 36, user, role }) {
+const UserIcon = memo(({ role }) => {
const { pfp } = usePfp();
- const divRef = useRef(null);
- const seed = user?.uid
- ? toPseudoRandomInteger(user.uid)
- : Math.floor(100000 + Math.random() * 900000);
-
- useEffect(() => {
- if (!divRef.current || (role === "user" && pfp)) return;
-
- const result = JAZZ(size, seed);
- divRef.current.appendChild(result);
- }, [pfp, role, seed, size]);
return (
<div className="relative w-[35px] h-[35px] rounded-full flex-shrink-0 overflow-hidden">
- <div ref={divRef} />
- {role === "user" && pfp && (
+ {role === "user" && <RenderUserPfp pfp={pfp} />}
+ {role !== "user" && (
<img
- src={pfp}
- alt="User profile picture"
- className="absolute top-0 left-0 w-full h-full object-cover rounded-full bg-white"
+ src={WorkspaceDefaultPfp}
+ alt="system profile picture"
+ className="flex items-center justify-center rounded-full border border-white/40"
/>
)}
</div>
);
+});
+
+function RenderUserPfp({ pfp }) {
+ if (!pfp)
+ return (
+ <img
+ src={UserDefaultPfp}
+ alt="User profile picture"
+ className="rounded-full border-none"
+ />
+ );
+
+ return (
+ <img
+ src={pfp}
+ alt="User profile picture"
+ className="absolute top-0 left-0 w-full h-full object-cover rounded-full border-none"
+ />
+ );
}
-function toPseudoRandomInteger(uidString = "") {
- return uidString.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0);
-}
+export default UserIcon;
diff --git a/frontend/src/components/UserIcon/user.svg b/frontend/src/components/UserIcon/user.svg
new file mode 100644
index 000000000..b0812cd2b
--- /dev/null
+++ b/frontend/src/components/UserIcon/user.svg
@@ -0,0 +1,12 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="16.7969" cy="16.1001" r="16" fill="#2DF4D0"/>
+<mask id="mask0_461_851" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="33" height="33">
+<circle cx="16.7969" cy="16.1001" r="16" fill="#2DF4D0"/>
+</mask>
+<g mask="url(#mask0_461_851)">
+<g opacity="0.7">
+<circle cx="16.7969" cy="13.3476" r="6" fill="#0D2723"/>
+<circle cx="16.7969" cy="33.1397" r="12" fill="#0D2723"/>
+</g>
+</g>
+</svg>
diff --git a/frontend/src/components/UserIcon/workspace.png b/frontend/src/components/UserIcon/workspace.png
deleted file mode 100644
index 537d583c5827cb6112b6d16e91bb28ef46c7ec8f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001
literal 1486
zcmV;<1u^=GP)<h;3K|Lk000e1NJLTq001Qb001Qj1^@s6#hxGo00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1!GA>K~#7F?N)tE
zl~ou&@8#YLmwUN_@*#LZmsoj`Vv#eGH3*rTTXS<mDqWK{TP`bWk+y7-rLJ0Ou0JAe
z*_yh=ooQ&vN66=Zh+3{u0U`zjT;zVkz3+KHPS5k+mtuIiLaYDov;Fp-kLNkh?|II1
z&Up!mNJJtMk%%l<xPPh3$p0uBa%Upi)YQ~i_{IUufJKO;q$Cr3^^7r&+#VeEbpWHP
zA3rV7Hd(D!{XBe!CWOYly}dhJE?2eN<7s!f-5u^A+U>V)*-A@Gt)LfMUS9sU1C?Y<
zZEbD7+wHl6b~Ax?Cr+GrNDV5AEKoEyo9(^;rOeOs3IaT~r@^y7hK3qIZzX0Di2)(B
z)15qdGS}z#yFp)8bOXG)M$m3#)cynL-35pyAxbD*O=+*x)^AzAew__FEltf$g21~t
zO_Y?Fl$f+;O?DoRf8W`8yr>}meQ4SN^4|UXGY;(A->B2+EgrYa(b3-4uGQ-)2N|@a
zXRKJ6x$1tuf6|_@Y}sRiAp8b4UNYYr&CSi#Rh~cp__))}5HPeIumO+*c(|##^@82$
zVt?AlebCPW;C94czd2YlZBwvuW0_W~EyCphYtNoL_YRKV93B~ie!kgkUK}bha~4}y
zR~HcknWKV8s371FE_4HGp%1>lm%sJqyW`{IKYe@on+oVlfSAsouN{mr#1^6crHdEO
zT&=5X6GgEb=6cX}N%B%B&QXCPktmPH6VkVqgb^VS;BXO46GY4#jYdBZ@k2LIUsKcl
zK=zt#JkO(pN!!IsTbCpz??wH_hWe_~oll*H@d3aD)Elj+sE}lilawGuiNSgV2y+V}
z1=~j`lrA645(?93G%`^R7=!gW9}o&aU-!nLBi5|!?Dvq6%i$Q@x&6sgNXTNbObiVT
z@jyzc8A*^B6@e5Lkr0cEiz8mIcmAYs`y}9lk)dEzPN!3e3<#kU+%j(W?%ioyw-wt&
zSvLFJo{86AEjy~$>-#CCV@OCnk!V9iNhHBcDS^&;$ii(OqreIyQ_sfi6T&4VB*d0H
zz3XF{5eqnDue`A5aBFj87tD>q9mi*7WpQc%1g;Gd2v80)FNhMBL&z+l%vtF9`T0bm
zl2YU$B11dF=eDm7>Z1)sJQYY?P4(H1wpJuGcIHCW=IuLoSt~0m4aLR9ijR?z5h4)S
zKFAa=DBCxe>$yom6dWZ|Fx>!%jDsVr0kUWled?^O#2mj^DeTskrmB4}?)d^74Z?V#
zC4I%|2lMjI<rNg%1H|yEz#Y->0YQWM!asEyQo^1-nNqc;7}-)%k{xX{MkSb+Osy*@
zNVF_pejMgFm&-9&_S~~r*!}RdIo)2D7q*ClOZMJpo`31>r5PE=Qqt1g{>e!l)YnQu
zEp%KIf@Gntg>W~z?zQqGMH>nWFV9eCL7QNCO-=e79~?e(puM@V3A%%snVEcFUthwp
zPd+PKwc7gf?XH4$unPlEY~Hv7n!f-%WLCX~dl0#nhVQ%^9xY5a7)@C+RI?<@oFq%|
zWdv@6sZ$?)c(k#ux&;XVd=7_0f@?th+V*8n&f0Zx=J<phiOEco&`u^I*b0<RU9GPE
z^xBV|osuLuz)o05rf?2_J<=Z8v?)iJq$b8Or3T@2GyCY6<9g4p1JE6YljiE~?xr}0
z4>SA)n1Eo)-K$rxN=!~ok!3k*+HP!Q*xBFPd&6Wh4f}jPXDCwS4y2+~VkriLAw4E0
zW;wJG=|~o^2;WFDBRKWf1<A*P<7CvGVV40&owieTLplyeO06NqiDuR~ilnwfz4DqF
owlhUm^<@%~h(shJ5&7@rFSk<l5#I9B$^ZZW07*qoM6N<$g1wrz`Tzg`
diff --git a/frontend/src/components/UserIcon/workspace.svg b/frontend/src/components/UserIcon/workspace.svg
new file mode 100644
index 000000000..6a24de58b
--- /dev/null
+++ b/frontend/src/components/UserIcon/workspace.svg
@@ -0,0 +1,20 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_461_727)">
+<path d="M26.6598 11.8883V20.5241C26.6598 21.5617 25.8155 22.406 24.7776 22.406H21.3764C20.8056 22.406 20.2725 22.1515 19.9134 21.7077L18.4667 19.9183C18.2926 19.7031 18.2909 19.4012 18.4624 19.184L18.9852 18.5222C19.0975 18.38 19.2656 18.2984 19.4469 18.2984C19.6281 18.2984 19.7944 18.3791 19.9068 18.5202L21.3014 20.2733C21.3689 20.3578 21.4695 20.4063 21.5775 20.4063H24.1887C24.4484 20.4063 24.6599 20.1949 24.6599 19.9352V12.4772C24.6599 12.2172 24.4484 12.0061 24.1887 12.0061H21.5752C21.4672 12.0061 21.3666 12.0544 21.2991 12.1388L13.6771 21.6973C13.3177 22.1477 12.7814 22.406 12.2055 22.406H8.81083C7.77323 22.406 6.92896 21.5617 6.92896 20.5241V11.8883C6.92896 10.8504 7.77323 10.0062 8.81083 10.0062H12.2302C12.8101 10.0062 13.3488 10.2676 13.7081 10.7235L15.0956 12.4945C15.2648 12.7093 15.2645 13.009 15.0948 13.2235L14.5682 13.8889C14.4562 14.0305 14.2881 14.1121 14.1072 14.1121C13.9262 14.1121 13.7596 14.0313 13.6472 13.8903L12.2563 12.1388C12.1891 12.0544 12.0885 12.0061 11.9805 12.0061H9.39973C9.14004 12.0061 8.92861 12.2172 8.92861 12.4772V19.9352C8.92861 20.1949 9.14004 20.4063 9.39973 20.4063H11.9794C12.0874 20.4063 12.1879 20.3578 12.2552 20.2736L19.8809 10.7146C20.24 10.2644 20.7763 10.0062 21.3523 10.0062H24.7776C25.8155 10.0062 26.6598 10.8504 26.6598 11.8883Z" fill="url(#paint0_linear_461_727)"/>
+</g>
+<defs>
+<filter id="filter0_d_461_727" x="5.20838" y="8.41809" width="23.9657" height="16.6347" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.396858" dy="0.529359"/>
+<feGaussianBlur stdDeviation="1.05872"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_461_727"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_461_727" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_461_727" x1="16.7942" y1="22.406" x2="16.7942" y2="10.0062" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AABBC2"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 4a56e4f92..475910ac4 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -483,14 +483,6 @@
"@jridgewell/resolve-uri" "^3.1.0"
"@jridgewell/sourcemap-codec" "^1.4.14"
-"@metamask/jazzicon@^2.0.0":
- version "2.0.0"
- resolved "https://registry.yarnpkg.com/@metamask/jazzicon/-/jazzicon-2.0.0.tgz#5615528e91c0fc5c9d79202d1f0954a7922525a0"
- integrity sha512-7M+WSZWKcQAo0LEhErKf1z+D3YX0tEDAcGvcKbDyvDg34uvgeKR00mFNIYwAhdAS9t8YXxhxZgsrRBBg6X8UQg==
- dependencies:
- color "^0.11.3"
- mersenne-twister "^1.1.0"
-
"@microsoft/fetch-event-source@^2.0.1":
version "2.0.1"
resolved "https://registry.yarnpkg.com/@microsoft/fetch-event-source/-/fetch-event-source-2.0.1.tgz#9ceecc94b49fbaa15666e38ae8587f64acce007d"
@@ -1097,11 +1089,6 @@ cliui@^8.0.1:
strip-ansi "^6.0.1"
wrap-ansi "^7.0.0"
-clone@^1.0.2:
- version "1.0.4"
- resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
- integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
-
clsx@^1.1.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
@@ -1112,7 +1099,7 @@ clsx@^2.0.0:
resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
-color-convert@^1.3.0, color-convert@^1.9.0:
+color-convert@^1.9.0:
version "1.9.3"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -1131,27 +1118,11 @@ color-name@1.1.3:
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
-color-name@^1.0.0, color-name@~1.1.4:
+color-name@~1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
-color-string@^0.3.0:
- version "0.3.0"
- resolved "https://registry.yarnpkg.com/color-string/-/color-string-0.3.0.tgz#27d46fb67025c5c2fa25993bfbf579e47841b991"
- integrity sha512-sz29j1bmSDfoAxKIEU6zwoIZXN6BrFbAMIhfYCNyiZXBDuU/aiHlN84lp/xDzL2ubyFhLDobHIlU1X70XRrMDA==
- dependencies:
- color-name "^1.0.0"
-
-color@^0.11.3:
- version "0.11.4"
- resolved "https://registry.yarnpkg.com/color/-/color-0.11.4.tgz#6d7b5c74fb65e841cd48792ad1ed5e07b904d764"
- integrity sha512-Ajpjd8asqZ6EdxQeqGzU5WBhhTfJ/0cA4Wlbre7e5vXfmDSmda7Ov6jeKoru+b0vHcb1CqvuroTHp5zIWzhVMA==
- dependencies:
- clone "^1.0.2"
- color-convert "^1.3.0"
- color-string "^0.3.0"
-
commander@^4.0.0:
version "4.1.1"
resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
@@ -2545,11 +2516,6 @@ merge2@^1.3.0:
resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
-mersenne-twister@^1.1.0:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/mersenne-twister/-/mersenne-twister-1.1.0.tgz#f916618ee43d7179efcf641bec4531eb9670978a"
- integrity sha512-mUYWsMKNrm4lfygPkL3OfGzOPTR2DBlTkBNHM//F6hGp8cLThY897crAlk3/Jo17LEOOjQUrNAx6DvgO77QJkA==
-
micromatch@^4.0.4, micromatch@^4.0.5:
version "4.0.7"
resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.7.tgz#33e8190d9fe474a9895525f5618eee136d46c2e5"