From 8077f8f9c98ae24ce1465dcf127bd6b72bea3511 Mon Sep 17 00:00:00 2001
From: Sonny <sonnyasdev@gmail.com>
Date: Fri, 17 May 2024 19:26:10 +0200
Subject: [PATCH] feat: add layout transition

---
 app/constants/session.ts                      |  1 +
 app/controllers/apps_controller.ts            |  2 +-
 app/validators/{user_theme.ts => user.ts}     |  0
 .../components/layouts/_transition_layout.tsx |  8 +++++
 inertia/components/layouts/content_layout.tsx |  3 +-
 .../components/layouts/dashboard_layout.tsx   |  3 +-
 inertia/contexts/dark_theme_context.tsx       |  6 ++--
 inertia/css/app.css                           | 36 -------------------
 inertia/styles/keyframes.ts                   | 11 ++++++
 9 files changed, 29 insertions(+), 41 deletions(-)
 rename app/validators/{user_theme.ts => user.ts} (100%)
 create mode 100644 inertia/components/layouts/_transition_layout.tsx
 delete mode 100644 inertia/css/app.css

diff --git a/app/constants/session.ts b/app/constants/session.ts
index 52b84b1..f7809d1 100644
--- a/app/constants/session.ts
+++ b/app/constants/session.ts
@@ -1 +1,2 @@
 export const PREFER_DARK_THEME = 'prefer_dark_theme';
+export const DARK_THEME_DEFAULT_VALUE = true;
diff --git a/app/controllers/apps_controller.ts b/app/controllers/apps_controller.ts
index cd98c7c..4e52127 100644
--- a/app/controllers/apps_controller.ts
+++ b/app/controllers/apps_controller.ts
@@ -1,5 +1,5 @@
 import { PREFER_DARK_THEME } from '#constants/session';
-import { updateUserThemeValidator } from '#validators/user_theme';
+import { updateUserThemeValidator } from '#validators/user';
 import type { HttpContext } from '@adonisjs/core/http';
 
 export default class AppsController {
diff --git a/app/validators/user_theme.ts b/app/validators/user.ts
similarity index 100%
rename from app/validators/user_theme.ts
rename to app/validators/user.ts
diff --git a/inertia/components/layouts/_transition_layout.tsx b/inertia/components/layouts/_transition_layout.tsx
new file mode 100644
index 0000000..0af848c
--- /dev/null
+++ b/inertia/components/layouts/_transition_layout.tsx
@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+import { fadeInScale } from '~/styles/keyframes';
+
+const TransitionLayout = styled.div(({ theme }) => ({
+  animation: `${theme.transition.delay} ${fadeInScale} both`,
+}));
+
+export default TransitionLayout;
diff --git a/inertia/components/layouts/content_layout.tsx b/inertia/components/layouts/content_layout.tsx
index 932235e..a86e119 100644
--- a/inertia/components/layouts/content_layout.tsx
+++ b/inertia/components/layouts/content_layout.tsx
@@ -1,10 +1,11 @@
 import styled from '@emotion/styled';
 import { ReactNode } from 'react';
 import Footer from '~/components/footer/footer';
+import TransitionLayout from '~/components/layouts/_transition_layout';
 import Navbar from '../navbar/navbar';
 import BaseLayout from './_base_layout';
 
-const ContentLayoutStyle = styled.div(({ theme }) => ({
+const ContentLayoutStyle = styled(TransitionLayout)(({ theme }) => ({
   height: '100%',
   width: theme.media.small_desktop,
   maxWidth: '100%',
diff --git a/inertia/components/layouts/dashboard_layout.tsx b/inertia/components/layouts/dashboard_layout.tsx
index 98ca87b..055ba19 100644
--- a/inertia/components/layouts/dashboard_layout.tsx
+++ b/inertia/components/layouts/dashboard_layout.tsx
@@ -1,8 +1,9 @@
 import styled from '@emotion/styled';
 import { ReactNode } from 'react';
+import TransitionLayout from '~/components/layouts/_transition_layout';
 import BaseLayout from './_base_layout';
 
-const DashboardLayoutStyle = styled.div(({ theme }) => ({
+const DashboardLayoutStyle = styled(TransitionLayout)(({ theme }) => ({
   height: '100%',
   width: theme.media.medium_desktop,
   maxWidth: '100%',
diff --git a/inertia/contexts/dark_theme_context.tsx b/inertia/contexts/dark_theme_context.tsx
index d560f0e..fcf0ef8 100644
--- a/inertia/contexts/dark_theme_context.tsx
+++ b/inertia/contexts/dark_theme_context.tsx
@@ -1,4 +1,5 @@
 import { usePage } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
 import { ReactNode, createContext, useEffect, useState } from 'react';
 import { makeRequest } from '~/lib/request';
 
@@ -18,9 +19,10 @@ export default function DarkThemeContextProvider({
   const [isDarkTheme, setDarkTheme] = useState<boolean>(preferDarkTheme);
   const toggleDarkTheme = (value: boolean) => {
     setDarkTheme(value);
+    const { method, url } = route('user.theme');
     makeRequest({
-      method: 'POST',
-      url: '/user/theme',
+      method,
+      url,
       body: {
         preferDarkTheme: value,
       },
diff --git a/inertia/css/app.css b/inertia/css/app.css
deleted file mode 100644
index a729fdf..0000000
--- a/inertia/css/app.css
+++ /dev/null
@@ -1,36 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');
-
-* {
-  margin: 0;
-  padding: 0;
-}
-
-html,
-body,
-#app {
-  background-color: #f7f8fa;
-  font-family: 'Poppins', sans-serif;
-  color: #46444c;
-  height: 100%;
-  width: 100%;
-}
-
-.title {
-  font-size: 42px;
-  font-weight: 500;
-  color: #5a45ff;
-}
-
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-}
-
-a {
-  text-decoration: underline;
-  color: #5a45ff;
-}
diff --git a/inertia/styles/keyframes.ts b/inertia/styles/keyframes.ts
index 64f68e2..157f86a 100644
--- a/inertia/styles/keyframes.ts
+++ b/inertia/styles/keyframes.ts
@@ -17,3 +17,14 @@ export const rotate = keyframes({
     transform: 'rotate(360deg)',
   },
 });
+
+export const fadeInScale = keyframes({
+  from: {
+    opacity: 0,
+    transform: 'scale(0.95)',
+  },
+  to: {
+    opacity: 1,
+    transform: 'scale(1)',
+  },
+});