From ac9d1fdc85c80745b4802eafad68369bd1d0c2cd Mon Sep 17 00:00:00 2001
From: ncoronel <ncoronel@quo.ar>
Date: Wed, 1 Jul 2026 16:50:24 -0300
Subject: [PATCH] feat: update store header and input styles for improved UI
 consistency

---
 .../store-header/store-header.component.html  |  4 +-
 .../store-header/store-header.component.scss  | 37 +++++++++++++------
 .../components/input/input.component.scss     | 17 ++++++---
 3 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/src/app/core/layout/store-layout/store-header/store-header.component.html b/src/app/core/layout/store-layout/store-header/store-header.component.html
index 35df4ba..61883d5 100644
--- a/src/app/core/layout/store-layout/store-header/store-header.component.html
+++ b/src/app/core/layout/store-layout/store-header/store-header.component.html
@@ -1,6 +1,6 @@
 <header class="store-layout__header">
   <div class="store-layout__header-main">
-    <div class="container-xl px-3 px-md-4 py-3 py-lg-4 d-flex flex-wrap align-items-center justify-content-between gap-3">
+    <div class="container-xl px-3 px-md-4 py-3 py-lg-4 d-flex flex-row flex-wrap align-items-center justify-content-between gap-3">
       <div
         class="store-layout__brand-slot d-inline-flex align-items-center gap-3 flex-shrink-0"
         data-testid="store-header-brand-slot"
@@ -15,7 +15,7 @@
         }
       </div>
 
-      <div class="d-flex flex-column flex-md-row align-items-stretch align-items-md-center gap-3 ms-auto w-100 w-lg-auto">
+      <div class="d-flex flex-row align-items-center gap-3 ms-auto store-layout__actions-group">
         <div class="input-group store-layout__search" role="search">
           <label class="visually-hidden" for="store-search-input">Buscar productos</label>
           <input
diff --git a/src/app/core/layout/store-layout/store-header/store-header.component.scss b/src/app/core/layout/store-layout/store-header/store-header.component.scss
index 80766d0..69da165 100644
--- a/src/app/core/layout/store-layout/store-header/store-header.component.scss
+++ b/src/app/core/layout/store-layout/store-header/store-header.component.scss
@@ -45,47 +45,56 @@
   min-width: 18rem;
 }
 
+.store-layout__actions-group {
+  flex-wrap: nowrap;
+}
+
 .store-layout__search-input {
-  border-color: rgba(255, 255, 255, 0.2);
+  color: #666666;
+  border-color: #cccccc;
   background-color: rgba(255, 255, 255, 0.96);
 }
 
+.store-layout__search-input::placeholder {
+  color: #666666;
+}
+
 .store-layout__search-input:focus {
   border-color: var(--tenant-primary);
   box-shadow: 0 0 0 0.25rem color-mix(in srgb, white 70%, var(--tenant-primary));
 }
 
 .store-layout__search-button {
-  color: #ffffff;
-  border-color: rgba(255, 255, 255, 0.2);
-  background-color: color-mix(in srgb, white 10%, var(--tenant-header-bg));
+  color: #a0a0a0;
+  border-color: #cccccc;
+  background-color: rgba(255, 255, 255, 0.96);
 }
 
 .store-layout__search-button:hover,
 .store-layout__search-button:focus-visible {
-  color: #ffffff;
-  border-color: rgba(255, 255, 255, 0.28);
-  background-color: color-mix(in srgb, white 16%, var(--tenant-header-bg));
+  color: #8a8a8a;
+  border-color: #cccccc;
+  background-color: #ffffff;
 }
 
 .store-layout__action-button {
-  color: #ffffff;
+  color: #a0a0a0;
 }
 
 .store-layout__action-button:hover,
 .store-layout__action-button:focus-visible {
-  color: color-mix(in srgb, white 84%, var(--tenant-primary));
+  color: #8a8a8a;
 }
 
 .store-layout__category-trigger {
   font-size: 0.8rem;
   letter-spacing: 0.02em;
-  color: #ffffff;
+  color: #a0a0a0;
 }
 
 .store-layout__category-trigger:hover,
 .store-layout__category-trigger:focus-visible {
-  color: color-mix(in srgb, white 84%, var(--tenant-primary));
+  color: #8a8a8a;
 }
 
 @keyframes store-header-logo-skeleton {
@@ -103,7 +112,13 @@
     min-width: 0;
   }
 
+  .store-layout__actions-group {
+    width: 100%;
+    justify-content: space-between;
+  }
+
   .store-layout__search {
+    flex: 1 1 auto;
     min-width: 0;
   }
 }
diff --git a/src/app/shared/components/input/input.component.scss b/src/app/shared/components/input/input.component.scss
index 2824ebf..4bcc102 100644
--- a/src/app/shared/components/input/input.component.scss
+++ b/src/app/shared/components/input/input.component.scss
@@ -14,7 +14,7 @@
   right: 1rem;
   top: 50%;
   z-index: 1;
-  color: #495057;
+  color: #a0a0a0;
   transform: translateY(-50%);
   pointer-events: none;
 }
@@ -23,7 +23,8 @@
   min-height: 40px;
   padding: 0.625rem 1rem;
   border-radius: 0.5rem;
-  color: #212529;
+  border-color: #cccccc;
+  color: #666666;
   font-size: 15px;
   font-weight: 400;
 
@@ -34,6 +35,10 @@
   &:disabled {
     opacity: 1;
   }
+
+  &::placeholder {
+    color: #666666;
+  }
 }
 
 .input-with-search-icon {
@@ -116,7 +121,7 @@ input[type='file'].form-control {
     padding: 0;
     border: 0;
     background: transparent;
-    color: #495057;
+    color: #a0a0a0;
     transform: translateY(-50%);
     cursor: pointer;
     transition: color 0.2s ease;
@@ -127,10 +132,10 @@ input[type='file'].form-control {
   }
 
   .input-icon-active {
-    color: #adb5bd;
+    color: #a0a0a0;
 
     &:hover {
-      color: #495057;
+      color: #8a8a8a;
     }
   }
 
@@ -145,7 +150,7 @@ input[type='file'].form-control {
     right: 1rem;
     top: 50%;
     z-index: 1;
-    color: #495057;
+    color: #a0a0a0;
     transform: translateY(-50%);
     pointer-events: none;
   }