Merge pull request #29 from Amsterdam/improvement/styling

Improved styling
Amsterdam · Aug 10, 2024 · 74b0867 · 74b0867
2 parents 4fb3ae3 + 4d1a918
commit 74b0867
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 17 deletions.
diff --git a/src/app/components/DetailsList/DetailsList.tsx b/src/app/components/DetailsList/DetailsList.tsx
@@ -1,5 +1,7 @@
 import React from "react"
 import { DescriptionList } from "@amsterdam/design-system-react"
+import { styled } from "styled-components"
+
 
 type Props = {
   data?: {
@@ -8,15 +10,19 @@ type Props = {
   }[]
 }
 
+const Wrapper = styled(DescriptionList)`
+  margin-bottom: 32px;
+`
+
 export const DetailsList: React.FC<Props> = ({ data = [] }) => (
-  <DescriptionList>
+  <Wrapper>
     { data.map((item) => ( 
       <React.Fragment key={item?.term}>
         <DescriptionList.Term key={item?.term}>{item?.term}</DescriptionList.Term>
         <DescriptionList.Details  key={item?.details}>{item?.details}</DescriptionList.Details>
       </React.Fragment>
     ))}
-  </DescriptionList>
+  </Wrapper>
 )
 
 export default DetailsList
diff --git a/src/app/components/TimelineEvents/TimelineEvent.tsx b/src/app/components/TimelineEvents/TimelineEvent.tsx
@@ -10,8 +10,9 @@ type Props = {
 }
 
 const Wrapper = styled.div`
+  margin-left: 25px;
   padding: 25px;
-  background-color: #E6E6E6;
+  background-color: rgba(0, 0, 0, 0.08);;
   border: 0.5px solid #d4d2d2;
   border-radius: 4px;
   box-shadow: 

diff --git a/src/app/pages/CaseDetailsPage/CaseDetailsPage.tsx b/src/app/pages/CaseDetailsPage/CaseDetailsPage.tsx
@@ -3,7 +3,7 @@ import { DocumentIcon } from "@amsterdam/design-system-react-icons"
 import { useCase } from "app/state/rest"
 import { PageHeading, PageSpinner, DetailsList } from "app/components"
 import Workflows from "./Workflows/Workflows"
-import CaseHistory from "./CaseHistory/CaseHistory"
+import CaseEvents from "./CaseEvents/CaseEvents"
 
 
 export const CaseDetailsPage: React.FC = () => {
@@ -23,10 +23,8 @@ export const CaseDetailsPage: React.FC = () => {
     <>
       <PageHeading label="Zaakdetails" icon={DocumentIcon}/>
       <DetailsList data={ dataDetailsList } />
-      <br />
-      <br />
       { data?.id && <Workflows caseId={ data?.id } /> }
-      { data?.id && <CaseHistory caseId={ data?.id } /> }
+      { data?.id && <CaseEvents caseId={ data?.id } /> }
     </>
   )
 }

diff --git a/...seDetailsPage/CaseHistory/CaseHistory.tsx → ...CaseDetailsPage/CaseEvents/CaseEvents.tsx b/...seDetailsPage/CaseHistory/CaseHistory.tsx → ...CaseDetailsPage/CaseEvents/CaseEvents.tsx
@@ -1,3 +1,4 @@
+import { styled } from "styled-components"
 import { useCaseEvents } from "app/state/rest"
 import { SmallSkeleton, PageHeading, TimelineEvents } from "app/components"
 
@@ -6,20 +7,24 @@ type Props = {
   caseId: Components.Schemas.Case["id"]
 }
 
-export const CaseHistory: React.FC<Props> = ({ caseId }) => {
+const Wrapper = styled.div`
+  margin-bottom: 32px;
+`
+
+export const CaseEvents: React.FC<Props> = ({ caseId }) => {
   const [data, { isBusy }] = useCaseEvents(caseId)
   const events = data ? [...data]?.reverse() : []
 
   if (isBusy) {
     return <SmallSkeleton height={ 4 } />
   }
   return (
-    <>
+    <Wrapper>
       <PageHeading label="Zaakhistorie" level={ 4 } border/>
       <TimelineEvents events={ events }/>
-    </>
+    </Wrapper>
   )
 }
 
-export default CaseHistory
+export default CaseEvents
 
diff --git a/src/app/pages/CaseDetailsPage/Workflows/Workflows.tsx b/src/app/pages/CaseDetailsPage/Workflows/Workflows.tsx
@@ -9,6 +9,10 @@ type Props = {
 }
 
 const Wrapper = styled.div`
+  margin-bottom: 32px;
+`
+
+const TableWrapper = styled.div`
   margin-bottom: 10px;
 `
 
@@ -21,24 +25,22 @@ export const Workflows: React.FC<Props> = ({ caseId }) => {
     return <SmallSkeleton height={ 4 } />
   }
   return (
-    <>
+    <Wrapper>
       <PageHeading label="Open taken" level={ 4 } />
       { workflows?.length > 0 ? (
         workflows.map(({ id, tasks = [] }) => (
-          <Wrapper key={ `${ id }` }>
+          <TableWrapper key={ `${ id }` }>
             <Table
               columns={ columns }
               lastColumnFixed
               data={ tasks }
               pagination={ false }
               emptyPlaceholder="Geen taken beschikbaar."
             />
-          </Wrapper>
+          </TableWrapper>
         ))
       ) : <></>}
-      <br />
-      <br />
-    </>
+    </Wrapper>
   )
 }