From 739bf81bc97d966718f219597f57b71a3ee508f6 Mon Sep 17 00:00:00 2001
From: Daniel Stock <daniel.stock@tooloop.de>
Date: Fri, 21 Nov 2025 13:21:59 +0100
Subject: [PATCH] use crm- components everywhere

---
 resources/js/components/DeleteUser.vue        |  4 +--
 .../DialogCloseButton/DialogCloseButton.vue   |  2 +-
 resources/js/components/NavUser.vue           |  2 +-
 .../js/components/TwoFactorRecoveryCodes.vue  |  2 +-
 .../js/components/TwoFactorSetupModal.vue     |  2 +-
 .../js/components/documents/InvoiceDialog.vue |  4 +--
 .../js/components/documents/LineItemTable.vue | 14 ++++----
 .../components/ui/crm-textarea/Textarea.vue   | 32 +++++++++++++++++++
 .../js/components/ui/crm-textarea/index.ts    |  1 +
 .../ui/send-mail-dialog/SendMailDialog.vue    |  4 +--
 resources/js/layouts/AppLayout.vue            |  4 +--
 resources/js/layouts/settings/Layout.vue      |  2 +-
 resources/js/pages/CRM.vue                    |  3 +-
 resources/js/pages/Customers.vue              |  2 +-
 resources/js/pages/Dashboard.vue              | 21 +++---------
 resources/js/pages/Invoices.vue               |  4 +--
 resources/js/pages/auth/ConfirmPassword.vue   |  4 +--
 resources/js/pages/auth/ForgotPassword.vue    |  4 +--
 resources/js/pages/auth/Login.vue             |  4 +--
 resources/js/pages/auth/Register.vue          |  4 +--
 resources/js/pages/auth/ResetPassword.vue     |  4 +--
 .../js/pages/auth/TwoFactorChallenge.vue      |  4 +--
 resources/js/pages/auth/VerifyEmail.vue       |  2 +-
 resources/js/pages/settings/Appearance.vue    |  2 +-
 resources/js/pages/settings/Password.vue      |  4 +--
 resources/js/pages/settings/Profile.vue       |  4 +--
 resources/js/pages/settings/TwoFactor.vue     |  2 +-
 27 files changed, 81 insertions(+), 60 deletions(-)
 create mode 100644 resources/js/components/ui/crm-textarea/Textarea.vue
 create mode 100644 resources/js/components/ui/crm-textarea/index.ts

diff --git a/resources/js/components/DeleteUser.vue b/resources/js/components/DeleteUser.vue
index 6d2b13d..96fbfe7 100644
--- a/resources/js/components/DeleteUser.vue
+++ b/resources/js/components/DeleteUser.vue
@@ -6,7 +6,7 @@ import { ref } from 'vue';
 // Components
 import HeadingSmall from '@/components/HeadingSmall.vue';
 import InputError from '@/components/InputError.vue';
