ref(searchbar): Add Searchbar minor adjusts (#567)

* ref(ui): Make searchbar wider

* updated snaps

Author: priscilawebdev

src/App/Header/Search/__snapshots__/Search.test.tsx.snap

@@ -21,8 +21,23 @@ exports[`<Search /> component should load the component in default state 1`] = `
   content: none;
 }
 
-.emotion-2 .MuiInputBase-input {
-  color: #fff;
+.emotion-2 .MuiInputBase-root:hover:after {
+  content: none;
+  -webkit-transform: scaleX(1);
+  -ms-transform: scaleX(1);
+  transform: scaleX(1);
+}
+
+@media screen and (min-width:768px) {
+  .emotion-2 .MuiInputBase-root:hover:after {
+    content: '';
+  }
+}
+
+@media screen and (min-width:768px) {
+  .emotion-2 .MuiInputBase-input {
+    color: #fff;
+  }
 }
 
 .emotion-0 {

src/App/Header/__snapshots__/Header.test.tsx.snap

@@ -110,8 +110,23 @@ exports[`<Header /> component with logged in state should load the component in
   content: none;
 }
 
-.emotion-6 .MuiInputBase-input {
-  color: #fff;
+.emotion-6 .MuiInputBase-root:hover:after {
+  content: none;
+  -webkit-transform: scaleX(1);
+  -ms-transform: scaleX(1);
+  transform: scaleX(1);
+}
+
+@media screen and (min-width:768px) {
+  .emotion-6 .MuiInputBase-root:hover:after {
+    content: '';
+  }
+}
+
+@media screen and (min-width:768px) {
+  .emotion-6 .MuiInputBase-input {
+    color: #fff;
+  }
 }
 
 .emotion-4 {
@@ -624,8 +639,23 @@ exports[`<Header /> component with logged in state should load the component in
   content: none;
 }
 
-.emotion-6 .MuiInputBase-input {
-  color: #fff;
+.emotion-6 .MuiInputBase-root:hover:after {
+  content: none;
+  -webkit-transform: scaleX(1);
+  -ms-transform: scaleX(1);
+  transform: scaleX(1);
+}
+
+@media screen and (min-width:768px) {
+  .emotion-6 .MuiInputBase-root:hover:after {
+    content: '';
+  }
+}
+
+@media screen and (min-width:768px) {
+  .emotion-6 .MuiInputBase-input {
+    color: #fff;
+  }
 }
 
 .emotion-4 {

src/App/__snapshots__/App.test.tsx.snap

@@ -114,8 +114,23 @@ exports[`<App /> should display the Header component  1`] = `
   content: none;
 }
 
-.emotion-6 .MuiInputBase-input {
-  color: #fff;
+.emotion-6 .MuiInputBase-root:hover:after {
+  content: none;
+  -webkit-transform: scaleX(1);
+  -ms-transform: scaleX(1);
+  transform: scaleX(1);
+}
+
+@media screen and (min-width:768px) {
+  .emotion-6 .MuiInputBase-root:hover:after {
+    content: '';
+  }
+}
+
+@media screen and (min-width:768px) {
+  .emotion-6 .MuiInputBase-input {
+    color: #fff;
+  }
 }
 
 .emotion-4 {
@@ -1288,8 +1303,23 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
   content: none;
 }
 
-.emotion-6 .MuiInputBase-input {
-  color: #fff;
+.emotion-6 .MuiInputBase-root:hover:after {
+  content: none;
+  -webkit-transform: scaleX(1);
+  -ms-transform: scaleX(1);
+  transform: scaleX(1);
+}
+
+@media screen and (min-width:768px) {
+  .emotion-6 .MuiInputBase-root:hover:after {
+    content: '';
+  }
+}
+
+@media screen and (min-width:768px) {
+  .emotion-6 .MuiInputBase-input {
+    color: #fff;
+  }
 }
 
 .emotion-4 {

src/components/AutoComplete/styles.tsx

@@ -29,9 +29,20 @@ export const StyledTextField = styled(TextField)<{ theme?: Theme }>(props => ({
     ':hover:before': {
       content: 'none',
     },
+    ':hover:after': {
+      content: 'none',
+      transform: 'scaleX(1)',
+    },
+    [`@media screen and (min-width: ${props.theme?.breakPoints.medium}px)`]: {
+      ':hover:after': {
+        content: "''",
+      },
+    },
   },
   '& .MuiInputBase-input': {
-    color: props.theme && props.theme.palette.white,
+    [`@media screen and (min-width: ${props.theme?.breakPoints.medium}px)`]: {
+      color: props.theme && props.theme.palette.white,
+    },
   },
 }));