alignments and styles for search results

jobstash · Sep 26, 2024 · 671a064 · 671a064
1 parent 96560d1
commit 671a064
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 10 deletions.
diff --git a/src/grants/pages/grant-list-page.tsx b/src/grants/pages/grant-list-page.tsx
@@ -45,7 +45,7 @@ export const GrantListPage = async () => {
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
-      <div className="px-5 pt-[56px] md:pt-[80px] lg:px-8">
+      <div className="px-5 pt-[56px] md:pt-[80px] lg:pl-4 lg:pr-8">
         <h1 className="pt-6 text-2xl font-semibold tracking-[-0.06em] md:pt-2 md:text-4xl lg:pt-0 lg:text-7xl">
           Grant Programs
         </h1>

diff --git a/src/search/components/search-category.tsx b/src/search/components/search-category.tsx
@@ -22,7 +22,7 @@ const highlightText = (text: string, query: string): React.ReactNode => {
     <div className="">
       {parts.map((part, index) =>
         regex.test(part) ? (
-          <span key={index} className="font-bold text-[#98eebe]">
+          <span key={index} className="text-[#98eebe]">
             {part}
           </span>
         ) : (
@@ -48,7 +48,7 @@ export const SearchCategory = ({ label, url, query }: Props) => {
       className=""
       endContent={<ExternalIcon />}
     >
-      {highlightText(label, query)}
+      <span className='text-13'>{highlightText(label, query)}</span>
     </Button>
   );
 };
diff --git a/src/search/components/search-result.tsx b/src/search/components/search-result.tsx
@@ -9,8 +9,8 @@ export const SearchResultLayout = ({
   categories: React.ReactNode;
 }) => {
   return (
-    <div className="flex flex-col gap-4">
-      {label}
+    <div className="flex flex-col gap-3">
+     {label}
       <div className="flex flex-wrap gap-4">{categories}</div>
     </div>
   );
@@ -23,7 +23,7 @@ interface Props extends SearchResultDto {
 export const SearchResult = ({ query, title, categories }: Props) => {
   return (
     <SearchResultLayout
-      label={<span>{title}</span>}
+      label={<span className='text-13 font-light uppercase opacity-60'>{title}</span>}
       categories={
         <>
           {categories.map(({ label, url }) => (

diff --git a/src/search/components/search-results.tsx b/src/search/components/search-results.tsx
@@ -14,7 +14,7 @@ export const SearchResults = () => {
   if (!data) return <SearchResultsSkeleton />;
 
   return (
-    <div className="flex flex-col gap-8">
+    <div className="flex flex-col gap-6 py-8 md:gap-8">
       {data.map(({ title: label, categories }) => (
         <Fragment key={label}>
           <Divider />

diff --git a/src/search/pages/search-page.tsx b/src/search/pages/search-page.tsx
@@ -3,9 +3,11 @@ import { SearchResults } from '@/search/components/search-results';
 
 export const SearchPage = () => {
   return (
-    <div className="flex flex-col gap-8 p-8">
-      <SearchInput />
-      <SearchResults />
+    <div className="px-5 pt-[56px] md:py-[32px] lg:pl-0 lg:pr-8">
+      <div className='pt-2 md:pt-0'>
+          <SearchInput />
+          <SearchResults />
+      </div>
     </div>
   );
 };