From 878e4b24d54bd9153a43ee7d76657d2244a7a8c2 Mon Sep 17 00:00:00 2001
From: Tropical <42101043+Tropix126@users.noreply.github.com>
Date: Sat, 24 Oct 2020 03:11:22 -0500
Subject: [PATCH] Creates a more consistent CSS editor + Less cramped public
 button (#470)

* fix magnifying glass on light mode, minor text miscoloring on search bars

* Better, more consistent CSS editor and less cramped public button.

* stupid linter
---
 src/styles/builtins/customcss.css     | 51 +++++++++++++++++----------
 src/styles/builtins/publicservers.css | 12 +++----
 src/styles/ui/floatingwindow.css      | 47 +++++++++++++-----------
 3 files changed, 65 insertions(+), 45 deletions(-)

diff --git a/src/styles/builtins/customcss.css b/src/styles/builtins/customcss.css
index db78d062..afc27464 100644
--- a/src/styles/builtins/customcss.css
+++ b/src/styles/builtins/customcss.css
@@ -6,7 +6,7 @@
 #bd-editor-controls button {
     margin: 0 5px 0 0;
     background: none;
-    color: #fff;
+    color: var(--interactive-normal);
     height: 26px;
     font-weight: 600;
     border-radius: 3px;
@@ -15,26 +15,28 @@
 }
 
 #bd-editor-controls button:hover {
-    background: rgba(255, 255, 255, 0.05);
+    background: var(--background-modifier-hover);
+    color: var(--interactive-hover);
+}
+
+#bd-editor-controls button:active {
+    background: var(--background-modifier-active);
 }
 
 #bd-editor-controls button svg {
-    fill: #fff;
-}
-
-#bd-editor-controls button:last-of-type {
-    margin-right: 0;
+    fill: currentColor;
 }
 
 #bd-editor-controls {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background: #272822;
+    background: var(--background-secondary-alt);
     color: #fff;
     border: none;
-    box-shadow: 0 1px 0 0 #2f3129 inset;
+    box-shadow: var(--elevation-low);
     padding: 5px;
+    z-index: 10;
 }
 
 .editor-wrapper {
@@ -51,22 +53,34 @@
 }
 
 .bd-monokai .editor .ace_gutter {
-    background: #2f3136;
+    background: var(--background-secondary-alt);
+    color: var(--header-secondary);
+    font-size: 12px;
 }
 
 .bd-monokai .ace_editor {
-    background: #292b2f;
+    background: var(--background-secondary);
 }
 
-.bd-monokai #bd-editor-controls {
-    background: #202225;
+.bd-monokai .ace_line {
+    color: var(--text-normal);
 }
 
-.theme-light #bd-editor-controls {
-    background: #e8e8e8;
-    border: 1px solid #fff;
-    border-top: 1px solid #adadad;
-    box-shadow: inset 0 1px 0 0 white;
+.editor-wrapper .bd-monokai .ace_cursor {
+    color: var(--text-normal);
+}
+
+.editor-wrapper .bd-monokai .ace_gutter-active-line {
+    background: var(--background-tertiary);
+}
+
+.editor-wrapper .bd-monokai .ace_marker-layer .ace_active-line {
+    background: var(--background-secondary-alt);
+}
+
+.editor-wrapper .bd-monokai .ace_marker-layer .ace_selection {
+    background: #3e82e5;
+    opacity: 0.5;
 }
 
 .controls-section {
@@ -86,6 +100,7 @@
 
 .controls-section .checkbox-label {
     font-size: 14px;
+    font-weight: 500;
 }
 
 /* Ace Editor Settings */
diff --git a/src/styles/builtins/publicservers.css b/src/styles/builtins/publicservers.css
index 0ae19020..9ebb8118 100644
--- a/src/styles/builtins/publicservers.css
+++ b/src/styles/builtins/publicservers.css
@@ -1,17 +1,17 @@
 #bd-pub-li {
-    height: 20px;
+    height: 24px;
     margin-bottom: 10px;
     overflow: hidden;
 }
 
 #bd-pub-button {
-    border-radius: 4px;
-    background-color: rgb(47, 49, 54);
-    color: #b9bbbe;
+    border-radius: 3px;
+    background-color: var(--background-secondary);
+    color: var(--interactive-normal);
     text-align: center;
     font-size: 12px;
-    line-height: 20px;
-    height: 20px;
+    line-height: 24px;
+    height: 24px;
 }
 
 .bd-layer {
diff --git a/src/styles/ui/floatingwindow.css b/src/styles/ui/floatingwindow.css
index faececad..ec2888e5 100644
--- a/src/styles/ui/floatingwindow.css
+++ b/src/styles/ui/floatingwindow.css
@@ -29,32 +29,34 @@
     overflow: auto;
     resize: both;
     padding-bottom: 10px;
-    background: #202225;
+    background: var(--background-tertiary);
 }
 
 .floating-window-titlebar {
     width: 100%;
+    height: 28px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background: #202225; /* #2F3129background-color: #202225; */
     color: #fff;
-    border-bottom: 1px solid #272822;
+    background: var(--background-tertiary); /* #2F3129background-color: #202225; */
 }
 
 .floating-window-content {
     display: flex;
     flex-direction: column;
-    background: #2f3129;
+    background: var(--background-secondary);
     color: #fff;
     flex: 1;
 }
 
 .floating-window-titlebar .title {
     /* font-weight: bold; */
+    font-size: 0.85em;
+    font-weight: 600;
+    color: var(--header-secondary);
     flex: 1;
-    text-align: center;
-    padding: 2px 0;
+    padding: 0 8px;
 }
 
 .floating-window-buttons {
@@ -63,28 +65,30 @@
 
 .floating-window-buttons .button {
     cursor: pointer;
-    padding: 0 2px;
+    height: 28px;
+    width: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--interactive-normal);
 }
 
-.floating-window-buttons .button svg {
-    fill: #dcddde;
-    margin-top: 1.5px;
+.floating-window-buttons .button svg,
+.floating-window-buttons .close-button:hover svg path.fill {
+    fill: currentColor;
 }
 
-.floating-window-buttons .button:hover svg {
-    fill: #fff;
+.floating-window-buttons .maximize-button:hover {
+    background: var(--background-modifier-hover);
 }
 
-.floating-window-buttons .button:hover {
-    background-color: #36393f;
+.floating-window-buttons .maximize-button:active {
+    background: var(--background-modifier-active);
 }
 
 .floating-window-buttons .close-button:hover {
-    background-color: #f04747;
-}
-
-.floating-window-buttons .close-button:hover svg path.fill {
-    fill: #fff;
+    background: #f04747;
+    color: #fff;
 }
 
 .floating-window-content #bd-editor-panel {
@@ -103,10 +107,11 @@
 }
 
 .floating-window #bd-editor-controls {
+    z-index: 10;
     height: auto;
-    background: #202225;
+    background: var(--background-secondary-alt);
     border: none;
-    box-shadow: 0 1px 0 0 #2f3129 inset;
+    box-shadow: var(--elevation-low);
 }
 
 #floating-editor-window {