chore: remove bitcoin design icons

getAlby · Feb 14, 2024 · 552407a · 552407a
1 parent 2f1d514
commit 552407a
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 16 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -14,7 +14,6 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@bitcoin-design/bitcoin-icons-react": "^0.1.10",
     "@popicons/react": "^0.0.9",
     "@scure/bip39": "^1.2.2",
     "react": "^18.2.0",

diff --git a/frontend/src/components/PasswordAdornment.tsx b/frontend/src/components/PasswordAdornment.tsx
@@ -1,7 +1,6 @@
-import {
-  HiddenIcon,
-  VisibleIcon,
-} from "@bitcoin-design/bitcoin-icons-react/outline";
+import { PopiconsEyeLine } from "@popicons/react";
+import { EyeCrossedLine } from "src/components/icons/EyeCrossedLine";
+
 import { useEffect, useState } from "react";
 
 type Props = {
@@ -30,9 +29,9 @@ export default function PasswordViewAdornment({ onChange, isRevealed }: Props) {
       }}
     >
       {_isRevealed ? (
-        <VisibleIcon className="h-6 w-6" />
+        <PopiconsEyeLine className="h-5 w-5 text-gray-600" />
       ) : (
-        <HiddenIcon className="h-6 w-6" />
+        <EyeCrossedLine className="h-5 w-5 text-gray-600" />
       )}
     </button>
   );

diff --git a/frontend/src/components/icons/EyeCrossedLine.tsx b/frontend/src/components/icons/EyeCrossedLine.tsx
@@ -0,0 +1,35 @@
+import { SVGAttributes } from "react";
+
+export function EyeCrossedLine(props: SVGAttributes<SVGElement>) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M17.0756 16.4476C15.5067 17.7291 13.2205 18.635 10 18.635C6.11297 18.635 3.58698 17.3153 2.04049 15.6083C0.5183 13.9281 0 11.9327 0 10.635C0 9.33733 0.5183 7.34191 2.04049 5.66172C2.69273 4.94179 3.5192 4.29074 4.54852 3.77854L5.67235 4.91511C4.58978 5.37478 3.78008 5.99485 3.17925 6.65804C1.93013 8.03681 1.52468 9.66682 1.52468 10.635C1.52468 11.6032 1.93013 13.2332 3.17925 14.612C4.40408 15.9639 6.49692 17.1367 10 17.1367C12.8258 17.1367 14.7339 16.3736 16.009 15.3689L17.0756 16.4476Z"
+        fill="currentColor"
+      />
+      <path
+        d="M18.0481 15.5089C19.5019 13.8499 20 11.9072 20 10.635C20 9.33733 19.4817 7.34191 17.9595 5.66172C16.413 3.95472 13.887 2.63501 10 2.63501C8.43281 2.63501 7.08687 2.84954 5.93717 3.21748L7.14148 4.43974C7.97042 4.24522 8.91793 4.13333 10 4.13333C13.5031 4.13333 15.5959 5.30608 16.8208 6.65804C18.0699 8.03681 18.4753 9.66682 18.4753 10.635C18.4753 11.5602 18.1051 13.0898 16.9821 14.427L18.0481 15.5089Z"
+        fill="currentColor"
+      />
+      <path
+        d="M13.7641 11.161C13.7838 10.9873 13.7934 10.8116 13.7934 10.635C13.7934 9.65487 13.4962 8.69985 12.8333 7.9814C12.1604 7.25199 11.1856 6.84815 10 6.84815C9.84139 6.84815 9.68655 6.85537 9.53571 6.86964L13.7641 11.161Z"
+        fill="currentColor"
+      />
+      <path
+        d="M8.03746 7.30702C7.70861 7.48416 7.41679 7.71029 7.16667 7.9814C6.50383 8.69985 6.20655 9.65487 6.20655 10.635C6.20655 11.6152 6.50383 12.5702 7.16667 13.2886C7.83961 14.018 8.8144 14.4219 10 14.4219C11.1856 14.4219 12.1604 14.018 12.8333 13.2886C13.0188 13.0876 13.1756 12.868 13.3054 12.6346L12.0683 11.3836C11.9786 11.7058 11.8297 11.9766 11.6354 12.1872C11.3152 12.5343 10.8004 12.7961 10 12.7961C9.19961 12.7961 8.68478 12.5343 8.36461 12.1872C8.03435 11.8293 7.83515 11.2972 7.83515 10.635C7.83515 9.97277 8.03435 9.44076 8.36461 9.08278C8.57526 8.85447 8.87015 8.66303 9.27519 8.55877L8.03746 7.30702Z"
+        fill="currentColor"
+      />
+      <path
+        d="M18.0474 18.291C18.2636 18.0756 18.3077 17.7531 18.1796 17.4939L3.78294 2.99892L2.99024 2.20361C2.72032 1.93281 2.28193 1.93203 2.01105 2.20187C1.74017 2.4717 1.73938 2.90998 2.0093 3.18078L17.0682 18.2892C17.3381 18.56 17.7765 18.5608 18.0474 18.291Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/frontend/src/screens/Start.tsx b/frontend/src/screens/Start.tsx
@@ -7,9 +7,11 @@ import { handleRequestError } from "src/utils/handleRequestError";
 import { useInfo } from "src/hooks/useInfo";
 import Container from "src/components/Container";
 import Input from "src/components/Input";
