fix modal not showing in other pages

Author: medyo

src/assets/App.css

@@ -1373,3 +1373,85 @@ Producthunt item
 .capitalize {
   text-transform: capitalize;
 }
+
+/**
+Modal
+**/
+
+.Modal {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 650px;
+  background-color: var(--card-background-color);
+  padding: 24px;
+  border-radius: 10px;
+  box-shadow: 0 0 20px #00000052;
+  z-index: 3;
+  max-height: 80vh;
+  overflow-y: scroll;
+}
+
+.Overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--overlay-background-color);
+  backdrop-filter: blur(2px);
+}
+
+.modalHeader {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.modalTitle {
+  margin: 0;
+  padding: 0;
+  color: var(--primary-text-color);
+}
+.modalCloseBtn {
+  align-items: center;
+  background-color: transparent;
+  border-radius: 50%;
+  border: none;
+  color: var(--primary-text-color);
+  cursor: pointer;
+  display: flex;
+  height: 40px;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  width: 40px;
+}
+.modalCloseBtn:hover {
+  opacity: 0.7;
+}
+
+@media (max-width: 768px) {
+  .Modal {
+    left: 0;
+    top: 0;
+    margin: 0;
+    height: 100vh;
+    max-height: 100vh;
+    transform: translate(0, 0);
+    border-radius: 0;
+    position: relative;
+    box-shadow: none;
+    width: auto;
+  }
+  .settingContent {
+    margin-top: 6px;
+  }
+  .settingRow {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}

src/features/settings/components/GeneralSettings/generalSettings.css

@@ -1,32 +1,3 @@
-/**
-Modal
-**/
-
-.Modal {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 650px;
-  background-color: var(--card-background-color);
-  padding: 24px;
-  border-radius: 10px;
-  box-shadow: 0 0 20px #00000052;
-  z-index: 3;
-  max-height: 80vh;
-  overflow-y: scroll;
-}
-
-.Overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: var(--overlay-background-color);
-  backdrop-filter: blur(2px);
-}
-
 .settingTitle {
   width: 300px;
   margin: 0;
@@ -110,37 +81,6 @@ Modal
   font-weight: 500;
   color: var(--primary-text-color);
 }
-.modalHeader {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  margin-bottom: 16px;
-}
-
-.modalTitle {
-  margin: 0;
-  padding: 0;
-  color: var(--primary-text-color);
-}
-.modalCloseBtn {
-  align-items: center;
-  background-color: transparent;
-  border-radius: 50%;
-  border: none;
-  color: var(--primary-text-color);
-  cursor: pointer;
-  display: flex;
-  height: 40px;
-  justify-content: center;
-  margin: 0;
-  padding: 0;
-  text-align: center;
-  width: 40px;
-}
-.modalCloseBtn:hover {
-  opacity: 0.7;
-}
-
 /**
 Select styles
 **/
@@ -181,25 +121,3 @@ Select styles
   border-radius: 20px !important;
   color: var(--tag-secondary-color) !important;
 }
-
-@media (max-width: 768px) {
-  .Modal {
-    left: 0;
-    top: 0;
-    margin: 0;
-    height: 100vh;
-    max-height: 100vh;
-    transform: translate(0, 0);
-    border-radius: 0;
-    position: relative;
-    box-shadow: none;
-    width: auto;
-  }
-  .settingContent {
-    margin-top: 6px;
-  }
-  .settingRow {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}