Merge pull request #620 from Real-Dev-Squad/develop

Dev to Main Sync

app/styles/components/mobile-dialog.css

@@ -1,30 +1,31 @@
 .mobile-dialog {
-    display: block;
-    border-radius: 4px;
+  display: block;
+  border-radius: 4px;
+  padding: 0.5rem 1rem;
+  font-weight: 900;
+  margin: 0 auto;
+  font-size: large;
+  text-align: center;
+  background-color: var(--form--bg);
+  border: none;
+  z-index: 2;
+  box-shadow: 4px 8px 8px var(--mobile-dialog-box-shadow);
+  & button {
     padding: 0.5rem 1rem;
-    font-weight: 900;
-    margin: 0 auto;
-    font-size:large;
-    text-align: center;
-    background-color: var(--form--bg);
+    margin: 1rem;
+    font-size: medium;
     border: none;
-    box-shadow: 4px 8px 8px var(--mobile-dialog-box-shadow);
-    & button {
-      padding: 0.5rem 1rem;
-      margin: 1rem;
-      font-size:medium;
-      border: none;
-      border-radius: 4px;
-      color: var(--body-bg-color);
-      font-weight: 600;
-    }
-  }
-
-  #mobile-dialog__open-button {
-    background-color: var(--mobile-dialog--open-button);
+    border-radius: 4px;
+    color: var(--body-bg-color);
+    font-weight: 600;
   }
-
-  #mobile-dialog__close-button {
-    background-color: var(--body-bg-color);
-    color: var(--landing-page--main-heading);
-  }
+}
+
+#mobile-dialog__open-button {
+  background-color: var(--mobile-dialog--open-button);
+}
+
+#mobile-dialog__close-button {
+  background-color: var(--body-bg-color);
+  color: var(--landing-page--main-heading);
+}

app/styles/profile.css

@@ -112,10 +112,9 @@
   padding: 0.5rem;
   border-radius: 100%;
   position: absolute;
-  top: 0.5rem;
-  right: 1rem;
+  top: 5%;
+  right: 5%;
   font-size: 1rem;
-  margin-top: 0.5rem;
   color: var(--profile-edit-btn-clr);
   font-weight: 600;
 }
@@ -132,6 +131,7 @@
   background: var(--overlay--bg);
   position: fixed;
   top: 0;
+  z-index: 1;
 }
 
 .image-upload-modal {