From a98d763e561a8aa7d2a088d0339a9dfc01101ced Mon Sep 17 00:00:00 2001
From: Jack <bartnikjack@gmail.com>
Date: Thu, 2 Jul 2020 19:35:41 +0100
Subject: [PATCH] more css refactoring

---
 public/css/style.scss | 57 +++++++------------------------------------
 public/index.html     |  1 +
 public/js/settings.js |  6 ++---
 3 files changed, 13 insertions(+), 51 deletions(-)

diff --git a/public/css/style.scss b/public/css/style.scss
index 323bf97a0..c19eaba38 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -24,7 +24,8 @@ input[type="color"] {
 	-webkit-appearance: none;
   padding: 0;
   width: 100%;
-  height: 32px;
+  // height: 32px;
+  height: 1.8rem;
   overflow: hidden;
   border-radius: var(--roundness);
 }
@@ -44,7 +45,8 @@ input[type="color"]::-webkit-color-swatch {
   & label {
     position: absolute;
     width: 100%;
-    height: 32px;
+    // height: 32px;
+    line-height: 1.8rem;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -1172,30 +1174,6 @@ key {
       grid-auto-columns: 1fr;
       gap: .5rem;
       grid-area: buttons;
-      .button{
-        color: var(--text-color);
-        cursor: pointer;
-        transition: .25s;
-        padding: .2rem .5rem;
-        border-radius: var(--roundness);
-
-        background: rgba(0,0,0,.1);
-        text-align: center;
-        -webkit-user-select: none;
-        display: grid;
-        align-content: center;
-        height: min-content;
-        height: -moz-min-content;
-        &.active{
-          background: var(--main-color);
-          color: var(--bg-color);
-        }
-        &:hover,&:focus{
-          color: var(--bg-color);
-          background: var(--main-color);
-          outline: none;
-        }
-      }
     }
     &.tags{
       .tagsList{
@@ -1296,27 +1274,6 @@ key {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr 1fr;
         gap: .5rem;
-        .theme, .language, .layout{
-          color: var(--text-color);
-          cursor: pointer;
-          transition: .25s;
-          padding: .2rem .5rem;
-          border-radius: var(--roundness);
-
-          background: rgba(0,0,0,.1);
-          text-align: center;
-          -webkit-user-select: none;
-          display: grid;
-          align-content: center;
-          &.active{
-            background: var(--main-color);
-            color: var(--bg-color);
-          }
-          &:hover,&:focus{
-            color: var(--bg-color);
-            background: var(--main-color);
-          }
-        }
       }
     }
   }
@@ -1331,6 +1288,9 @@ key {
     &.reveal{
       max-height: 100vh;
     }
+    .text{
+      align-self: center;
+    }
   }
 }
 
@@ -1538,7 +1498,7 @@ key {
   color: var(--text-color);
   cursor: pointer;
   transition: .25s;
-  padding: .2rem .5rem;
+  padding: .4rem;
   border-radius: var(--roundness);
 
   background: rgba(0,0,0,.1);
@@ -1548,6 +1508,7 @@ key {
   align-content: center;
   height: min-content;
   height: -moz-min-content;
+  line-height: 1rem;
   .fas,.far{
     margin-right: .5rem;
   }
diff --git a/public/index.html b/public/index.html
index 015513044..ecaa01c4d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -481,6 +481,7 @@
                   <label for="--extra-error-extra-color">#e2b714</label>
                   <input type="color" value="" id="--extra-error-extra-color">
                 </span>
+                <div class="button saveCustomThemeButton" style="grid-column: 4;">Save</div>
             </div>
             <div tabContent="preset" class="tabContent buttons">
             </div>
diff --git a/public/js/settings.js b/public/js/settings.js
index 856f65bc2..069b16396 100644
--- a/public/js/settings.js
+++ b/public/js/settings.js
@@ -2,15 +2,15 @@ function updateSettingsPage(){
 
     let themesEl = $(".pageSettings .section.themes .buttons").empty();
     themesList.forEach(theme => {
-        themesEl.append(`<div class="theme" theme='${theme.name}' style="color:${theme.textColor};background:${theme.bgColor}">${theme.name.replace('_', ' ')}</div>`); 
+        themesEl.append(`<div class="theme button" theme='${theme.name}' style="color:${theme.textColor};background:${theme.bgColor}">${theme.name.replace('_', ' ')}</div>`); 
     })
 
     let langEl = $(".pageSettings .section.languages .buttons").empty();
     Object.keys(words).forEach(language => {
         if(language === "english_10k") return;
-        langEl.append(`<div class="language" language='${language}'>${language.replace('_', ' ')}</div>`);
+        langEl.append(`<div class="language button" language='${language}'>${language.replace('_', ' ')}</div>`);
         if(language === "english_expanded"){
-            langEl.append(`<div class="language" language='english_10k'>english 10k</div>`);
+            langEl.append(`<div class="language button" language='english_10k'>english 10k</div>`);
         }  
     })