From 83c51eec004e0116cc69dfbfa9fb6c025e595804 Mon Sep 17 00:00:00 2001
From: enesozturk <enesozturk.d@gmail.com>
Date: Tue, 16 Jan 2024 19:40:00 +0300
Subject: [PATCH] refactor: update layout styles

---
 src/App.scss                               | 29 ++++------------------
 src/components/general/Modal/Modal.scss    |  2 +-
 src/components/layout/Sidebar/Sidebar.scss |  4 +--
 src/components/layout/Sidebar/index.tsx    |  2 +-
 src/index.css                              | 12 +++++++++
 src/pages/Login/Login.scss                 | 13 +++-------
 src/pages/ScanQrCode/ScanQrCode.scss       |  2 +-
 src/pages/widget/Connect/Connect.scss      |  2 +-
 src/pages/widget/Subscribe/Subscribe.scss  |  2 +-
 9 files changed, 27 insertions(+), 41 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 23f7ae40..ef210ebf 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -12,17 +12,10 @@
   max-width: 100vw;
   z-index: 0;
   position: relative;
-  height: calc(100vh - env(safe-area-inset-bottom) - var(--mobile-footer-height));
+  height: 100%;
+  padding-bottom: calc(env(safe-area-inset-bottom) + var(--mobile-footer-height));
   overflow: hidden;
 
-  @supports (height: 100dvh) {
-    height: calc(100dvh - env(safe-area-inset-bottom) - var(--mobile-footer-height));
-  }
-
-  @supports (height: 100dvh) {
-    max-height: 100dvh;
-  }
-
   .TargetSelector {
     grid-area: target-selector;
     display: var(--targetselector-display);
@@ -87,11 +80,7 @@
     display: flex;
     align-items: flex-start;
     justify-content: flex-start;
-    height: 100vh;
-
-    @supports (height: 100dvh) {
-      height: 100dvh;
-    }
+    padding-bottom: 0;
 
     .Sidebar {
       border-right: solid 1px var(--bg-color-2);
@@ -100,11 +89,7 @@
     .Main {
       flex: 1;
       width: 100%;
-      height: 100vh;
-
-      @supports (height: 100dvh) {
-        height: 100dvh;
-      }
+      height: 100%;
     }
 
     .TargetSelector {
@@ -112,14 +97,10 @@
       padding: 1rem 0.75rem;
       border-right: solid 1px var(--bg-color-2);
       position: relative;
-      height: 100vh;
+      height: 100%;
       overflow-x: hidden;
       overflow-y: auto;
 
-      @supports (height: 100dvh) {
-        height: 100dvh;
-      }
-
       .Input {
         padding: 0px 0.75rem;
 
diff --git a/src/components/general/Modal/Modal.scss b/src/components/general/Modal/Modal.scss
index 82a41767..86d12947 100644
--- a/src/components/general/Modal/Modal.scss
+++ b/src/components/general/Modal/Modal.scss
@@ -7,7 +7,7 @@
   background: var(--modal-overlay);
   z-index: 1;
   width: 100vw;
-  height: 100vh;
+  height: 100%;
 }
 
 .modal {
diff --git a/src/components/layout/Sidebar/Sidebar.scss b/src/components/layout/Sidebar/Sidebar.scss
index 596fd423..2cddff53 100644
--- a/src/components/layout/Sidebar/Sidebar.scss
+++ b/src/components/layout/Sidebar/Sidebar.scss
@@ -7,7 +7,7 @@
   transform: translateX(-50%);
   gap: 1em;
   width: 3.75rem;
-  height: 100vh;
+  height: 100%;
   display: none;
 
   @include padding-y(2em);
@@ -95,7 +95,7 @@
 
     top: 0;
     left: 0;
-    height: 100vh;
+    height: 100%;
     flex-direction: column;
 
     &__Navigation {
diff --git a/src/components/layout/Sidebar/index.tsx b/src/components/layout/Sidebar/index.tsx
index 93eb9765..0715ec36 100644
--- a/src/components/layout/Sidebar/index.tsx
+++ b/src/components/layout/Sidebar/index.tsx
@@ -50,7 +50,7 @@ const Sidebar: React.FC<{ isLoggedIn: boolean }> = ({ isLoggedIn }) => {
 
     if (uiEnabled.settings) {
       items.push([
-        <SettingIcon isFilled={pathname.startsWith(NAVIGATION.settings.notification)} />,
+        <SettingIcon isFilled={pathname.startsWith(NAVIGATION.settings.index)} />,
         NAVIGATION.settings.index
       ])
     }
diff --git a/src/index.css b/src/index.css
index 95de4ab8..be0b3a37 100644
--- a/src/index.css
+++ b/src/index.css
@@ -16,6 +16,18 @@ body {
   overflow-y: hidden;
 }
 
+#root {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+@supports (height: 100dvh) {
+  #root {
+    height: 100dvh;
+  }
+}
+
 body,
 button,
 html,
diff --git a/src/pages/Login/Login.scss b/src/pages/Login/Login.scss
index 2f164579..fb91dc4e 100644
--- a/src/pages/Login/Login.scss
+++ b/src/pages/Login/Login.scss
@@ -3,7 +3,8 @@
 .Login {
   --main-display: unset;
   background: var(--bg-color-1);
-  max-height: 100vh;
+  height: 100%;
+  max-height: 100%;
   display: grid;
   grid-template: var(--grid-template);
   grid-template-columns: 1fr;
@@ -11,10 +12,6 @@
   z-index: 0;
   position: relative;
 
-  @supports (height: 100dvh) {
-    height: 100dvh;
-  }
-
   .Sidebar {
     padding-top: 1.25em;
     padding-bottom: 1em;
@@ -24,7 +21,7 @@
   .Main {
     position: relative;
     max-width: 100vw;
-    height: 100vh;
+    height: 100%;
     overflow-x: hidden;
     padding: 1rem 0.085em;
     display: flex;
@@ -33,10 +30,6 @@
     align-items: center;
     gap: 4rem;
 
-    @supports (height: 100dvh) {
-      height: 100dvh;
-    }
-
     &__connect-button {
       min-width: fit-content;
     }
diff --git a/src/pages/ScanQrCode/ScanQrCode.scss b/src/pages/ScanQrCode/ScanQrCode.scss
index bfede12e..25d71ff9 100644
--- a/src/pages/ScanQrCode/ScanQrCode.scss
+++ b/src/pages/ScanQrCode/ScanQrCode.scss
@@ -1,7 +1,7 @@
 .ScanQrCode {
   display: grid;
   place-items: center;
-  height: 100vh;
+  height: 100%;
   padding: 0;
   width: 100vw;
   background: var(--bg-color-1);
diff --git a/src/pages/widget/Connect/Connect.scss b/src/pages/widget/Connect/Connect.scss
index 7ea0b1ac..ea1c0ea0 100644
--- a/src/pages/widget/Connect/Connect.scss
+++ b/src/pages/widget/Connect/Connect.scss
@@ -2,7 +2,7 @@
   display: grid;
   place-items: center;
 
-  height: 100vh;
+  height: 100%;
   width: 100vw;
 
   &__container {
diff --git a/src/pages/widget/Subscribe/Subscribe.scss b/src/pages/widget/Subscribe/Subscribe.scss
index c1e8ec9b..3e775716 100644
--- a/src/pages/widget/Subscribe/Subscribe.scss
+++ b/src/pages/widget/Subscribe/Subscribe.scss
@@ -2,7 +2,7 @@
   display: grid;
   place-items: center;
 
-  height: 100vh;
+  height: 100%;
   width: 100vw;
 
   &__icon {