-import { Button } from '@/components/ui/button';
+import { Button } from '@/components/ui/crm-button';
 import {
     Dialog,
     DialogClose,
@@ -17,7 +17,7 @@ import {
     DialogTitle,
     DialogTrigger,
 } from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
+import { Input } from '@/components/ui/crm-input';
 import { Label } from '@/components/ui/label';
 
 const passwordInput = ref<InstanceType<typeof Input> | null>(null);
diff --git a/resources/js/components/DialogCloseButton/DialogCloseButton.vue b/resources/js/components/DialogCloseButton/DialogCloseButton.vue
index bb69ac3..3da889f 100644
--- a/resources/js/components/DialogCloseButton/DialogCloseButton.vue
+++ b/resources/js/components/DialogCloseButton/DialogCloseButton.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/components/ui/button'
+import { Button } from '@/components/ui/crm-button'
 import { X } from "lucide-vue-next"
 
 </script>
diff --git a/resources/js/components/NavUser.vue b/resources/js/components/NavUser.vue
index 58aa067..c53a54a 100644
--- a/resources/js/components/NavUser.vue
+++ b/resources/js/components/NavUser.vue
@@ -5,7 +5,7 @@ import { useSidebar } from '@/components/ui/sidebar';
 import { usePage } from '@inertiajs/vue3';
 import { ChevronsUpDown } from 'lucide-vue-next';
 import UserMenuContent from './UserMenuContent.vue';
-import { Button } from '@/components/ui/button'
+import { Button } from '@/components/ui/crm-button'
 
 
 const page = usePage();
diff --git a/resources/js/components/TwoFactorRecoveryCodes.vue b/resources/js/components/TwoFactorRecoveryCodes.vue
index aedb955..258c052 100644
--- a/resources/js/components/TwoFactorRecoveryCodes.vue
+++ b/resources/js/components/TwoFactorRecoveryCodes.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/components/ui/button';
+import { Button } from '@/components/ui/crm-button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
 import { regenerateRecoveryCodes } from '@/routes/two-factor';
diff --git a/resources/js/components/TwoFactorSetupModal.vue b/resources/js/components/TwoFactorSetupModal.vue
index acbf9b5..52b8cf8 100644
--- a/resources/js/components/TwoFactorSetupModal.vue
+++ b/resources/js/components/TwoFactorSetupModal.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import InputError from '@/components/InputError.vue';
-import { Button } from '@/components/ui/button';
+import { Button } from '@/components/ui/crm-button';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { PinInput, PinInputGroup, PinInputSlot } from '@/components/ui/pin-input';
 import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
diff --git a/resources/js/components/documents/InvoiceDialog.vue b/resources/js/components/documents/InvoiceDialog.vue
index 39a8a46..9931777 100644
--- a/resources/js/components/documents/InvoiceDialog.vue
+++ b/resources/js/components/documents/InvoiceDialog.vue
@@ -19,8 +19,8 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, }
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { Table, TableBody, TableCell, TableHead, TableRow, } from '@/components/ui/table'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/crm-button'
+import { Input } from '@/components/ui/crm-input';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'
 import { StatusBadge, statusBadgeLabels } from '@/components/ui/status-badge'
 import LineItemTable from '@/components/documents/LineItemTable.vue'
diff --git a/resources/js/components/documents/LineItemTable.vue b/resources/js/components/documents/LineItemTable.vue
index 36b289c..77098c2 100644
--- a/resources/js/components/documents/LineItemTable.vue
+++ b/resources/js/components/documents/LineItemTable.vue
@@ -2,7 +2,7 @@
 <!-- TODO: Enter in LineItem = neue Zeile -->
 <script setup lang="ts">
 
-import { ref, watch, HTMLAttributes, onUpdated, onMounted } from 'vue'
+import { ref, watch, HTMLAttributes, onUpdated } from 'vue'
 import draggable from 'vuedraggable';
 import { cn, toCurrency } from '@/lib/utils';
 import { LineItem } from '@/types';
