From 6449663eac79c12d06c9788195227055ab2d36f0 Mon Sep 17 00:00:00 2001 From: chadstewart Date: Tue, 16 Aug 2022 10:52:41 -0500 Subject: [PATCH 01/12] Initial commit for reports history component. --- .../ReportsHistory/reports-history.tsx | 7 +++++++ stories/molecules/reports-history.stories.tsx | 19 +++++++++++++++++++ 2 files changed, 26 insertions(+) create mode 100644 components/molecules/ReportsHistory/reports-history.tsx create mode 100644 stories/molecules/reports-history.stories.tsx diff --git a/components/molecules/ReportsHistory/reports-history.tsx b/components/molecules/ReportsHistory/reports-history.tsx new file mode 100644 index 0000000000..2bde836573 --- /dev/null +++ b/components/molecules/ReportsHistory/reports-history.tsx @@ -0,0 +1,7 @@ +const ReportsHistory = (): JSX.Element => { + return ( + <> + ); +}; + +export default ReportsHistory; \ No newline at end of file diff --git a/stories/molecules/reports-history.stories.tsx b/stories/molecules/reports-history.stories.tsx new file mode 100644 index 0000000000..bc643e33a2 --- /dev/null +++ b/stories/molecules/reports-history.stories.tsx @@ -0,0 +1,19 @@ +import React from "react"; +import { ComponentStory, ComponentMeta } from "@storybook/react"; +import ReportsHistory from "components/molecules/ReportsHistory/reports-history"; + +const storyConfig = { + title: "Design System/Molecules/Reports History", + component: "ReportsHistory" +}; + +export default storyConfig; + +//ReportsHistory Template +const ReportsHistoryTemplate: ComponentStory = () => ; + +export const Default = ReportsHistory.bind({}); + +/* Default.args = { + children: <>Test +}; */ \ No newline at end of file From 165846b3221e4750e919f50da4d1a8669dfa81ec Mon Sep 17 00:00:00 2001 From: chadstewart Date: Tue, 16 Aug 2022 11:14:50 -0500 Subject: [PATCH 02/12] Updated Card component to accept a heading and display it properly. --- components/atoms/Card/card.tsx | 21 ++++++++++++++++--- .../ReportsHistory/reports-history.tsx | 11 +++++++++- 2 files changed, 28 insertions(+), 4 deletions(-) diff --git a/components/atoms/Card/card.tsx b/components/atoms/Card/card.tsx index 9446c54101..17ef7571f6 100644 --- a/components/atoms/Card/card.tsx +++ b/components/atoms/Card/card.tsx @@ -2,13 +2,28 @@ import React from "react"; interface CardProps { className?: string; + heading?: JSX.Element; children: JSX.Element; } -const Card: React.FC = ({ className, children }) => { +const Card: React.FC = ({ className, children, heading }) => { return ( -
- {children} +
+ { + heading ? + <> +
+ {heading} +
+
+ {children} +
+ + + : + + children + }
); }; diff --git a/components/molecules/ReportsHistory/reports-history.tsx b/components/molecules/ReportsHistory/reports-history.tsx index 2bde836573..17e35ad7fc 100644 --- a/components/molecules/ReportsHistory/reports-history.tsx +++ b/components/molecules/ReportsHistory/reports-history.tsx @@ -1,6 +1,15 @@ +import Card from "components/atoms/Card/card"; +import Title from "components/atoms/Typography/title"; + const ReportsHistory = (): JSX.Element => { + const heading = Hello; + return ( - <> + +
+ Hello +
+ ); }; From 6bc752a03dd688093bc7bbf50b79f05552db13a1 Mon Sep 17 00:00:00 2001 From: chadstewart Date: Tue, 16 Aug 2022 11:49:56 -0500 Subject: [PATCH 03/12] Making progress on reports history page. Making the segments for each part of the component. --- .../ReportsHistory/reports-history.tsx | 31 +++++++++++++++++-- 1 file changed, 28 insertions(+), 3 deletions(-) diff --git a/components/molecules/ReportsHistory/reports-history.tsx b/components/molecules/ReportsHistory/reports-history.tsx index 17e35ad7fc..03166cfc3e 100644 --- a/components/molecules/ReportsHistory/reports-history.tsx +++ b/components/molecules/ReportsHistory/reports-history.tsx @@ -2,12 +2,37 @@ import Card from "components/atoms/Card/card"; import Title from "components/atoms/Typography/title"; const ReportsHistory = (): JSX.Element => { - const heading = Hello; + const heading = + <div className="flex justify-between w-full"> + <div className="w-[40%] border-1 p-2"> + Report Date + </div> + <div className="w-[20%] border-1 p-2"> + issue date + </div> + <div className="w-[20%] border-1 p-2"> + Format + </div> + <div className="w-[20%] border-1 p-2"> + </div> + </div> + ; return ( -
- Hello +
+
+ Test +
+
+ Test +
+
+ Test +
+
+ Test +
); From 10ee28e771f488c7603084715fda094642f77a04 Mon Sep 17 00:00:00 2001 From: chadstewart Date: Tue, 16 Aug 2022 11:57:48 -0500 Subject: [PATCH 04/12] Updated Card to accept both a JSX element or a string and updated the story for card to show the card with a heading. --- components/atoms/Card/card.tsx | 2 +- stories/atoms/card.stories.tsx | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/components/atoms/Card/card.tsx b/components/atoms/Card/card.tsx index 17ef7571f6..ace28d413e 100644 --- a/components/atoms/Card/card.tsx +++ b/components/atoms/Card/card.tsx @@ -2,7 +2,7 @@ import React from "react"; interface CardProps { className?: string; - heading?: JSX.Element; + heading?: JSX.Element | string; children: JSX.Element; } diff --git a/stories/atoms/card.stories.tsx b/stories/atoms/card.stories.tsx index a6fde3d433..8dbd7424b3 100644 --- a/stories/atoms/card.stories.tsx +++ b/stories/atoms/card.stories.tsx @@ -13,7 +13,13 @@ export default storyConfig; const CardTemplate: ComponentStory = (args) => ; export const Default = CardTemplate.bind({}); +export const Heading = CardTemplate.bind({}); Default.args = { children: <>Test +}; + +Heading.args = { + heading: "Test", + children: <>Test }; \ No newline at end of file From b60e165adf428ebd8706fcd47ddd5269db1828cc Mon Sep 17 00:00:00 2001 From: chadstewart Date: Tue, 16 Aug 2022 15:00:19 -0500 Subject: [PATCH 05/12] Completed Reports History component. Working on clean up now. --- .../ReportsHistory/reports-history.tsx | 53 ++++++++++++++----- interfaces/report-type.ts | 6 +++ stories/molecules/reports-history.stories.tsx | 27 ++++++++-- 3 files changed, 67 insertions(+), 19 deletions(-) create mode 100644 interfaces/report-type.ts diff --git a/components/molecules/ReportsHistory/reports-history.tsx b/components/molecules/ReportsHistory/reports-history.tsx index 03166cfc3e..d6aee416c1 100644 --- a/components/molecules/ReportsHistory/reports-history.tsx +++ b/components/molecules/ReportsHistory/reports-history.tsx @@ -1,7 +1,14 @@ +import Button from "components/atoms/Button/button"; import Card from "components/atoms/Card/card"; import Title from "components/atoms/Typography/title"; +import Text from "components/atoms/Typography/text"; +import { Report } from "interfaces/report-type"; -const ReportsHistory = (): JSX.Element => { +interface ReportsHistoryProps { + reportList?: Report[]; +} + +const ReportsHistory = ({ reportList }: ReportsHistoryProps): JSX.Element => { const heading = <div className="flex justify-between w-full"> <div className="w-[40%] border-1 p-2"> @@ -20,19 +27,37 @@ const ReportsHistory = (): JSX.Element => { return ( <Card heading={heading}> - <div className="flex justify-between w-full"> - <div className="w-[40%] border-1 p-2"> - Test - </div> - <div className="w-[20%] border-1 p-2"> - Test - </div> - <div className="w-[20%] border-1 p-2"> - Test - </div> - <div className="w-[20%] border-1 p-2"> - Test - </div> + <div className="flex flex-col justify-between w-full"> + {reportList ? + reportList.map(({reportDate, reportName, reportFormat, isGenerated}, index) => + <div className="flex" key={index}> + <div className="w-[40%] border-1 p-2"> + {reportName} + </div> + <div className="w-[20%] border-1 p-2"> + {reportDate} + </div> + <div className="w-[20%] border-1 p-2"> + {reportFormat} + </div> + <div className="w-[20%] border-1 p-2"> + {isGenerated ? + <Button type="link" >Download</Button> + + : + + <Button type="link" className="!text-light-slate-10" disabled >Generating</Button> + } + </div> + </div> + ) + + : + + <Text> + No Reports Found... + </Text> + } </div> </Card> ); diff --git a/interfaces/report-type.ts b/interfaces/report-type.ts new file mode 100644 index 0000000000..290025e8de --- /dev/null +++ b/interfaces/report-type.ts @@ -0,0 +1,6 @@ +export type Report = { + reportName: string; + reportDate: string; + reportFormat: string; + isGenerated: boolean; +} \ No newline at end of file diff --git a/stories/molecules/reports-history.stories.tsx b/stories/molecules/reports-history.stories.tsx index bc643e33a2..5e58cc4a78 100644 --- a/stories/molecules/reports-history.stories.tsx +++ b/stories/molecules/reports-history.stories.tsx @@ -1,6 +1,7 @@ import React from "react"; import { ComponentStory, ComponentMeta } from "@storybook/react"; import ReportsHistory from "components/molecules/ReportsHistory/reports-history"; +import { Report } from "interfaces/report-type"; const storyConfig = { title: "Design System/Molecules/Reports History", @@ -9,11 +10,27 @@ const storyConfig = { export default storyConfig; +const testReportList: Report[] = [ + { + reportName: "Top Ten", + reportDate: "Jun 3, 2022", + reportFormat: "CSV", + isGenerated: true + }, + { + reportName: "Top Five", + reportDate: "Jun 3, 2022", + reportFormat: "CSV", + isGenerated: false + } +]; + //ReportsHistory Template -const ReportsHistoryTemplate: ComponentStory<typeof ReportsHistory> = () => <ReportsHistory />; +const ReportsHistoryTemplate: ComponentStory<typeof ReportsHistory> = (args) => <ReportsHistory {...args} />; -export const Default = ReportsHistory.bind({}); +export const Default = ReportsHistoryTemplate.bind({}); +export const NoReports = ReportsHistoryTemplate.bind({}); -/* Default.args = { - children: <>Test</> -}; */ \ No newline at end of file +Default.args = { + reportList: testReportList +}; \ No newline at end of file From f4a70686dbfc677a029bd409effe467476d8c4d5 Mon Sep 17 00:00:00 2001 From: chadstewart <chadrhonanstewart@gmail.com> Date: Tue, 16 Aug 2022 15:04:20 -0500 Subject: [PATCH 06/12] Just doing a bit of clean up to the code. --- components/molecules/ReportsHistory/reports-history.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/components/molecules/ReportsHistory/reports-history.tsx b/components/molecules/ReportsHistory/reports-history.tsx index d6aee416c1..575dc251fd 100644 --- a/components/molecules/ReportsHistory/reports-history.tsx +++ b/components/molecules/ReportsHistory/reports-history.tsx @@ -12,15 +12,16 @@ const ReportsHistory = ({ reportList }: ReportsHistoryProps): JSX.Element => { const heading = <Title level={5} className="!text-light-slate-9 uppercase"> <div className="flex justify-between w-full"> <div className="w-[40%] border-1 p-2"> - Report Date + report date </div> <div className="w-[20%] border-1 p-2"> issue date </div> <div className="w-[20%] border-1 p-2"> - Format + format </div> <div className="w-[20%] border-1 p-2"> + {null} </div> </div> ; @@ -55,7 +56,7 @@ const ReportsHistory = ({ reportList }: ReportsHistoryProps): JSX.Element => { : - No Reports Found... + Currently there are no reports }
From 7276c44ae61493dbd8e0df36e577bb1b5bda1fe1 Mon Sep 17 00:00:00 2001 From: chadstewart Date: Tue, 16 Aug 2022 18:06:09 -0500 Subject: [PATCH 07/12] Removing hard-coded width percentages from reports history component. --- .../molecules/ReportsHistory/reports-history.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/components/molecules/ReportsHistory/reports-history.tsx b/components/molecules/ReportsHistory/reports-history.tsx index 575dc251fd..80a92b8cdc 100644 --- a/components/molecules/ReportsHistory/reports-history.tsx +++ b/components/molecules/ReportsHistory/reports-history.tsx @@ -11,16 +11,16 @@ interface ReportsHistoryProps { const ReportsHistory = ({ reportList }: ReportsHistoryProps): JSX.Element => { const heading = <div className="flex justify-between w-full"> - <div className="w-[40%] border-1 p-2"> + <div className="w-2/5 border-1 p-2"> report date </div> - <div className="w-[20%] border-1 p-2"> + <div className="w-1/5 border-1 p-2"> issue date </div> - <div className="w-[20%] border-1 p-2"> + <div className="w-1/5 border-1 p-2"> format </div> - <div className="w-[20%] border-1 p-2"> + <div className="w-1/5 border-1 p-2"> {null} </div> </div> @@ -32,16 +32,16 @@ const ReportsHistory = ({ reportList }: ReportsHistoryProps): JSX.Element => { {reportList ? reportList.map(({reportDate, reportName, reportFormat, isGenerated}, index) => <div className="flex" key={index}> - <div className="w-[40%] border-1 p-2"> + <div className="w-2/5 border-1 p-2"> {reportName} </div> - <div className="w-[20%] border-1 p-2"> + <div className="w-1/5 border-1 p-2"> {reportDate} </div> - <div className="w-[20%] border-1 p-2"> + <div className="w-1/5 border-1 p-2"> {reportFormat} </div> - <div className="w-[20%] border-1 p-2"> + <div className="w-1/5 border-1 p-2"> {isGenerated ? <Button type="link" >Download</Button> From c990988d6c4b483efb648d10ebb899a94ab9701c Mon Sep 17 00:00:00 2001 From: chadstewart <chadrhonanstewart@gmail.com> Date: Wed, 17 Aug 2022 07:05:44 -0500 Subject: [PATCH 08/12] Updated report type to only accept CSV string for now. --- interfaces/report-type.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/interfaces/report-type.ts b/interfaces/report-type.ts index 290025e8de..ad52e11ecf 100644 --- a/interfaces/report-type.ts +++ b/interfaces/report-type.ts @@ -1,6 +1,6 @@ export type Report = { reportName: string; reportDate: string; - reportFormat: string; + reportFormat: "CSV"; isGenerated: boolean; } \ No newline at end of file From 368fd867467eb3db77f4d7d51fd357219563c3d5 Mon Sep 17 00:00:00 2001 From: chadstewart <chadrhonanstewart@gmail.com> Date: Thu, 18 Aug 2022 08:13:01 -0500 Subject: [PATCH 09/12] Made some changes based on review feedback. --- components/atoms/Card/card.tsx | 2 +- .../ReportsHistory/reports-history.tsx | 24 +++++++++---------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/components/atoms/Card/card.tsx b/components/atoms/Card/card.tsx index ace28d413e..b7543ba6e0 100644 --- a/components/atoms/Card/card.tsx +++ b/components/atoms/Card/card.tsx @@ -15,7 +15,7 @@ const Card: React.FC<CardProps> = ({ className, children, heading }) => { <div className="px-6 py-3 rounded-t-lg bg-light-slate-3"> {heading} </div> - <div className="p-6"> + <div className="py-6"> {children} </div> </> diff --git a/components/molecules/ReportsHistory/reports-history.tsx b/components/molecules/ReportsHistory/reports-history.tsx index 80a92b8cdc..90f2833059 100644 --- a/components/molecules/ReportsHistory/reports-history.tsx +++ b/components/molecules/ReportsHistory/reports-history.tsx @@ -10,17 +10,17 @@ interface ReportsHistoryProps { const ReportsHistory = ({ reportList }: ReportsHistoryProps): JSX.Element => { const heading = <Title level={5} className="!text-light-slate-9 uppercase"> - <div className="flex justify-between w-full"> - <div className="w-2/5 border-1 p-2"> + <div className="flex justify-between w-full gap-2"> + <div className="w-2/5 font-xs font-semibold text-slate-400 tracking-wide uppercase"> report date </div> - <div className="w-1/5 border-1 p-2"> + <div className="w-1/5 font-xs font-semibold text-slate-400 tracking-wide uppercase"> issue date </div> - <div className="w-1/5 border-1 p-2"> + <div className="w-1/5 font-xs font-semibold text-slate-400 tracking-wide uppercase"> format </div> - <div className="w-1/5 border-1 p-2"> + <div className="w-1/5 font-xs font-semibold text-slate-400 tracking-wide uppercase"> {null} </div> </div> @@ -28,26 +28,26 @@ const ReportsHistory = ({ reportList }: ReportsHistoryProps): JSX.Element => { return ( <Card heading={heading}> - <div className="flex flex-col justify-between w-full"> + <div className="flex flex-col justify-between w-full gap-2"> {reportList ? reportList.map(({reportDate, reportName, reportFormat, isGenerated}, index) => - <div className="flex" key={index}> - <div className="w-2/5 border-1 p-2"> + <div className={`flex py-3 ${index % 2 === 0 ? "bg-slate-50" : "bg-white"}`} key={index}> + <div className="w-2/5 px-6 font-sm font-medium text-slate-900 tracking-tight"> {reportName} </div> - <div className="w-1/5 border-1 p-2"> + <div className="w-1/5 px-6 font-sm font-medium text-slate-900 tracking-tight"> {reportDate} </div> - <div className="w-1/5 border-1 p-2"> + <div className="w-1/5 px-6 font-sm font-medium text-slate-900 tracking-tight"> {reportFormat} </div> - <div className="w-1/5 border-1 p-2"> + <div className="w-1/5 px-6 font-sm font-medium text-slate-900 tracking-tight text-right"> {isGenerated ? <Button type="link" >Download</Button> : - <Button type="link" className="!text-light-slate-10" disabled >Generating</Button> + <Button type="link" className="!text-light-slate-10" disabled >Generating...</Button> } </div> </div> From bfd2dee06913f78e1445c80d6d974fff6c2c37db Mon Sep 17 00:00:00 2001 From: chadstewart <chadrhonanstewart@gmail.com> Date: Fri, 19 Aug 2022 08:03:19 -0500 Subject: [PATCH 10/12] Updated report history and card component based on review feedback. --- components/atoms/Card/card.tsx | 4 ++-- .../molecules/ReportsHistory/reports-history.tsx | 16 ++++++++-------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/components/atoms/Card/card.tsx b/components/atoms/Card/card.tsx index b7543ba6e0..2ec680a80f 100644 --- a/components/atoms/Card/card.tsx +++ b/components/atoms/Card/card.tsx @@ -8,14 +8,14 @@ interface CardProps { const Card: React.FC<CardProps> = ({ className, children, heading }) => { return ( - <article className={`${className ? className : ""} block ${heading ? "" : "p-6"} bg-white rounded-lg border border-slate-300`}> + <article className={`${className ? className : ""} block ${heading ? "" : "p-6"} max-w-2xl bg-white rounded-lg drop-shadow-md`}> { heading ? <> <div className="px-6 py-3 rounded-t-lg bg-light-slate-3"> {heading} </div> - <div className="py-6"> + <div> {children} </div> </> diff --git a/components/molecules/ReportsHistory/reports-history.tsx b/components/molecules/ReportsHistory/reports-history.tsx index 90f2833059..8a602aabd6 100644 --- a/components/molecules/ReportsHistory/reports-history.tsx +++ b/components/molecules/ReportsHistory/reports-history.tsx @@ -11,16 +11,16 @@ interface ReportsHistoryProps { const ReportsHistory = ({ reportList }: ReportsHistoryProps): JSX.Element => { const heading = <Title level={5} className="!text-light-slate-9 uppercase"> <div className="flex justify-between w-full gap-2"> - <div className="w-2/5 font-xs font-semibold text-slate-400 tracking-wide uppercase"> + <div className="w-2/5 text-xs font-semibold text-slate-400 tracking-wide uppercase"> report date </div> - <div className="w-1/5 font-xs font-semibold text-slate-400 tracking-wide uppercase"> + <div className="w-1/5 text-xs font-semibold text-slate-400 tracking-wide uppercase"> issue date </div> - <div className="w-1/5 font-xs font-semibold text-slate-400 tracking-wide uppercase"> + <div className="w-1/5 text-xs font-semibold text-slate-400 tracking-wide uppercase"> format </div> - <div className="w-1/5 font-xs font-semibold text-slate-400 tracking-wide uppercase"> + <div className="w-1/5 text-xs font-semibold text-slate-400 tracking-wide uppercase"> {null} </div> </div> @@ -32,16 +32,16 @@ const ReportsHistory = ({ reportList }: ReportsHistoryProps): JSX.Element => { {reportList ? reportList.map(({reportDate, reportName, reportFormat, isGenerated}, index) => <div className={`flex py-3 ${index % 2 === 0 ? "bg-slate-50" : "bg-white"}`} key={index}> - <div className="w-2/5 px-6 font-sm font-medium text-slate-900 tracking-tight"> + <div className="w-2/5 px-6 text-sm font-medium text-slate-900 tracking-tight"> {reportName} </div> - <div className="w-1/5 px-6 font-sm font-medium text-slate-900 tracking-tight"> + <div className="w-1/5 px-6 text-sm font-medium text-slate-900 tracking-tight"> {reportDate} </div> - <div className="w-1/5 px-6 font-sm font-medium text-slate-900 tracking-tight"> + <div className="w-1/5 px-6 text-sm font-medium text-slate-900 tracking-tight"> {reportFormat} </div> - <div className="w-1/5 px-6 font-sm font-medium text-slate-900 tracking-tight text-right"> + <div className="w-1/5 px-6 text-sm font-medium text-slate-900 tracking-tight text-right"> {isGenerated ? <Button type="link" >Download</Button> From a2abf4294021ba6ff663465247d0257c19608d6b Mon Sep 17 00:00:00 2001 From: chadstewart <chadrhonanstewart@gmail.com> Date: Fri, 19 Aug 2022 14:14:54 -0500 Subject: [PATCH 11/12] Updated reports history based on code review. --- .../molecules/ReportsHistory/reports-history.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/components/molecules/ReportsHistory/reports-history.tsx b/components/molecules/ReportsHistory/reports-history.tsx index 8a602aabd6..5bae7110fb 100644 --- a/components/molecules/ReportsHistory/reports-history.tsx +++ b/components/molecules/ReportsHistory/reports-history.tsx @@ -31,17 +31,17 @@ const ReportsHistory = ({ reportList }: ReportsHistoryProps): JSX.Element => { <div className="flex flex-col justify-between w-full gap-2"> {reportList ? reportList.map(({reportDate, reportName, reportFormat, isGenerated}, index) => - <div className={`flex py-3 ${index % 2 === 0 ? "bg-slate-50" : "bg-white"}`} key={index}> - <div className="w-2/5 px-6 text-sm font-medium text-slate-900 tracking-tight"> + <div className={`flex py-3 ${index % 2 === 0 ? "bg-slate-50" : "bg-white"} gap-2`} key={index}> + <div className="w-2/5 ml-6 text-sm font-medium text-slate-900 tracking-tight"> {reportName} </div> - <div className="w-1/5 px-6 text-sm font-medium text-slate-900 tracking-tight"> + <div className="w-1/5 text-sm font-medium text-slate-900 tracking-tight"> {reportDate} </div> - <div className="w-1/5 px-6 text-sm font-medium text-slate-900 tracking-tight"> + <div className="w-1/5 text-sm font-medium text-slate-900 tracking-tight"> {reportFormat} </div> - <div className="w-1/5 px-6 text-sm font-medium text-slate-900 tracking-tight text-right"> + <div className="w-1/5 mr-6 text-sm font-medium text-slate-900 tracking-tight text-right"> {isGenerated ? <Button type="link" >Download</Button> From 266993cca03c47028b5249149811887b711c25fe Mon Sep 17 00:00:00 2001 From: chadstewart <chadrhonanstewart@gmail.com> Date: Fri, 19 Aug 2022 19:50:13 -0500 Subject: [PATCH 12/12] Made some changes to reports-history based on code review. --- components/molecules/ReportsHistory/reports-history.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/molecules/ReportsHistory/reports-history.tsx b/components/molecules/ReportsHistory/reports-history.tsx index 5bae7110fb..d9abe68e0a 100644 --- a/components/molecules/ReportsHistory/reports-history.tsx +++ b/components/molecules/ReportsHistory/reports-history.tsx @@ -31,8 +31,8 @@ const ReportsHistory = ({ reportList }: ReportsHistoryProps): JSX.Element => { <div className="flex flex-col justify-between w-full gap-2"> {reportList ? reportList.map(({reportDate, reportName, reportFormat, isGenerated}, index) => - <div className={`flex py-3 ${index % 2 === 0 ? "bg-slate-50" : "bg-white"} gap-2`} key={index}> - <div className="w-2/5 ml-6 text-sm font-medium text-slate-900 tracking-tight"> + <div className={`flex items-center py-3 px-6 ${index % 2 === 0 ? "bg-slate-50" : "bg-white"} gap-2`} key={index}> + <div className="w-2/5 text-sm font-medium text-slate-900 tracking-tight"> {reportName} </div> <div className="w-1/5 text-sm font-medium text-slate-900 tracking-tight"> @@ -41,7 +41,7 @@ const ReportsHistory = ({ reportList }: ReportsHistoryProps): JSX.Element => { <div className="w-1/5 text-sm font-medium text-slate-900 tracking-tight"> {reportFormat} </div> - <div className="w-1/5 mr-6 text-sm font-medium text-slate-900 tracking-tight text-right"> + <div className="w-1/5 text-sm font-medium text-slate-900 tracking-tight text-right"> {isGenerated ? <Button type="link" >Download</Button> @@ -55,7 +55,7 @@ const ReportsHistory = ({ reportList }: ReportsHistoryProps): JSX.Element => { : - <Text> + <Text className="py-3 px-6"> Currently there are no reports </Text> }