chore: adjust placeholder for searchbox / load Open Sans for searchbox button

Author: rjborba

apps/site/components/Common/Search/utils.ts

@@ -2,6 +2,9 @@ import tailwindConfig from '@/tailwind.config';
 
 const colors = tailwindConfig.theme.colors;
 export const themeConfig = {
+  typography: {
+    '--font-primary': 'var(--font-open-sans)',
+  },
   colors: {
     light: {
       '--text-color-primary': colors.neutral[900],

apps/site/components/Common/Skeleton/index.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import type { FC, PropsWithChildren } from 'react';
 import { isValidElement } from 'react';
 
@@ -27,7 +28,7 @@ const Skeleton: FC<PropsWithChildren<SkeletonProps>> = ({
     <span
       tabIndex={-1}
       aria-hidden="true"
-      className={`${styles.skeleton} ${className}`}
+      className={classNames(styles.skeleton, className)}
       data-inline-skeleton={isValidElement(children) ? undefined : true}
     >
       {children}

apps/site/components/Containers/NavBar/index.module.css

@@ -86,8 +86,15 @@
     dark:border-neutral-900;
 }
 
-.searchButtonSkeleton {
-  @apply flex-grow;
+span.searchButtonSkeleton {
+  @apply my-px
+    mr-2
+    flex-grow
+    rounded-xl;
+
+  &:empty {
+    @apply h-10;
+  }
 }
 
 .ghIconWrapper {

apps/site/components/Containers/NavBar/index.tsx

@@ -20,7 +20,9 @@ import style from './index.module.css';
 
 const SearchButton = dynamic(() => import('@/components/Common/Search'), {
   ssr: false,
-  loading: () => <Skeleton className={style.searchButtonSkeleton} loading />,
+  loading: () => (
+    <Skeleton className={style.searchButtonSkeleton} loading={true} />
+  ),
 });
 
 const navInteractionIcons = {