feat: apply unified style to the search input field

wojciechmarek · Jun 12, 2023 · 6a35369 · 6a35369
1 parent 636ae14
commit 6a35369
Show file tree

Hide file tree

Showing 9 changed files with 18 additions and 13 deletions.
diff --git a/src/components/molecules/common/IconInput/icon-input.styled.tsx b/src/components/molecules/common/IconInput/icon-input.styled.tsx
@@ -8,6 +8,7 @@ export const IconInputContainer = styled.div`
  flex-direction: row;
  align-items: center;
  justify-content: center;
+ border-radius: var(--standard-border-radius);
 
  border: none;
  height: 3em;
@@ -16,16 +17,20 @@ export const IconInputContainer = styled.div`
 export const InputStyle = styled(Input)`
  height: 100%;
  width: 100%;
+ padding-right: 4em;
+ box-shadow: var(--button-box-shadow);
 `;
 
 export const IconStyle = styled(Icon)`
  position: absolute;
- right: 0;
+ right: 0.5em;
  height: 100%;
  width: 3em;
- color: var(--search-magnifier-color);
- background-color: var(--search-input-border-and-icon-bg-color);
- border-radius: 0 var(--standard-border-radius) var(--standard-border-radius) 0;
+ border-radius: 0 var(--standard-border-radius);
  box-sizing: border-box;
  padding: 0.25em;
+
+ svg {
+ stroke: var(--search-magnifier-color);
+ }
 `;
diff --git a/src/styles/layouts/aurora.css b/src/styles/layouts/aurora.css
@@ -16,7 +16,7 @@
 
  --button-font-color: #ecdde6;
  --text-font-color: #ecdde6;
- --search-magnifier-color: #1a161a;
+ --search-magnifier-color: #ecdde670;
 
  --navbar-content-background: #f3f2ed;
 

diff --git a/src/styles/layouts/bruthalism.css b/src/styles/layouts/bruthalism.css
@@ -17,7 +17,7 @@
 
  --button-font-color: #1a161a;
  --text-font-color: #1a161a;
- --search-magnifier-color: #f6e6f6;
+ --search-magnifier-color: #1a161a6d;
 
  --divider-color: #1a161a;
 

diff --git a/src/styles/layouts/cardboard.css b/src/styles/layouts/cardboard.css
@@ -16,7 +16,7 @@
 
  --button-font-color: #1a161a;
  --text-font-color: #1a161a;
- --search-magnifier-color: #ccc7be;
+ --search-magnifier-color: #1a161a68;
 
  --divider-color: #1a161a;
 

diff --git a/src/styles/layouts/claymorphism.css b/src/styles/layouts/claymorphism.css
@@ -12,7 +12,7 @@
  --navbar-settings-button-bg-color: #d0ed51;
  --theme-tile-button-bg-color: #d0ed51;
  --search-input-bg-color: #49a6d1;
- --search-input-border-and-icon-bg-color: #1a161a;
+ --search-input-border-and-icon-bg-color: 0;
  --add-new-task-button-bg-color: #14e169;
  --task-item-row-bg-color: #f56ee3;
  --task-item-delete-button-bg-color: #de2626;

diff --git a/src/styles/layouts/glassmorphism.css b/src/styles/layouts/glassmorphism.css
@@ -8,15 +8,15 @@
  --navbar-links-bg-color: #ffffff30;
  --theme-tile-button-bg-color: #ffffff30;
  --search-input-bg-color: #ffffff40;
- --search-input-border-and-icon-bg-color: #ffffff40;
+ --search-input-border-and-icon-bg-color: #ffffff00;
  --add-new-task-button-bg-color: #ffffff40;
  --task-item-row-bg-color: #ffffff40;
  --task-item-delete-button-bg-color: #ffffff30;
  --task-item-done-button-bg-color: #ffffff30;
 
  --button-font-color: #1a161a;
  --text-font-color: #1a161a;
- --search-magnifier-color: #f6e6f6;
+ --search-magnifier-color: #1a161a50;
 
  --divider-color: #ffffff30;
 

diff --git a/src/styles/layouts/modern-dark.css b/src/styles/layouts/modern-dark.css
@@ -16,7 +16,7 @@
 
  --button-font-color: #fcfbfc;
  --text-font-color: #fcfbfc;
- --search-magnifier-color: #fcfbfc;
+ --search-magnifier-color: #fcfbfc5b;
 
  --divider-color: #27292e;
 

diff --git a/src/styles/layouts/modern-light.css b/src/styles/layouts/modern-light.css
@@ -16,7 +16,7 @@
 
  --button-font-color: #1a161a;
  --text-font-color: #1a161a;
- --search-magnifier-color: #1a161a;
+ --search-magnifier-color: #1a161a66;
 
  --navbar-content-background: #f3f2ed;
 

diff --git a/src/styles/layouts/neobruthalism.css b/src/styles/layouts/neobruthalism.css
@@ -19,7 +19,7 @@
 
  --button-font-color: #1a161a;
  --text-font-color: #1a161a;
- --search-magnifier-color: #f6e6f6;
+ --search-magnifier-color: #1a161a7d;
 
  --divider-color: #1a161a;