chore: adjust placeholder for searchbox / load Open Sans for searchbo…

…x button
nodejs · Jan 3, 2025 · a770193 · a770193
1 parent 0d6467a
commit a770193
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 3 deletions.
diff --git a/apps/site/components/Common/Search/utils.ts b/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],

diff --git a/apps/site/components/Common/Skeleton/index.tsx b/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}

diff --git a/apps/site/components/Containers/NavBar/index.module.css b/apps/site/components/Containers/NavBar/index.module.css
@@ -87,7 +87,14 @@
 }
 
 .searchButtonSkeleton {
-  @apply flex-grow;
+  @apply my-px
+    mr-2
+    flex-grow
+    rounded-xl;
+
+  &:empty {
+    @apply h-10;
+  }
 }
 
 .ghIconWrapper {

diff --git a/apps/site/components/Containers/NavBar/index.tsx b/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 = {