diff --git a/cypress/integration/header.spec.ts b/cypress/integration/header.spec.ts deleted file mode 100644 index 8d88220da..000000000 --- a/cypress/integration/header.spec.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { completeOnboarding } from "./landing-page.spec"; - -describe("Header component", () => { - before(() => { - completeOnboarding(); - }); - - it("should display the title correctly", () => { - cy.visit("/MyGoals"); - cy.get(".header h6").should("have.text", "My goals"); - }); - - it("should show search input when search icon is clicked", () => { - cy.get(".header-items").find(".header-icon[alt='zinzen search']").click(); - - cy.get(".header-search").should("be.visible"); - cy.go("back"); - }); - - it("should open settings dropdown when settings icon is clicked", () => { - cy.get(".header-items").find(".header-icon[alt='Settings']").click(); - - cy.get(".header-dropdown").should("be.visible"); - }); - - it("should close settings dropdown when clicked outside", () => { - cy.get(".header-items").find(".header-icon[alt='Settings']").click(); - - cy.get("body").click("bottom"); // Click outside the dropdown - - cy.get(".header-dropdown").should("not.be.visible"); - }); - - it("should toggle dark mode when Switch Mode button is clicked", () => { - cy.get(".header-items").find(".header-icon[alt='Settings']").click(); - - cy.contains("Dark mode").click(); - - // Assert that dark mode is enabled - cy.get(".App-dark").should("be.visible"); - cy.get(".App-light").should("not.exist"); - - cy.get(".header-items").find(".header-icon[alt='Settings']").click(); - - cy.contains("Dark mode").click(); - - // Assert that dark mode is disabled and light mode is enabled - cy.get(".App-dark").should("not.exist"); - cy.get(".App-light").should("be.visible"); - }); - - it("should only display Zinzen settings on MyJournal or My Time page", () => { - const checkHeaderItems = () => { - cy.get(".header-items .header-icon[alt='Settings']").should("be.visible"); - cy.get(".header-items .header-icon[alt='zinzen inbox']").should("not.exist"); - cy.get(".header-items .header-icon[alt='zinzen search']").should("not.exist"); - }; - - cy.contains("Journal").click(); - checkHeaderItems(); - - cy.contains("Schedule").click(); - checkHeaderItems(); - }); -}); diff --git a/playwright/tests/header-ui.spec.ts b/playwright/tests/header-ui.spec.ts new file mode 100644 index 000000000..7718af255 --- /dev/null +++ b/playwright/tests/header-ui.spec.ts @@ -0,0 +1,72 @@ +import { test, expect } from "@playwright/test"; +import { STORAGE_STATE } from "playwright/config/constants"; + +test.describe("Header component", () => { + test.use({ storageState: STORAGE_STATE }); + + test.beforeEach(async ({ page }) => { + await page.goto("http://127.0.0.1:3000/"); + }); + + test("should display the title correctly", async ({ page }) => { + await page.getByRole("button", { name: "Goals" }).click(); + const heading = page.getByRole("heading"); + await expect(heading).toHaveText("My goals"); + }); + + test("should show search input when search icon is clicked", async ({ page }) => { + await page.getByRole("button", { name: "Goals" }).click(); + const searchIcon = page.getByRole("img", { name: "zinzen search" }); + await searchIcon.click(); + const searchInput = page.getByPlaceholder("Search"); + await expect(searchInput).toBeVisible(); + }); + + test("should open settings dropdown when settings icon is clicked", async ({ page }) => { + const settingsIcon = page.getByRole("img", { name: "Settings" }); + await settingsIcon.click(); + const settingsDropdown = page.locator(".ant-dropdown"); + await expect(settingsDropdown).toHaveCSS("display", "block"); + }); + + test("should close settings dropdown when clicked outside", async ({ page }) => { + const settingsIcon = page.getByRole("img", { name: "Settings" }); + await settingsIcon.click(); + await page.locator("body").click({ position: { x: 0, y: 0 } }); + const settingsDropdown = page.locator(".ant-dropdown"); + await expect(settingsDropdown).toHaveCSS("display", "none"); + }); + + test("should toggle dark mode when Switch Mode button is clicked", async ({ page }) => { + const settingsIcon = page.getByRole("img", { name: "Settings" }); + await settingsIcon.click(); + + const darkModeSwitch = page.locator("div").filter({ hasText: /^Dark mode$/ }); + await darkModeSwitch.click(); + await expect(page.locator(".App-light")).toBeVisible(); + await expect(page.locator(".App-dark")).not.toBeVisible(); + + await settingsIcon.click(); + await darkModeSwitch.click(); + await expect(page.locator(".App-light")).not.toBeVisible(); + await expect(page.locator(".App-dark")).toBeVisible(); + }); + + test("verify header icons visibility on specific pages", async ({ page }) => { + const checkHeaderItems = async () => { + const settingsIcon = page.getByRole("img", { name: "Settings" }); + const lightModeIcon = page.getByRole("img", { name: "light mode" }); + const searchIcon = page.getByRole("img", { name: "zinzen search" }); + + await expect(settingsIcon).toBeVisible(); + await expect(lightModeIcon).toBeVisible(); + await expect(searchIcon).not.toBeVisible(); + }; + + await page.getByRole("button", { name: "Journal" }).click(); + await checkHeaderItems(); + + await page.getByRole("button", { name: "Schedule" }).click(); + await checkHeaderItems(); + }); +}); diff --git a/playwright/userOnboarding.json b/playwright/userOnboarding.json index 1ceab7cd7..a9eee1a57 100644 --- a/playwright/userOnboarding.json +++ b/playwright/userOnboarding.json @@ -18,7 +18,7 @@ }, { "name": "darkMode", - "value": "off" + "value": "on" } ] } diff --git a/src/components/GoalsComponents/GoalSublist/GoalSublist.scss b/src/components/GoalsComponents/GoalSublist/GoalSublist.scss index e05414f64..1665a2fe0 100644 --- a/src/components/GoalsComponents/GoalSublist/GoalSublist.scss +++ b/src/components/GoalsComponents/GoalSublist/GoalSublist.scss @@ -29,6 +29,12 @@ flex-direction: column; justify-content: center; + .goal-item-summary-wrapper { + margin: 10px auto; + text-align: center; + padding: 0 24px; + } + .mygoalsbutton-dark, .mygoalsbutton-light { display: none; diff --git a/src/components/GoalsComponents/GoalSublist/GoalSublist.tsx b/src/components/GoalsComponents/GoalSublist/GoalSublist.tsx index 321165308..775da899d 100755 --- a/src/components/GoalsComponents/GoalSublist/GoalSublist.tsx +++ b/src/components/GoalsComponents/GoalSublist/GoalSublist.tsx @@ -25,6 +25,7 @@ import GoalHistory from "./GoalHistory"; import GoalsAccordion from "../GoalsAccordion"; import "./GoalSublist.scss"; +import GoalItemSummary from "../MyGoal/GoalItemSummary/GoalItemSummary"; export const GoalSublist = () => { const { t } = useTranslation(); @@ -86,6 +87,7 @@ export const GoalSublist = () => {

{parentGoal && t(parentGoal?.title)}

+ {parentGoal && }
{showAddGoal && } { + const { perDaySummary, onDaysSummary, timeConstraintsSummary, perWeekSummary } = useBudgetSummaryStore(goal); + + const summaryParts = [perDaySummary, onDaysSummary, timeConstraintsSummary, perWeekSummary].filter(Boolean); + + return {summaryParts.join(", ")}; +}; + +export default BudgetSummary; diff --git a/src/components/GoalsComponents/MyGoal/GoalItemSummary/GoalItemSummary.tsx b/src/components/GoalsComponents/MyGoal/GoalItemSummary/GoalItemSummary.tsx new file mode 100644 index 000000000..4d7b5c35b --- /dev/null +++ b/src/components/GoalsComponents/MyGoal/GoalItemSummary/GoalItemSummary.tsx @@ -0,0 +1,16 @@ +import React from "react"; +import { GoalItem } from "@src/models/GoalItem"; +import BudgetSummary from "./BudgetSummary"; +import GoalSummary from "./GoalSummary"; + +const GoalItemSummary = ({ goal }: { goal: GoalItem }) => { + const isBudget = goal.timeBudget !== undefined; + + return ( + + {isBudget ? : } + + ); +}; + +export default GoalItemSummary; diff --git a/src/components/GoalsComponents/MyGoal/GoalItemSummary/GoalSummary.tsx b/src/components/GoalsComponents/MyGoal/GoalItemSummary/GoalSummary.tsx new file mode 100644 index 000000000..bb5a398db --- /dev/null +++ b/src/components/GoalsComponents/MyGoal/GoalItemSummary/GoalSummary.tsx @@ -0,0 +1,13 @@ +import useGoalSummaryStore from "@src/hooks/useGoalSummaryStore"; +import { GoalItem } from "@src/models/GoalItem"; +import React from "react"; + +const GoalSummary = ({ goal }: { goal: GoalItem }) => { + const { sublistSummary, durationSummary, dueDateSummary, habitSummary } = useGoalSummaryStore(goal); + + const summaryParts = [sublistSummary, durationSummary, dueDateSummary, habitSummary].filter(Boolean); + + return {summaryParts.join(", ")}; +}; + +export default GoalSummary; diff --git a/src/components/GoalsComponents/MyGoal/GoalSummary/BudgetStartSummary.tsx b/src/components/GoalsComponents/MyGoal/GoalSummary/BudgetStartSummary.tsx deleted file mode 100644 index ad63a2e7e..000000000 --- a/src/components/GoalsComponents/MyGoal/GoalSummary/BudgetStartSummary.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { GoalItem } from "@src/models/GoalItem"; -import React from "react"; -import { useTranslation } from "react-i18next"; - -const BudgetStartSummary = ({ goal }: { goal: GoalItem }) => { - const { t } = useTranslation(); - const hasStarted = goal.start && new Date(goal.start).getTime() < new Date().getTime(); - const showStart = goal.due || !hasStarted; - - if (!showStart || !goal.start) { - return null; - } - - return ( -
- {hasStarted ? t("started") : t("starts")} {new Date(goal.start).toDateString().slice(4)} -
- ); -}; - -export default BudgetStartSummary; diff --git a/src/components/GoalsComponents/MyGoal/GoalSummary/BudgetTimeSummary.tsx b/src/components/GoalsComponents/MyGoal/GoalSummary/BudgetTimeSummary.tsx deleted file mode 100644 index aa735ba7c..000000000 --- a/src/components/GoalsComponents/MyGoal/GoalSummary/BudgetTimeSummary.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { GoalItem } from "@src/models/GoalItem"; -import { formatBudgetHrsToText } from "@src/utils"; -import React from "react"; -import { useTranslation } from "react-i18next"; - -const BudgetTimeSummary = ({ goal }: { goal: GoalItem }) => { - const { t } = useTranslation(); - - if (!goal.timeBudget) { - return null; - } - const { perDay, perWeek } = goal.timeBudget; - - if (!perDay && !perWeek) { - return null; - } - - const onLength = goal.on?.length || 0; - const onWeekdays = onLength === 5 && goal.on?.includes("Sat") && goal.on?.includes("Sun"); - const onWeekends = onLength === 2 && goal.on?.includes("Sat") && goal.on?.includes("Sun"); - - return ( -
- {formatBudgetHrsToText(perDay)} - - {goal.on && goal.on.length > 0 && ( - <> - {onLength > 0 && - !onWeekdays && - !onWeekends && - (onLength === 7 ? ` ${t("daily")}` : ` ${t("on")} ${goal.on.map((ele) => t(ele)).join(" ")}`)} - {onWeekdays && ` ${t("onWeekdays")}`} - {onWeekends && ` ${t("onWeekends")}`} - - )} - -
- {goal.beforeTime && goal.afterTime - ? `${t("between")} ${goal.afterTime}-${goal.beforeTime}` - : goal.beforeTime - ? `${t("before")} ${goal.beforeTime}` - : goal.afterTime - ? `${t("after")} ${goal.afterTime}` - : ""} -
- -
- {formatBudgetHrsToText(perWeek)} {t("perWeek")} -
-
- ); -}; - -export default BudgetTimeSummary; diff --git a/src/components/GoalsComponents/MyGoal/GoalSummary/GoalDueDateSummary.tsx b/src/components/GoalsComponents/MyGoal/GoalSummary/GoalDueDateSummary.tsx deleted file mode 100644 index 853135bdf..000000000 --- a/src/components/GoalsComponents/MyGoal/GoalSummary/GoalDueDateSummary.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react"; -import { GoalItem } from "@src/models/GoalItem"; -import { calculateDaysLeft } from "@src/utils"; - -const GoalDueDateSummary = ({ goal }: { goal: GoalItem }) => { - if (!goal.due) { - return null; - } - - const dueDateText = calculateDaysLeft(goal.due); - - return ( -
- {dueDateText} -
- ); -}; - -export default GoalDueDateSummary; diff --git a/src/components/GoalsComponents/MyGoal/GoalSummary/GoalDurationSummary.tsx b/src/components/GoalsComponents/MyGoal/GoalSummary/GoalDurationSummary.tsx deleted file mode 100644 index 2ad0cbfde..000000000 --- a/src/components/GoalsComponents/MyGoal/GoalSummary/GoalDurationSummary.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { useTranslation } from "react-i18next"; -import React from "react"; -import { GoalItem } from "@src/models/GoalItem"; - -const GoalDurationSummary = ({ goal }: { goal: GoalItem }) => { - const { t } = useTranslation(); - const count = Number(goal.duration); - const localizedHourText = t("hourWithCount", { count }); - - if (goal.duration) { - return {`${localizedHourText}`}; - } - - return null; -}; - -export default GoalDurationSummary; diff --git a/src/components/GoalsComponents/MyGoal/GoalSummary/GoalHabitSummary.tsx b/src/components/GoalsComponents/MyGoal/GoalSummary/GoalHabitSummary.tsx deleted file mode 100644 index 4c919ce82..000000000 --- a/src/components/GoalsComponents/MyGoal/GoalSummary/GoalHabitSummary.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from "react"; -import { GoalItem } from "@src/models/GoalItem"; -import { useTranslation } from "react-i18next"; - -const GoalHabitSummary = ({ goal }: { goal: GoalItem }) => { - const { t } = useTranslation(); - - if (!goal.habit) { - return null; - } - - return
{goal.habit === "weekly" && {t("everyWeek")}}
; -}; - -export default GoalHabitSummary; diff --git a/src/components/GoalsComponents/MyGoal/GoalSummary/GoalSublistSummary.tsx b/src/components/GoalsComponents/MyGoal/GoalSummary/GoalSublistSummary.tsx deleted file mode 100644 index 0c7f1d4c5..000000000 --- a/src/components/GoalsComponents/MyGoal/GoalSummary/GoalSublistSummary.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { GoalItem } from "@src/models/GoalItem"; -import React from "react"; -import { formatSingularPlural } from "@src/utils"; -import { useSublistSummary } from "./useSublistSummary"; - -const GoalSublistSummary = ({ goal }: { goal: GoalItem }) => { - const { subGoalsCount, subBudgetsCount } = useSublistSummary({ goal }); - - let summary = ""; - if (subGoalsCount > 0 && subBudgetsCount === 0) { - summary = formatSingularPlural(subGoalsCount, "goal"); - } else if (subBudgetsCount > 0 && subGoalsCount === 0) { - summary = formatSingularPlural(subBudgetsCount, "budget"); - } else if (subGoalsCount > 0 && subBudgetsCount > 0) { - summary = `${formatSingularPlural(subGoalsCount, "goal")}, ${formatSingularPlural(subBudgetsCount, "budget")}`; - } - - return summary ?
{summary}
: null; -}; - -export default GoalSublistSummary; diff --git a/src/components/GoalsComponents/MyGoal/GoalSummary/GoalSummary.tsx b/src/components/GoalsComponents/MyGoal/GoalSummary/GoalSummary.tsx deleted file mode 100644 index 6a5b863e1..000000000 --- a/src/components/GoalsComponents/MyGoal/GoalSummary/GoalSummary.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from "react"; -import { useTranslation } from "react-i18next"; -import { GoalItem } from "@src/models/GoalItem"; -import GoalSublistSummary from "./GoalSublistSummary"; -import GoalDurationSummary from "./GoalDurationSummary"; -import BudgetTimeSummary from "./BudgetTimeSummary"; -import GoalDueDateSummary from "./GoalDueDateSummary"; -import BudgetStartSummary from "./BudgetStartSummary"; -import GoalHabitSummary from "./GoalHabitSummary"; - -const GoalSummary = ({ goal }: { goal: GoalItem }) => { - const { t } = useTranslation(); - const isBudget = goal.timeBudget?.perDay !== null && goal.timeBudget?.perDay !== undefined; - const hasSubGoalItems = goal.sublist.length > 0; - const shouldRenderGoalSummary = hasSubGoalItems || goal.due || goal.habit || goal.duration; - if (isBudget) { - return ( - <> - - - - ); - } - return shouldRenderGoalSummary ? ( - <> - {hasSubGoalItems && !goal.duration ? : } - - - - ) : ( - {t("noDurationText")} - ); -}; - -export default GoalSummary; diff --git a/src/components/GoalsComponents/MyGoal/MyGoal.tsx b/src/components/GoalsComponents/MyGoal/MyGoal.tsx index ceca17867..1819974af 100644 --- a/src/components/GoalsComponents/MyGoal/MyGoal.tsx +++ b/src/components/GoalsComponents/MyGoal/MyGoal.tsx @@ -7,7 +7,6 @@ import { displayGoalId, displayUpdateGoal, goalsHistory, displayChangesModal, TA import { ILocationState, ImpossibleGoal } from "@src/Interfaces"; import GoalAvatar from "../GoalAvatar"; -import GoalSummary from "./GoalSummary/GoalSummary"; import GoalDropdown from "./GoalDropdown"; import GoalTitle from "./GoalTitle"; @@ -51,28 +50,24 @@ const MyGoal: React.FC = ({ goal, actionType, showActions, setShowA const showChangesModal = useRecoilValue(displayChangesModal); const handleGoalClick = () => { - if (showActions.open === goal.id && showActions.click > 0) { - const newState: ILocationState = { - ...location.state, - activeGoalId: goal.id, - goalsHistory: [ - ...subGoalHistory, - { - goalID: goal.id || "root", - goalColor: goal.goalColor || "#ffffff", - goalTitle: goal.title || "", - }, - ], - }; - if (newState.allowAddingBudgetGoal !== false) { - newState.allowAddingBudgetGoal = goal.category !== "Standard"; - } - navigate("/MyGoals", { - state: newState, - }); - } else { - setShowActions({ open: goal.id, click: 1 }); + const newState: ILocationState = { + ...location.state, + activeGoalId: goal.id, + goalsHistory: [ + ...subGoalHistory, + { + goalID: goal.id || "root", + goalColor: goal.goalColor || "#ffffff", + goalTitle: goal.title || "", + }, + ], + }; + if (newState.allowAddingBudgetGoal !== false) { + newState.allowAddingBudgetGoal = goal.category !== "Standard"; } + navigate("/MyGoals", { + state: newState, + }); }; async function handleDropDown(e: React.MouseEvent) { e.stopPropagation(); @@ -101,40 +96,27 @@ const MyGoal: React.FC = ({ goal, actionType, showActions, setShowA }, [location]); return ( - <> -
-
-
- -
-
- -
-
- {!showPartnerMode && goal.participants?.length > 0 && } -
+
- {showActions.open === goal.id && showActions.click > 0 && ( -

- -

- )} +
+ +
+
+ +
- + {!showPartnerMode && goal.participants?.length > 0 && } +
); }; diff --git a/src/components/GoalsComponents/MyGoalActions/RegularGoalActions.tsx b/src/components/GoalsComponents/MyGoalActions/RegularGoalActions.tsx index a195022b1..755f4902b 100755 --- a/src/components/GoalsComponents/MyGoalActions/RegularGoalActions.tsx +++ b/src/components/GoalsComponents/MyGoalActions/RegularGoalActions.tsx @@ -15,6 +15,7 @@ import { archiveThisGoal, removeThisGoal } from "@src/helpers/GoalActionHelper"; import ActionDiv from "./ActionDiv"; import "./MyGoalActions.scss"; +import GoalItemSummary from "../MyGoal/GoalItemSummary/GoalItemSummary"; const RegularGoalActions = ({ goal, open }: { open: boolean; goal: GoalItem }) => { const { t } = useTranslation(); @@ -74,6 +75,7 @@ const RegularGoalActions = ({ goal, open }: { open: boolean; goal: GoalItem }) =

{t(`${goal.title}`)}

+
{confirmationAction && } diff --git a/src/hooks/useBudgetSummaryStore.ts b/src/hooks/useBudgetSummaryStore.ts new file mode 100644 index 000000000..35c6fbd97 --- /dev/null +++ b/src/hooks/useBudgetSummaryStore.ts @@ -0,0 +1,45 @@ +import { GoalItem } from "@src/models/GoalItem"; +import { formatBudgetHrsToText } from "@src/utils"; +import { useTranslation } from "react-i18next"; + +const useBudgetSummaryStore = (goal: GoalItem) => { + const { t } = useTranslation(); + + const { perDay, perWeek } = goal.timeBudget!; + + const getPerDaySummary = () => formatBudgetHrsToText(perDay); + + const getPerWeekSummary = () => `${formatBudgetHrsToText(perWeek)} ${t("perWeek")}`; + + const getOnDaysSummary = () => { + const onLength = goal.on?.length || 0; + const onWeekdays = onLength === 5 && goal.on?.includes("Sat") && goal.on?.includes("Sun"); + const onWeekends = onLength === 2 && goal.on?.includes("Sat") && goal.on?.includes("Sun"); + + if (onWeekdays) return t("onWeekdays"); + if (onWeekends) return t("onWeekends"); + if (onLength > 0 && onLength < 7) { + return `${t("on")} ${goal.on?.map((day) => t(day)).join(" ")}`; + } + if (onLength === 7) return t("daily"); + return ""; + }; + + const getTimeConstraintsSummary = () => { + if (goal.beforeTime && goal.afterTime) { + return `${t("between")} ${goal.afterTime}-${goal.beforeTime}`; + } + if (goal.beforeTime) return `${t("before")} ${goal.beforeTime}`; + if (goal.afterTime) return `${t("after")} ${goal.afterTime}`; + return ""; + }; + + return { + perDaySummary: getPerDaySummary(), + onDaysSummary: goal.on?.length ? getOnDaysSummary() : "", + timeConstraintsSummary: getTimeConstraintsSummary(), + perWeekSummary: getPerWeekSummary(), + }; +}; + +export default useBudgetSummaryStore; diff --git a/src/hooks/useGoalSummaryStore.ts b/src/hooks/useGoalSummaryStore.ts new file mode 100644 index 000000000..25babf519 --- /dev/null +++ b/src/hooks/useGoalSummaryStore.ts @@ -0,0 +1,35 @@ +import { GoalItem } from "@src/models/GoalItem"; +import { formatSingularPlural, calculateDaysLeft } from "@src/utils"; +import { useTranslation } from "react-i18next"; +import { useSublistSummary } from "./useSublistSummary"; + +const useGoalSummaryStore = (goal: GoalItem) => { + const { t } = useTranslation(); + const { subGoalsCount, subBudgetsCount } = useSublistSummary({ goal }); + + const getSublistSummaryText = () => + goal.due + ? "" + : subGoalsCount > 0 && subBudgetsCount === 0 + ? formatSingularPlural(subGoalsCount, "goal") + : subBudgetsCount > 0 && subGoalsCount === 0 + ? formatSingularPlural(subBudgetsCount, "budget") + : subGoalsCount > 0 && subBudgetsCount > 0 + ? `${formatSingularPlural(subGoalsCount, "goal")}, ${formatSingularPlural(subBudgetsCount, "budget")}` + : ""; + + const getDurationSummaryText = () => (goal.duration ? t("hourWithCount", { count: Number(goal.duration) }) : ""); + + const getDueDateSummaryText = () => (goal.due ? calculateDaysLeft(goal.due) : ""); + + const getHabitSummaryText = () => (goal.habit === "weekly" ? t("everyWeek") : ""); + + return { + sublistSummary: getSublistSummaryText(), + durationSummary: getDurationSummaryText(), + dueDateSummary: getDueDateSummaryText(), + habitSummary: getHabitSummaryText(), + }; +}; + +export default useGoalSummaryStore; diff --git a/src/components/GoalsComponents/MyGoal/GoalSummary/useSublistSummary.ts b/src/hooks/useSublistSummary.ts similarity index 100% rename from src/components/GoalsComponents/MyGoal/GoalSummary/useSublistSummary.ts rename to src/hooks/useSublistSummary.ts diff --git a/src/pages/GoalsPage/GoalsPage.scss b/src/pages/GoalsPage/GoalsPage.scss index 901cdc62d..62db2645f 100644 --- a/src/pages/GoalsPage/GoalsPage.scss +++ b/src/pages/GoalsPage/GoalsPage.scss @@ -148,10 +148,10 @@ display: none; } -.goal-desc { +.goal-item-summary-wrapper { white-space: pre-line; - font-size: 0.875em; - font-weight: 300; + font-size: 0.875em !important; + font-weight: 300 !important; } .goal-glow { @@ -159,21 +159,35 @@ } @keyframes glowAnimation { - 0%, 100% { + 0%, + 100% { background-color: rgba(255, 215, 0, 0.2); - box-shadow: 0 0 2px rgba(255, 215, 0, 0.7), 0 0 5px rgba(255, 215, 0, 0.7), 0 0 2px rgba(255, 215, 0, 0.7); + box-shadow: + 0 0 2px rgba(255, 215, 0, 0.7), + 0 0 5px rgba(255, 215, 0, 0.7), + 0 0 2px rgba(255, 215, 0, 0.7); } - 15%, 85% { + 15%, + 85% { background-color: rgba(255, 215, 0, 0.4); - box-shadow: 0 0 2px rgba(255, 215, 0, 0.9), 0 0 5px rgba(255, 215, 0, 0.9), 0 0 2px rgba(255, 215, 0, 0.9); + box-shadow: + 0 0 2px rgba(255, 215, 0, 0.9), + 0 0 5px rgba(255, 215, 0, 0.9), + 0 0 2px rgba(255, 215, 0, 0.9); } - 30%, 70% { + 30%, + 70% { background-color: rgba(255, 215, 0, 0.6); - box-shadow: 0 0 2px rgba(255, 215, 0, 0.7), 0 0 5px rgba(255, 215, 0, 0.7), 0 0 2px rgba(255, 215, 0, 0.7); + box-shadow: + 0 0 2px rgba(255, 215, 0, 0.7), + 0 0 5px rgba(255, 215, 0, 0.7), + 0 0 2px rgba(255, 215, 0, 0.7); } 50% { background-color: rgba(255, 215, 0, 0.8); - box-shadow: 0 0 2px rgba(255, 215, 0, 0.7), 0 0 5px rgba(255, 215, 0); + box-shadow: + 0 0 2px rgba(255, 215, 0, 0.7), + 0 0 5px rgba(255, 215, 0); } }