bug fixes

1 files changed, 42 insertions, 408 deletions

diff --git a/src/client/util/CaptureManager.scss b/src/client/util/CaptureManager.scss
index 5ca54517c..8447bd2d5 100644
--- a/src/client/util/CaptureManager.scss
+++ b/src/client/util/CaptureManager.scss
@@ -1,8 +1,7 @@
 @import "../views/globalCssVariables";
 
-.settings-interface {
+.capture-interface {
     //background-color: whitesmoke !important;
-    color: grey;
     width: 450px;
 
     button {
@@ -21,14 +20,35 @@
     }
 }
 
-.settings-title {
-    font-size: 25px;
-    font-weight: bold;
-    padding-right: 10px;
+.capture-t1 {
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    font-size: 20px;
+    font-family: 'Roboto';
+    font-weight: 600;
     color: black;
+
+    .recordButtonOutline {
+        border-radius: 100%;
+        width: 25px;
+        height: 25px;
+        margin-right: 10px;
+        border: solid 1px #a94442;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .recordButtonInner {
+        border-radius: 100%;
+        width: 70%;
+        height: 70%;
+        background: #a94442;
+    }
 }
 
-.settings-username {
+.capture-t2 {
     font-size: 12px;
     padding-right: 15px;
     color: black;
@@ -39,13 +59,13 @@
     // left: 243;
 }
 
-.settings-section {
+.capture-block {
     display: flex;
     border-bottom: 1px solid grey;
     padding-bottom: 8px;
     padding-top: 6px;
 
-    .settings-section-title {
+    .capture-block-title {
         font-size: 16;
         font-weight: bold;
         text-align: left;
@@ -59,407 +79,21 @@
     }
 }
 
-
-.password-content {
-    display: flex;
-    flex-direction: column;
-
-    .password-content-inputs {
-        width: 100;
-        // margin-bottom: 10px;
-        font-size: 10px;
-
-        .password-inputs {
-            border: 1px solid rgb(160, 160, 160);
-            margin-bottom: 8px;
-            width: 130;
-            color: black;
-            border-radius: 5px;
-            padding:7px;
-            
-        }
-    }
-
-    .password-content-buttons {
-        //margin-left: 84px;
-        //width: 100;
-        padding: 7px;
-
-        .password-submit {
-            //margin-left: 85px;
-            margin-top: 5px;
-        }
-
-        .password-forgot {
-            //margin-left: 65px;
-            //margin-top: -20px;
-            font-size: 12px;
-            white-space: nowrap;
-        }
-    }
-}
-
-.accounts-content {
+.close-button {
+    position: absolute;
+    top: 10;
+    right: 10;
+    background:transparent;
+    border-radius:100%;
+    width: 25px;
+    height: 25px;
     display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: 0.2s;
 }
 
-.modes-content {
-    display: flex;
-    margin-left: 10px;
-    font-size: 12px;
-
-    .modes-select {
-        // width: 170px;
-        width: 80%;
-        height: 35px;
-        margin-right: 10px;
-        color: black;
-        border-radius: 5px;
-
-        &:hover {
-            cursor: pointer;
-        }
-    }
-
-    .modes-playground,
-    .default-acl {
-        display: flex;
-        margin-left: 10px;
-        margin-top: 10px;
-        font-size: 10px;
-
-        .playground-check,
-        .acl-check {
-            margin-right: 5px;
-
-            &:hover {
-                cursor: pointer;
-            }
-        }
-
-        .playground-text {
-            color: black;
-            margin-right: 10px;
-            margin-top: 2;
-        }
-
-        .acl-text {
-            color: black;
-            margin-top: 2;
-            text-align: left;
-        }
-
-    }
-}
-
-.colorFlyout {
-    margin-top: 2px;
-    //margin-right: 18px;
-
-    &:hover {
-        cursor: pointer;
-    }
-
-    .colorFlyout-button {
-        width: 20px;
-        height: 20px;
-        border: 0.5px solid black;
-        border-radius: 5px;
-        padding-top: 3px;
-    }
-}
-
-.prefs-content{
-    text-align: left;
-}
-
-.appearances-content {
-    display: flex;
-    margin-top: 4px;
-    color: black;
-    font-size: 10px;
-
-    .preferences-color {
-        display: flex;
-        margin-top: 2px;
-
-        .preferences-color-text {
-            margin-top: 3px;
-            margin-right: 4;
-            flex: 1 1 auto;
-            text-align: left;
-        }
-
-        .colorFlyout {
-            align-self: flex-end;
-        }
-    }
-
-    .preferences-font {
-        //height: 23px;
-        margin-top: 2px;
-
-        .preferences-font-text {
-            color: black;
-            margin-top: 4;
-            margin-right: 4;
-            margin-bottom: 2px;
-            text-align: left;
-        }
-
-        .preferences-font-controls {
-            display: flex;
-            justify-content: space-between;
-        }
-
-        .font-select {
-            height: 35px;
-            color: black;
-            font-size: 9;
-            margin-right: 6;
-            border-radius: 5px;
-            width: 65%;
-
-            &:hover {
-                cursor: pointer;
-            }
-        }
-
-        .size-select {
-            height: 35px;
-            color: black;
-            font-size: 9;
-            border-radius: 5px;
-            width: 30%;
-
-            &:hover {
-                cursor: pointer;
-            }
-        }
-    }
-
-    .preferences-check {
-        color: black;
-        margin-right: 4;
-        margin-bottom: -3;
-        margin-left: 5;
-        margin-top: -1px;
-        display: inline-block;
-        padding-left: 5px;
-        text-align: left;
-    }
+.close-button:hover {
+    background: rgba(0,0,0,0.1);
 }
 
-.settings-interface {
-    display: flex;
-    flex-direction: column;
-
-    button {
-        width: auto;
-        align-self: center;
-        background: #252b33;
-        margin-right: 15px;
-
-        //margin-top: 4px;
-
-        &:hover {
-            background: $main-accent;
-        }
-    }
-
-    // .delete-button {
-    //     background: rgb(227, 86, 86);
-    // }
-
-    .close-button {
-        position: absolute;
-        right: 1em;
-        top: 1em;
-        cursor: pointer;
-    }
-
-    // .logout-button {
-    //     right: 355;
-    //     position: absolute;
-    // }
-
-    .settings-content {
-        background: #e4e4e4;
-        //border-radius: 6px;
-        padding: 10px;
-        //width: 560px;
-        flex: 1 1 auto;
-    }
-
-    .settings-top {
-        display: flex;
-        margin-bottom: 10px;
-    }
-
-
-    .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 {
-        text-decoration: underline;
-    }
-
-    h1 {
-        color: #121721;
-        text-transform: uppercase;
-        letter-spacing: 2px;
-        font-size: 19;
-        margin-top: 0;
-        font-weight: bold;
-    }
-
-    .container {
-        display: block;
-        position: relative;
-        margin-top: 10px;
-        margin-bottom: 10px;
-        font-size: 22px;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-        width: 700px;
-        min-width: 700px;
-        max-width: 700px;
-        text-align: left;
-        font-style: normal;
-        font-size: 15;
-        font-weight: normal;
-        padding: 0;
-
-        .padding {
-            padding: 0 0 0 20px;
-            color: black;
-        }
-
-    }
-}
-
-.settings-interface {
-    flex-direction: row;
-    position: relative;
-    min-height: 250px;
-    width: 100%;
-
-    .settings-content {
-        background-color: #fdfdfd;
-    }
-}
-
-.settings-panel {
-    position: relative;
-    min-width: 150px;
-    background-color: #e4e4e4;
-
-    .settings-user {
-        position: absolute;
-        bottom: 10px;
-        text-align: center;
-        left: 0;
-        right: 0;
-
-        .settings-username {
-            padding-right: 0px;
-        }
-
-        .logout-button {
-            margin-right: 2px;
-        }
-    }
-}
-
-.settings-tabs {
-    // font-size: 16px;
-    font-weight: 600;
-    color: black;
-
-    .tab-control {
-        padding: 10px;
-        border-bottom: 1px solid #9f9e9e;
-        cursor: pointer;
-
-        &.active {
-            background-color: #fdfdfd;
-        }
-    }
-}
-
-.settings-section-context {
-    width: 100%;
-}
-
-.tab-section {
-    display: none;
-    height: 200px;
-
-    &.active {
-        display: block;
-    }
-}
-
-.tab-content {
-    display: flex;
-    margin: 20px 0;
-
-    .tab-column {
-        flex: 0 0 50%;
-
-        .tab-column-title {
-            color: black;
-            font-size: 16px;
-            font-weight: bold;
-            margin-bottom: 16px;
-       }
-
-       .tab-column-title, .tab-column-content {
-           padding-left: 16px;
-       }
-
-    }
-
-}
-
-.tab-column button {
-    font-size: 9px;
-}
-
-@media only screen and (max-device-width: 480px) {
-    .settings-interface {
-        width: 80vw;
-        height: 400px;
-    }
-
-    .settings-interface .settings-body .settings-content input {
-        font-size: 30;
-    }
-
-    .settings-interface button {
-        width: 100%;
-        font-size: 30px;
-        background: #315a96;
-    }
-
-    .settings-interface .settings-heading {
-        font-size: 25;
-    }
-}