Implement core UI changes

bratislava · Jun 25, 2024 · 52a0d72 · 52a0d72
1 parent 93beaf2
commit 52a0d72
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 18 deletions.
diff --git a/next/components/cards/FileRowCard.tsx b/next/components/cards/FileRowCard.tsx
@@ -1,12 +1,14 @@
 import React from 'react'
 import cn from 'utils/cn'
 
-import { DownloadIcon } from '@/assets/ui-icons'
+import { AttachmentIcon, DownloadIcon } from '@/assets/ui-icons'
 import { FileCardProps } from '@/components/cards/FileCard'
 import MLink from '@/components/common/MLink/MLink'
 import { isDefined } from '@/utils/isDefined'
 import { useTranslation } from '@/utils/useTranslation'
 
+import HorizontalDivider from '../common/Divider/HorizontalDivider'
+
 /**
  * Figma: https://www.figma.com/file/17wbd0MDQcMW9NbXl6UPs8/DS-ESBS%2BBK%3A-Component-library?node-id=867%3A2067&mode=dev
  */
@@ -24,8 +26,11 @@ const FileRowCard = ({
 
   return (
     <div className={cn('relative', className)}>
-      <div className="flex flex-row items-center justify-between gap-x-6 border-b-2 border-grey-200 py-4">
-        <div className="flex w-full flex-col gap-y-1.5">
+      <div className="flex flex-row items-center justify-between gap-x-4 py-4">
+        <div className="rounded-lg bg-background-tertiary p-3">
+          <AttachmentIcon />
+        </div>
+        <div className="flex w-full flex-col gap-y-1">
           <MLink
             href={downloadLink ?? '#'}
             className="text-h5 line-clamp-3 break-words font-bold lg:line-clamp-2"
@@ -46,10 +51,11 @@ const FileRowCard = ({
             </span>
           )}
         </div>
-        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border-2 border-grey-200 text-grey-700 lg:h-10 lg:w-10">
+        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border-2 border-grey-200 text-grey-700">
           <DownloadIcon className="h-4 w-4" />
         </div>
       </div>
+      <HorizontalDivider />
     </div>
   )
 }

diff --git a/next/components/page-contents/RegulationPageContent.tsx b/next/components/page-contents/RegulationPageContent.tsx
@@ -1,4 +1,5 @@
 import { Typography } from '@bratislava/component-library'
+import classNames from 'classnames'
 import React, { Fragment } from 'react'
 
 import FileRowCard from '@/components/cards/FileRowCard'
@@ -67,23 +68,21 @@ const RegulationPageContent = ({ regulation }: RegulationPageContentProps) => {
         <div className="mb-8 flex flex-col gap-y-8">
           <RegulationDetailMessage regulation={regulation} />
           <div className="flex flex-row flex-wrap gap-6">
-            <div className="flex grow basis-full flex-col gap-4">
+            <div className="flex grow basis-full flex-col">
               <Typography type="h2" size="h3">
                 {t('Regulation.mainDocument')}
               </Typography>
 
               {/* TODO refactor to use standard component */}
               {mainDocument?.data?.attributes ? (
-                <div className="flex flex-col rounded-lg border-2 px-4">
-                  <FileRowCard
-                    key={mainDocument.data.id}
-                    title={`VZN ${regulation.attributes?.regNumber}`}
-                    size={formatFileSize(mainDocument.data.attributes.size, locale)}
-                    format={formatFileExtension(mainDocument.data.attributes.ext) ?? undefined}
-                    downloadLink={mainDocument.data.attributes.url}
-                    className="-mx-4 px-4 [&>*]:border-b-0"
-                  />
-                </div>
+                <FileRowCard
+                  key={mainDocument.data.id}
+                  title={`VZN ${regulation.attributes?.regNumber}`}
+                  size={formatFileSize(mainDocument.data.attributes.size, locale)}
+                  format={formatFileExtension(mainDocument.data.attributes.ext) ?? undefined}
+                  downloadLink={mainDocument.data.attributes.url}
+                  className={classNames('-mx-4 px-6')}
+                />
               ) : (
                 <Typography type="p">{t('Regulation.noAttachmentsMessage')}</Typography>
               )}
@@ -95,11 +94,10 @@ const RegulationPageContent = ({ regulation }: RegulationPageContentProps) => {
 
               {/* TODO refactor to use standard component */}
               {attachmentFiles?.length ? (
-                <div className="flex flex-col rounded-lg border-2 px-4">
+                <div>
                   {attachmentFiles
                     .map(({ media: attachementMedia, title: attachmentTitle }) => {
                       if (!attachementMedia.data.attributes) return null
-
                       return (
                         <FileRowCard
                           key={attachementMedia.data.id}
@@ -109,7 +107,6 @@ const RegulationPageContent = ({ regulation }: RegulationPageContentProps) => {
                             formatFileExtension(attachementMedia.data.attributes.ext) ?? undefined
                           }
                           downloadLink={attachementMedia.data.attributes.url}
-                          className="-mx-4 px-4 [&>*]:border-b-0"
                         />
                       )
                     })