From f66aeb1e3900c65a3b77425d622293b8d1ef7234 Mon Sep 17 00:00:00 2001
From: Salvatore Di Salvo <119612231+sdisalvo-crd@users.noreply.github.com>
Date: Thu, 23 Nov 2023 13:13:16 +0000
Subject: [PATCH] fix: Style responsiveness and segment bug (#264)

---
 src/ui/components/Alert/Alert.scss            |  6 +--
 .../MnemonicLengthSegment.scss                |  4 +-
 src/ui/components/PageHeader/PageHeader.scss  |  2 +-
 .../SeedPhraseModule/SeedPhraseModule.scss    | 40 +++++++++----------
 .../SeedPhraseModule/SeedPhraseModule.tsx     | 23 ++++-------
 .../GenerateSeedPhrase/GenerateSeedPhrase.tsx |  1 +
 src/ui/styles/style.scss                      |  4 +-
 7 files changed, 34 insertions(+), 46 deletions(-)

diff --git a/src/ui/components/Alert/Alert.scss b/src/ui/components/Alert/Alert.scss
index 0b2489075..a764c3426 100644
--- a/src/ui/components/Alert/Alert.scss
+++ b/src/ui/components/Alert/Alert.scss
@@ -1,6 +1,6 @@
 .alert-wrapper {
   max-width: 90% !important;
-  padding: 25px 20px !important;
+  padding: 1.56rem 1.25rem;
   border-radius: 1rem !important;
 
   .alert-title.sc-ion-alert-md {
@@ -19,7 +19,7 @@
       line-height: normal;
     }
 
-    @media screen and (min-height: 300px) and (max-height: 580px) {
+    @media screen and (min-width: 250px) and (max-width: 370px) {
       h2 {
         font-size: 0.9rem;
         line-height: 1.2rem;
@@ -68,7 +68,7 @@ button.alert-button {
   }
 }
 
-@media screen and (min-height: 300px) and (max-height: 580px) {
+@media screen and (min-width: 250px) and (max-width: 370px) {
   button.alert-button {
     &.sc-ion-alert-ios,
     &.sc-ion-alert-md {
diff --git a/src/ui/components/MnemonicLengthSegment/MnemonicLengthSegment.scss b/src/ui/components/MnemonicLengthSegment/MnemonicLengthSegment.scss
index 8b4d19e7e..5d88eba14 100644
--- a/src/ui/components/MnemonicLengthSegment/MnemonicLengthSegment.scss
+++ b/src/ui/components/MnemonicLengthSegment/MnemonicLengthSegment.scss
@@ -9,7 +9,7 @@
     }
   }
 
-  @media screen and (min-height: 300px) and (max-height: 550px) {
+  @media screen and (min-width: 250px) and (max-width: 425px) {
     ion-label {
       font-size: 0.8rem;
       height: 1rem;
@@ -17,7 +17,7 @@
       margin: 0 auto;
     }
 
-    ion-segment-button {
+    ion-segment-button.md {
       height: 2.4rem;
       min-height: 2.4rem;
     }
diff --git a/src/ui/components/PageHeader/PageHeader.scss b/src/ui/components/PageHeader/PageHeader.scss
index 12f6e82ba..4586f8af0 100644
--- a/src/ui/components/PageHeader/PageHeader.scss
+++ b/src/ui/components/PageHeader/PageHeader.scss
@@ -68,7 +68,7 @@
     text-align: center;
   }
 
-  @media screen and (min-height: 300px) and (max-height: 600px) {
+  @media screen and (min-width: 250px) and (max-width: 370px) {
     ion-toolbar {
       .back-button,
       .close-button,
diff --git a/src/ui/components/SeedPhraseModule/SeedPhraseModule.scss b/src/ui/components/SeedPhraseModule/SeedPhraseModule.scss
index e4aabb675..7767656df 100644
--- a/src/ui/components/SeedPhraseModule/SeedPhraseModule.scss
+++ b/src/ui/components/SeedPhraseModule/SeedPhraseModule.scss
@@ -1,5 +1,4 @@
 .seed-phrase-module {
-  margin: 0;
   position: relative;
   border: 1px solid var(--ion-color-dark-grey);
   border-radius: 1rem;
@@ -7,10 +6,13 @@
   box-shadow: none;
 
   .overlay {
+    border-radius: 1rem;
+    padding-inline: 1rem;
+
     &.visible {
       display: flex;
       flex-direction: column;
-      justify-content: center;
+      justify-content: space-evenly;
       position: absolute;
       top: 0;
       z-index: 2;
@@ -23,31 +25,30 @@
       display: none;
     }
 
-    ion-card-header {
-      margin: 0 auto;
-      padding: 0 0 0.7rem;
-
-      ion-icon {
-        height: 1.4rem;
-        width: 1.4rem;
-      }
+    p,
+    ion-icon {
+      color: var(--ion-color-light);
+      margin: 0;
     }
 
-    ion-card-content {
-      padding-inline: 1rem;
+    ion-icon {
+      height: 1.4rem;
+      width: 1.4rem;
+      align-self: center;
     }
 
     ion-button {
+      font-size: 1rem;
+      height: 3.25rem;
+      margin: 0 auto;
       color: var(--ion-color-light);
       --border-color: var(--ion-color-light);
-      margin: 0 auto;
     }
 
-    @media screen and (min-height: 300px) and (max-height: 600px) {
+    @media screen and (min-width: 250px) and (max-width: 425px) {
       ion-button {
         font-size: 0.8rem;
         height: 2.5rem;
-        margin: 0 auto;
       }
     }
   }
@@ -63,6 +64,7 @@
       width: 92%;
       margin: 0.3rem auto;
       padding-inline: 0.475rem;
+      font-size: 1rem;
 
       .index {
         margin-right: 0.25rem;
@@ -77,7 +79,7 @@
       filter: blur(5px);
     }
 
-    @media screen and (min-height: 300px) and (max-height: 600px) {
+    @media screen and (min-width: 250px) and (max-width: 425px) {
       padding: 0.25rem;
 
       ion-chip {
@@ -94,10 +96,4 @@
       }
     }
   }
-
-  p,
-  ion-icon {
-    color: var(--ion-color-light);
-    margin: 0;
-  }
 }
diff --git a/src/ui/components/SeedPhraseModule/SeedPhraseModule.tsx b/src/ui/components/SeedPhraseModule/SeedPhraseModule.tsx
index d3875a1b9..d299ce1e1 100644
--- a/src/ui/components/SeedPhraseModule/SeedPhraseModule.tsx
+++ b/src/ui/components/SeedPhraseModule/SeedPhraseModule.tsx
@@ -1,11 +1,4 @@
-import {
-  IonButton,
-  IonCard,
-  IonCardContent,
-  IonCardHeader,
-  IonChip,
-  IonIcon,
-} from "@ionic/react";
+import { IonButton, IonChip, IonIcon } from "@ionic/react";
 import { eyeOffOutline } from "ionicons/icons";
 import { i18n } from "../../../i18n";
 import "./SeedPhraseModule.scss";
@@ -17,17 +10,15 @@ const SeedPhraseModule = ({
   setShowSeedPhrase,
 }: SeedPhraseModuleProps) => {
   return (
-    <IonCard className="seed-phrase-module">
+    <div className="seed-phrase-module">
       <div
         data-testid="seed-phrase-privacy-overlay"
         className={`overlay ${showSeedPhrase ? "hidden" : "visible"}`}
       >
-        <IonCardHeader>
-          <IonIcon icon={eyeOffOutline} />
-        </IonCardHeader>
-        <IonCardContent data-testid="seed-phrase-privacy-overlay-text">
-          <p>{i18n.t("generateseedphrase.privacy.overlay.text")}</p>
-        </IonCardContent>
+        <IonIcon icon={eyeOffOutline} />
+        <p data-testid="seed-phrase-privacy-overlay-text">
+          {i18n.t("generateseedphrase.privacy.overlay.text")}
+        </p>
         <IonButton
           shape="round"
           fill="outline"
@@ -53,7 +44,7 @@ const SeedPhraseModule = ({
           );
         })}
       </div>
-    </IonCard>
+    </div>
   );
 };
 
diff --git a/src/ui/pages/GenerateSeedPhrase/GenerateSeedPhrase.tsx b/src/ui/pages/GenerateSeedPhrase/GenerateSeedPhrase.tsx
index e309a1370..e58e6d3b3 100644
--- a/src/ui/pages/GenerateSeedPhrase/GenerateSeedPhrase.tsx
+++ b/src/ui/pages/GenerateSeedPhrase/GenerateSeedPhrase.tsx
@@ -82,6 +82,7 @@ const GenerateSeedPhrase = () => {
     } else {
       setSeedPhrase(seedPhrase256);
     }
+    setShowSeedPhrase(false);
   };
 
   const HandleTerms = () => {
diff --git a/src/ui/styles/style.scss b/src/ui/styles/style.scss
index ee665fd14..0d137e166 100644
--- a/src/ui/styles/style.scss
+++ b/src/ui/styles/style.scss
@@ -79,7 +79,7 @@ p {
   color: var(--ion-color-secondary);
 }
 
-@media screen and (min-height: 300px) and (max-height: 660px) {
+@media screen and (min-width: 250px) and (max-width: 370px) {
   h2,
   h3 {
     margin-bottom: 0;
@@ -125,7 +125,7 @@ p {
   }
 }
 
-@media screen and (min-height: 300px) and (max-height: 600px) {
+@media screen and (min-width: 250px) and (max-width: 370px) {
   .primary-button,
   .secondary-button,
   .tertiary-button {