From b32e612fa523452627b45d696f4b0e44ea01daf7 Mon Sep 17 00:00:00 2001
From: Jack <bartnikjack@gmail.com>
Date: Mon, 5 Jul 2021 23:49:50 +0100
Subject: [PATCH] fixed settings button styling

---
 src/js/settings.js  | 10 +++++-----
 src/sass/style.scss | 43 ++++++++++++++++++++++---------------------
 2 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/src/js/settings.js b/src/js/settings.js
index 06746b2aa..667d47c64 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -428,13 +428,13 @@ function refreshTagsSettingsSection() {
           <div class="title">${tag.name}</div>
         </div>
         <div class="clearPbButton button">
-          <i class="fas fa-crown"></i>
+          <i class="fas fa-crown fa-fw"></i>
         </div>
         <div class="editButton button">
-          <i class="fas fa-pen"></i>
+          <i class="fas fa-pen fa-fw"></i>
         </div>
         <div class="removeButton button">
-          <i class="fas fa-trash"></i>
+          <i class="fas fa-trash fa-fw"></i>
         </div>
       </div>
 
@@ -456,10 +456,10 @@ function refreshPresetsSettingsSection() {
           <div class="title">${preset.name}</div>
         </div>
         <div class="editButton button">
-          <i class="fas fa-pen"></i>
+          <i class="fas fa-pen fa-fw"></i>
         </div>
         <div class="removeButton button">
-          <i class="fas fa-trash"></i>
+          <i class="fas fa-trash fa-fw"></i>
         </div>
       </div>
       
diff --git a/src/sass/style.scss b/src/sass/style.scss
index f9e85db44..7392722f2 100644
--- a/src/sass/style.scss
+++ b/src/sass/style.scss
@@ -1879,41 +1879,41 @@ key {
     // grid-area: wordsHistory;
     color: var(--sub-color);
     grid-column: 1/3;
-    .heatmapLegend{
+    .heatmapLegend {
       display: inline-grid;
       grid-template-columns: auto auto auto;
       gap: 1rem;
-      font-size: .75rem;
+      font-size: 0.75rem;
       color: var(--sub-color);
       width: min-content;
-      .boxes{
+      .boxes {
         display: flex;
-        .box{
+        .box {
           width: 1rem;
           height: 1rem;
         }
-        .box:nth-child(1){
+        .box:nth-child(1) {
           background: var(--colorful-error-color);
           border-radius: var(--roundness) 0 0 var(--roundness);
         }
-        .box:nth-child(2){
+        .box:nth-child(2) {
           background: var(--colorful-error-color);
           filter: opacity(0.6);
         }
-        .box:nth-child(3){
+        .box:nth-child(3) {
           background: var(--sub-color);
         }
-        .box:nth-child(4){
+        .box:nth-child(4) {
           background: var(--main-color);
           filter: opacity(0.6);
         }
-        .box:nth-child(5){
+        .box:nth-child(5) {
           background: var(--main-color);
           border-radius: 0 var(--roundness) var(--roundness) 0;
         }
       }
     }
-    .title{
+    .title {
       user-select: none;
     }
     .words {
@@ -1934,21 +1934,21 @@ key {
         letter.incorrect.extra {
           color: var(--error-extra-color);
         }
-        &.heatmap-0 letter{
+        &.heatmap-0 letter {
           color: var(--colorful-error-color);
         }
-        &.heatmap-1 letter{
+        &.heatmap-1 letter {
           color: var(--colorful-error-color);
           filter: opacity(0.6);
         }
-        &.heatmap-2 letter{
+        &.heatmap-2 letter {
           color: var(--sub-color);
         }
-        &.heatmap-3 letter{
+        &.heatmap-3 letter {
           color: var(--main-color);
           filter: opacity(0.6);
         }
-        &.heatmap-4 letter{
+        &.heatmap-4 letter {
           color: var(--main-color);
         }
       }
@@ -2050,7 +2050,8 @@ key {
       }
 
       &.time {
-        .afk, .timeToday {
+        .afk,
+        .timeToday {
           color: var(--sub-color);
           font-size: 0.75rem;
           line-height: 0.75rem;
@@ -2899,15 +2900,15 @@ key {
 
     .inputAndSave {
       display: grid;
-      grid-template-columns: 2fr 1fr;
+      grid-template-columns: 8fr 1fr;
       gap: 0.5rem;
       margin-bottom: 0.5rem;
       input {
-        grid-column: 1/3;
+        // grid-column: 1/3;
       }
 
       .save {
-        grid-column: 3/4;
+        // grid-column: 3/4;
         height: auto;
 
         .fas {
@@ -3017,7 +3018,7 @@ key {
       }
 
       .tag {
-        grid-template-columns: 5fr 1fr 1fr;
+        grid-template-columns: 6fr 1fr 1fr 1fr;
         margin-bottom: 0.5rem;
       }
 
@@ -3057,7 +3058,7 @@ key {
       }
 
       .preset {
-        grid-template-columns: 5fr 1fr 1fr;
+        grid-template-columns: 7fr 1fr 1fr;
         margin-bottom: 0.5rem;
       }