From 4f6673172303d84c7b757f6d34ae2f0abbaf7fcc Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 7 Oct 2024 02:16:24 +0300
Subject: [PATCH] lookin' good

---
 .../component_preview/component_preview.vue        |  2 ++
 src/components/input.style.js                      | 14 +++++++-------
 .../settings_modal/tabs/style_tab/style_tab.scss   | 10 ++++++++++
 .../settings_modal/tabs/style_tab/style_tab.vue    |  5 ++++-
 src/components/shadow_control/shadow_control.scss  | 10 +++++-----
 src/i18n/en.json                                   |  2 +-
 6 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/components/component_preview/component_preview.vue b/src/components/component_preview/component_preview.vue
index b6ef235a..e34a6f3c 100644
--- a/src/components/component_preview/component_preview.vue
+++ b/src/components/component_preview/component_preview.vue
@@ -111,6 +111,8 @@ export default {
     "x-num   x-slide .      "
     "options options options";
   grid-gap: 0.5em;
+  max-width: 25em;
+  max-height: 25em;
 
   .header {
     grid-area: header;
diff --git a/src/components/input.style.js b/src/components/input.style.js
index 087de1e1..c60ac1e4 100644
--- a/src/components/input.style.js
+++ b/src/components/input.style.js
@@ -18,9 +18,9 @@ export default {
     {
       component: 'Root',
       directives: {
-        '--inputDefaultBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2)',
-        '--inputDefaultHoverGlow': 'shadow | 0 0 4 --text / 0.5',
-        '--inputDefaultFocusGlow': 'shadow | 0 0 4 4 --link / 0.5'
+        '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2)',
+        '--defaultInputHoverGlow': 'shadow | 0 0 4 --text / 0.5',
+        '--defaultInputFocusGlow': 'shadow | 0 0 4 4 --link / 0.5'
       }
     },
     {
@@ -41,25 +41,25 @@ export default {
           spread: 0,
           color: '#000000',
           alpha: 1
-        }, '--inputDefaultBevel']
+        }, '--defaultInputBevel']
       }
     },
     {
       state: ['hover'],
       directives: {
-        shadow: ['--inputDefaultHoverGlow', '--inputDefaultBevel']
+        shadow: ['--defaultInputHoverGlow', '--defaultInputBevel']
       }
     },
     {
       state: ['focused'],
       directives: {
-        shadow: ['--inputDefaultFocusGlow', '--inputDefaultBevel']
+        shadow: ['--defaultInputFocusGlow', '--defaultInputBevel']
       }
     },
     {
       state: ['focused', 'hover'],
       directives: {
-        shadow: ['--inputDefaultFocusGlow', '--inputDefaultHoverGlow', '--inputDefaultBevel']
+        shadow: ['--defaultInputFocusGlow', '--defaultInputHoverGlow', '--defaultInputBevel']
       }
     },
     {
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.scss b/src/components/settings_modal/tabs/style_tab/style_tab.scss
index 69349f78..51d4a1a7 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.scss
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.scss
@@ -119,6 +119,12 @@
     }
   }
 
+  .palettes-editor {
+    .list-edit-area {
+      align-self: baseline;
+    }
+  }
+
   .variables-editor {
     .variable-selector {
       display: grid;
@@ -132,6 +138,10 @@
       display: grid;
       grid-template-rows: subgrid;
     }
+
+    .shadow-control {
+      grid-row: 2 / span 2;
+    }
   }
 
   .component-editor {
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
index 1150a406..1ccd7ab8 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -4,6 +4,7 @@
 <template>
   <div class="StyleTab">
     <div class="setting-item heading">
+      <!-- TODO: This needs to go -->
       <h2>{{ $t('settings.style.themes3.editor.title') }}</h2>
       <button
         class="btn button-default"
@@ -350,7 +351,9 @@
             <Select
               v-model="selectedVirtualDirective.valType"
             >
-              <option value='shadow'>shadow</option>
+              <option value='shadow'>
+              {{ $t('settings.style.themes3.variables.type_label') }}
+                shadow</option>
               <option value='shadow'>color</option>
               <option value='shadow'>generic</option>
             </Select>
diff --git a/src/components/shadow_control/shadow_control.scss b/src/components/shadow_control/shadow_control.scss
index b0cf7014..06381b1b 100644
--- a/src/components/shadow_control/shadow_control.scss
+++ b/src/components/shadow_control/shadow_control.scss
@@ -9,12 +9,11 @@
   width: 100%;
 
   &.-compact {
-    grid-template-columns: 1fr;
-    grid-template-rows: 10em auto auto;
+    grid-template-columns: 10em 1fr;
+    grid-template-rows: auto auto;
     grid-template-areas:
-      "selector"
-      "preview"
-      "tweak";
+      "selector preview"
+      "tweak tweak";
 
     &.-no-preview {
       grid-template-columns: 1fr;
@@ -116,6 +115,7 @@
     min-width: 10em;
     margin-left: 0.125em;
     align-self: start;
+    justify-self: center;
   }
 }
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 1e800e78..0f2a4781 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -757,7 +757,7 @@
       "themes3": {
         "define": "Override",
         "palette": {
-          "label": "Palette",
+          "label": "Palettes",
           "import": "Import",
           "export": "Export",
           "bg": "Panel background",