feat: add layout transition

app/constants/session.ts

@@ -1 +1,2 @@
 export const PREFER_DARK_THEME = 'prefer_dark_theme';
+export const DARK_THEME_DEFAULT_VALUE = true;

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 {

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;

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%',

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%',

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,
       },

inertia/css/app.css

@@ -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;
-}

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)',
+  },
+});