+import PasswordViewAdornment from "src/components/PasswordAdornment";
 
 export default function Start() {
   const [unlockPassword, setUnlockPassword] = React.useState("");
+  const [passwordVisible, setPasswordVisible] = React.useState(false);
   const [loading, setLoading] = React.useState(false);
   const navigate = useNavigate();
   const { data: csrf } = useCSRF();
@@ -55,8 +57,15 @@ export default function Start() {
               name="unlock"
               onChange={(e) => setUnlockPassword(e.target.value)}
               value={unlockPassword}
-              type="password"
+              type={passwordVisible ? "text" : "password"}
               placeholder="Password"
+              endAdornment={
+                <PasswordViewAdornment
+                  onChange={(passwordView) => {
+                    setPasswordVisible(passwordView);
+                  }}
+                />
+              }
             />
             <ConnectButton isConnecting={loading} />
           </>

diff --git a/frontend/src/screens/Unlock.tsx b/frontend/src/screens/Unlock.tsx
@@ -7,9 +7,11 @@ import { handleRequestError } from "src/utils/handleRequestError";
 import { useInfo } from "src/hooks/useInfo";
 import Container from "src/components/Container";
 import Input from "src/components/Input";
+import PasswordViewAdornment from "src/components/PasswordAdornment";
 
 export default function Unlock() {
   const [unlockPassword, setUnlockPassword] = React.useState("");
+  const [passwordVisible, setPasswordVisible] = React.useState(false);
   const [loading, setLoading] = React.useState(false);
   const navigate = useNavigate();
   const location = useLocation();
@@ -63,8 +65,15 @@ export default function Unlock() {
               name="unlock"
               onChange={(e) => setUnlockPassword(e.target.value)}
               value={unlockPassword}
-              type="password"
+              type={passwordVisible ? "text" : "password"}
               placeholder="Password"
+              endAdornment={
+                <PasswordViewAdornment
+                  onChange={(passwordView) => {
+                    setPasswordVisible(passwordView);
+                  }}
+                />
+              }
             />
             <ConnectButton isConnecting={loading} />
           </>

diff --git a/frontend/src/screens/setup/SetupPassword.tsx b/frontend/src/screens/setup/SetupPassword.tsx
@@ -7,10 +7,14 @@ import Container from "src/components/Container";
 import Alert from "src/components/Alert";
 import toast from "src/components/Toast";
 import Input from "src/components/Input";
+import PasswordViewAdornment from "src/components/PasswordAdornment";
 
 export function SetupPassword() {
   const store = useSetupStore();
   const [confirmPassword, setConfirmPassword] = React.useState("");
+  const [passwordVisible, setPasswordVisible] = React.useState(false);
+  const [confirmPasswordVisible, setConfirmPasswordVisible] =
+    React.useState(false);
   const navigate = useNavigate();
   const { data: info } = useInfo();
 
@@ -48,13 +52,20 @@ export function SetupPassword() {
               New Password
             </label>
             <Input
-              type="password"
+              type={passwordVisible ? "text" : "password"}
               name="unlock-password"
               id="unlock-password"
               placeholder="Enter a password"
               value={store.unlockPassword}
               onChange={(e) => store.setUnlockPassword(e.target.value)}
               required={true}
+              endAdornment={
+                <PasswordViewAdornment
+                  onChange={(passwordView) => {
+                    setPasswordVisible(passwordView);
+                  }}
+                />
+              }
             />
           </div>
           <div className="w-full mb-8 ">
@@ -65,13 +76,20 @@ export function SetupPassword() {
               Confirm Password
             </label>
             <Input
-              type="password"
+              type={confirmPasswordVisible ? "text" : "password"}
               name="confirm-password"
               id="confirm-password"
               placeholder="Re-enter the password"
               value={confirmPassword}
               onChange={(e) => setConfirmPassword(e.target.value)}
               required={true}
+              endAdornment={
+                <PasswordViewAdornment
+                  onChange={(passwordView) => {
+                    setConfirmPasswordVisible(passwordView);
+                  }}
+                />
+              }
             />
           </div>
 

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -12,11 +12,6 @@
   resolved "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz"
   integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
 
-"@bitcoin-design/bitcoin-icons-react@^0.1.10":
-  version "0.1.10"
-  resolved "https://registry.yarnpkg.com/@bitcoin-design/bitcoin-icons-react/-/bitcoin-icons-react-0.1.10.tgz#11acf1d386c1094d3eff673ca236345860762f64"
-  integrity sha512-f7GSutKHa4EK4LWI/phnGCJsN8fzFbVAVQ4F1MYxiza34LVmXmbgHUmdP/BR8ZeQSIbZLt19inpJZDBtQvYe4Q==
-
 "@esbuild/android-arm64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622"