@@ -10,12 +10,12 @@ import { newLineItem } from '@/types/index.d'
 import { Table, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from '@/components/ui/table';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"
 import { NumberField, NumberFieldContent, NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, } from '@/components/ui/number-field'
-import { Input } from '@/components/ui/input';
-import { Loader2, GripVertical, Trash2, Plus, TextSelect, BetweenHorizonalEnd } from 'lucide-vue-next';
-import Button from '../ui/button/Button.vue';
+import { Input } from '@/components/ui/crm-input';
+import { Loader2, GripVertical, Trash2, Plus, TextSelect } from 'lucide-vue-next';
+import { Button } from '@/components/ui/crm-button';
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from '@/components/ui/empty'
-import NumberInput from '../ui/number-input/NumberInput.vue';
-import { GrowingTextarea } from '../ui/growing-textarea';
+import NumberInput from '@/components/ui/number-input/NumberInput.vue';
+import { GrowingTextarea } from '@/components/ui/growing-textarea';
 
 const props = defineProps<{
   isLoading?: boolean,
@@ -202,7 +202,7 @@ const recalculatePositions = () => {
 
             <!-- Total -->
             <TableCell class="w-1/8 text-right tabular-nums font-bold">{{ toCurrency(element.price * element.quantity)
-              }}
+            }}
             </TableCell>
 
             <!-- Buttons -->
diff --git a/resources/js/components/ui/crm-textarea/Textarea.vue b/resources/js/components/ui/crm-textarea/Textarea.vue
new file mode 100644
index 0000000..d290f30
--- /dev/null
+++ b/resources/js/components/ui/crm-textarea/Textarea.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { ref } from "vue"
+import { useVModel } from "@vueuse/core"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  defaultValue?: string | number
+  modelValue?: string | number
+}>()
+
+const emits = defineEmits<{
+  (e: "update:modelValue", payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, "modelValue", emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+defineExpose({
+  textareaRef
+})
+
+</script>
+
+<template>
+  <textarea ref="textareaRef" v-model="modelValue" data-slot="textarea"
+    :class="cn('border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', props.class)" />
+</template>
diff --git a/resources/js/components/ui/crm-textarea/index.ts b/resources/js/components/ui/crm-textarea/index.ts
new file mode 100644
index 0000000..8ce91e9
--- /dev/null
+++ b/resources/js/components/ui/crm-textarea/index.ts
@@ -0,0 +1 @@
+export { default as Textarea } from "./Textarea.vue"
diff --git a/resources/js/components/ui/send-mail-dialog/SendMailDialog.vue b/resources/js/components/ui/send-mail-dialog/SendMailDialog.vue
index 1e7fd3b..ecc667b 100644
--- a/resources/js/components/ui/send-mail-dialog/SendMailDialog.vue
+++ b/resources/js/components/ui/send-mail-dialog/SendMailDialog.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { ref, watch } from "vue"
 import { type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/crm-button"
 import { Dialog, DialogContent, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
+import { Input } from "@/components/ui/crm-input"
 import { Label } from "@/components/ui/label"
 
 const props = defineProps<DialogRootProps & {
diff --git a/resources/js/layouts/AppLayout.vue b/resources/js/layouts/AppLayout.vue
index 8c17c6c..5b76af4 100644
--- a/resources/js/layouts/AppLayout.vue
+++ b/resources/js/layouts/AppLayout.vue
@@ -5,7 +5,7 @@ import { onMounted } from 'vue';
 import 'vue-sonner/style.css'
 import { Toaster } from 'vue-sonner'
 import { Info, CircleAlert, CircleCheck, LoaderCircle, Ban } from "lucide-vue-next"
-import { Button } from '@/components/ui/button'
+import { Button } from '@/components/ui/crm-button'
 import { SidebarProvider } from '@/components/ui/sidebar';
 import { usePage } from '@inertiajs/vue3';
 import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '@/components/ui/alert-dialog'
@@ -78,7 +78,7 @@ onMounted(() => {
     <AlertDialog v-model:open="alert.open">
         <AlertDialogContent>
             <AlertDialogHeader>
-                <AlertDialogTitle>{{ alert.title }}</AlertDialogTitle>
+                <AlertDialogTitle class="text-md">{{ alert.title }}</AlertDialogTitle>
                 <AlertDialogDescription v-if="alert.message">{{ alert.message }}</AlertDialogDescription>
             </AlertDialogHeader>
             <AlertDialogFooter>
diff --git a/resources/js/layouts/settings/Layout.vue b/resources/js/layouts/settings/Layout.vue
index 7b2b370..d939872 100644
--- a/resources/js/layouts/settings/Layout.vue
+++ b/resources/js/layouts/settings/Layout.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Heading from '@/components/Heading.vue';
-import { Button } from '@/components/ui/button';
+import { Button } from '@/components/ui/crm-button';
 import { Separator } from '@/components/ui/separator';
 import { toUrl, urlIsActive } from '@/lib/utils';
 import { edit as editAppearance } from '@/routes/appearance';
diff --git a/resources/js/pages/CRM.vue b/resources/js/pages/CRM.vue
index b570393..dbf2313 100644
--- a/resources/js/pages/CRM.vue
+++ b/resources/js/pages/CRM.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import AppLayout from '@/layouts/AppLayout.vue';
-import { crm } from '@/routes';
 import { Head } from '@inertiajs/vue3';
 </script>
 
@@ -8,6 +7,6 @@ import { Head } from '@inertiajs/vue3';
 
     <Head title="Dashboard" />
 
-    <AppLayout>
+    <AppLayout title="Dashboard">
     </AppLayout>
 </template>
diff --git a/resources/js/pages/Customers.vue b/resources/js/pages/Customers.vue
index dddacbf..0b79259 100644
--- a/resources/js/pages/Customers.vue
+++ b/resources/js/pages/Customers.vue
@@ -7,7 +7,7 @@ import { Address, Customer } from '@/types'
 import { newCustomer } from '@/types/index.d'
 import { bgColorForString } from '@/lib/utils'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
-import { Input } from '@/components/ui/input'
+import { Input } from '@/components/ui/crm-input'
 import { Button } from '@/components/ui/crm-button'
 import { ButtonGroup } from '@/components/ui/button-group'
 import { Delete, Globe, House, LayoutGrid, Mail, Phone, Plus, Rows3, Search, Smartphone } from "lucide-vue-next"
diff --git a/resources/js/pages/Dashboard.vue b/resources/js/pages/Dashboard.vue
index 8d0f15e..becf5c8 100644
--- a/resources/js/pages/Dashboard.vue
+++ b/resources/js/pages/Dashboard.vue
@@ -1,20 +1,9 @@
 <script setup lang="ts">
 import AppLayout from '@/layouts/AppLayout.vue';
-import { dashboard } from '@/routes';
-import { Head } from '@inertiajs/vue3';
-import PlaceholderPattern from '../components/PlaceholderPattern.vue';
 import { usePage } from '@inertiajs/vue3';
-import { Trophy, ShieldCheck, Star, ArrowRight, UserCheck, UserCheck2 } from 'lucide-vue-next';
+import { Trophy, ArrowRight, UserCheck2 } from 'lucide-vue-next';
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
-import {
-    Table,
-    TableBody,
-    TableCaption,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
-} from '@/components/ui/table';
+import { Table, TableCell, TableHead, TableRow, } from '@/components/ui/table';
 
 const page = usePage();
 const token = page.props.flash?.token;
@@ -65,7 +54,8 @@ if (token) {
                         </TableRow>
                         <TableRow>
                             <TableHead class="text-right px-4">Gestellt, nicht bezahlt</TableHead>
-                            <TableCell class="text-right px-4 text-destructive font-bold tabular-nums">8.637,00 €</TableCell>
+                            <TableCell class="text-right px-4 text-destructive font-bold tabular-nums">8.637,00 €
+                            </TableCell>
                         </TableRow>
                         <TableRow class="border-b-slate-600">
                             <TableHead class="text-right px-4">Noch nicht gestellt</TableHead>
@@ -77,8 +67,7 @@ if (token) {
                         </TableRow>
                     </table>
                 </div>
-                <div
-                    class="relative flex-1 overflow-y-auto">
+                <div class="relative flex-1 overflow-y-auto">
                     Aktuelle Angebote
                 </div>
             </div>
diff --git a/resources/js/pages/Invoices.vue b/resources/js/pages/Invoices.vue
index 2ed1bb1..e3836b1 100644
--- a/resources/js/pages/Invoices.vue
+++ b/resources/js/pages/Invoices.vue
@@ -5,12 +5,12 @@ import { type Invoice } from '@/types'
 import { newInvoice } from '@/types/index.d'
 import axios from 'axios'
 import AppLayout from '@/layouts/AppLayout.vue'
+import { Button } from '@/components/ui/crm-button'
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue, } from '@/components/ui/select'
-import { Button } from '@/components/ui/button'
 import DocumentTable from '@/components/documents/DocumentTable.vue'
 import { ChevronLeft, ChevronRight, Plus, Search, Delete } from "lucide-vue-next"
 import Fuse from 'fuse.js';
-import { Input } from '@/components/ui/input'
+import { Input } from '@/components/ui/crm-input'
 import SelectSeparator from '@/components/ui/select/SelectSeparator.vue'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { Kbd, KbdGroup } from '@/components/ui/kbd'
diff --git a/resources/js/pages/auth/ConfirmPassword.vue b/resources/js/pages/auth/ConfirmPassword.vue
index 92a777a..0441a72 100644
--- a/resources/js/pages/auth/ConfirmPassword.vue
+++ b/resources/js/pages/auth/ConfirmPassword.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import InputError from '@/components/InputError.vue';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/crm-button';
+import { Input } from '@/components/ui/crm-input';
 import { Label } from '@/components/ui/label';
 import AuthLayout from '@/layouts/AuthLayout.vue';
 import { store } from '@/routes/password/confirm';
diff --git a/resources/js/pages/auth/ForgotPassword.vue b/resources/js/pages/auth/ForgotPassword.vue
index 6950b67..9cf2979 100644
--- a/resources/js/pages/auth/ForgotPassword.vue
+++ b/resources/js/pages/auth/ForgotPassword.vue
@@ -2,8 +2,8 @@
 import PasswordResetLinkController from '@/actions/App/Http/Controllers/Auth/PasswordResetLinkController';
 import InputError from '@/components/InputError.vue';
 import TextLink from '@/components/TextLink.vue';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/crm-button';
+import { Input } from '@/components/ui/crm-input';
 import { Label } from '@/components/ui/label';
 import AuthLayout from '@/layouts/AuthLayout.vue';
 import { login } from '@/routes';
diff --git a/resources/js/pages/auth/Login.vue b/resources/js/pages/auth/Login.vue
index 75cd3b0..9043bfb 100644
--- a/resources/js/pages/auth/Login.vue
+++ b/resources/js/pages/auth/Login.vue
@@ -2,9 +2,9 @@
 import AuthenticatedSessionController from '@/actions/App/Http/Controllers/Auth/AuthenticatedSessionController';
 import InputError from '@/components/InputError.vue';
 import TextLink from '@/components/TextLink.vue';
-import { Button } from '@/components/ui/button';
+import { Button } from '@/components/ui/crm-button';
 import { Checkbox } from '@/components/ui/checkbox';
-import { Input } from '@/components/ui/input';
+import { Input } from '@/components/ui/crm-input';
 import { Label } from '@/components/ui/label';
 import AuthBase from '@/layouts/AuthLayout.vue';
 import { register } from '@/routes';
diff --git a/resources/js/pages/auth/Register.vue b/resources/js/pages/auth/Register.vue
index de50736..4f32e3e 100644
--- a/resources/js/pages/auth/Register.vue
+++ b/resources/js/pages/auth/Register.vue
@@ -2,8 +2,8 @@
 import RegisteredUserController from '@/actions/App/Http/Controllers/Auth/RegisteredUserController';
 import InputError from '@/components/InputError.vue';
 import TextLink from '@/components/TextLink.vue';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/crm-button';
+import { Input } from '@/components/ui/crm-input';
 import { Label } from '@/components/ui/label';
 import AuthBase from '@/layouts/AuthLayout.vue';
 import { login } from '@/routes';
diff --git a/resources/js/pages/auth/ResetPassword.vue b/resources/js/pages/auth/ResetPassword.vue
index 8642d44..9f2af45 100644
--- a/resources/js/pages/auth/ResetPassword.vue
+++ b/resources/js/pages/auth/ResetPassword.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import NewPasswordController from '@/actions/App/Http/Controllers/Auth/NewPasswordController';
 import InputError from '@/components/InputError.vue';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/crm-button';
+import { Input } from '@/components/ui/crm-input';
 import { Label } from '@/components/ui/label';
 import AuthLayout from '@/layouts/AuthLayout.vue';
 import { Form, Head } from '@inertiajs/vue3';
diff --git a/resources/js/pages/auth/TwoFactorChallenge.vue b/resources/js/pages/auth/TwoFactorChallenge.vue
index 5e8ca2c..70687f9 100644
--- a/resources/js/pages/auth/TwoFactorChallenge.vue
+++ b/resources/js/pages/auth/TwoFactorChallenge.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import InputError from '@/components/InputError.vue';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/crm-button';
+import { Input } from '@/components/ui/crm-input';
 import { PinInput, PinInputGroup, PinInputSlot } from '@/components/ui/pin-input';
 import AuthLayout from '@/layouts/AuthLayout.vue';
 import { store } from '@/routes/two-factor/login';
diff --git a/resources/js/pages/auth/VerifyEmail.vue b/resources/js/pages/auth/VerifyEmail.vue
index c520c3d..0d2d0ba 100644
--- a/resources/js/pages/auth/VerifyEmail.vue
+++ b/resources/js/pages/auth/VerifyEmail.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import EmailVerificationNotificationController from '@/actions/App/Http/Controllers/Auth/EmailVerificationNotificationController';
 import TextLink from '@/components/TextLink.vue';
-import { Button } from '@/components/ui/button';
+import { Button } from '@/components/ui/crm-button';
 import AuthLayout from '@/layouts/AuthLayout.vue';
 import { logout } from '@/routes';
 import { Form, Head } from '@inertiajs/vue3';
diff --git a/resources/js/pages/settings/Appearance.vue b/resources/js/pages/settings/Appearance.vue
index c7aa50b..520eb78 100644
--- a/resources/js/pages/settings/Appearance.vue
+++ b/resources/js/pages/settings/Appearance.vue
@@ -7,7 +7,7 @@ import SettingsLayout from '@/layouts/settings/Layout.vue';
 </script>
 
 <template>
-    <AppLayout>
+    <AppLayout title="Erscheinungsbild">
         <Head title="Erscheinungsbild" />
 
         <SettingsLayout>
diff --git a/resources/js/pages/settings/Password.vue b/resources/js/pages/settings/Password.vue
index 0ed44fb..5ccede1 100644
--- a/resources/js/pages/settings/Password.vue
+++ b/resources/js/pages/settings/Password.vue
@@ -6,8 +6,8 @@ import SettingsLayout from '@/layouts/settings/Layout.vue';
 import { Form, Head } from '@inertiajs/vue3';
 import { ref } from 'vue';
 import HeadingSmall from '@/components/HeadingSmall.vue';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/crm-button';
+import { Input } from '@/components/ui/crm-input';
 import { Label } from '@/components/ui/label';
 
 const passwordInput = ref<HTMLInputElement | null>(null);
diff --git a/resources/js/pages/settings/Profile.vue b/resources/js/pages/settings/Profile.vue
index d7d5826..5227a83 100644
--- a/resources/js/pages/settings/Profile.vue
+++ b/resources/js/pages/settings/Profile.vue
@@ -6,8 +6,8 @@ import { Form, Link, usePage } from '@inertiajs/vue3';
 import DeleteUser from '@/components/DeleteUser.vue';
 import HeadingSmall from '@/components/HeadingSmall.vue';
 import InputError from '@/components/InputError.vue';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/crm-button';
+import { Input } from '@/components/ui/crm-input';
 import { Label } from '@/components/ui/label';
 import AppLayout from '@/layouts/AppLayout.vue';
 import SettingsLayout from '@/layouts/settings/Layout.vue';
diff --git a/resources/js/pages/settings/TwoFactor.vue b/resources/js/pages/settings/TwoFactor.vue
index a18946b..3eea054 100644
--- a/resources/js/pages/settings/TwoFactor.vue
+++ b/resources/js/pages/settings/TwoFactor.vue
@@ -3,7 +3,7 @@ import HeadingSmall from '@/components/HeadingSmall.vue';
 import TwoFactorRecoveryCodes from '@/components/TwoFactorRecoveryCodes.vue';
 import TwoFactorSetupModal from '@/components/TwoFactorSetupModal.vue';
 import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
+import { Button } from '@/components/ui/crm-button';
 import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
 import AppLayout from '@/layouts/AppLayout.vue';
 import SettingsLayout from '@/layouts/settings/Layout.vue';