Merge pull request #766 from harneetsahi/fix/linkButton-searchBar-ouline

Fixed LinkButton and SearchForm outline

Author: ksen0

src/components/LinkButton/index.astro

@@ -20,7 +20,7 @@ switch (variant) {
 ---
 
 <a
-  class={"button-link outline outline-1 outline-type-color py-2 px-4 flex flex-nowrap w-fit items-center justify-between rounded-full hover:bg-sidebar-type-color hover:text-bg-color hover:no-underline " +
+  class={"button-link border border-1 border-sidebar-type-color py-2 px-4 flex flex-nowrap w-fit items-center justify-between rounded-full hover:bg-sidebar-type-color hover:text-bg-color hover:no-underline " +
     Astro.props.class}
   href={url}
 >

src/components/SearchForm/index.astro

@@ -10,7 +10,7 @@ const t = await getUiTranslator(currentLocale);
   action={`${currentLocale === "en" ? "" : `/${currentLocale}`}/search`}
   method="GET"
   role="search"
-  class="relative w-full h-full text-accent-type-color bg-accent-color border-accent-type-color border rounded-[20px] !mx-0"
+  class="relative w-full h-full text-accent-type-color bg-accent-color rounded-[20px] !mx-0"
 >
   <div class="absolute top-[6px] lg:top-[10px] left-[11px]">
     <Icon kind="search" />
@@ -20,14 +20,14 @@ const t = await getUiTranslator(currentLocale);
     type="search"
     placeholder={t("Search") as string}
     name="term"
-    class="placeholder-accent-type-color bg-transparent pl-gutter-md py-[6px] md:py-[4px] lg:py-[8px] w-full rounded-[20px] focus:outline-0 peer"
+    class="border-accent-type-color border outline-offset-0 placeholder-accent-type-color bg-transparent pl-gutter-md py-[6px] md:py-[4px] lg:py-[8px] h-full w-full rounded-[20px] peer"
     aria-label="Search through site content"
     required
   />
   <button
     type="submit"
     aria-label="Submit search"
-    class="invisible peer-valid:visible absolute pl-[22px] pr-[12px] right-0 top-0 py-[11px] lg:py-[13px]"
+    class="invisible peer-valid:visible absolute pl-[22px] pr-[12px] right-0 top-0 py-[11px] lg:py-[13px] h-full"
     ><Icon kind="search-submit" /></button
   >
 </form>