structure for new settings

1 files changed, 224 insertions, 52 deletions

diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index 6923fe879..075879198 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -1,7 +1,7 @@
 @import "../views/globalCssVariables";
 
 .settings-interface {
-    background-color: whitesmoke !important;
+    //background-color: whitesmoke !important;
     color: grey;
     width: 450px;
     height: 300px;
@@ -22,24 +22,166 @@
     }
 }
 
+.settings-title {
+    font-size: 25px;
+    font-weight: bold;
+    padding-right: 15px;
+    color: black;
+}
+
+.settings-section {
+    display: flex;
+    border-bottom: 1px solid grey;
+    padding-bottom: 8px;
+    padding-top: 6px;
+
+    .settings-section-title {
+        font-size: 16;
+        font-weight: bold;
+        text-align: left;
+        color: black;
+        width: 80;
+        margin-right: 50px;
+    }
+
+    &:last-child {
+        border-bottom: none;
+    }
+}
+
+
+.password-content {
+    display: flex;
+
+    .password-content-inputs {
+        width: 100;
+
+        .password-inputs {
+            border: none;
+            margin-bottom: 8px;
+            width: 180;
+            color: black;
+            border-radius: 5px;
+        }
+    }
+
+    .password-content-buttons {
+        margin-left: 84px;
+        width: 100;
+
+        .password-submit {
+            margin-left: 85px;
+        }
+
+        .password-forgot {
+            margin-left: 65px;
+            margin-top: -20px;
+            white-space: nowrap;
+        }
+    }
+}
+
+.accounts-content {
+    display: flex;
+}
+
+.modes-content {
+    display: flex;
+
+    .modes-select {
+        width: 170px;
+        margin-right: 65px;
+        color: black;
+        border-radius: 5px;
+    }
+
+    .modes-playground {
+        display: flex;
+
+        .playground-check {
+            margin-right: 5px;
+        }
+
+        .playground-text {
+            color: black;
+        }
+    }
+}
+
+.colorFlyout {
+    margin-top: 2px;
+    margin-right: 25px;
+
+    .colorFlyout-button {
+        width: 20px;
+        height: 20px;
+        border: 0.5px solid black;
+        border-radius: 5px;
+    }
+}
+
+.preferences-content {
+    display: flex;
+    margin-top: 4px;
+
+    .preferences-color {
+        display: flex;
+
+        .preferences-color-text {
+            color: black;
+            font-size: 11;
+            margin-top: 4;
+            margin-right: 4;
+        }
+    }
+
+    .preferences-font {
+        display: flex;
+
+        .preferences-font-text {
+            color: black;
+            font-size: 11;
+            margin-top: 4;
+            margin-right: 4;
+        }
+
+        .font-select {
+            width: 100px;
+            color: black;
+            font-size: 9;
+            margin-right: 6;
+            border-radius: 5px;
+        }
+
+        .size-select {
+            width: 60px;
+            color: black;
+            font-size: 9;
+            border-radius: 5px;
+        }
+    }
+}
+
 .settings-interface {
     display: flex;
     flex-direction: column;
 
     button {
-        width: 100%;
+        width: auto;
         align-self: center;
         background: #252b33;
-        margin-top: 4px;
+        margin-right: 15px;
+
+        //margin-top: 4px;
 
         &:hover {
             background: $main-accent;
         }
     }
 
-    .delete-button {
-        background: rgb(227, 86, 86);
-    }
+    // .delete-button {
+    //     background: rgb(227, 86, 86);
+    // }
 
     .close-button {
         position: absolute;
@@ -48,57 +190,89 @@
         cursor: pointer;
     }
 
-    .settings-heading {
-        letter-spacing: .5em;
-    }
+    // .settings-heading {
+    //     letter-spacing: .5em;
+    // }
 
+    .settings-content {
+        background: #e4e4e4;
+        border-radius: 6px;
+        padding: 10px;
+        width: 560px;
+    }
 
-    .settings-body {
+    .settings-top {
         display: flex;
-        justify-content: space-between;
-        margin-top: -10;
+        margin-bottom: 10px;
+    }
 
-        .settings-type {
-            display: flex;
-            flex-direction: column;
-            flex-basis: 45%;
+    // .settings-body {
+    //     display: flex;
+    //     justify-content: space-between;
+    //     margin-top: -10;
 
-        }
+    //     .settings-type {
+    //         display: flex;
+    //         flex-direction: column;
+    //         flex-basis: 45%;
 
-        .settings-content {
-            padding-left: 1em;
-            padding-right: 1em;
-            display: flex;
-            flex-direction: column;
-            flex-basis: 70%;
-            justify-content: space-around;
-            text-align: left;
-
-            ::placeholder {
-                color: $intermediate-color;
-            }
-
-            input {
-                border-radius: 5px;
-                border: none;
-                padding: 4px;
-                min-width: 100%;
-                margin: 2px 0;
-            }
-
-            .error-text {
-                color: #C40233;
-            }
-
-            .success-text {
-                color: #009F6B;
-            }
-
-            p {
-                padding: 0 0 .1em .2em;
-            }
+    //     }
 
-        }
+    //     .settings-content {
+    //         background: whitesmoke;
+    //         border-radius: 6px;
+
+    //         // padding-left: 1em;
+    //         // padding-right: 1em;
+    //         // display: flex;
+    //         // flex-direction: column;
+    //         // flex-basis: 70%;
+    //         // justify-content: space-around;
+    //         // text-align: left;
+
+    //         ::placeholder {
+    //             color: $intermediate-color;
+    //         }
+
+    //         input {
+    //             border-radius: 5px;
+    //             border: none;
+    //             padding: 4px;
+    //             min-width: 100%;
+    //             margin: 2px 0;
+    //         }
+
+    //         .error-text {
+    //             color: #C40233;
+    //         }
+
+    //         .success-text {
+    //             color: #009F6B;
+    //         }
+
+    //         p {
+    //             padding: 0 0 .1em .2em;
+    //         }
+
+    //     }
+    // }
+
+    .error-text {
+        color: #C40233;
+        width: 300;
+        margin-left: -20;
+        font-size: 10;
+        margin-bottom: 4;
+        margin-top: -3;
+    }
+
+    .success-text {
+        width: 300;
+        margin-left: -20;
+        font-size: 10;
+        margin-bottom: 4;
+        margin-top: -3;
+        color: #009F6B;
     }
 
     .focus-span {
@@ -138,8 +312,6 @@
             color: black;
         }
 
-
-
     }
 }