fix tablet view

Author: eisbilir

src/shared/components/Settings/Account/Security/Modal/style.scss

@@ -17,7 +17,7 @@
 .container {
   background: #fff;
   position: fixed;
-  width: 1000px;
+  max-width: 1000px;
   height: 752px;
   max-height: 99%;
   top: 50%;
@@ -31,13 +31,13 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 24px;
 
   .header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
+    margin-bottom: 24px;
 
     .icon-wrapper {
       display: flex;
@@ -76,13 +76,15 @@
     width: 100%;
     display: flex;
     flex-direction: column;
+    margin-bottom: 24px;
   }
 
   .divider {
     width: 100%;
     min-height: 2px;
     background-color: #e9e9e9;
     border-radius: 1px;
+    margin-bottom: 24px;
   }
 
   .footer {
@@ -109,6 +111,14 @@
       border-radius: 50px;
       cursor: pointer;
 
+      &:focus {
+        outline: none;
+      }
+
+      &:focus-visible {
+        outline: none;
+      }
+
       &.disabled {
         background: #f4f4f4;
         color: #767676;
@@ -134,6 +144,14 @@
       border-radius: 50px;
       cursor: pointer;
 
+      &:focus {
+        outline: none;
+      }
+
+      &:focus-visible {
+        outline: none;
+      }
+
       &.disabled {
         background: #f4f4f4;
         color: #767676;

src/shared/components/Settings/Account/Security/index.jsx

@@ -162,16 +162,16 @@ export default function Security({
           Google Play Store or the iOS App Store.
         </div>
         <div styleName="app-store">
-          <div styleName="market">
-            <a href="https://play.google.com/store/apps/details?id=com.diwallet1" target="_blank" rel="noreferrer"><img src={GooglePlay} alt="Google Play Store" /></a>
+          <div styleName="market mmr">
+            <a href="https://play.google.com/store/apps/details?id=com.diwallet1" target="_blank" rel="noreferrer" styleName="market-link"><img src={GooglePlay} alt="Google Play Store" /></a>
             <QRCode size={190} value="https://play.google.com/store/apps/details?id=com.diwallet1" />
           </div>
           <div styleName="market">
-            <a href="https://apps.apple.com/in/app/dice-id/id1624858853" target="_blank" rel="noreferrer"><AppleStore /></a>
+            <a href="https://apps.apple.com/in/app/dice-id/id1624858853" target="_blank" rel="noreferrer" styleName="market-link"><AppleStore /></a>
             <QRCode size={190} value="https://apps.apple.com/in/app/dice-id/id1624858853" />
           </div>
         </div>
-        <div styleName="step-content">
+        <div styleName="step-content no-margin">
           After you have downloaded and installed the mobile app,
           <strong> make sure to complete the configuration process. </strong>
           When ready, click next below.
@@ -198,7 +198,7 @@ export default function Security({
             ? <QRCode size={298} value={diceConnection.connection} />
             : 'Loading'}
         </div>
-        <div styleName="step-content">
+        <div styleName="step-content no-margin">
           Once the connection is established, the service will offer you a Verifiable Credential.
           <br />Press the ACCEPT button in your DICE ID App.
           <br />If you DECLINE the invitation, please try again after 5 minutes.
@@ -255,7 +255,7 @@ export default function Security({
         <div styleName="body-logo">
           <img src={DiceLogoBig} alt="diceid" />
         </div>
-        <div styleName="step-content">
+        <div styleName="step-content no-margin">
           For more information on DICE ID, please visit<br />
           <a href="https://www.diceid.com/" target="_blank" rel="noreferrer" style={{ color: '#0D61BF' }}>https://www.diceid.com/</a><br /><br />
           Please click Finish bellow.
@@ -274,7 +274,7 @@ export default function Security({
           <div styleName="icon-unsuccessful">
             <UnsuccessfulIcon />
           </div>
-          <div styleName="step-title error">
+          <div styleName="step-title error no-margin">
             Unsuccessful Verification
           </div>
         </div>
@@ -286,7 +286,7 @@ export default function Security({
         <div styleName="body-logo">
           <img src={DiceLogoBig} alt="diceid" />
         </div>
-        <div styleName="step-content">
+        <div styleName="step-content no-margin">
           Please try again your process after few minutes.<br /><br />
           Please click Finish bellow.
         </div>

src/shared/components/Settings/Account/Security/styles.scss

@@ -183,13 +183,11 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 16px;
 
   .step-title-container {
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 8px;
 
     .icon-unsuccessful {
       display: flex;
@@ -198,6 +196,7 @@
       flex: 0 0 32px;
       width: 32px;
       height: 32px;
+      margin-bottom: 8px;
 
       svg {
         display: block;
@@ -212,10 +211,15 @@
     line-height: 28px;
     color: $tco-black;
     text-transform: uppercase;
+    margin-bottom: 16px;
 
     &.error {
       color: #ef476f;
     }
+
+    &.no-margin {
+      margin-bottom: 0;
+    }
   }
 
   .step-content {
@@ -224,22 +228,34 @@
     font-size: 20px;
     line-height: 26px;
     color: $tco-black;
+    margin-bottom: 16px;
+
+    &.no-margin {
+      margin-bottom: 0;
+    }
   }
 
   .app-store {
     display: flex;
     flex-direction: row;
     padding: 16px 0;
     align-items: flex-start;
-    gap: 100px;
     width: 100%;
     justify-content: center;
+    margin-bottom: 16px;
 
     .market {
       display: flex;
       flex-direction: column;
       align-items: center;
-      gap: 32px;
+
+      &.mmr {
+        margin-right: 100px;
+      }
+
+      .market-link {
+        margin-bottom: 32px;
+      }
     }
   }
 
@@ -251,6 +267,7 @@
     gap: 100px;
     width: 100%;
     justify-content: center;
+    margin-bottom: 16px;
   }
 }