Change card design

bratislava · Jun 30, 2024 · f5a3ef4 · f5a3ef4
1 parent 7d9ba8c
commit f5a3ef4
Showing 1 changed file with 12 additions and 8 deletions.
diff --git a/next/components/sections/SearchSection/SearchResultCard.tsx b/next/components/sections/SearchSection/SearchResultCard.tsx
@@ -23,7 +23,7 @@ const SearchResultCard = ({ data, hideBottomDivider }: SearchResultCardProps) =>
   return (
     <div
       className={cn(
-        'group relative flex flex-row items-stretch overflow-hidden bg-white px-6 py-4',
+        'group relative mx-6 flex flex-row items-stretch gap-4 overflow-hidden bg-white py-4',
         { 'hover:border-grey-400': data.linkHref, 'border-b-2': !hideBottomDivider },
       )}
       data-cy="search-result-card"
@@ -36,7 +36,7 @@ const SearchResultCard = ({ data, hideBottomDivider }: SearchResultCardProps) =>
         <SearchResultCard.ImageFromPageColor pageColor={data.pageColor} />
       ) : null}
 
-      <div className="flex w-full flex-row gap-4 p-4">
+      <div className="flex w-full flex-row gap-4 py-4">
         <div className="flex w-full flex-col justify-center gap-3 lg:gap-2">
           <SearchResultCard.TitleWithLink title={data.title ?? ''} href={data.linkHref ?? ''} />
           <SearchResultCard.Metadata metadata={data.metadata?.filter(isDefined) ?? []} />
@@ -57,7 +57,7 @@ SearchResultCard.IconContainer = function ({
   return (
     <div
       className={cn(
-        'hidden h-[5rem] w-[5rem] shrink-0 items-center justify-center rounded-lg bg-grey-100 lg:flex',
+        'hidden h-[5rem] w-[5rem] shrink-0 items-center justify-center self-center rounded-lg bg-grey-100 lg:flex',
         className,
       )}
     >
@@ -95,7 +95,7 @@ SearchResultCard.ImageFromPageColor = function ({
     <div
       style={colorStyle}
       className={cn(
-        'relative hidden h-[5rem] w-[5rem] shrink-0 items-center justify-center overflow-hidden rounded-lg bg-category-100 lg:flex',
+        'relative hidden h-[5rem] w-[5rem] shrink-0 items-center justify-center self-center overflow-hidden rounded-lg bg-category-100 lg:flex',
         className,
       )}
     >
@@ -114,7 +114,7 @@ SearchResultCard.ImageFromUrl = function ({
   return (
     <div
       className={cn(
-        'relative hidden h-[5rem] w-[5rem] shrink-0 items-center justify-center overflow-hidden rounded-lg bg-category-200 lg:flex',
+        'relative hidden h-[5rem] w-[5rem] shrink-0 items-center justify-center self-center overflow-hidden rounded-lg bg-category-200 lg:flex',
         className,
       )}
     >
@@ -180,11 +180,15 @@ SearchResultCard.Metadata = function ({
       return (
         <Fragment key={item}>
           {index > 0 && (
-            <Typography type="p" className="max-lg:hidden">
+            <Typography type="p" size="p-small" className="max-lg:hidden">
               •
             </Typography>
           )}
-          <Typography type="p" className="max-lg:first-of-type:font-medium">
+          <Typography
+            type="p"
+            size="p-small"
+            className={cn('max-lg:first-of-type:font-medium', { underline: index === 0 })}
+          >
             {item}
           </Typography>
         </Fragment>
@@ -204,7 +208,7 @@ SearchResultCard.Metadata = function ({
 
 SearchResultCard.Button = function ({ className }: { className?: string }) {
   return (
-    <div className={cn('my-auto self-end text-main-700', className)}>
+    <div className={cn('my-auto self-end text-content-primary', className)}>
       <ChevronRightIcon />
     </div>
   )