🎨 Style: Update Colors and Typography (#154)

* feat(web): create styled-components theme

* style(web): update login page colors

* style(web): update login card box-shadow on hover

* style: remove TodayButton border

* style: update Calendar background color

* style: Dedication

* style: bg color

* style: Logout page

* test(web): add ThemeProvider to custom RTL render

* style: left sidebar

* style: scrollbar in left sidebar

* style: divider in left sidebar

* style: sidebar heading text

* style: tooltip

* style: linear gradient, hover colors

* style: Button border

* style: Button border & input

* style: TimePicker

* style: SomedayEventForm - Repeat Section

* chore(web): remove 2+3 week recurrences & fix typing

* deps(web): install tinycolor2

* style: RepeatDialog

* style: SaveSection

* deps: move tinycolor to @core

* refactor: use brighten() in RepeatDialog

* style: SomedayEventForm: box shadow

* style: Priority Buttons

* refactor: rename text styles to light/dark

* style: NewSomedayEvent

* style: SaveSection (EventForm)

* style: use theme's animation

* style: Textarea

* style: Text

* style: LeftSidebar

* style: add text placeholder color

* style: Event

* fix: GridEvent memo

include isPlaceholder prop in comparison

* style: DatePicker Input

* style: DatePicker

* style: Event drop-shadow

* style: add margin to form Description

* refactor: extract DayLabels from Header

* style: DayLabels

* refactor: separate theme from theme utils

* style: TextField gradient underline

* style: set default gradient to gray

* style: RightSidebar

* style: GridEventPreview

* style: hour labels

* style: ArrowLineLeftIcon

* style: lined arrow icons

* style: Command

* style: List

* style: TimePicker

* style: grid lines

* style: scrollbar

* style: MontWidget

* style: Login, CmdPalette

* chore: remove getColor and getInvertedColor utils

* chore: remove getNeighbourKey util

* style: NotFound

* chore(backend): remove color from priority schema

* chore: delete colors.ts and color.types.ts

* feat: update colors

replace with pastel-style colors

* feat: change font-family to Rubik

* feat: update font sizes

* feat: add font weight and size to theme

* chore: cleanup font size type

* style: Timepicker font size

* chore: cleanup DayLabel import

packages/backend/src/priority/services/priority.service.ts

@@ -6,7 +6,6 @@ import {
 import { Priorities } from "@core/constants/core.constants";
 import { Status } from "@core/errors/status.codes";
 import { BaseError } from "@core/errors/errors.base";
-import { colorNameByPriority } from "@core/constants/colors";
 import { Collections } from "@backend/common/constants/collections";
 import mongoService from "@backend/common/services/mongo.service";
 
@@ -62,7 +61,6 @@ class PriorityService {
         _id: response.insertedId.toString(),
         user: userId,
         name: data.name,
-        color: data.color,
       };
 
       return priority;
@@ -72,22 +70,18 @@ class PriorityService {
   async createDefaultPriorities(userId: string) {
     return await this.create(userId, [
       {
-        color: colorNameByPriority.unassigned,
         name: Priorities.UNASSIGNED,
         user: userId,
       },
       {
-        color: colorNameByPriority.self,
         name: Priorities.SELF,
         user: userId,
       },
       {
-        color: colorNameByPriority.work,
         name: Priorities.WORK,
         user: userId,
       },
       {
-        color: colorNameByPriority.relationships,
         name: Priorities.RELATIONS,
         user: userId,
       },

packages/core/package.json

@@ -10,9 +10,11 @@
     "lint-fix": "exit"
   },
   "devDependencies": {
+    "@types/tinycolor2": "^1.4.6",
     "typescript": "^5.1.6"
   },
   "dependencies": {
+    "tinycolor2": "^1.6.0",
     "winston": "^3.8.1"
   }
 }

packages/core/src/types/priority.types.ts

@@ -1,5 +1,4 @@
 export interface PriorityReq {
-  color: string;
   name: string;
 }
 

packages/core/src/util/color.utils.ts

@@ -1,52 +1,9 @@
-import { Priorities } from "@core/constants/core.constants";
-import { ColorHex, colors, invertedColors } from "@core/constants/colors";
-import { ColorNames, InvertedColorNames } from "@core/types/color.types";
+import tinycolor from "tinycolor2";
 
-export const getAlphaColor = (colorName: ColorNames, opacity: number) => {
-  const _opacity = Math.round(Math.min(Math.max(opacity || 1, 0), 1) * 255);
-  return getColor(colorName) + _opacity.toString(16).toUpperCase();
+export const brighten = (color: string, amount?: number) => {
+  return tinycolor(color).brighten(amount).toString();
 };
 
-export const getBrighterColor = (colorName: ColorNames) => {
-  // assumes that the higher the numbers are, the brighter the colors
-  //@ts-ignore
-  return colors[getNeighbourKey(colorName, colors, 1)] as string;
-};
-
-export const getColor = (colorName: ColorNames) =>
-  colors[colorName] as ColorHex;
-
-export const getDarkerColor = (colorName: ColorNames) => {
-  return colors[getNeighbourKey(colorName, colors, -1) as ColorNames];
-};
-
-export const getInvertedColor = (colorName: InvertedColorNames) => {
-  //@ts-ignore
-  return invertedColors[colorName] as string;
-};
-
-export const getNeighbourKey = (key = "", obj = {}, diff = 1) => {
-  const splitKeys = key.split("_");
-  if (splitKeys === undefined || splitKeys.length < 1) {
-    throw new Error(
-      'You should provide object with keys "ANYTHING_KEY_NUMBER" where NUMBER is number'
-    );
-  }
-
-  const prev = splitKeys.length - 1;
-  //@ts-ignore
-  const index = +splitKeys[prev];
-  const propName = splitKeys.filter((value) => value !== `${index}`).join("_");
-
-  const neighbourIndex = index + diff;
-  const neighbourKey = `${propName}_${neighbourIndex}`;
-
-  return Object.keys(obj).find((_key) => _key === neighbourKey) || key;
-};
-
-export const hoverColorsByPriority = {
-  [Priorities.UNASSIGNED]: "#F0FFFF",
-  [Priorities.WORK]: "#80B8E1",
-  [Priorities.RELATIONS]: "#86D2ED",
-  [Priorities.SELF]: "#8EB1FF",
+export const darken = (color: string, amount?: number) => {
+  return tinycolor(color).darken(amount).toString();
 };

packages/web/src/App.tsx

@@ -1,21 +1,22 @@
 import React from "react";
-import { SuperTokensWrapper } from "supertokens-auth-react";
+import { ToastContainer } from "react-toastify";
+import { ThemeProvider } from "styled-components";
+import SuperTokens, { SuperTokensWrapper } from "supertokens-auth-react";
+import Session from "supertokens-auth-react/recipe/session";
 import { Provider } from "react-redux";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { GoogleOAuthProvider } from "@react-oauth/google";
-import Session from "supertokens-auth-react/recipe/session";
-import SuperTokens from "supertokens-auth-react";
 import { APP_NAME, PORT_DEFAULT_WEB } from "@core/constants/core.constants";
 import { ROOT_ROUTES } from "@web/common/constants/routes";
 import { sagaMiddleware } from "@web/common/store/middlewares";
 import { sagas } from "@web/store/sagas";
 import { GlobalStyle } from "@web/components/GlobalStyle";
 import { ENV_WEB } from "@web/common/constants/env.constants";
-import { ToastContainer } from "react-toastify";
 
 import { RootRouter } from "./routers";
 import { store } from "./store";
+import { theme } from "./common/styles/theme";
 
 SuperTokens.init({
   appInfo: {
@@ -38,19 +39,21 @@ export const App = () => {
           <GoogleOAuthProvider clientId={ENV_WEB.CLIENT_ID}>
             <SuperTokensWrapper>
               <GlobalStyle />
-              <RootRouter />
-              <ToastContainer
-                position="bottom-left"
-                autoClose={5000}
-                hideProgressBar={false}
-                newestOnTop={false}
-                closeOnClick
-                rtl={false}
-                pauseOnFocusLoss
-                draggable
-                pauseOnHover
-                theme="dark"
-              />
+              <ThemeProvider theme={theme}>
+                <RootRouter />
+                <ToastContainer
+                  position="bottom-left"
+                  autoClose={5000}
+                  hideProgressBar={false}
+                  newestOnTop={false}
+                  closeOnClick
+                  rtl={false}
+                  pauseOnFocusLoss
+                  draggable
+                  pauseOnHover
+                  theme="dark"
+                />
+              </ThemeProvider>
             </SuperTokensWrapper>
           </GoogleOAuthProvider>
         </Provider>

packages/web/src/__tests__/__mocks__/mock.render.tsx

@@ -9,6 +9,8 @@ import { render, RenderOptions } from "@testing-library/react";
 import { sagas } from "@web/store/sagas";
 import { sagaMiddleware } from "@web/common/store/middlewares";
 import { reducers } from "@web/store/reducers";
+import { ThemeProvider } from "styled-components";
+import { theme } from "@web/common/styles/theme";
 
 const customRender = (
   ui: ReactElement,
@@ -30,9 +32,11 @@ const customRender = (
     return (
       <DndProvider backend={HTML5Backend}>
         <GoogleOAuthProvider clientId="anyClientId">
-          <BrowserRouter>
-            <Provider store={store}>{children}</Provider>
-          </BrowserRouter>
+          <ThemeProvider theme={theme}>
+            <BrowserRouter>
+              <Provider store={store}>{children}</Provider>
+            </BrowserRouter>
+          </ThemeProvider>
         </GoogleOAuthProvider>
       </DndProvider>
     );

packages/web/src/common/constants/web.constants.ts

@@ -1,7 +1,5 @@
 import { Recurrence_Selection } from "../types/web.event.types";
 
-export const ANIMATION_TIME_3_MS = "0.3s";
-
 export const COLUMN_WEEK = "weekEvents";
 export const COLUMN_MONTH = "monthEvents";