From 5d859b6459d0a6ab4223f2a49de9128cbd2f79f9 Mon Sep 17 00:00:00 2001
From: rainydaysavings <eliseuamaro@pm.me>
Date: Sat, 15 Aug 2020 01:07:19 +0100
Subject: [PATCH] [UI] Responsive settings CSS work

---
 public/assets/css/base_small.css              |   2 +-
 public/assets/css/settings/settings.css       |   5 -
 public/assets/css/settings/settings_mid.css   | 115 ++++++---------
 public/assets/css/settings/settings_small.css | 132 +++++++-----------
 4 files changed, 91 insertions(+), 163 deletions(-)

diff --git a/public/assets/css/base_small.css b/public/assets/css/base_small.css
index 9c128ab58a..fd695e2da8 100644
--- a/public/assets/css/base_small.css
+++ b/public/assets/css/base_small.css
@@ -5,7 +5,7 @@
 
       /* font and margin sizes */
       --main-size: 1.2em;
-      --medium-size: 0.85em;
+      --medium-size: 0.8em;
       --small-size: 0.65em;
       --unit-size: 1em;
       --side-margin: 2em;
diff --git a/public/assets/css/settings/settings.css b/public/assets/css/settings/settings.css
index 01da5910f1..88a7993a14 100644
--- a/public/assets/css/settings/settings.css
+++ b/public/assets/css/settings/settings.css
@@ -46,11 +46,6 @@
       font-weight: 700;
 }
 
-.active {
-      color: var(--fg) !important;
-      font-weight: 700;
-}
-
 .set-nav a {
       color: var(--accent);
 }
diff --git a/public/assets/css/settings/settings_mid.css b/public/assets/css/settings/settings_mid.css
index d78b5c7214..bd9ba0e2a5 100644
--- a/public/assets/css/settings/settings_mid.css
+++ b/public/assets/css/settings/settings_mid.css
@@ -1,7 +1,7 @@
 .content {
       display: flex;
       flex-wrap: wrap;
-      margin-top: calc(3 * var(--main-size));
+      margin-top: calc(4 * var(--main-size));
       justify-content: center;
       align-items: center;
       margin-left: 0;
@@ -9,13 +9,21 @@
       margin-bottom: var(--unit-size);
 }
 
+.main {
+      width: 100%;
+      margin-left: var(--unit-size);
+      margin-right: var(--unit-size);
+      box-shadow: var(--shadow);
+      border-radius: 0 0 var(--unit-size) var(--unit-size);
+}
+
 .set-nav {
       order: 1;
       display: flex;
       justify-content: space-evenly;
       flex-wrap: wrap;
-      width: 100%;
-      background-color: var(--bg5);
+      flex: 1;
+      background-color: var(--bg1);
       padding: var(--medium-size);
       font-size: var(--medium-size);
       font-family: var(--head-font);
@@ -48,83 +56,40 @@
       transition: all 0.8s ease;
 }
 
-.set-nav2 {
-      order: 2;
-      display: flex;
-      justify-content: space-between;
-      flex-wrap: wrap;
-      width: 100%;
-      background-color: var(--bg5);
-      padding: var(--medium-size);
-      margin-top: calc(2 * var(--unit-size));
-      margin-left: var(--side-margin);
-      margin-right: var(--side-margin);
-      font-size: var(--medium-size);
-      font-family: var(--head-font);
-      border-radius: var(--unit-size) var(--unit-size) 0 0;
-}
-
-.set-nav2 ul {
-      display: flex;
-      align-items: stretch;
-      justify-content: space-evenly;
-      width: 100%;
-      margin-left: var(--side-margin);
-      margin-right: var(--side-margin);
-      padding: 0;
-}
-
-.set-nav2 li {
-      display: block;
-      flex: 0 1 auto;
-      list-style-type: none;
-      font-weight: 700;
-      font-size: var(--medium-size);
-}
-
-.set-nav2 a {
-      color: var(--accent);
-}
-
-.set-nav2 a:hover {
-      color: var(--fg);
-      transition: all 0.8s ease;
-}
-
-
 .active {
       color: var(--fg) !important;
       font-weight: 700;
 }
 
