feat: tempcommit

src/components/misc/profile-picture-upload.tsx

@@ -15,12 +15,7 @@ export default function ProfilePictureUpload({
     <>
       <div className='grid grid-cols-1 gap-1'>
         <span className='relative flex space-6'>
-          <Input
+          <Input className={className} id='pic-upload' type='file' />
-            className={className}
-            id='pic-upload'
-            type='file'
-            defaultValue={data?.data.user.image ?? undefined}
-          />
           <Avatar className='flex justify-center items-center ml-6 shadow-md border h-[36px] w-[36px]'>
             {data?.data.user.image ? (
               <Image

src/components/misc/settings-page.tsx

@@ -5,7 +5,6 @@ import { Button } from '@/components/ui/button';
 import {
   Card,
   CardContent,
-  CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
@@ -27,9 +26,7 @@ import { useGetApiUserMe } from '@/generated/api/user/user';
 import { ThemePicker } from './theme-picker';
 import LabeledInput from '../custom-ui/labeled-input';
 import { GroupWrapper } from '../wrappers/group-wrapper';
-import { Avatar } from '../ui/avatar';
+
-import Image from 'next/image';
-import { User } from 'lucide-react';
 import ProfilePictureUpload from './profile-picture-upload';
 
 export default function SettingsPage() {
@@ -117,7 +114,7 @@ export default function SettingsPage() {
                 </GroupWrapper>
                 <GroupWrapper title='Profile Picture'>
                   <div className='space-y-2 grid grid-cols-[1fr_auto]'>
-                    <ProfilePictureUpload className='file:border file:rounded-xl' />
+                    <ProfilePictureUpload className='file:border file:rounded-md file:hover:bg-disabled-destructive' />
                   </div>
                 </GroupWrapper>
                 <GroupWrapper title='Regional Settings'>
@@ -127,7 +124,7 @@ export default function SettingsPage() {
                         type='text'
                         label='Timezone'
                         placeholder='Europe/Berlin'
-                        defaultValue={data?.data.user.timezone}
+                        defaultValue={data?.data.user.timezone ?? ''}
                       ></LabeledInput>
                     </div>
                     <div>
@@ -147,7 +144,12 @@ export default function SettingsPage() {
                   </div>
                 </GroupWrapper>
                 <div className='flex items-center justify-evenly sm:flex-row flex-col gap-6'>
-                  <Button variant='destructive'>Delete Account</Button>
+                  <Button
+                    // onClick={() => DeleteAccount }
+                    variant='destructive'
+                  >
+                    Delete Account
+                  </Button>
                   <span className='text-sm text-muted-foreground pt-1'>
                     Permanently delete your account and all associated data.
                   </span>
@@ -165,7 +167,8 @@ export default function SettingsPage() {
                 <CardTitle>Notification Preferences</CardTitle>
               </CardHeader>
               <CardContent className='space-y-6'>
-                <div className='flex items-center justify-between space-x-2 p-3 rounded-md border'>
+                <GroupWrapper>
+                  <div className='flex items-center justify-between'>
                     <Label
                       htmlFor='masterEmailNotifications'
                       className='font-normal'
@@ -174,9 +177,15 @@ export default function SettingsPage() {
                     </Label>
                     <Switch id='masterEmailNotifications' />
                   </div>
-                <div className='space-y-4 pl-2 border-l-2 ml-2'>
+                </GroupWrapper>
+
+                <GroupWrapper title='Meetings'>
+                  <div className='space-y-4'>
                     <div className='flex items-center justify-between space-x-2'>
-                    <Label htmlFor='newMeetingBookings' className='font-normal'>
+                      <Label
+                        htmlFor='newMeetingBookings'
+                        className='font-normal'
+                      >
                         New Meeting Bookings
                       </Label>
                       <Switch id='newMeetingBookings' />
@@ -190,6 +199,7 @@ export default function SettingsPage() {
                       </Label>
                       <Switch id='meetingConfirmations' />
                     </div>
+                    <div className='space-y-4 grid grid-cols-[1fr_1fr_auto] items-center'>
                       <div className='flex items-center justify-between space-x-2'>
                         <Label
                           htmlFor='enableMeetingReminders'
@@ -197,10 +207,11 @@ export default function SettingsPage() {
                         >
                           Meeting Reminders
                         </Label>
-                    <Switch id='enableMeetingReminders' />
                       </div>
-                  <div className='space-y-2 pl-6'>
+                      <div>
-                    <Label htmlFor='remindBefore'>Remind me before</Label>
+                        <Label className='text-sm' htmlFor='remindBefore'>
+                          Remind me before
+                        </Label>
                         <Select>
                           <SelectTrigger id='remindBefore'>
                             <SelectValue placeholder='Select reminder time' />
@@ -213,6 +224,14 @@ export default function SettingsPage() {
                           </SelectContent>
                         </Select>
                       </div>
+                      <div>
+                        <Switch id='enableMeetingReminders' />
+                      </div>
+                    </div>
+                  </div>
+                </GroupWrapper>
+                <GroupWrapper title='Social'>
+                  <div className='space-y-4'>
                     <div className='flex items-center justify-between space-x-2'>
                       <Label htmlFor='friendRequests' className='font-normal'>
                         Friend Requests
@@ -226,6 +245,7 @@ export default function SettingsPage() {
                       <Switch id='groupUpdates' />
                     </div>
                   </div>
+                </GroupWrapper>
               </CardContent>
             </ScrollableSettingsWrapper>
           </Card>