changes

components/core/I18nWidget/I18nWidget.tsx

@@ -19,10 +19,10 @@ const I18nWidget: FC = () => {
     <nav className={s.root}>
       <Menu>
         <Menu.Button className={s.button} aria-label="Language selector">
-          <img className="" src="/flag-us.png" alt="US Flag" />
+          <img className="mr-2" src="/flag-us.png" alt="US Flag" />
-          <span>{LOCALES_MAP[locale || defaultLocale]}</span>
+          <span className="mr-2">{LOCALES_MAP[locale || defaultLocale]}</span>
           {options && (
-            <span className="">
+            <span>
               <DoubleChevron />
             </span>
           )}

components/core/Searchbar/Searchbar.module.css

@@ -1,9 +1,12 @@
 .input {
-  @apply bg-transparent px-3 py-2 appearance-none w-full transition
+  @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out pr-10;
-  duration-150 ease-in-out pr-10;
   min-width: 300px;
 }
 
+.input:focus {
+  @apply outline-none shadow-outline-2;
+}
+
 .iconContainer {
   @apply absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none;
 }

components/product/ProductCard/ProductCard.module.css

@@ -118,7 +118,7 @@
 }
 
 .wishlistButton {
-  @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-primary font-semibold inline-block text-xs leading-6 cursor-pointer;
+  @apply w-10 h-10 flex ml-auto flex items-center justify-center bg-primary text-primary font-semibold  text-xs leading-6 cursor-pointer;
 }
 
 .imageContainer {

tailwind.config.js

@@ -45,6 +45,7 @@ module.exports = {
         secondary: 'var(--text-secondary)',
       },
       boxShadow: {
+        'outline-2': '0 0 0 2px var(--accents-2)',
         magical:
           'rgba(0, 0, 0, 0.02) 0px 30px 30px, rgba(0, 0, 0, 0.03) 0px 0px 8px, rgba(0, 0, 0, 0.05) 0px 1px 0px',
       },