UI fixes (#20) (#21)

* fix: remove sidebar in mobile version * fix: UI snap connection page
rarimo · Jan 23, 2024 · d95dd14 · d95dd14
1 parent 1922777
commit d95dd14
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 38 deletions.
diff --git a/src/pages/MainPage/MainPage.tsx b/src/pages/MainPage/MainPage.tsx
@@ -126,16 +126,18 @@ const MainPage: FC<Props> = ({ className, ...rest }) => {
               ease: 'backInOut',
             }}
           >
-            <motion.div
-              className='main-page__steps-indicator'
-              animate={{
-                width: `${stepsProgress}%`,
-              }}
-              transition={{
-                duration: '0.5',
-                ease: 'backInOut',
-              }}
-            />
+            {!isDeviceMobile && (
+              <motion.div
+                className='main-page__steps-indicator'
+                animate={{
+                  width: `${stepsProgress}%`,
+                }}
+                transition={{
+                  duration: '0.5',
+                  ease: 'backInOut',
+                }}
+              />
+            )}
 
             <AnimatePresence mode={'wait'}>
               {isLoadFailed ? (
@@ -175,7 +177,7 @@ const MainPage: FC<Props> = ({ className, ...rest }) => {
             </AnimatePresence>
           </motion.div>
 
-          {isSidebarExist && (
+          {isSidebarExist && !isDeviceMobile && (
             <AnimatePresence initial={false} mode={'wait'}>
               {isSidebarOpen && (
                 <motion.div

diff --git a/src/pages/MainPage/components/2_SnapConnection/SnapConnection.tsx b/src/pages/MainPage/components/2_SnapConnection/SnapConnection.tsx
@@ -56,14 +56,34 @@ const SnapConnection: FC<StepProps> = ({ nextStepCb, className, ...rest }) => {
       </div>
 
       <h2 className='snap-connection__title'>
-        {`Add identity management to your wallet`}
+        {`Enable identity storage to your wallet`}
       </h2>
 
+      <div className='snap-connection__description'>
+        <div className='snap-connection__description-item'>
+          <Icon
+            className='snap-connection__description-item-icon'
+            name={ICON_NAMES.metamask}
+          />
+          <span>
+            {'It has been audited and '}
+            <u>{'approved by MetaMask'}</u>
+          </span>
+        </div>
+        <div className='snap-connection__description-item'>
+          <Icon
+            className='snap-connection__description-item-icon'
+            name={ICON_NAMES.key}
+          />
+          <span>{'It cannot access your private keys or your crypto'}</span>
+        </div>
+      </div>
+
       <div className='app__step-actions snap-connection__button'>
         <AppButton
           iconLeft={ICON_NAMES.rarimeSnap}
           onClick={installSnap}
-          text={`Connect “MetaMask” Snap`}
+          text={`Enable RariMe`}
           modification='border-circle'
           isDisabled={isPending}
         />
@@ -83,28 +103,6 @@ const SnapConnection: FC<StepProps> = ({ nextStepCb, className, ...rest }) => {
         </div>
       </div>
 
-      <div className='snap-connection__description'>
-        <p className='snap-connection__description-title'>
-          {
-            'RariMe is a MetaMask Extension “Snap” that stores identity credentials'
-          }
-        </p>
-        <div className='snap-connection__description-item'>
-          <Icon
-            className='snap-connection__description-item-icon'
-            name={ICON_NAMES.metamask}
-          />
-          <span>{'It has been audited and approved by MetaMask'}</span>
-        </div>
-        <div className='snap-connection__description-item'>
-          <Icon
-            className='snap-connection__description-item-icon'
-            name={ICON_NAMES.key}
-          />
-          <span>{'It cannot access your private keys or your crypto'}</span>
-        </div>
-      </div>
-
       <CautionTip
         className='snap-connection__subtitle'
         message={`Installing the snap could take a few minutes, depending on your internet bandwidth. Please ignore the "Page Unresponsive" errors and wait until the installation is complete.`}

diff --git a/src/pages/MainPage/components/2_SnapConnection/styles.scss b/src/pages/MainPage/components/2_SnapConnection/styles.scss
@@ -16,8 +16,9 @@
 }
 
 .snap-connection__title {
-  font-size: toRem(32);
-  margin: toRem(32) 0 toRem(16);
+  font-size: toRem(44);
+  margin: toRem(32) 0 toRem(12);
+  text-align: start;
 }
 
 .snap-connection__subtitle {
@@ -26,7 +27,7 @@
 }
 
 .snap-connection__description {
-  margin: toRem(32) 0;
+  margin-bottom: toRem(28);
 }
 
 .snap-connection__description-title {