styling adjustments on the color palette editor

ellaestigoy · ellaestigoy · commit f903ffa7fe53 · 2025-05-22T17:55:09.000-06:00
diff --git a/app/assets/javascripts/admin/addon/components/color-palette-editor.gjs b/app/assets/javascripts/admin/addon/components/color-palette-editor.gjs
@@ -126,15 +126,17 @@ const Picker = class extends Component {
       {{on "input" this.onInput}}
       {{on "change" this.onChange}}
     />
-    {{icon "hashtag"}}
-    <input
-      class="color-palette-editor__text-input"
-      type="text"
-      maxlength="6"
-      value={{this.displayedColor}}
-      {{on "keypress" this.onTextKeypress}}
-      {{on "change" this.onTextChange}}
-    />
+    <div class="color-palette-editor__input-wrapper">
+      {{icon "hashtag" class="color-palette-editor__icon"}}    
+      <input
+        class="color-palette-editor__text-input"
+        type="text"
+        maxlength="6"
+        value={{this.displayedColor}}
+        {{on "keypress" this.onTextKeypress}}
+        {{on "change" this.onTextChange}}
+      />
+    </div>
   </template>
 };
 
diff --git a/app/assets/stylesheets/admin/color-palette-editor.scss b/app/assets/stylesheets/admin/color-palette-editor.scss
@@ -40,31 +40,52 @@
 
   &__picker {
     display: flex;
-    justify-content: center;
     align-items: center;
-    padding: 5px 10px;
-    gap: 5px;
+    gap: var(--space-2);
+    padding: var(--space-2);
     border: 1px solid var(--primary-low);
+    border-radius: var(--d-input-border-radius);
 
-    .d-icon-hashtag {
-      color: var(--primary-high);
-      font-size: var(--font-down-2);
+    &:focus-within {
+      border-color: var(--tertiary);
+      outline: 2px solid var(--tertiary);
+      outline-offset: -2px;
     }
   }
 
+  &__input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  &__icon {
+    position: absolute;
+    pointer-events: none;
+    color: var(--primary-medium);
+    font-size: var(--font-down-2);
+  }
+
   &__revert.--hidden {
     visibility: hidden;
   }
 
   input[type="color"] {
     width: 23px;
     height: 23px;
+    border-radius: 100px;
   }
 
   input[type="text"] {
     font-family: monospace;
     margin: 0;
-    width: 5em;
+    width: 4.5rem;
+    padding-left: var(--space-4);
+    border: none;
+
+    &:focus {
+      outline: none;
+    }
   }
 
   &__color-code {
