Onboarding Ui Changes (#349)

Co-authored-by: [email protected] <[email protected]>
fetchai · Mar 11, 2024 · ccab98c · ccab98c
1 parent 26bd177
commit ccab98c
Show file tree

Hide file tree

Showing 48 changed files with 4,279 additions and 452 deletions.
diff --git a/packages/fetch-extension/src/components-v2/form/password-input.module.scss b/packages/fetch-extension/src/components-v2/form/password-input.module.scss
@@ -1,31 +1,69 @@
 .capslockTooltipArrow {
   left: 10px !important;
 }
-.password-input {
-  margin-top: 32px;
+.text {
+  margin-top: 24px;
+  color: #fff;
+  font-family: Lexend;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px; /* 171.429% */
+  opacity: 0.6;
+}
+.input {
+  background: transparent;
+  margin-bottom: none;
+  color: #fff;
+  font-family: Lexend;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px; /* 171.429% */
+  width: 285px;
+  &:hover {
+    background: transparent;
+    color: white;
+  }
+  &:focus {
+    background: transparent;
+    color: white;
+  }
+  &::placeholder {
+    color: white;
+  }
+}
+.password-input-container {
+  margin-top: 8px;
+  margin-bottom: 20px;
+  width: 333px;
   display: flex;
   height: 56px;
-  flex-direction: column;
-  align-items: flex-start;
-  align-self: stretch;
+  justify-content: space-between;
+  align-items: center;
   background: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 0.1);
   border-radius: 10px;
   color: white;
+  border: 1px solid rgba(255, 255, 255, 0.1);
 
   &:hover {
     background: transparent;
-    width: 333px;
     color: white;
-    border: 1px solid rgba(255, 255, 255, 0.5);
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--Indigo-Indigo-400, #7655fc);
   }
   &:focus {
     background: transparent;
-    width: 333px;
     color: white;
-    border: 1px solid rgba(255, 255, 255, 0.5);
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--Indigo-Indigo-400, #7655fc);
   }
   &::placeholder {
     color: white;
   }
 }
+.eye {
+  margin-right: 12px;
+  cursor: pointer;
+}
diff --git a/packages/fetch-extension/src/components-v2/form/password-input.tsx b/packages/fetch-extension/src/components-v2/form/password-input.tsx
@@ -4,50 +4,68 @@ import stylePasswordInput from "./password-input.module.scss";
 import { Tooltip } from "reactstrap";
 import { FormattedMessage } from "react-intl";
 
+interface PasswordInputProps extends Omit<InputProps & React.InputHTMLAttributes<HTMLInputElement>, "type" | "onKeyUp" | "onKeyDown"> {
+  passwordLabel?: string;
+}
+
 // eslint-disable-next-line react/display-name
-export const PasswordInput = forwardRef<
-  HTMLInputElement,
-  Omit<
-    InputProps & React.InputHTMLAttributes<HTMLInputElement>,
-    "type" | "onKeyUp" | "onKeyDown"
-  >
->((props, ref) => {
+export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>((props, ref) => {
+  const { passwordLabel, ...rest } = props;
   const otherRef = useRef<HTMLInputElement | null>(null);
 
   const [isOnCapsLock, setIsOnCapsLock] = useState(false);
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
 
   return (
     <React.Fragment>
-      <Input
-        style={{ width: "335px" }}
-        className={stylePasswordInput["password-input"]}
-        {...props}
-        type="password"
-        ref={(argRef) => {
-          otherRef.current = argRef;
-          if (ref) {
-            if ("current" in ref) {
-              ref.current = argRef;
+      <div className={stylePasswordInput["text"]}>{passwordLabel || "Password"}</div>
+      <div className={stylePasswordInput["password-input-container"]}>
+        <Input
+          style={{
+            width: "285px",
+            margin: "none",
+            display: "flex",
+            top: "12px",
+          }}
+          className={stylePasswordInput["input"]}
+          {...rest}
+          type={isPasswordVisible ? "text" : "password"}
+          ref={(argRef) => {
+            otherRef.current = argRef;
+            if (ref) {
+              if ("current" in ref) {
+                ref.current = argRef;
+              } else {
+                ref(argRef);
+              }
+            }
+          }}
+          onKeyUp={(e) => {
+            if (e.getModifierState("CapsLock")) {
+              setIsOnCapsLock(true);
             } else {
-              ref(argRef);
+              setIsOnCapsLock(false);
             }
+          }}
+          onKeyDown={(e) => {
+            if (e.getModifierState("CapsLock")) {
+              setIsOnCapsLock(true);
+            } else {
+              setIsOnCapsLock(false);
+            }
+          }}
+        />
+        <img
+          className={stylePasswordInput["eye"]}
+          src={
+            isPasswordVisible
+              ? require("@assets/svg/wireframe/eye-2.svg")
+              : require("@assets/svg/wireframe/eye.svg")
           }
-        }}
-        onKeyUp={(e) => {
-          if (e.getModifierState("CapsLock")) {
-            setIsOnCapsLock(true);
-          } else {
-            setIsOnCapsLock(false);
-          }
-        }}
-        onKeyDown={(e) => {
-          if (e.getModifierState("CapsLock")) {
-            setIsOnCapsLock(true);
-          } else {
-            setIsOnCapsLock(false);
-          }
-        }}
-      />
+          alt=""
+          onClick={() => setIsPasswordVisible(!isPasswordVisible)}
+        />
+      </div>
       {otherRef.current && (
         <Tooltip
           arrowClassName={stylePasswordInput["capslockTooltipArrow"]}

diff --git a/packages/fetch-extension/src/components-v2/search-bar/index.tsx b/packages/fetch-extension/src/components-v2/search-bar/index.tsx
@@ -7,13 +7,15 @@ interface Props {
   valuesArray: any[];
   renderResult: (value: any, index: number) => React.ReactNode;
   onSearchTermChange: (term: string) => void;
+  itemsStyleProp?:any;
 }
 
 export const SearchBar: React.FC<Props> = ({
   searchTerm,
   valuesArray,
   renderResult,
   onSearchTermChange,
+  itemsStyleProp
 }) => {
   const [suggestedValues, setSuggestedValues] = useState<any[]>([]);
 
@@ -49,7 +51,7 @@ export const SearchBar: React.FC<Props> = ({
       />
 
       {suggestedValues.length > 0 && (
-        <div>
+        <div style={itemsStyleProp}>
           {suggestedValues.map((value, index) => (
             <div key={index}>{renderResult(value, index)}</div>
           ))}

diff --git a/packages/fetch-extension/src/components-v2/tabs/tabsPanel-2/style.module.scss b/packages/fetch-extension/src/components-v2/tabs/tabsPanel-2/style.module.scss
@@ -44,6 +44,7 @@
   font-size: 13px;
   align-items: center;
   color: var(--grey-white, #fff);
+  position: fixed;
 }
 
 // .tab-bar {

diff --git a/packages/fetch-extension/src/index.tsx b/packages/fetch-extension/src/index.tsx
@@ -20,7 +20,7 @@ import { LockPage } from "./pages-new/lock";
 // import { MainPage } from "./pages/main";
 import { MainPage } from "./pages-new/main";
 import { MorePage } from "./pages/more";
-import { RegisterPage } from "./pages/register";
+import { RegisterPage } from "./pages-new/register";
 import { SendPage } from "./pages-new/send";
 import { SetKeyRingPage } from "./pages/setting/keyring";
 

diff --git a/packages/fetch-extension/src/layouts-v2/header/chain-list.tsx b/packages/fetch-extension/src/layouts-v2/header/chain-list.tsx
@@ -55,6 +55,7 @@ export const ChainList: FunctionComponent<ChainListProps> = observer(
               onSearchTermChange={setCosmosSearchTerm}
               searchTerm={cosmosSearchTerm}
               valuesArray={mainChainList}
+              itemsStyleProp={{ overflow: "auto", height: "360px" }}
               renderResult={(chainInfo, index) => (
                 <Card
                   key={index}
@@ -248,6 +249,14 @@ export const ChainList: FunctionComponent<ChainListProps> = observer(
             />
             <div style={{ position: "absolute", bottom: "5px", width: "94%" }}>
               <ButtonV2
+                styleProps={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: "338px",
+                  top: "150px",
+                  position: "absolute",
+                }}
                 onClick={(e: any) => {
                   e.preventDefault();
                   navigate("/setting/addEvmChain");

diff --git a/packages/fetch-extension/src/pages-new/lock/index.tsx b/packages/fetch-extension/src/pages-new/lock/index.tsx
@@ -94,22 +94,21 @@ export const LockPage: FunctionComponent = observer(() => {
 
         <div className={style["password-field"]}>
           <div className={style["welcome-text"]}>Welcome back</div>
-          <PasswordInput
-            placeholder="Password"
-            error={errors.password && errors.password.message}
-            {...register("password", {
-              required: intl.formatMessage({
-                id: "lock.input.password.error.required",
-              }),
-            })}
-          />
+          <div className={style["text"]}>Enter your password to sign in</div>
+          <div>
+            <PasswordInput
+              placeholder="Password"
+              error={errors.password && errors.password.message}
+              {...register("password", {
+                required: intl.formatMessage({
+                  id: "lock.input.password.error.required",
+                }),
+              })}
+            />
+          </div>
 
           <Button className={style["sign-in"]} block data-loading={loading}>
             Sign in
-            <img
-              src={require("@assets/svg/wireframe/arrow-right.svg")}
-              alt=""
-            />
           </Button>
         </div>
       </Form>

diff --git a/packages/fetch-extension/src/pages-new/lock/style.module.scss b/packages/fetch-extension/src/pages-new/lock/style.module.scss
@@ -14,7 +14,7 @@
   background-image: url("../../public/assets/svg/wireframe/bg-returning-user.svg");
 }
 .banner {
-  margin-top: 60px;
+  margin-top: 15px;
   width: 108.996px;
   height: 18px;
   flex-shrink: 0;
@@ -25,15 +25,20 @@
   right: 122.5px;
 }
 .password-field {
-  margin-top: 172px;
+  margin-top: 110px;
   display: flex;
-  align-items: center;
-  justify-content: center;
   flex-direction: column;
 }
-
+.text {
+  color: #fff;
+  font-family: Lexend;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 160%; /* 25.6px */
+  opacity: 0.6;
+}
 .welcome-text {
-  text-align: center;
   font-family: Lexend;
   font-size: 24px;
   font-style: normal;
@@ -42,7 +47,7 @@
   letter-spacing: -0.48px;
 
   font-size: 24px;
-  background: linear-gradient(64deg, #cf447b 37.86%, #f9774b 78.96%);
+  background: white;
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;