Merge pull request #5883 from THEBOSS0369/dark_theme_search

Input Search Dark Mode Friendly
layer5io · Nov 3, 2024 · 360f670 · 360f670
2 parents b672bfc + 8d49b7a
commit 360f670
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 8 deletions.
diff --git a/src/sections/Company/News-grid/NewsGrid.style.js b/src/sections/Company/News-grid/NewsGrid.style.js
@@ -96,13 +96,5 @@ export const NewsPageWrapper = styled.div`
         }
         
     }
-    .search-box {
-        margin: auto;
-        input {
-            background-color: ${props => props.theme.shadowDarkColor}!important;
-            color: ${props => props.theme.text};
-            transition: all 450ms ease 0s;
-        }
-    }
 
 `;
diff --git a/src/sections/Meshery/Meshery-integrations/Integration.style.js b/src/sections/Meshery/Meshery-integrations/Integration.style.js
@@ -16,6 +16,17 @@ export const HoneycombGrid = styled.div`
     }
   }
 
+  .search-box {
+        input {
+        border: 1px solid ${props => props.theme.headingColor} !important;
+        
+        &:focus {
+            border-color: #fff !important;
+            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px !important;
+        }
+    }
+  }
+  
   .category {
     display: flex;
     flex-wrap: wrap;

diff --git a/src/sections/app.style.js b/src/sections/app.style.js
@@ -174,6 +174,25 @@ section{
     position: relative;
 }
 
+  // styling for the searchbox
+  .search-box {
+        input {
+            background-color: ${props => props.theme.shadowDarkColor}!important;
+            color: ${props => props.theme.text};
+            transition: all 450ms ease 0s;
+
+            &:focus {
+            border-color: #fff !important;
+            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px !important;
+          }
+        }
+
+        // for the Search Icon
+        svg {
+            color: ${(props) => props.theme.searchIconColor};
+        }
+  }
+
 /* Modal styling needs to be applied to the global CSS */
 
 .Modal {

diff --git a/src/theme/app/themeStyles.js b/src/theme/app/themeStyles.js
@@ -38,6 +38,9 @@ const lighttheme = {
 
   headingColor: "#111111",
 
+  // searchbox Icon Color
+  searchIconColor: "#333333",
+
   // light slate gray (medium gray)
   textColor: "#000000",
   shadowColor: "rgba(0, 0, 0, 0.05)",
@@ -267,6 +270,9 @@ export const darktheme = {
 
   headingColor: "#000000",
 
+  // searchbox icon color
+  searchIconColor: "#FFFFFF",
+
   // light slate gray (medium gray)
   textColor: "#000000",
   shadowColor: "rgba(255, 255, 255, 0.05)",