From f0f24b6fc4f3ce1fb0e1a3f3913befcbcd1260c1 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Fri, 28 Apr 2023 17:49:04 +0530 Subject: [PATCH] style: module , cycle & icon styling (#963) * style: target icon updated * style: cycle card theming * style: module card theming * style: no current cycle message --- apps/app/components/cycles/cycles-list.tsx | 12 ++----- .../components/cycles/single-cycle-card.tsx | 20 +++++------ apps/app/components/icons/target-icon.tsx | 26 ++++++++------ .../components/modules/single-module-card.tsx | 36 ++++++++++--------- 4 files changed, 49 insertions(+), 45 deletions(-) diff --git a/apps/app/components/cycles/cycles-list.tsx b/apps/app/components/cycles/cycles-list.tsx index 68592b051..f8d607dbe 100644 --- a/apps/app/components/cycles/cycles-list.tsx +++ b/apps/app/components/cycles/cycles-list.tsx @@ -25,7 +25,6 @@ export const CyclesList: React.FC = ({ }) => { const [cycleDeleteModal, setCycleDeleteModal] = useState(false); const [selectedCycleForDelete, setSelectedCycleForDelete] = useState(); - const [showNoCurrentCycleMessage, setShowNoCurrentCycleMessage] = useState(true); const handleDeleteCycle = (cycle: ICycle) => { setSelectedCycleForDelete({ ...cycle, actionType: "delete" }); @@ -61,14 +60,9 @@ export const CyclesList: React.FC = ({ ))} ) : type === "current" ? ( - showNoCurrentCycleMessage && ( -
-

No current cycle is present.

- -
- ) +
+

No current cycle is present.

+
) : ( = ({ return (
-
+
@@ -269,20 +269,20 @@ export const SingleCycleCard: React.FC = ({ )}
-
+
- - Start : + + Start : {renderShortDateWithYearFormat(startDate)}
- - End : + + End : {renderShortDateWithYearFormat(endDate)}
-
+
{cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? ( = ({ alt={cycle.owned_by.first_name} /> ) : ( - + {cycle.owned_by.first_name.charAt(0)} )} - {cycle.owned_by.first_name} + {cycle.owned_by.first_name}
{!isCompleted && ( @@ -350,7 +350,7 @@ export const SingleCycleCard: React.FC = ({ {({ open }) => (
diff --git a/apps/app/components/icons/target-icon.tsx b/apps/app/components/icons/target-icon.tsx index c9fbde869..e27c21d7a 100644 --- a/apps/app/components/icons/target-icon.tsx +++ b/apps/app/components/icons/target-icon.tsx @@ -6,15 +6,21 @@ export const TargetIcon: React.FC = ({ width = "24", height = "24", className, - color = "black", + color = "#858E96", }) => ( - - - - - - - - + + + -); \ No newline at end of file +); diff --git a/apps/app/components/modules/single-module-card.tsx b/apps/app/components/modules/single-module-card.tsx index 030f51c0d..f7192de6f 100644 --- a/apps/app/components/modules/single-module-card.tsx +++ b/apps/app/components/modules/single-module-card.tsx @@ -14,7 +14,13 @@ import { DeleteModuleModal } from "components/modules"; // ui import { AssigneesList, Avatar, CustomMenu, Tooltip } from "components/ui"; // icons -import { LinkIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline"; +import { + CalendarDaysIcon, + LinkIcon, + PencilIcon, + StarIcon, + TrashIcon, +} from "@heroicons/react/24/outline"; import { CalendarMonthIcon, TargetIcon } from "components/icons"; // helpers @@ -122,7 +128,7 @@ export const SingleModuleCard: React.FC = ({ module, handleEditModule }) setIsOpen={setModuleDeleteModal} data={module} /> -
+
@@ -137,7 +143,7 @@ export const SingleModuleCard: React.FC = ({ module, handleEditModule })
-
+
{module?.status?.replace("-", " ")}
{module.is_favorite ? ( @@ -172,24 +178,24 @@ export const SingleModuleCard: React.FC = ({ module, handleEditModule })
-
+
- - Start: + + Start: {renderShortDateWithYearFormat(startDate)}
- - End: + + End: {renderShortDateWithYearFormat(endDate)}
-
-
+
+
Progress -
+
= ({ module, handleEditModule })
{isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%
-
-

+

+

Last updated: - - {renderShortDateWithYearFormat(lastUpdated)} - + {renderShortDateWithYearFormat(lastUpdated)}

{module.members_detail.length > 0 && (