fajar13k · fajar13k · Feb 28, 2025 · Feb 28, 2025 · Feb 28, 2025 · Feb 28, 2025
diff --git a/i18n.js b/i18n.js
@@ -12,7 +12,7 @@ i18n
   .use(initReactI18next)
   .init({
     fallbackLng: 'en',
-    debug: true,
+    debug: false,
     interpolation: {
       escapeValue: false,
     },

diff --git a/index.html b/index.html
@@ -4,10 +4,12 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Rumpi</title>
+    <meta name="description" content="Rumpi is a modern web application to socialize with your friends from the entire globe.">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="icon" href="/favicon.ico" />
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
+    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap"></noscript>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx
@@ -16,7 +16,7 @@ const LoginPage = () => {
 
   return (
     <section className="grid grid-cols-1 lg:grid-cols-[1.25fr_1fr] min-h-screen">
-      <header className="flex items-center justify-center text-9xl bg-amber-500">
+      <header className="flex items-center justify-center text-7xl lg:text-9xl bg-amber-500">
         <h1>Rumpi.</h1>
       </header>
       <article className="flex gap-4 justify-center flex-col pt-0 px-8 lg:p-16 bg-gray-100 dark:text-white dark:bg-gray-800">
@@ -30,7 +30,7 @@ const LoginPage = () => {
         <p>
           {t('no_account_yet')}
           {' '}
-          <Link className="text-amber-500 font-2xl" to="/register">{t('register')}</Link>
+          <Link className="text-amber-900 font-2xl" to="/register">{t('register')}</Link>
         </p>
       </article>
     </section>

diff --git a/src/pages/RegisterPage.jsx b/src/pages/RegisterPage.jsx
@@ -19,7 +19,7 @@ const RegisterPage = () => {
 
   return (
     <section className="grid grid-cols-1 lg:grid-cols-[1.25fr_1fr] min-h-screen">
-      <header className="flex items-center justify-center text-9xl bg-amber-500">
+      <header className="flex items-center justify-center text-7xl lg:text-9xl bg-amber-500">
         <h1>Rumpi.</h1>
       </header>
       <article className="flex gap-4 justify-center flex-col pt-0 px-8 lg:p-16 bg-gray-100 dark:text-white dark:bg-gray-800">
@@ -29,7 +29,7 @@ const RegisterPage = () => {
         <p>
           {t('already_have_account')}
           {' '}
-          <Link className="text-amber-500 font-2xl" to="/">{t('login')}</Link>
+          <Link className="text-amber-900 font-2xl" to="/">{t('login')}</Link>
         </p>
       </article>
     </section>

diff --git a/src/states/theme/action.test.js b/src/states/theme/action.test.js
@@ -0,0 +1,41 @@
+/**
+ * - Test scenario themeAction
+ *   - should create an action to toggle theme
+ *   - should create an action to set light theme
+ *   - should create an action to set dark theme
+ */
+
+import { describe, it, expect } from 'vitest';
+import { ActionType, toggleTheme, setLightTheme, setDarkTheme } from './action';
+
+describe('theme actions', () => {
+  it('should create an action to toggle theme', () => {
+    // Arrange
+    const expectedAction = {
+      type: ActionType.TOGGLE_THEME,
+    };
+
+    // Assert
+    expect(toggleTheme()).toEqual(expectedAction);
+  });
+
+  it('should create an action to set light theme', () => {
+    // Arrange
+    const expectedAction = {
+      type: ActionType.SET_LIGHT_THEME,
+    };
+
+    // Assert
+    expect(setLightTheme()).toEqual(expectedAction);
+  });
+
+  it('should create an action to set dark theme', () => {
+    // Arrange
+    const expectedAction = {
+      type: ActionType.SET_DARK_THEME,
+    };
+
+    // Assert
+    expect(setDarkTheme()).toEqual(expectedAction);
+  });
+});
diff --git a/src/states/theme/reducer.test.js b/src/states/theme/reducer.test.js
@@ -0,0 +1,45 @@
+/**
+ * - Test scenario themeReducer
+ *   - should return the initial state
+ *   - should handle TOGGLE_THEME
+ *   - should handle SET_LIGHT_THEME
+ *   - should handle SET_DARK_THEME
+ */
+
+import { describe, it, expect } from 'vitest';
+import themeReducer from './reducer';
+
+import { ActionType } from './action';
+
+describe('themeReducer', () => {
+  it('should return the initial state', () => {
+    const initialState = { mode: 'light' };
+    const action = {};
+    const state = themeReducer(initialState, action);
+    expect(state).toEqual(initialState);
+  });
+
+  it('should handle TOGGLE_THEME', () => {
+    const initialState = { mode: 'light' };
+    const action = { type: ActionType.TOGGLE_THEME };
+    const state = themeReducer(initialState, action);
+    expect(state).toEqual({ mode: 'dark' });
+
+    const newState = themeReducer(state, action);
+    expect(newState).toEqual({ mode: 'light' });
+  });
+
+  it('should handle SET_LIGHT_THEME', () => {
+    const initialState = { mode: 'dark' };
+    const action = { type: ActionType.SET_LIGHT_THEME };
+    const state = themeReducer(initialState, action);
+    expect(state).toEqual({ mode: 'light' });
+  });
+
+  it('should handle SET_DARK_THEME', () => {
+    const initialState = { mode: 'light' };
+    const action = { type: ActionType.SET_DARK_THEME };
+    const state = themeReducer(initialState, action);
+    expect(state).toEqual({ mode: 'dark' });
+  });
+});