From ee2e4d4ac993ada48bd0c1290d947722ea7f1c37 Mon Sep 17 00:00:00 2001
From: Adesojisouljay <adesojiisrael@gmail.com>
Date: Tue, 13 Aug 2024 10:13:29 +0100
Subject: [PATCH 1/2] refactor steps

---
 src/common/pages/_sign-up.scss |  41 +++++++++++-
 src/common/pages/sign-up.tsx   | 115 +++++++++++++++++++++++++--------
 2 files changed, 129 insertions(+), 27 deletions(-)

diff --git a/src/common/pages/_sign-up.scss b/src/common/pages/_sign-up.scss
index d061ef80019..c6ad70b196d 100644
--- a/src/common/pages/_sign-up.scss
+++ b/src/common/pages/_sign-up.scss
@@ -37,9 +37,48 @@
         // background-color: red;
         
         @media (max-width: 470px) {
-          // margin-top: 100px;
           width: 100%;
         }
+
+        .keychain-ext{
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          background-color: #161d26;
+          border-radius: 30px;
+          width: 100%;
+          padding: 20px;
+
+          .ul{
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 20px;
+            width: 100%;
+            list-style: none;
+
+            @media (max-width: 470px) {
+              flex-direction: column;
+              width: 100%;
+              padding: 15px;
+            }
+
+            .kc-list{
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              gap: 10px;
+
+              img{
+                width: 50px;
+              }
+
+              .a-c{
+                width: 100px;
+              }
+            }
+          }
+        }
   
         .account-details{
           display: flex;
diff --git a/src/common/pages/sign-up.tsx b/src/common/pages/sign-up.tsx
index 296eb66cbb3..a1678b92c53 100644
--- a/src/common/pages/sign-up.tsx
+++ b/src/common/pages/sign-up.tsx
@@ -223,10 +223,18 @@ const SignUpPage = (props: Props | any) => {
       style={{ marginRight: "6px" }}
     />
   );
+
   let containerClasses = global.isElectron
     ? "app-content sign-up-page mb-lg-0 mt-0 pt-6"
     : "app-content sign-up-page mb-lg-0";
 
+    const formatString = (str: string)=> {
+      const first10 = str.substring(0, 10);
+      const last10 = str.substring(str.length - 10);
+    
+      return `${first10}...${last10}`;
+    }
+
   return (
     <>
       <Meta {...metaProps} />
@@ -386,20 +394,68 @@ const SignUpPage = (props: Props | any) => {
                   <div className="success-wrapper">
                     <div className="success-info">
                       <h3>Account creation steps</h3>
-                      <p>
+                      <strong style={{textAlign: "center"}}>
                         Please make sure you have keychain installed as an
                         extension on your browser (If you are a using the web
                         browser, we recommend that you pin it to your browser.)
-                      </p>
+                      </strong>
                       <h3>
-                      <a
-                        className="ml-1"
-                        href="https://hive-keychain.com/"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        download keychain extension here
-                      </a>
+                      <div className="keychain-ext">
+                        <p>Download the Hive Keychain extension for your preferred device:</p>
+                        <ul className="ul">
+                          <li className="kc-list">
+                            <img className="a-c" src="https://hive-keychain.com/img/browsers/android.svg" alt="" />
+                            <a
+                              href="https://play.google.com/store/apps/details?id=com.mobilekeychain"
+                              target="_blank"
+                              rel="noopener noreferrer"
+                            >
+                              Android
+                            </a>
+                          </li>
+                          <li className="kc-list">
+                            <img className="a-c" src="https://hive-keychain.com/img/browsers/ios.svg" alt="" />
+                            <a
+                              href="https://apps.apple.com/us/app/hive-keychain/id1552190010"
+                              target="_blank"
+                              rel="noopener noreferrer"
+                            >
+                              Apple
+                            </a>
+                          </li>
+                          <li className="kc-list">
+                            <img src="https://hive-keychain.com/img/browsers/chrome.svg" alt="" />
+                            <a
+                              href="https://chrome.google.com/webstore/detail/hive-keychain/jcacnejopjdphbnjgfaaobbfafkihpep?hl=en"
+                              target="_blank"
+                              rel="noopener noreferrer"
+                            >
+                              Chrome
+                            </a>
+                          </li>
+                          <li className="kc-list">
+                            <img src="https://hive-keychain.com/img/browsers/firefox.svg" alt="" />
+                            <a
+                              href="https://addons.mozilla.org/en-US/firefox/addon/hive-keychain/"
+                              target="_blank"
+                              rel="noopener noreferrer"
+                            >
+                              Mozilla
+                            </a>
+                          </li>
+                          <li className="kc-list">
+                            <img src="https://hive-keychain.com/img/browsers/brave.svg" alt="" />
+                            <a
+                              href="https://chrome.google.com/webstore/detail/hive-keychain/jcacnejopjdphbnjgfaaobbfafkihpep?hl=en"
+                              target="_blank"
+                              rel="noopener noreferrer"
+                            >
+                              Brave
+                            </a>
+                          </li>
+                        </ul>
+                      </div>
+
                       </h3>
                       <div className="account-details">
                         <span style={{ lineHeight: 2 }}>
@@ -459,27 +515,34 @@ const SignUpPage = (props: Props | any) => {
                           <div className="account-password">
                             <div className="d-flex flex-column align-items-center mb-5">
                               <h3 className="mt-2">Step 3</h3>
-                              <span>
+                              <h4 style={{textAlign: "center"}}>
                                 Confirm if your friend has created your account,
                                 then check your email for instructions on setting
                                 up your account
-                              </span>
-                              <h4 className="text-danger">
-                                Copy your master password below and paste to
-                                keychain to set up your account
                               </h4>
-                              <div className="password">
-                                <strong>{accountPassword}</strong>
-                                <span
-                                  className="icon"
-                                  onClick={() => {
-                                    clipboard(accountPassword);
-                                    success(_t("onboard.key-copied"));
-                                  }}
+                              {global.isMobile && <h4 className="text-danger" style={{textAlign: "center"}}>
+                                  Click the button below to copy your master password and paste to
+                                  keychain to set up your account
+                                </h4>}
+                              <Button
+                                style={{textAlign: "center"}}
+                                className="d-flex flex-column align-items-center mt-3 p-3"
+                                onClick={() => {
+                                  clipboard(accountPassword);
+                                  success(_t("onboard.key-copied"));
+                                }}
                                 >
-                                  {copyContent}
-                                </span>
-                              </div>
+                                {!global.isMobile && <h4 className="text-danger">
+                                  Copy your master password below and paste to
+                                  keychain to set up your account
+                                </h4>}
+                                <div className="password">
+                                  {global.isMobile ? 
+                                  <strong>{formatString(accountPassword)}</strong> :
+                                  <strong>{accountPassword}</strong>
+                                }
+                                </div>
+                              </Button>
                             </div>
                           </div>
                         </div>

From 84a84002a65218b3298e32a9536ab9ee6923635e Mon Sep 17 00:00:00 2001
From: Adesojisouljay <adesojiisrael@gmail.com>
Date: Mon, 30 Sep 2024 20:43:22 +0100
Subject: [PATCH 2/2] update text

---
 src/common/pages/sign-up.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/pages/sign-up.tsx b/src/common/pages/sign-up.tsx
index a1678b92c53..ae0d4f9fbf6 100644
--- a/src/common/pages/sign-up.tsx
+++ b/src/common/pages/sign-up.tsx
@@ -533,7 +533,7 @@ const SignUpPage = (props: Props | any) => {
                                 }}
                                 >
                                 {!global.isMobile && <h4 className="text-danger">
-                                  Copy your master password below and paste to
+                                  Click to opy your master password below and paste to
                                   keychain to set up your account
                                 </h4>}
                                 <div className="password">