UI Improvements (#122)

src/components/common/Tabs.js

@@ -123,17 +123,6 @@ export const Tabs = ({
                     successSBT ? 'h-[75rem]' : 'h-full'
                   } w-[38%] -z-50`}
                 />
-                <div className="lg:mx-auto lg:max-w-7xl w-full h-3 absolute top-0 left-1/2 transform -translate-x-1/2">
-                  <div
-                    className={`bg-purple-600 h-3 ${
-                      activeTabIndex === 0
-                        ? 'w-1/3'
-                        : tabs.length === activeTabIndex + 1
-                        ? 'w-3/3'
-                        : 'w-2/3'
-                    } rounded`}
-                  />
-                </div>
                 {tabs.map((tab, index) => (
                   <>
                     <div

src/components/common/TokenDetails.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import dayjs from 'dayjs';
+import { TWITTER_URL } from '../../utils/constants';
 
 export const ValidTokenComponent = () => {
   return (
@@ -60,6 +61,18 @@ export const TokenDetails = ({ tokenID, issuedDate, expireDate }) => {
           {Math.abs(dayjs(expireDate).diff(Date.now(), 'days'))}
         </p>
       </div>
+      <div className="flex items-center">
+        <a
+          target="_blank"
+          rel="noreferrer"
+          class="twitter-share-button"
+          href={TWITTER_URL}
+          data-size="large"
+          className="w-full md:w-max rounded-md border border-transparent bg-gradient-to-r from-purple-600 to-indigo-600 bg-origin-border px-4 py-2 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
+        >
+          <p className="mx-auto w-[fit-content]">Share on Twitter</p>
+        </a>
+      </div>
     </div>
   );
 };

src/components/pages/landing/FractalVerification.js

@@ -171,6 +171,7 @@ export const ScanFace = ({ setActiveTabIndex }) => {
   const { responseData } = useSelector((state) => state.oracle);
   const [error, setError] = useState(null);
   const dispatch = useDispatch();
+  const [isUserRedirected, setUserRedirect] = useState(false);
 
   // try again is called when verifyUser throws error at Tabs screen
   async function tryAgainAction() {
@@ -233,7 +234,7 @@ export const ScanFace = ({ setActiveTabIndex }) => {
     if (checkForSubAccounts()) {
       return;
     }
-    setSubmit(true);
+    setUserRedirect(true);
     const { fractal_link, fractal_client_id, succes_fractal_state } =
       getConfig();
     const fractalVerifyURL =
@@ -251,7 +252,6 @@ export const ScanFace = ({ setActiveTabIndex }) => {
       event_log: 'Fractal: User begins their Face scan',
     });
     window.open(fractalVerifyURL, '_blank');
-    // showing processing screen since we open the verify URL in new tab
   };
 
   useEffect(() => {
@@ -304,6 +304,8 @@ export const ScanFace = ({ setActiveTabIndex }) => {
             <p className="mx-auto w-[fit-content]">
               {isApprovalAwait || error
                 ? 'Try Again'
+                : isUserRedirected
+                ? 'Verify Your Uniqueness with Fractal'
                 : 'Start Face Scan with Fractal'}
             </p>
           )}

src/components/pages/landing/FractalVerification/Success.js

@@ -7,7 +7,6 @@ import {
   ValidTokenComponent,
 } from '../../../common/TokenDetails';
 import ReactConfetti from 'react-confetti';
-import { TWITTER_URL } from '../../../../utils/constants';
 
 export const SuccesVerification = () => {
   const [showTooltip, setShowtooltip] = useState(false);
@@ -62,7 +61,7 @@ export const SuccesVerification = () => {
           {fvTokens && (
             <Item imageSrc={FVSBTImage}>
               <ValidTokenComponent />
-              <h2 className="font-bold text-3xl my-1">
+              <h2 className="font-bold text-3xl my-1 mb-5">
                 My Face Verification Soul Bound Token
               </h2>
               <TokenDetails
@@ -75,7 +74,7 @@ export const SuccesVerification = () => {
           {kycTokens && (
             <Item imageSrc={KYCSBTImage}>
               <ValidTokenComponent />
-              <h2 className="font-bold text-3xl my-1">
+              <h2 className="font-bold text-3xl my-1 mb-5">
                 My KYC Soul Bound Token
               </h2>
               <TokenDetails
@@ -86,19 +85,6 @@ export const SuccesVerification = () => {
             </Item>
           )}
         </div>
-
-        <div className="flex items-center">
-          <a
-            target="_blank"
-            rel="noreferrer"
-            class="twitter-share-button"
-            href={TWITTER_URL}
-            data-size="large"
-            className="w-full md:w-max rounded-md border border-transparent bg-gradient-to-r from-purple-600 to-indigo-600 bg-origin-border px-4 py-2 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
-          >
-            <p className="mx-auto w-[fit-content]">Share on Twitter</p>
-          </a>
-        </div>
       </div>
 
       <p className="text-s mt-8">

src/images/WalletSVG.js

@@ -1,12 +1,13 @@
 export const WalletSVG = ({ styles = '' }) => (
   <svg
-    xmlns="http://www.w3.org/2000/svg"
+    width="100"
+    height="100"
+    viewBox="0 0 100 100"
     fill="none"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
+    xmlns="http://www.w3.org/2000/svg"
     stroke="currentColor"
     class={styles}
   >
-    <path d="M20.25 6.75H5.25C5.05109 6.75 4.86032 6.67098 4.71967 6.53033C4.57902 6.38968 4.5 6.19891 4.5 6C4.5 5.80109 4.57902 5.61032 4.71967 5.46967C4.86032 5.32902 5.05109 5.25 5.25 5.25H18C18.1989 5.25 18.3897 5.17098 18.5303 5.03033C18.671 4.88968 18.75 4.69891 18.75 4.5C18.75 4.30109 18.671 4.11032 18.5303 3.96967C18.3897 3.82902 18.1989 3.75 18 3.75H5.25C4.65402 3.75247 4.08316 3.99031 3.66174 4.41174C3.24031 4.83316 3.00247 5.40402 3 6V18C3.00247 18.596 3.24031 19.1668 3.66174 19.5883C4.08316 20.0097 4.65402 20.2475 5.25 20.25H20.25C20.6478 20.25 21.0294 20.092 21.3107 19.8107C21.592 19.5294 21.75 19.1478 21.75 18.75V8.25C21.75 7.85218 21.592 7.47064 21.3107 7.18934C21.0294 6.90804 20.6478 6.75 20.25 6.75ZM16.875 14.625C16.6525 14.625 16.435 14.559 16.25 14.4354C16.065 14.3118 15.9208 14.1361 15.8356 13.9305C15.7505 13.725 15.7282 13.4988 15.7716 13.2805C15.815 13.0623 15.9222 12.8618 16.0795 12.7045C16.2368 12.5472 16.4373 12.44 16.6555 12.3966C16.8738 12.3532 17.1 12.3755 17.3055 12.4606C17.5111 12.5458 17.6868 12.69 17.8104 12.875C17.934 13.06 18 13.2775 18 13.5C18 13.7984 17.8815 14.0845 17.6705 14.2955C17.4595 14.5065 17.1734 14.625 16.875 14.625Z" />
+    <path d="M84.375 28.125H21.875C21.0462 28.125 20.2513 27.7958 19.6653 27.2097C19.0792 26.6237 18.75 25.8288 18.75 25C18.75 24.1712 19.0792 23.3763 19.6653 22.7903C20.2513 22.2042 21.0462 21.875 21.875 21.875H75C75.8288 21.875 76.6237 21.5458 77.2097 20.9597C77.7958 20.3737 78.125 19.5788 78.125 18.75C78.125 17.9212 77.7958 17.1263 77.2097 16.5403C76.6237 15.9542 75.8288 15.625 75 15.625H21.875C19.3918 15.6353 17.0132 16.6263 15.2572 18.3822C13.5013 20.1382 12.5103 22.5168 12.5 25V75C12.5103 77.4832 13.5013 79.8618 15.2572 81.6178C17.0132 83.3737 19.3918 84.3647 21.875 84.375H84.375C86.0326 84.375 87.6223 83.7165 88.7944 82.5444C89.9665 81.3723 90.625 79.7826 90.625 78.125V34.375C90.625 32.7174 89.9665 31.1277 88.7944 29.9556C87.6223 28.7835 86.0326 28.125 84.375 28.125ZM70.3125 60.9375C69.3854 60.9375 68.4791 60.6626 67.7083 60.1475C66.9374 59.6324 66.3366 58.9004 65.9818 58.0438C65.627 57.1873 65.5342 56.2448 65.7151 55.3355C65.8959 54.4262 66.3424 53.591 66.9979 52.9354C67.6535 52.2799 68.4887 51.8334 69.398 51.6526C70.3073 51.4717 71.2498 51.5645 72.1063 51.9193C72.9629 52.2741 73.6949 52.8749 74.21 53.6458C74.7251 54.4166 75 55.3229 75 56.25C75 57.4932 74.5061 58.6855 73.6271 59.5646C72.748 60.4436 71.5557 60.9375 70.3125 60.9375Z" />
   </svg>
 );

src/pages/auth/home.js

@@ -12,7 +12,7 @@ import { toast } from 'react-toastify';
 import EmptyImage from '../../images/empty.png';
 import BgImage from '../../images/emptySBTBg.png';
 import { isNumber } from '../../utils/utilityFunctions';
-import { LSKeys, TWITTER_URL } from '../../utils/constants';
+import { LSKeys } from '../../utils/constants';
 
 export const Home = ({
   setActiveTabIndex,
@@ -100,21 +100,7 @@ export const Home = ({
             className="object-cover rounded-lg max-h-[350px]"
           />
         </div>
-        <div>
-          {children}
-          <div className="flex items-center mt-5">
-            <a
-              target="_blank"
-              rel="noreferrer"
-              class="twitter-share-button"
-              href={TWITTER_URL}
-              data-size="large"
-              className="w-full md:w-max rounded-md border border-transparent bg-gradient-to-r from-purple-600 to-indigo-600 bg-origin-border px-4 py-2 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
-            >
-              <p className="mx-auto w-[fit-content]">Share on Twitter</p>
-            </a>
-          </div>
-        </div>
+        <div>{children}</div>
       </div>
     );
   };