changed search field and button colors

src/assets/pages/styles/theme-base.scss

@@ -102,27 +102,35 @@ body {
   position: relative;
   display: flex;
   margin: auto;
-  max-width: 1100px
+  max-width: 1100px;
 }
 
 .sb-example-1 .searchTerm {
   width: 100%;
   border: 1px solid;
-  border-color: map-get($theme-colors, boxborder2);
+  border-color: map-get($theme-colors, boxborder3);
   border-right: none;
   padding-left: 15px;
   padding-right: 15px;
   border-radius: 25px 0 0 25px;
   stroke: map-get($theme-colors, searchicon);
   color: map-get($theme-colors, searchhint);
-  background-color: map-get($theme-colors, info);
+  background-color: map-get($theme-colors, searchfill);
+  box-shadow: none;
+  outline: none;
+}
+
+.sb-example-1 .searchTerm:hover {
+  stroke: map-get($theme-colors, searchiconhover);
+  background-color: map-get($theme-colors, searchfill);
   box-shadow: none;
+  color: map-get($theme-colors, searchfont) !important;
   outline: none;
 }
 
 .sb-example-1 .searchTerm:focus {
-  stroke: map-get($theme-colors, searchicon);
-  background-color: map-get($theme-colors, info);
+  stroke: map-get($theme-colors, searchiconhover);
+  background-color: map-get($theme-colors, searchfill);
   box-shadow: none;
   color: map-get($theme-colors, searchfont) !important;
   outline: none;
@@ -143,14 +151,29 @@ body {
   outline: none;
 }
 
+.sb-example-1 .searchbutton:hover {
+  width: 40px;
+  height: 50px;
+  border: 1px solid;
+  border-color: map-get($theme-colors, boxborder2);
+  background-color: map-get($theme-colors, searchbuttonfill);
+  text-align: center;
+  fill: map-get($theme-colors, searchiconhover) !important;
+  border-radius: 0 25px 25px 0;
+  cursor: pointer;
+  font-weight: normal;
+  box-shadow: none;
+  outline: none;
+}
+
 .sb-example-1 .searchbutton:focus {
   width: 40px;
   height: 50px;
   border: 1px solid;
   border-color: map-get($theme-colors, boxborder2);
-  background-color: map-get($theme-colors, searchbuttonfillfocus);
+  background-color: map-get($theme-colors, searchbuttonfill);
   text-align: center;
-  fill: map-get($theme-colors, searchiconfocus);
+  fill: map-get($theme-colors, searchiconfocus) !important;
   border-radius: 0 25px 25px 0;
   cursor: pointer;
   font-weight: normal;

src/assets/pages/styles/theme-dark.scss

@@ -11,15 +11,19 @@ $theme-colors: (
         "inactivecard": #333337,
         "activecard": #4f4f56,
         "boxborder": #272727,
-        "boxborder2": #2f2f2f,
+        "boxborder2": #3c3c42,
+        "boxborder3": #323237,
         "activecardfont":#e1e4e8,
         "searchhint": #6b6866,
         "searchfont": #9f9c9a, 
+        "searchfill": #323237,
         "sidebarfill": #202023,
-        "searchbuttonfill": #39393f,
-        "searchbuttonfillfocus": #3e3e45, 
-        "searchicon": #737373,
-        "searchiconfocus": #878787,
+        "searchbuttonfill": #585861,
+        "searchbuttonfillhover": #808080, 
+        "searchbuttonfillfocus": #585861, 
+        "searchicon": #808080,
+        "searchiconhover": #c5c5c5,
+        "searchiconfocus": #c5c5c5,
         "sidebartext": #7d7d7d,
         "sidebarbg": #29292d,
         "webcardimagebackground": #707070,

src/assets/pages/styles/theme-light.scss

@@ -11,17 +11,21 @@ $theme-colors: (
         "inactivecard": #ffffff,
         "activecard": #13a04a,
         "boxborder": #c0c2c6,
-        "boxborder2": #c0c2c6,
+        "boxborder2": #ececec,
+        "boxborder3": #ebebeb,
         "activecardfont": #e1e4e8,
         "searchhint": #c0c2c6,
         "searchfont": #2c2c2c,
         "sidebarfill": #efefef,
         "sidebartext": #3f4959,
         "sidebarbg": #e5e5e5,
-        "searchbuttonfill": #f6f6f6,
+        "searchfill": #f0f0f2,
+        "searchbuttonfill": #ffffff,
+        "searchbuttonfillhover": #f6f6f6,
         "searchbuttonfillfocus": #f1f1f1,
         "searchicon": #3f4959,
-        "searchiconfocus": #38414f,
+        "searchiconhover": #000,
+        "searchiconfocus": #000,
         "webcardimagebackground": #eeeeee,
         "webcardimagebackgroundhover": #f0f0f0,
         "headertextcolor": #080404,