feat(SW-184): implementing mobile design

components/Header/TopMenu/Search/index.tsx

@@ -4,15 +4,15 @@ import { useIntl } from "react-intl"
 
 import { SearchIcon } from "@/components/Icons"
 
-import TopMenuButton from "../TopMenuButton"
+import styles from "./search.module.css"
 
 export default function Search() {
   const intl = useIntl()
 
   return (
-    <TopMenuButton>
+    <button type="button" className={styles.button}>
       <SearchIcon width={20} height={20} color="burgundy" />
       {intl.formatMessage({ id: "Find booking" })}
-    </TopMenuButton>
+    </button>
   )
 }

components/Header/TopMenu/Search/search.module.css

@@ -1,9 +1,20 @@
 .button {
   background-color: transparent;
   color: var(--Base-Text-High-contrast);
+  font-family: var(--typography-Caption-Regular-fontFamily);
+  font-size: var(--typography-Caption-Regular-fontSize);
   border-width: 0;
+  padding: 0;
   cursor: pointer;
   display: flex;
   gap: var(--Spacing-x1);
   align-items: center;
+  width: 100%;
+}
+
+@media screen and (min-width: 768px) {
+  .button {
+    font-size: var(--typography-Body-Bold-fontSize);
+    font-family: var(--typography-Body-Bold-fontFamily);
+  }
 }