ui: new look

AmraniCh · Feb 8, 2024 · bdee724 · bdee724
1 parent ae9908c
commit bdee724
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 39 deletions.
diff --git a/src/background.js b/src/background.js
@@ -43,6 +43,7 @@ chrome.tabs.onUpdated.addListener(function (tabId, info) {
                 applyFontFamily(data.gt_font_family);
                 applyFontWeight(data.gt_font_weight);
                 applyFontSize(data.gt_font_size);
+
                 data.gt_indent_guides ? showIndentGuides() : hideIndentGuides();
             }
         });

diff --git a/src/popup.css b/src/popup.css
@@ -1,25 +1,41 @@
+:root {
+    --primary-color: #298f8e
+}
+
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    color: var(--primary-color);
+    font-weight: 500;
 }
 
-form {
-    width: 270px;
+input[type="checkbox"] {
+    accent-color: var(--primary-color);
+}
+
+input::placeholder {
+    color: var(--primary-color);
+    opacity: .6;
+}
+
+.form {
+    width: 320px;
     background-color: #fff;
-    border-bottom: 6px solid #8974ff;
-    padding-bottom: 15px;
+    border-right: 6px solid var(--primary-color);
+    border-bottom: 6px solid var(--primary-color);
+    padding: 15px 10px 15px 10px;
 }
 
 .title {
     text-align: left;
     background-color: #fff;
     text-transform: uppercase;
     margin-bottom: 15px;
-    padding: 15px 10px;
+    padding: 15px 15px;
     display: flex;
     align-items: center;
-    border-bottom: 1px solid #ddd;
+    border-bottom: 2px solid var(--primary-color);
 }
 
 .title img.logo {
@@ -28,48 +44,57 @@ form {
 
 .title span {
     font-size: 24px;
-    color: #222;
     margin-left: 10px;
 }
 
+.label {
+    font-size: .9rem;
+}
+
 .input-field,
 .checkbox-field {
-    margin-bottom: 15px;
+    margin-bottom: 10px;
     padding: 0 8px;
 }
 
+.input-field .label::first-letter {
+    text-transform: uppercase;
+}
+
 .input-field .label {
     display: block;
     margin-bottom: 8px;
-    font-size: 0.9rem;
     text-align: left;
 }
 
-.checkbox-field .control {
-    margin-right: 5px;
-}
-
-.checkbox-field .label,
-.checkbox-field .control {
-    vertical-align: middle;
-}
-
-.input-field .label::first-letter {
-    text-transform: uppercase;
-}
-
 .input-field .control {
-    padding: 7px;
+    transition: all .1s linear;
+    padding: 8px;
     width: 100%;
+    font-size: 1.2rem;
+    margin-top: 8px;
+    border: 2px solid var(--primary-color);
+    border-radius: 5px;
 }
 
 .input-field select.control {
     border: 1px solid #ddd;
     text-align: center;
 }
 
-.input-field select.control:focus {
-    border-color: #74b9ff;
+.input-field .control:focus {
+    outline: 3px solid var(--primary-color);
+}
+
+.checkbox-field .control {
+    margin-right: 5px;
+    width: 15px;
+    height: 15px;
+}
+
+.checkbox-field .label,
+.checkbox-field .control {
+    vertical-align: middle;
 }
 
 .apply-btn {
@@ -87,4 +112,4 @@ form {
 
 .apply-btn:hover {
     opacity: 0.8;
-}
+}
diff --git a/src/popup.html b/src/popup.html
@@ -1,30 +1,39 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
     <head>
         <title>Popup</title>
         <link rel="stylesheet" type="text/css" href="./popup.css" />
     </head>
 
     <body>
-        <form>
+        <form class="form">
             <h1 class="title">
-                <img class="logo" src="images/logo-wide.png" />
+                <img class="logo" src="images/logo/V2/logo-wide.png" />
             </h1>
 
             <div class="input-field">
-                <input id="font_family" class="control" list="font_family_list" placeholder="Souce Code Pro.."/>
-                <datalist id="font_family_list"> </datalist>
+                <label class="label" for="font_family">
+                    Font: 
+                    <input id="font_family" class="control" list="font_family_list" placeholder="Souce Code Pro.." />
+                    <datalist id="font_family_list"> </datalist>
+                </label>
             </div>
 
             <div class="input-field">
-                <input id="fonts_weight" class="control" list="fonts_weight_list" placeholder="light, medium, bold" />
-                <datalist id="fonts_weight_list"> </datalist>
+                <label class="label" for="font_weight">
+                    Weight: 
+                    <input id="font_weight" class="control" list="font_weight_list" placeholder="light, medium, bold" />
+                    <datalist id="font_weight_list"> </datalist>
+                </label>
             </div>
 
             <div class="input-field">
-                <input id="fonts_size" class="control" placeholder="16px, 1em, 1.2rem" />
+                <label class="label" for="font_weight">
+                    Size:
+                    <input id="font_size" class="control" placeholder="16px, 1em, 1.2rem" />
+                </label>
             </div>
-
+            
             <div class="checkbox-field">
                 <input type="checkbox" id="indentGuides" class="control" />
                 <label for="indentGuides" class="label">Hide indentation guides</label>

diff --git a/src/popup.js b/src/popup.js
@@ -16,9 +16,9 @@ const /**
      */
     fontsDatalist = document.querySelector('#font_family_list'),
     fontsDatalistInput = document.querySelector('#font_family'),
-    weightsDatalist = document.querySelector('#fonts_weight_list'),
-    weightsDatalistInput = document.querySelector('#fonts_weight'),
-    fontSizeInput = document.querySelector('#fonts_size'),
+    weightsDatalist = document.querySelector('#font_weight_list'),
+    weightsDatalistInput = document.querySelector('#font_weight'),
+    fontSizeInput = document.querySelector('#font_size'),
     IndentGuidesCheckbox = document.querySelector('#indentGuides');
 
 // popup document content loaded
@@ -87,7 +87,7 @@ function fillFontsDrodown() {
  * Get font settings from storage and initialize the select dropdowns
  */
 function updateUIFromStorage() {
-    chrome.storage.sync.get(['gt_font_family', 'gt_font_weight', 'gt_font_size', 'gt_indent_guide'], function (data) {
+    chrome.storage.sync.get(['gt_font_family', 'gt_font_weight', 'gt_font_size', 'gt_font_size', 'gt_indent_guide'], function (data) {
         console.log(data);
         if (Object.keys(data).length > 0) {
             const isLocalFont = Object.keys(fonts).indexOf(data.gt_font_family) === -1;