+.secundary {
+      display: flex;
+      flex-wrap: wrap;
+      border-radius: 0 0 var(--unit-size) var(--unit-size);
+      background-color: var(--bg3);
+      padding: var(--unit-size);
+}
+
 .form {
       order: 3;
-      background-color: var(--bg5);
+      background-color: var(--bg3);
       padding: calc(2*var(--unit-size));
       font-size: var(--medium-size);
       height: 100%;
       width: 100%;
-      margin-left: var(--side-margin);
-      margin-right: var(--side-margin);
       box-shadow: var(--shadow);
       border-radius: 0 0 var(--unit-size) var(--unit-size);
 }
-
 .form-single {
-      order: 3;
-      background-color: var(--bg5);
+      order: 2;
+      background-color: var(--bg3);
       padding: calc(2*var(--unit-size));
       font-size: var(--medium-size);
       height: 100%;
       width: 100%;
-      margin-left: var(--side-margin);
-      margin-right: var(--side-margin);
-      margin-top: calc(2 * var(--unit-size));
       box-shadow: var(--shadow);
       border-radius: var(--unit-size);
 }
 
-
 /* FORMS ------------------------------*/
 label {
       display: inline-block;
@@ -136,7 +101,8 @@ label {
 input[type=text] {
       margin-top: calc(var(--unit-size) * 0.5);
       width: calc(100% - var(--unit-size));
-      background-color: var(--bg1);
+      background-color: var(--bg4);
+      box-shadow: var(--shadow);
       border-style: none;
       padding: calc(var(--unit-size) * 0.5);
       color: var(--fg);
@@ -165,7 +131,8 @@ button[type=submit] {
       margin-top: calc(var(--unit-size) * 0.5);
       width: calc(100% - var(--unit-size));
       height: calc(10 * var(--unit-size));
-      background-color: var(--bg1);
+      background-color: var(--bg4);
+      box-shadow: var(--shadow);
       border-style: none;
       padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
       color: var(--fg);
@@ -178,7 +145,8 @@ button[type=submit] {
 #form_phone_number {
       margin-top: calc(var(--unit-size) * 0.5);
       width: calc(100% - var(--unit-size));
-      background-color: var(--bg1);
+      background-color: var(--bg4);
+      box-shadow: var(--shadow);
       border-style: none;
       padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
       color: var(--fg);
@@ -188,7 +156,8 @@ button[type=submit] {
 
 #form_language{
       margin-top: calc(var(--unit-size) * 0.5);
-      background-color: var(--bg1);
+      background-color: var(--bg4);
+      box-shadow: var(--shadow);
       border-style: none;
       padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
       color: var(--fg);
@@ -216,6 +185,13 @@ select {
       margin-left: var(--unit-size);
 }
 
+button {
+      background-color: var(--fg);
+      padding: var(--small-size);
+      border: none;
+      border-radius: var(--small-size);
+}
+
 /* JS Cropping */
 #img-cropped {
       display: block;
@@ -230,13 +206,6 @@ select {
       border-radius: 50%;
 }
 
-button {
-      background-color: var(--fg);
-      padding: var(--small-size);
-      border: none;
-      border-radius: var(--small-size);
-}
-
 /* NOTIFICATIONS TABS */
 /* visual feedback */
 ul input[type=radio] + label {
@@ -270,17 +239,14 @@ input[type=radio] {
 
 #form-tabs {
       order: 2;
-      margin-top: var(--unit-size);
-      margin-left: var(--side-margin);
-      margin-right: var(--side-margin);
       width: 100%;
       font-size: var(--medium-size);
 }
 #form-tabs ul {
       display: flex;
       flex-wrap: wrap;
-      border-radius: var(--unit-size);
-      background-color: var(--bg5);
+      border-radius: 0 0 var(--unit-size) var(--unit-size);
+      background-color: var(--bg1);
       justify-content: space-evenly;
       width: 100%;
 }
@@ -292,13 +258,12 @@ input[type=radio] {
 #tabs {
       padding: var(--medium-size);
       text-transform: capitalize;
-      font-size: var(--medium-size);
 }
 
 #form-tabs ul .form {
       order: 2;
       padding: calc(2*var(--unit-size));
-      background-color: #00000000 !important;
+      background-color: var(--bg3) !important;
       height: 100%;
       margin-left: 0;
       margin-right: 0;
diff --git a/public/assets/css/settings/settings_small.css b/public/assets/css/settings/settings_small.css
index e189a8775f..528b45f24c 100644
--- a/public/assets/css/settings/settings_small.css
+++ b/public/assets/css/settings/settings_small.css
@@ -1,7 +1,7 @@
 .content {
       display: flex;
       flex-wrap: wrap;
-      margin-top: calc(3 * var(--main-size));
+      margin-top: calc(3 * var(--main-size) + 2%);
       justify-content: center;
       align-items: center;
       margin-left: 0;
@@ -9,13 +9,21 @@
       margin-bottom: var(--unit-size);
 }
 
+.main {
+      width: 100%;
+      margin-left: 1%;
+      margin-right: 1%;
+      box-shadow: var(--shadow);
+      border-radius: 0 0 var(--unit-size) var(--unit-size);
+}
+
 .set-nav {
       order: 1;
       display: flex;
       justify-content: space-between;
       flex-wrap: wrap;
-      width: 100%;
-      background-color: var(--bg5);
+      flex: 1;
+      background-color: var(--bg1);
       padding: var(--medium-size);
       font-size: var(--medium-size);
       font-family: var(--head-font);
@@ -48,94 +56,54 @@
       transition: all 0.8s ease;
 }
 
-.set-nav2 {
-      order: 2;
-      display: flex;
-      justify-content: space-between;
-      flex-wrap: wrap;
-      width: 100%;
-      background-color: var(--bg5);
-      padding: var(--medium-size);
-      margin-top: var(--unit-size);
-      margin-left: 1%;
-      margin-right: 1%;
-      font-size: var(--medium-size);
-      font-family: var(--head-font);
-      border-radius: var(--unit-size) var(--unit-size) 0 0;
-}
-
-.set-nav2 ul {
-      display: flex;
-      align-items: stretch;
-      justify-content: space-evenly;
-      width: 100%;
-      margin-left: var(--side-margin);
-      margin-right: var(--side-margin);
-      padding: 0;
-}
-
-.set-nav2 li {
-      display: block;
-      flex: 0 1 auto;
-      list-style-type: none;
-      font-weight: 700;
-      font-size: var(--medium-size);
-}
-
-.set-nav2 a {
-      color: var(--accent);
-}
-
-.set-nav2 a:hover {
-      color: var(--fg);
-      transition: all 0.8s ease;
-}
-
-
 .active {
       color: var(--fg) !important;
       font-weight: 700;
 }
 
-.form {
-      order: 3;
-      background-color: var(--bg5);
-      padding: calc(2*var(--unit-size));
-      font-size: var(--medium-size);
-      height: 100%;
-      margin-left: 1%;
-      margin-right: 1%;
-      margin-top: 0;
-      box-shadow: var(--shadow);
+.secundary {
+      display: flex;
+      flex-wrap: wrap;
       border-radius: 0 0 var(--unit-size) var(--unit-size);
+      background-color: var(--bg3);
+      padding: 2%;
 }
 
-.form-single {
+.form {
       order: 3;
-      background-color: var(--bg5);
-      padding: calc(2*var(--unit-size));
+      background-color: var(--bg3);
+      padding: var(--unit-size);
+      font-size: var(--medium-size);
+      height: 100%;
+      width: 100%;
+      box-shadow: var(--shadow);
+      border-radius: 0 0 var(--unit-size) var(--unit-size);
+}
+.form-single {
+      order: 2;
+      background-color: var(--bg3);
+      padding: var(--unit-size);
       font-size: var(--medium-size);
       height: 100%;
       width: 100%;
-      margin-left: 1%;
-      margin-right: 1%;
-      margin-top: calc(2 * var(--unit-size));
       box-shadow: var(--shadow);
       border-radius: var(--unit-size);
 }
 
-
 /* FORMS ------------------------------*/
 label {
       display: inline-block;
       font-family: 'Montserrat', sans-serif;
       font-weight: 700;
+      font-size: var(--medium-size);
+      width: 100%;
 }
 
 input[type=text] {
       margin-top: calc(var(--unit-size) * 0.5);
       width: calc(100% - var(--unit-size));
-      background-color: var(--bg1);
+      background-color: var(--bg4);
+      box-shadow: var(--shadow);
       border-style: none;
       padding: calc(var(--unit-size) * 0.5);
       color: var(--fg);
@@ -164,7 +132,8 @@ button[type=submit] {
       margin-top: calc(var(--unit-size) * 0.5);
       width: calc(100% - var(--unit-size));
       height: calc(10 * var(--unit-size));
-      background-color: var(--bg1);
+      background-color: var(--bg4);
+      box-shadow: var(--shadow);
       border-style: none;
       padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
       color: var(--fg);
@@ -177,7 +146,8 @@ button[type=submit] {
 #form_phone_number {
       margin-top: calc(var(--unit-size) * 0.5);
       width: calc(100% - var(--unit-size));
-      background-color: var(--bg1);
+      background-color: var(--bg4);
+      box-shadow: var(--shadow);
       border-style: none;
       padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
       color: var(--fg);
@@ -187,7 +157,8 @@ button[type=submit] {
 
 #form_language{
       margin-top: calc(var(--unit-size) * 0.5);
-      background-color: var(--bg1);
+      background-color: var(--bg4);
+      box-shadow: var(--shadow);
       border-style: none;
       padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
       color: var(--fg);
@@ -215,6 +186,13 @@ select {
       margin-left: var(--unit-size);
 }
 
+button {
+      background-color: var(--fg);
+      padding: var(--small-size);
+      border: none;
+      border-radius: var(--small-size);
+}
+
 /* JS Cropping */
 #img-cropped {
       display: block;
@@ -229,13 +207,6 @@ select {
       border-radius: 50%;
 }
 
-button {
-      background-color: var(--fg);
-      padding: var(--small-size);
-      border: none;
-      border-radius: var(--small-size);
-}
-
 /* NOTIFICATIONS TABS */
 /* visual feedback */
 ul input[type=radio] + label {
@@ -269,17 +240,14 @@ input[type=radio] {
 
 #form-tabs {
       order: 2;
-      margin-top: var(--main-size);
-      margin-left: 1%;
-      margin-right: 1%;
       width: 100%;
       font-size: var(--medium-size);
 }
 #form-tabs ul {
       display: flex;
       flex-wrap: wrap;
-      border-radius: var(--unit-size);
-      background-color: var(--bg5);
+      border-radius: 0 0 var(--unit-size) var(--unit-size);
+      background-color: var(--bg1);
       justify-content: space-evenly;
       width: 100%;
 }
@@ -295,8 +263,8 @@ input[type=radio] {
 
 #form-tabs ul .form {
       order: 2;
-      padding: calc(2*var(--unit-size));
-      background-color: #00000000 !important;
+      padding: var(--unit-size);
+      background-color: var(--bg3) !important;
       height: 100%;
       margin-left: 0;
       margin-right: 0;