Feat: Done! with theme color

src/components/molecule_action_group_card/index.buttons.tsx

@@ -1,6 +1,8 @@
 import StyledCircularButtonAtom from '@/atoms/StyledCircularButton'
 import { usePostActionByActionGroupId } from '@/hooks/action-group/use-post-action-by-action-group-id.hook'
 import { isActionGroupPunchableSelector } from '@/recoil/action-groups/action-groups.selectors'
+import { getDoneColorLambda } from '@/lambdas/get-app-theme-color.lambda'
+import { appThemeState } from '@/recoil/app-theme/app-theme.state'
 import { FC } from 'react'
 import { useRecoilValue } from 'recoil'
 
@@ -11,6 +13,7 @@ const ActionGroupCardButton: FC<Props> = ({ id }) => {
   const isActionGroupPunchable = useRecoilValue(
     isActionGroupPunchableSelector(id),
   )
+  const appTheme = useRecoilValue(appThemeState)
   const [loading, onPostActionByActionGroupId] =
     usePostActionByActionGroupId(id)
 
@@ -20,7 +23,7 @@ const ActionGroupCardButton: FC<Props> = ({ id }) => {
     <StyledCircularButtonAtom
       onClick={onPostActionByActionGroupId}
       radius={80}
-      bgColor="green" // TODO: Just learned that the #XXXXXX works here xDD
+      bgColor={getDoneColorLambda(appTheme)}
       title="Done!"
       loading={loading}
       typoProps={{

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

@@ -114,3 +114,17 @@ export const getButtonColorLambda = (
     }
   }
 }
+
+/**
+ * Color for the done button
+ */
+export const getDoneColorLambda = (theme?: AppTheme): string => {
+  switch (theme) {
+    case AppTheme.Halloween:
+      return Halloween.five
+    case AppTheme.Christmas:
+      return Christmas.five
+    default:
+      return `green`
+  }
+}