From bdee724e960b46e7d178810d53888cc71ede450b Mon Sep 17 00:00:00 2001 From: Shakir El Amrani Date: Fri, 9 Feb 2024 00:32:27 +0100 Subject: [PATCH] ui: new look --- src/background.js | 1 + src/popup.css | 77 +++++++++++++++++++++++++++++++---------------- src/popup.html | 27 +++++++++++------ src/popup.js | 8 ++--- 4 files changed, 74 insertions(+), 39 deletions(-) diff --git a/src/background.js b/src/background.js index fcafa37..9250b7c 100644 --- 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 index 6d4794d..2992985 100644 --- a/src/popup.css +++ b/src/popup.css @@ -1,14 +1,30 @@ +: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 { @@ -16,10 +32,10 @@ form { 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,39 +44,37 @@ 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 { @@ -68,8 +82,19 @@ form { 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; -} +} \ No newline at end of file diff --git a/src/popup.html b/src/popup.html index 258c23f..d1b34f8 100644 --- a/src/popup.html +++ b/src/popup.html @@ -1,4 +1,4 @@ - + Popup @@ -6,25 +6,34 @@ -
+

- +

- - +
- - +
- +
- +
diff --git a/src/popup.js b/src/popup.js index 8af3683..08eaa18 100644 --- 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;