housekeeping and refactoring

Author: wsameer

resources/css/app.css

@@ -75,34 +75,53 @@
 }
 
 @theme inline {
+  --font-sans:
+    'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
   --color-background: var(--background);
   --color-foreground: var(--foreground);
+
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
+
   --color-popover: var(--popover);
   --color-popover-foreground: var(--popover-foreground);
+
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
+
   --color-secondary: var(--secondary);
   --color-secondary-foreground: var(--secondary-foreground);
+
   --color-muted: var(--muted);
   --color-muted-foreground: var(--muted-foreground);
+
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
+
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
+
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
+
   --color-chart-1: var(--chart-1);
   --color-chart-2: var(--chart-2);
   --color-chart-3: var(--chart-3);
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
+
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
+
   --color-sidebar: var(--sidebar);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar-primary: var(--sidebar-primary);
@@ -111,6 +130,7 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+
   --chart-1: rgb(255, 128, 132);
   --chart-2: rgb(252, 157, 143);
   --chart-3: rgb(255, 189, 102);

resources/js/features/auth/login-form.tsx

@@ -1,7 +1,13 @@
 /* eslint-disable react-refresh/only-export-components */
 import { createContext, useContext, useEffect, useState } from 'react'
 
-type Theme = 'dark' | 'light' | 'system'
+export type Theme = (typeof Themes)[keyof typeof Themes]
+
+export const Themes = {
+  dark: 'dark',
+  light: 'light',
+  system: 'system',
+} as const
 
 type ThemeProviderProps = {
   children: React.ReactNode

resources/js/features/theme/theme-provider.tsx

@@ -24,7 +24,7 @@ interface LoginProps extends PageProps {
   canResetPassword: boolean
 }
 
-const Login = ({ status, canResetPassword, auth, flash }: LoginProps) => {
+const LoginPage = ({ status, canResetPassword, auth, flash }: LoginProps) => {
   const { errors } = flash as { errors: ValidationErrors }
 
   const [showPassword, setShowPassword] = useState(false)
@@ -183,4 +183,4 @@ const Login = ({ status, canResetPassword, auth, flash }: LoginProps) => {
   )
 }
 
-export default Login
+export default LoginPage

resources/js/hooks/useAuth.ts

@@ -17,7 +17,7 @@ type RegisterForm = {
   password_confirmation: string
 }
 
-const Register = ({ auth, errors }: PageProps) => {
+const RegisterPage = ({ auth, errors }: PageProps) => {
   const [showPassword, setShowPassword] = useState(false)
 
   const { data, setData, post, processing, reset } = useForm<Required<RegisterForm>>({
@@ -178,12 +178,8 @@ const Register = ({ auth, errors }: PageProps) => {
           </div>
         </div>
       </form>
-
-      {status && (
-        <div className="mb-4 text-center text-sm font-medium text-green-600">{status}</div>
-      )}
     </AuthLayout>
   )
 }
 
-export default Register
+export default RegisterPage

resources/js/pages/auth/login.tsx

@@ -10,10 +10,10 @@ const breadcrumbs: BreadcrumbItem[] = [
   },
 ]
 
-export default function Dashboard() {
+export default function DashboardPage() {
   return (
     <PageLayout breadcrumbs={breadcrumbs} pageTitle="Dashboard">
-      <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+      <div className="flex flex-1 flex-col gap-4 p-4">
         <div className="grid auto-rows-min gap-4 md:grid-cols-3">
           <div className="aspect-video rounded-xl bg-muted/50" />
           <div className="aspect-video rounded-xl bg-muted/50" />

resources/js/pages/auth/register.tsx

@@ -1,10 +1,22 @@
+import { APP_ROUTE } from '@/app/routes'
+import { Button } from '@/components/ui/button'
+import { Link } from '@inertiajs/react'
+import { HomeIcon } from 'lucide-react'
+
 export default function NotFound() {
   return (
     <>
       <div className="container">
-        <div className="title">Page not found</div>
-
-        <span>This page does not exist.</span>
+        <div className="mt-52 flex flex-col items-center">
+          <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">404</h3>
+          <p className="mb-6 leading-7 [&:not(:first-child)]:mt-6">This page doesn't exist</p>
+          <Button className="h-12 rounded-full" variant="default" asChild>
+            <Link href={APP_ROUTE} className="flex items-center" replace>
+              <HomeIcon className="h-4 w-4" />
+              Go to Home
+            </Link>
+          </Button>
+        </div>
       </div>
     </>
   )