generator-kodly-react-app 1.0.14 → 1.0.16

package/generators/app/index.js

@@ -24,6 +24,7 @@ export default class ReactAppGenerator extends BaseGenerator {
       'vite.config.js',
       'tsconfig.json',
       'tsconfig.app.json',
+      'tsr.config.json',
       'tailwind.config.js',
       'postcss.config.js',
       'index.html',
@@ -70,6 +71,8 @@ export default class ReactAppGenerator extends BaseGenerator {
   _writeAuthFiles() {
     const authFiles = [
       'src/modules/auth/components/signup-form.tsx',
+      'src/modules/auth/components/auth-form.tsx',
+      'src/modules/auth/components/login-link.tsx',
       'src/modules/auth/components/forgot-password-form.tsx',
       'src/modules/auth/components/reset-password-form.tsx',
       'src/modules/auth/components/login-form.tsx',
@@ -86,6 +89,7 @@ export default class ReactAppGenerator extends BaseGenerator {
   _writeComponentFiles() {
     const componentFiles = [
       'src/components/layout/language-switcher.tsx',
+      'src/components/layout/page-layout.tsx',
       'src/components/layout/theme-switcher.tsx',
       'src/components/theme/theme-provider.tsx',
       'src/components/ui/button.tsx',

package/generators/app/templates/.env.dev

@@ -1,4 +1,4 @@
 BASE_URL=/
 PORT=3000
 ALLOWED_HOSTS=localhost
-VITE_API_BASE_URL=https://localhost:8081
+VITE_API_BASE_URL=http://localhost:8081

package/generators/app/templates/.env.sandbox

@@ -1,4 +1,4 @@
 BASE_URL=/
 PORT=3000
-ALLOWED_HOSTS=sandbox.beta.kodly.dev
-VITE_API_BASE_URL=${VITE_API_BASE_URL} //injected by env variables - https://sandbox.beta.kodly.dev/proxy/95-2
+ALLOWED_HOSTS=sandbox.app.kodly.dev
+VITE_API_BASE_URL=${VITE_API_BASE_URL} //injected by env variables - https://{port}-{projectSlug}-{userSlug}.sandbox.app.kodly.dev

package/generators/app/templates/I18N_MIGRATION.md

@@ -6,12 +6,12 @@ This document describes the i18n configuration changes that enable **both** flat
 
 The i18n setup now supports two usage patterns interchangeably:
 
-| Pattern | Example | Use case |
-|---------|---------|----------|
-| **Flat (no namespace)** | `useTranslation()` + `t('landing.hero.loginButton')` | Quick access, explicit full path |
-| **Namespaced** | `useTranslation('landing')` + `t('hero.loginButton')` | Modular components, shorter keys |
+| Pattern                 | Example                                            | Use case                         |
+| ----------------------- | -------------------------------------------------- | -------------------------------- |
+| **Flat (no namespace)** | `useTranslation()` + `t('namespace.section.key')`  | Quick access, explicit full path |
+| **Namespaced**          | `useTranslation('namespace')` + `t('section.key')` | Modular components, shorter keys |
 
-Previously, only the flat pattern worked because all translations lived under a single `translation` namespace. The namespaced pattern failed because i18next couldn't find a `landing` namespace.
+Previously, only the flat pattern worked because all translations lived under a single `translation` namespace. The namespaced pattern failed because i18next couldn't find the individual namespaces (the top-level keys in your merged translation object).
 
 ---
 
@@ -24,8 +24,8 @@ if (!i18n.isInitialized) {
   const lng = getStoredLanguage();
   i18n.use(initReactI18next).init({
     resources: {
-      en: { translation: mergeTranslations('en') },
-      ja: { translation: mergeTranslations('ja') },
+      en: { translation: mergeTranslations("en") },
+      ja: { translation: mergeTranslations("ja") },
     },
     supportedLngs: supportedLanguages,
     lng,
@@ -43,8 +43,8 @@ if (!i18n.isInitialized) {
 ```typescript
 if (!i18n.isInitialized) {
   const lng = getStoredLanguage();
-  const enResources = mergeTranslations('en');
-  const jaResources = mergeTranslations('ja');
+  const enResources = mergeTranslations("en");
+  const jaResources = mergeTranslations("ja");
   i18n.use(initReactI18next).init({
     resources: {
       en: {
@@ -56,8 +56,8 @@ if (!i18n.isInitialized) {
         ...jaResources,
       },
     },
-    defaultNS: 'translation',
-    ns: ['translation', 'auth', 'app', 'landing', 'common', 'theme'],
+    defaultNS: "translation",
+    ns: ["translation", ...Object.keys(enResources)],
     supportedLngs: supportedLanguages,
     lng,
     fallbackLng: defaultLanguage,
@@ -72,12 +72,12 @@ if (!i18n.isInitialized) {
 ### What changed
 
 1. **Resources structure**: Each language now exposes both:
-   - `translation` – flat structure `{ auth, app, landing, common, theme }` for `t('landing.hero.loginButton')`
-   - Individual namespaces – `auth`, `app`, `landing`, `common`, `theme` for `useTranslation('landing')` + `t('hero.loginButton')`
+   - `translation` – the full merged object for flat keys, e.g. `t('namespace.section.key')`
+   - Individual namespaces – one per top-level key in the merged object, for `useTranslation('namespace')` + `t('section.key')`
 
 2. **`defaultNS: 'translation'`**: Ensures `useTranslation()` without arguments uses the flat namespace.
 
-3. **`ns` array**: Declares all available namespaces so i18next can load and resolve them correctly.
+3. **`ns` array**: Must list `'translation'` plus every top-level key returned by `mergeTranslations()` (e.g. `['translation', ...Object.keys(enResources)]`) so i18next can load and resolve them correctly.
 
 ---
 
@@ -89,17 +89,12 @@ Replace the `if (!i18n.isInitialized)` block with the new configuration above. T
 
 ### 2. Verify translation key paths (flat usage)
 
-With the default `translation` namespace, keys must include the module prefix:
+With the default `translation` namespace, keys must include the full path from the root of your merged translations. The format is the namespace (top-level key) followed by the path inside it:
 
-| Module | Flat key format | Example |
-|--------|-----------------|---------|
-| Auth | `auth.<section>.<key>` | `auth.login.title`, `auth.messages.loginFailed` |
-| App | `app.<key>` | `app.title`, `app.welcome.logout` |
-| Landing | `landing.<section>.<key>` | `landing.hero.loginButton` |
-| Common | `common.<key>` | `common.notFound.message` |
-| Theme | `theme.<key>` | (if used) |
+- **Format**: `t('<namespace>.<path.to.key>')`
+- **Example**: If your merged object has a top-level key `auth` with `login.title` inside it, use `t('auth.login.title')`.
 
-If you have a 404 or catch-all route using `t('notFound.message')`, update it to `t('common.notFound.message')` because `notFound` lives under the `common` namespace.
+If a key used to work as `t('someKey')` and now fails, it likely lives under a namespace in your structure—update it to `t('<namespace>.<someKey>')` (or the full path that matches your locale JSON).
 
 ### 3. Optional: Use namespaced pattern in components
 
@@ -108,11 +103,11 @@ You can migrate components to the namespaced pattern for shorter keys:
 ```tsx
 // Before (flat)
 const { t } = useTranslation();
-return <h1>{t('landing.hero.title')}</h1>;
+return <h1>{t("namespace.section.title")}</h1>;
 
 // After (namespaced) – optional
-const { t } = useTranslation('landing');
-return <h1>{t('hero.title')}</h1>;
+const { t } = useTranslation("namespace");
+return <h1>{t("section.title")}</h1>;
 ```
 
 Both forms work. Choose what fits your component structure.
@@ -121,14 +116,12 @@ Both forms work. Choose what fits your component structure.
 
 ## Available Namespaces
 
-| Namespace | Source | Contents |
-|-----------|--------|----------|
-| `translation` | Merged from all below | Flat access to all keys |
-| `auth` | `@/modules/auth/locales/auth-*.json` | login, signup, forgotPassword, resetPassword, messages |
-| `app` | `@/modules/app/locales/app-*.json` | title, welcome |
-| `landing` | `@/modules/landing/locales/landing-*.json` | hero |
-| `common` | `@/locales/en/common.json`, `@/locales/ja/common.json` | notFound |
-| `theme` | `@/locales/en/theme.json`, `@/locales/ja/theme.json` | theme-related keys |
+Namespaces in your project are determined by **the top-level keys of the object returned by `mergeTranslations(lng)`**.
+
+- **`translation`** – Always present. Contains the full merged tree so flat keys like `t('namespace.section.key')` work.
+- **Other namespaces** – One for each top-level key in that merged object (e.g. if your merge yields `{ auth, app, common }`, you get namespaces `auth`, `app`, and `common`). Their contents match whatever structure your locale files and `mergeTranslations` produce.
+
+To see which namespaces you have, inspect the keys of the result of `mergeTranslations('en')` (or your default language) and use that same list in the `ns` option in `i18n.ts`.
 
 ---
 
@@ -136,5 +129,5 @@ Both forms work. Choose what fits your component structure.
 
 - **`src/locales/index.ts`** – `mergeTranslations` is unchanged
 - **Locale JSON files** – No structure changes
-- **Components using flat keys** – Existing `t('auth.login.title')` etc. continue to work
+- **Components using flat keys** – Existing `t('namespace.path.to.key')` calls continue to work
 - **`LanguageSwitcher`** – Uses `i18n` only; no translation keys

package/generators/app/templates/STRUCTURE.md

@@ -279,10 +279,10 @@ routes/
 
 ```tsx
 // src/routes/{module}/route.tsx (Parent route)
-import { createFileRoute, Outlet } from '@tanstack/react-router';
-import { ModuleLayout } from '@/modules/{module}/layouts/{module}-layout';
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { ModuleLayout } from "@/modules/{module}/layouts/{module}-layout";
 
-export const Route = createFileRoute('/{module}')({
+export const Route = createFileRoute("/{module}")({
   beforeLoad: ({ context }) => {
     // Guards, redirects, etc.
   },
@@ -300,10 +300,10 @@ function RouteComponent() {
 
 ```tsx
 // src/routes/{module}/{page}.tsx (Child route)
-import { createFileRoute } from '@tanstack/react-router';
-import { PageComponent } from '@/modules/{module}/components/{page}-component';
+import { createFileRoute } from "@tanstack/react-router";
+import { PageComponent } from "@/modules/{module}/components/{page}-component";
 
-export const Route = createFileRoute('/{module}/{page}')({
+export const Route = createFileRoute("/{module}/{page}")({
   component: RouteComponent,
 });
 
@@ -363,7 +363,7 @@ Translations are merged in `src/locales/index.ts`:
 
 ```typescript
 export const mergeTranslations = (lang: SupportedLanguages) => {
-  if (lang === 'en') {
+  if (lang === "en") {
     return {
       auth: { ...enAuth },
       app: { ...enApp },
@@ -379,15 +379,15 @@ export const mergeTranslations = (lang: SupportedLanguages) => {
 ### Using Translations in Components
 
 ```tsx
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 
 function MyComponent() {
   const { t } = useTranslation();
 
   return (
     <div>
-      <h1>{t('auth.login.title')}</h1>
-      <p>{t('common.welcome')}</p>
+      <h1>{t("auth.login.title")}</h1>
+      <p>{t("common.welcome")}</p>
     </div>
   );
 }
@@ -447,11 +447,11 @@ src/modules/dashboard/
 Add module translations to `src/locales/index.ts`:
 
 ```typescript
-import enDashboard from '@/modules/dashboard/locales/dashboard-en.json';
-import jaDashboard from '@/modules/dashboard/locales/dashboard-ja.json';
+import enDashboard from "@/modules/dashboard/locales/dashboard-en.json";
+import jaDashboard from "@/modules/dashboard/locales/dashboard-ja.json";
 
 export const mergeTranslations = (lang: SupportedLanguages) => {
-  if (lang === 'en') {
+  if (lang === "en") {
     return {
       // ... existing modules
       dashboard: { ...enDashboard },
@@ -472,7 +472,7 @@ export const mergeTranslations = (lang: SupportedLanguages) => {
 ```tsx
 export function DashboardLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className='dashboard-container'>
+    <div className="dashboard-container">
       {/* Dashboard-specific layout */}
       {children}
     </div>
@@ -485,10 +485,10 @@ export function DashboardLayout({ children }: { children: React.ReactNode }) {
 **`src/routes/dashboard/route.tsx`**:
 
 ```tsx
-import { createFileRoute, Outlet } from '@tanstack/react-router';
-import { DashboardLayout } from '@/modules/dashboard/layouts/dashboard-layout';
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { DashboardLayout } from "@/modules/dashboard/layouts/dashboard-layout";
 
-export const Route = createFileRoute('/dashboard')({
+export const Route = createFileRoute("/dashboard")({
   component: RouteComponent,
 });
 
@@ -504,10 +504,10 @@ function RouteComponent() {
 **`src/routes/dashboard/index.tsx`**:
 
 ```tsx
-import { createFileRoute } from '@tanstack/react-router';
-import { DashboardPage } from '@/modules/dashboard/components/dashboard-page';
+import { createFileRoute } from "@tanstack/react-router";
+import { DashboardPage } from "@/modules/dashboard/components/dashboard-page";
 
-export const Route = createFileRoute('/dashboard/')({
+export const Route = createFileRoute("/dashboard/")({
   component: RouteComponent,
 });
 
@@ -564,7 +564,7 @@ _writeDashboardFiles() {
 
 ```tsx
 // src/modules/{module}/components/{component-name}.tsx
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 
 export function ComponentName() {
   const { t } = useTranslation();
@@ -577,7 +577,7 @@ export function ComponentName() {
 
 ```tsx
 // src/modules/{module}/hooks/use-{hook-name}.ts
-import { useAtom } from 'jotai';
+import { useAtom } from "jotai";
 
 export function useHookName() {
   // Hook logic
@@ -593,7 +593,7 @@ export function useHookName() {
 // src/modules/{module}/layouts/{module}-layout.tsx
 export function ModuleLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className='module-container'>
+    <div className="module-container">
       {/* Layout structure */}
       {children}
     </div>
@@ -605,10 +605,10 @@ export function ModuleLayout({ children }: { children: React.ReactNode }) {
 
 ```tsx
 // src/routes/{module}/{page}.tsx
-import { createFileRoute } from '@tanstack/react-router';
-import { ComponentName } from '@/modules/{module}/components/component-name';
+import { createFileRoute } from "@tanstack/react-router";
+import { ComponentName } from "@/modules/{module}/components/component-name";
 
-export const Route = createFileRoute('/{module}/{page}')({
+export const Route = createFileRoute("/{module}/{page}")({
   component: RouteComponent,
 });
 

package/generators/app/templates/index.html

@@ -4,23 +4,15 @@
     <meta charset="UTF-8" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-    <meta
-      name="theme-color"
-      content="#000000" />
-    <meta
-      name="description"
-      content="<%= appNameTitleCase %>" />
-    <link
-      rel="icon"
-      type="image/svg+xml"
-      href="/favicon.svg" />
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="<%= appNameTitleCase %>" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title><%= appNameTitleCase %></title>
   </head>
   <body>
     <div id="app"></div>
-    <script
-      type="module"
-      src="/src/main.tsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

package/generators/app/templates/openapi-ts.config.ts

@@ -1,29 +1,29 @@
-import { defineConfig } from '@hey-api/openapi-ts';
-import { loadEnv } from 'vite';
+import { defineConfig } from "@hey-api/openapi-ts";
+import { loadEnv } from "vite";
 
 // Get the mode from environment variable (set by pnpm scripts)
-const mode = process.env.MODE || 'development';
+const mode = process.env.MODE || "development";
 
 // Load environment variables from .env files
-const env = loadEnv(mode, process.cwd(), '');
+const env = loadEnv(mode, process.cwd(), "");
 
 export default defineConfig({
   input: `${env.VITE_API_BASE_URL}/v3/api-docs`,
-  output: 'src/sdk',
+  output: "src/sdk",
   plugins: [
     {
-      name: '@hey-api/client-axios',
-      runtimeConfigPath: '@/openapi-client-config.ts',
+      name: "@hey-api/client-axios",
+      runtimeConfigPath: "@/openapi-client-config.ts",
     },
-    '@tanstack/react-query',
-    'zod',
+    "@tanstack/react-query",
+    "zod",
     {
-      name: '@hey-api/sdk',
+      name: "@hey-api/sdk",
       validator: true,
     },
     {
-      name: '@hey-api/schemas',
-      type: 'json',
+      name: "@hey-api/schemas",
+      type: "json",
     },
   ],
 });

package/generators/app/templates/postcss.config.js

@@ -3,4 +3,3 @@ export default {
     "@tailwindcss/postcss": {},
   },
 };
-

package/generators/app/templates/src/app.tsx

@@ -1,15 +1,20 @@
-import { RouterProvider } from '@tanstack/react-router';
-import { useAtomValue } from 'jotai';
-import { Loader2 } from 'lucide-react';
-import { useEffect } from 'react';
-import { Toaster } from 'sonner';
-import '@/index.css';
-import { AuthProvider } from '@/modules/auth/contexts/auth-context';
-import { authTokenAtom, currentUserDetailsAtom, useValidateToken, setLocaleInClient } from '@/modules/auth/hooks/use-auth-hook';
-import { router } from '@/router';
-import { getLanguage, SupportedLanguages } from '@/lib/i18n';
+import { RouterProvider } from "@tanstack/react-router";
+import { useAtomValue } from "jotai";
+import { Loader2 } from "lucide-react";
+import { useEffect } from "react";
+import { Toaster } from "sonner";
+import "@/index.css";
+import { AuthProvider } from "@/modules/auth/contexts/auth-context";
+import {
+  authTokenAtom,
+  currentUserDetailsAtom,
+  useValidateToken,
+  setLocaleInClient,
+} from "@/modules/auth/hooks/use-auth-hook";
+import { router } from "@/router";
+import { getLanguage, SupportedLanguages } from "@/lib/i18n";
 
-declare module '@tanstack/react-router' {
+declare module "@tanstack/react-router" {
   interface Register {
     router: typeof router;
   }
@@ -18,12 +23,7 @@ declare module '@tanstack/react-router' {
 function InnerApp() {
   const token = useAtomValue(authTokenAtom);
   const data = useAtomValue(currentUserDetailsAtom);
-  return (
-    <RouterProvider
-      router={router}
-      context={{ token, data }}
-    />
-  );
+  return <RouterProvider router={router} context={{ token, data }} />;
 }
 
 export default function App() {
@@ -44,14 +44,14 @@ export default function App() {
   if (!token || (!isPending && (isError || isSuccess))) {
     return (
       <AuthProvider>
-        <Toaster position='top-right' />
+        <Toaster position="top-right" />
         <InnerApp />
       </AuthProvider>
     );
   }
   return (
-    <div className='flex h-screen w-screen items-center justify-center'>
-      <Loader2 className='h-6 w-6 animate-spin' />
+    <div className="flex h-screen w-screen items-center justify-center">
+      <Loader2 className="h-6 w-6 animate-spin" />
     </div>
   );
 }

package/generators/app/templates/src/components/layout/language-switcher.tsx

@@ -1,39 +1,43 @@
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { getLanguage, changeLanguage } from '@/lib/i18n';
-import { useTranslation } from 'react-i18next';
-import { useEffect, useState } from 'react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { getLanguage, changeLanguage } from "@/lib/i18n";
+import { useTranslation } from "react-i18next";
+import { useEffect, useState } from "react";
 
 export function LanguageSwitcher() {
   const { i18n } = useTranslation();
-  const [currentLang, setCurrentLang] = useState<'en' | 'ja'>(() => {
-    return (getLanguage() as 'en' | 'ja') || 'en';
+  const [currentLang, setCurrentLang] = useState<"en" | "ja">(() => {
+    return (getLanguage() as "en" | "ja") || "en";
   });
 
   useEffect(() => {
     const handleLanguageChange = (lng: string) => {
-      setCurrentLang(lng as 'en' | 'ja');
+      setCurrentLang(lng as "en" | "ja");
     };
 
-    i18n.on('languageChanged', handleLanguageChange);
+    i18n.on("languageChanged", handleLanguageChange);
     return () => {
-      i18n.off('languageChanged', handleLanguageChange);
+      i18n.off("languageChanged", handleLanguageChange);
     };
   }, [i18n]);
 
   const handleLanguageChange = (value: string) => {
-    changeLanguage(value as 'en' | 'ja');
+    changeLanguage(value as "en" | "ja");
   };
 
   return (
-    <Select
-      value={currentLang}
-      onValueChange={handleLanguageChange}>
-      <SelectTrigger className='min-w-[120px]'>
+    <Select value={currentLang} onValueChange={handleLanguageChange}>
+      <SelectTrigger className="min-w-[120px]">
         <SelectValue />
       </SelectTrigger>
       <SelectContent>
-        <SelectItem value='en'>English</SelectItem>
-        <SelectItem value='ja'>日本語</SelectItem>
+        <SelectItem value="en">English</SelectItem>
+        <SelectItem value="ja">日本語</SelectItem>
       </SelectContent>
     </Select>
   );

package/generators/app/templates/src/components/layout/page-layout.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { LanguageSwitcher } from "./language-switcher";
+import { ThemeSwitcher } from "./theme-switcher";
+
+export function PageLayout({
+  children,
+  actions,
+  mainClassName,
+}: {
+  children: ReactNode;
+  actions?: ReactNode;
+  mainClassName?: string;
+}) {
+  const { t } = useTranslation();
+  return (
+    <div className="min-h-screen bg-background">
+      <header className="border-b">
+        <div className="container mx-auto flex h-16 items-center justify-between px-4">
+          <h1 className="text-xl font-semibold">{t("app.title")}</h1>
+          <div className="flex items-center gap-4">
+            <ThemeSwitcher />
+            <LanguageSwitcher />
+            {actions}
+          </div>
+        </div>
+      </header>
+      <main className={mainClassName}>{children}</main>
+    </div>
+  );
+}

package/generators/app/templates/src/components/layout/theme-switcher.tsx

@@ -1,12 +1,12 @@
-import { Button } from '@/components/ui/button';
-import { ThemeTypes, useTheme } from '@/components/theme/theme-provider';
-import { Moon, Sun, Monitor } from 'lucide-react';
+import { Button } from "@/components/ui/button";
+import { ThemeTypes, useTheme } from "@/components/theme/theme-provider";
+import { Moon, Sun, Monitor } from "lucide-react";
 
 export function ThemeSwitcher() {
   const { theme, setTheme } = useTheme();
 
   const cycleTheme = () => {
-    const themes: ThemeTypes[] = ['light', 'dark', 'system'];
+    const themes: ThemeTypes[] = ["light", "dark", "system"];
     const currentIndex = themes.indexOf(theme);
     const nextIndex = (currentIndex + 1) % themes.length;
     setTheme(themes[nextIndex]);
@@ -14,23 +14,24 @@ export function ThemeSwitcher() {
 
   const getIcon = () => {
     switch (theme) {
-      case 'light':
-        return <Sun className='h-4 w-4' />;
-      case 'dark':
-        return <Moon className='h-4 w-4' />;
-      case 'system':
-        return <Monitor className='h-4 w-4' />;
+      case "light":
+        return <Sun className="h-4 w-4" />;
+      case "dark":
+        return <Moon className="h-4 w-4" />;
+      case "system":
+        return <Monitor className="h-4 w-4" />;
       default:
-        return <Monitor className='h-4 w-4' />;
+        return <Monitor className="h-4 w-4" />;
     }
   };
 
   return (
     <Button
-      variant='outline'
-      size='icon'
+      variant="outline"
+      size="icon"
       onClick={cycleTheme}
-      aria-label='Toggle theme'>
+      aria-label="Toggle theme"
+    >
       {getIcon()}
     </Button>
   );