From b9ada76c1975463759097cdd740752003bac046c Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Fri, 7 Jul 2023 01:08:21 +0530 Subject: [PATCH] refactor: themes folder structure --- .../scope-and-demand/year-wise-issues.tsx | 4 +- apps/app/components/core/index.ts | 4 +- .../core/{ => theme}/color-picker-input.tsx | 0 .../{ => theme}/custom-theme-selector.tsx | 0 apps/app/components/core/theme/index.ts | 3 + .../core/{ => theme}/theme-switch.tsx | 4 +- apps/app/constants/graph.ts | 14 ++--- .../project-authorization-wrapper.tsx | 6 +- .../workspace-authorization-wrapper.tsx | 6 +- apps/app/styles/globals.css | 57 +++++++++++++++++++ apps/app/tailwind.config.js | 1 + 11 files changed, 79 insertions(+), 20 deletions(-) rename apps/app/components/core/{ => theme}/color-picker-input.tsx (100%) rename apps/app/components/core/{ => theme}/custom-theme-selector.tsx (100%) create mode 100644 apps/app/components/core/theme/index.ts rename apps/app/components/core/{ => theme}/theme-switch.tsx (98%) diff --git a/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx b/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx index a37518cba..9a1f7bdc3 100644 --- a/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx +++ b/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx @@ -22,7 +22,7 @@ export const AnalyticsYearWiseIssues: React.FC = ({ defaultAnalytics }) = data={[ { id: "issues_closed", - color: "rgb(var(--color-accent))", + color: "rgb(var(--color-primary-100))", data: MONTHS_LIST.map((month) => ({ x: month.label.substring(0, 3), y: @@ -50,7 +50,7 @@ export const AnalyticsYearWiseIssues: React.FC = ({ defaultAnalytics }) = )} theme={{ - background: "rgb(var(--color-bg-base))", + background: "rgb(var(--color-background-100))", }} enableArea /> diff --git a/apps/app/components/core/index.ts b/apps/app/components/core/index.ts index 1eb52590c..b91944abf 100644 --- a/apps/app/components/core/index.ts +++ b/apps/app/components/core/index.ts @@ -5,10 +5,8 @@ export * from "./gantt-chart-view"; export * from "./list-view"; export * from "./modals"; export * from "./spreadsheet-view"; +export * from "./theme"; export * from "./sidebar"; export * from "./issues-view"; export * from "./image-picker-popover"; export * from "./feeds"; -export * from "./theme-switch"; -export * from "./custom-theme-selector"; -export * from "./color-picker-input"; diff --git a/apps/app/components/core/color-picker-input.tsx b/apps/app/components/core/theme/color-picker-input.tsx similarity index 100% rename from apps/app/components/core/color-picker-input.tsx rename to apps/app/components/core/theme/color-picker-input.tsx diff --git a/apps/app/components/core/custom-theme-selector.tsx b/apps/app/components/core/theme/custom-theme-selector.tsx similarity index 100% rename from apps/app/components/core/custom-theme-selector.tsx rename to apps/app/components/core/theme/custom-theme-selector.tsx diff --git a/apps/app/components/core/theme/index.ts b/apps/app/components/core/theme/index.ts new file mode 100644 index 000000000..145b3862a --- /dev/null +++ b/apps/app/components/core/theme/index.ts @@ -0,0 +1,3 @@ +export * from "./color-picker-input"; +export * from "./custom-theme-selector"; +export * from "./theme-switch"; diff --git a/apps/app/components/core/theme-switch.tsx b/apps/app/components/core/theme/theme-switch.tsx similarity index 98% rename from apps/app/components/core/theme-switch.tsx rename to apps/app/components/core/theme/theme-switch.tsx index c36ccad5b..1d67c8ef5 100644 --- a/apps/app/components/core/theme-switch.tsx +++ b/apps/app/components/core/theme/theme-switch.tsx @@ -82,8 +82,8 @@ export const ThemeSwitch: React.FC = ({ document.documentElement.style.removeProperty(`--color-background-${i}`); document.documentElement.style.removeProperty(`--color-text-${i}`); document.documentElement.style.removeProperty(`--color-primary-${i}`); - document.documentElement.style.removeProperty(`--color-sidebarBackground-${i}`); - document.documentElement.style.removeProperty(`--color-sidebarText-${i}`); + document.documentElement.style.removeProperty(`--color-sidebar-background-${i}`); + document.documentElement.style.removeProperty(`--color-sidebar-text-${i}`); } } setTheme(value); diff --git a/apps/app/constants/graph.ts b/apps/app/constants/graph.ts index 6c2f20a3e..f279b5a42 100644 --- a/apps/app/constants/graph.ts +++ b/apps/app/constants/graph.ts @@ -2,27 +2,27 @@ import { Theme } from "@nivo/core"; export const CHARTS_THEME: Theme = { - background: "rgb(var(--color-bg-surface-1))", - textColor: "rgb(var(--color-text-secondary))", + background: "rgb(var(--color-background-90))", + textColor: "rgb(var(--color-text-200))", axis: { domain: { line: { - stroke: "rgb(var(--color-border))", + stroke: "rgb(var(--color-background-80))", strokeWidth: 0.5, }, }, }, tooltip: { container: { - background: "rgb(var(--color-bg-surface-2))", - color: "rgb(var(--color-text-secondary))", + background: "rgb(var(--color-background-80))", + color: "rgb(var(--color-text-200))", fontSize: "0.8rem", - border: "1px solid rgb(var(--color-border))", + border: "1px solid rgb(var(--color-background-80))", }, }, grid: { line: { - stroke: "rgb(var(--color-border))", + stroke: "rgb(var(--color-background-80))", }, }, }; diff --git a/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx b/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx index a061491cf..60546a412 100644 --- a/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx +++ b/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx @@ -94,10 +94,10 @@ const ProjectAuthorizationWrapped: React.FC = ({
= ({