feat: Christmas Theme (#74)

# Background
#71

## Checklist Before PR Review
- [x] The following has been handled:
  -  `Draft` is set for this PR
  - `Title` is checked
  - `Background` is filled
  - `Assignee` is set
  - `Labels` are set
  - `development` is linked if related issue exists

## Checklist (Right Before PR Review Request)
- [x] The following has been handled:
  - Final Operation Check is done
  - Mobile View Operation Check is done
  - Make this PR as an open PR

## Checklist (Reviewers)
- [ ] Check if there are any other missing TODOs that are not yet listed
- [ ] Review Code
- [ ] Every item on the checklist has been addressed accordingly
- [ ] If `development` is associated to this PR, you must check if every
TODOs are handled

---------

Co-authored-by: Aaron Jeongwoo Kim <53258958+mlajkim@users.noreply.github.com>

.vscode/settings.json

@@ -25,4 +25,4 @@
     "mlajkim",
     "WORDNOTE"
   ]
-}
+}

src/components/organism_appbar/index.main-logo.tsx

@@ -8,6 +8,7 @@ const AppbarMainLogo: FC = () => {
   const src = useMemo(() => {
     if (appTheme === AppTheme.Halloween)
       return `/app_theme/halloween-cute-pumpkin.png`
+    if (appTheme === AppTheme.Christmas) return `/app_theme/christmas-bell.png`
 
     return `/favicon_archived/android-chrome-512x512.png`
   }, [appTheme])

src/lambdas/get-app-theme-color.lambda.ts

@@ -17,6 +17,14 @@ enum Halloween {
   'five' = `#d47901`,
 }
 
+enum Christmas {
+  'one' = `#fff7f7`,
+  'two' = `#ffd4d7`,
+  'three' = `#ff99a0`,
+  'four' = `#ff4d58`,
+  'five' = `#eb0014`,
+}
+
 export const getAppThemeColorLambda = (theme?: AppTheme) => {
   if (!theme || theme === AppTheme.Basic)
     return {
@@ -25,20 +33,38 @@ export const getAppThemeColorLambda = (theme?: AppTheme) => {
     }
 
   // by default halloween as only two options for now:
+  if (theme === AppTheme.Halloween) {
+    return {
+      light: [
+        Halloween.one,
+        Halloween.two,
+        Halloween.three,
+        Halloween.four,
+        Halloween.four,
+      ],
+      dark: [
+        Halloween.one,
+        Halloween.two,
+        Halloween.three,
+        Halloween.four,
+        Halloween.four,
+      ],
+    }
+  }
   return {
     light: [
-      Halloween.one,
-      Halloween.two,
-      Halloween.three,
-      Halloween.four,
-      Halloween.four,
+      Christmas.one,
+      Christmas.two,
+      Christmas.three,
+      Christmas.four,
+      Christmas.five,
     ],
     dark: [
-      Halloween.one,
-      Halloween.two,
-      Halloween.three,
-      Halloween.four,
-      Halloween.four,
+      Christmas.one,
+      Christmas.two,
+      Christmas.three,
+      Christmas.four,
+      Christmas.five,
     ],
   }
 }
@@ -47,7 +73,8 @@ export const getAppBarColorLambda = (theme?: AppTheme) => {
   if (!theme || theme === AppTheme.Basic) return undefined // use the default color
 
   // by default halloween as only two options for now:
-  return Halloween.four
+  if (theme === AppTheme.Halloween) return Halloween.four
+  return Christmas.five
 }
 
 export const getButtonColorLambda = (
@@ -57,17 +84,33 @@ export const getButtonColorLambda = (
   if (!theme || theme === AppTheme.Basic) return undefined
 
   // by default halloween as only two options for now:
-  if (disabled) {
+  if (theme === AppTheme.Halloween) {
+    if (disabled) {
+      return {
+        color: Halloween.one, // it will be the font color
+        borderColor: Halloween.one, // it will be the border color
+        backgroundColor: Halloween.five,
+      }
+    }
     return {
-      color: Halloween.three, // it will be the font color
-      borderColor: Halloween.one, // it will be the border color
-      backgroundColor: Halloween.one,
+      color: disabled ? Halloween.three : Halloween.five,
+      borderColor: disabled ? Halloween.one : Halloween.five,
+      backgroundColor: disabled ? undefined : Halloween.two,
     }
   }
 
-  return {
-    color: disabled ? Halloween.three : Halloween.five,
-    borderColor: disabled ? Halloween.one : Halloween.five,
-    backgroundColor: disabled ? undefined : Halloween.two,
+  if (theme === AppTheme.Christmas) {
+    if (disabled) {
+      return {
+        color: Christmas.one, // it will be the font color
+        borderColor: Christmas.one, // it will be the border color
+        backgroundColor: Christmas.five,
+      }
+    }
+    return {
+      color: disabled ? Christmas.three : Christmas.one,
+      borderColor: disabled ? Christmas.one : Christmas.one,
+      backgroundColor: disabled ? undefined : Christmas.five,
+    }
   }
 }

src/recoil/app-theme/app-theme.state.ts

@@ -9,6 +9,7 @@ import { DateTime } from 'luxon'
 export enum AppTheme {
   Basic = `basic`,
   Halloween = `halloween`,
+  Christmas = `christmas`,
 }
 
 const isWithinRange = (date: DateTime<true> | DateTime<false>) => {
@@ -20,14 +21,15 @@ const isWithinRange = (date: DateTime<true> | DateTime<false>) => {
 }
 
 const halloween = DateTime.fromObject({ month: 10, day: 31 }).endOf(`day`)
+const christmas = DateTime.fromObject({ month: 12, day: 25 }).endOf(`day`)
 const defaultTheme = ((): AppTheme => {
   // TODO: The following themes will be implemented in the future:
   // if (isWithinRange(newYears)) return AppTheme.NewYear // Happy New Year theme
   // if (isWithinRange(valentines)) return AppTheme.Valentines // Love theme
   // if (isWithinRange(spring)) return AppTheme.Spring // Cherry blossom theme
   // if (isWithinRange(summer)) return AppTheme.Summer // Beach theme
   if (isWithinRange(halloween)) return AppTheme.Halloween
-  // if (isWithinRange(christmas)) return AppTheme.Chrstimas // Christmas theme
+  if (isWithinRange(christmas)) return AppTheme.Christmas // Christmas theme
 
   // Default:
   return AppTheme.Basic
@@ -36,5 +38,5 @@ const defaultTheme = ((): AppTheme => {
 export const appThemeState = atom<AppTheme>({
   key: Rkp.AppTheme,
   default: defaultTheme,
-  // default: AppTheme.Halloween, // You can always override the default theme here, and compile will fail if you forget to remove it
+  // default: AppTheme.Christmas, // You can always override the default theme here, and compile will fail if you forget to remove it
 })