Added styles in the required file's style page

Signed-off-by: THEBOSS0369 <[email protected]>
layer5io · Sep 25, 2024 · 965b204 · 965b204
1 parent b263459
commit 965b204
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 6 deletions.
diff --git a/src/reusecore/Search/searchbox.style.js b/src/reusecore/Search/searchbox.style.js
@@ -16,9 +16,6 @@ export const SearchWrapper = styled.div`
       border: 1px solid ${(props) => props.theme.headingColor};
       background-color: ${(props) => props.theme.shadowLightColor};
       
-      /*Changes color for the text*/
-      color: ${(props) => props.theme.whiteToBlack};
-
       &:focus {
         /* border-color: ${(props) => props.theme.primaryColor}; */
         border-color: #fff;

diff --git a/src/sections/Blog/Blog-grid/blogGrid.style.js b/src/sections/Blog/Blog-grid/blogGrid.style.js
@@ -14,6 +14,16 @@ export const BlogPageWrapper = styled.div`
       height: 100%;
     }
   }
+
+  // styling for the blog searchbox
+  .search-box {
+        input {
+            background-color: ${props => props.theme.shadowDarkColor}!important;
+            color: ${props => props.theme.text};
+            transition: all 450ms ease 0s;
+        }
+  }
+
   @media only screen and (max-width: 576px) {
     .blog-grid-wrapper {
       margin: 0 auto 1rem;

diff --git a/src/sections/Meshery/Meshery-integrations/Integration.style.js b/src/sections/Meshery/Meshery-integrations/Integration.style.js
@@ -16,6 +16,15 @@ export const HoneycombGrid = styled.div`
     }
   }
 
+  // styling for the blog searchbox
+  .search-box {
+        input {
+            background-color: ${props => props.theme.shadowDarkColor}!important;
+            color: ${props => props.theme.text};
+            transition: all 450ms ease 0s;
+        }
+  }
+
   .category {
     display: flex;
     flex-wrap: wrap;

diff --git a/src/sections/Resources/Resources-grid/resourceGrid.style.js b/src/sections/Resources/Resources-grid/resourceGrid.style.js
@@ -22,6 +22,16 @@ export const ResourcePageWrapper = styled.div`
         }
         
     }
+
+    // styling for the blog searchbox
+    .search-box {
+            input {
+                background-color: ${props => props.theme.shadowDarkColor}!important;
+                color: ${props => props.theme.text};
+                transition: all 450ms ease 0s;
+            }
+    }
+
     .post-content-block{
         height: 7rem;
     }

diff --git a/src/theme/app/themeStyles.js b/src/theme/app/themeStyles.js
@@ -240,7 +240,7 @@ export const darktheme = {
   scrollbarColor: "#00d3a9",
 
   // white
-  primaryColor: "#00d3a9",
+  primaryColor: "#FFFFFF",
 
   // silver chalice (light gray)
   primaryLightColor: "#2C2C2C",
@@ -268,11 +268,11 @@ export const darktheme = {
   headingColor: "#000000",
 
   // light slate gray (medium gray)
-  textColor: "#ffffff",
+  textColor: "#000000",
   shadowColor: "rgba(255, 255, 255, 0.05)",
 
   // platinum (light gray)
-  shadowLightColor: "#333333",
+  shadowLightColor: "#E6E6E6",
 
   // dark gray
   shadowDarkColor: "#484848",