🎨 Update theme (#666)

frontend/src/components/UserSettings/ChangePassword.tsx

@@ -21,7 +21,7 @@ interface UpdatePasswordForm extends UpdatePassword {
 }
 
 const ChangePassword: React.FC = () => {
-  const color = useColorModeValue('gray.700', 'white')
+  const color = useColorModeValue('inherit', 'ui.white')
   const showToast = useCustomToast()
   const {
     register,
@@ -114,9 +114,7 @@ const ChangePassword: React.FC = () => {
             )}
           </FormControl>
           <Button
-            bg="ui.main"
-            color="white"
-            _hover={{ opacity: 0.8 }}
+            variant="primary"
             mt={4}
             type="submit"
             isLoading={isSubmitting}

frontend/src/components/UserSettings/DeleteConfirmation.tsx

@@ -79,13 +79,7 @@ const DeleteConfirmation: React.FC<DeleteProps> = ({ isOpen, onClose }) => {
             </AlertDialogBody>
 
             <AlertDialogFooter gap={3}>
-              <Button
-                bg="ui.danger"
-                color="white"
-                _hover={{ opacity: 0.8 }}
-                type="submit"
-                isLoading={isSubmitting}
-              >
+              <Button variant="danger" type="submit" isLoading={isSubmitting}>
                 Confirm
               </Button>
               <Button

frontend/src/components/UserSettings/UserInformation.tsx

@@ -21,7 +21,7 @@ import useCustomToast from '../../hooks/useCustomToast'
 
 const UserInformation: React.FC = () => {
   const queryClient = useQueryClient()
-  const color = useColorModeValue('gray.700', 'white')
+  const color = useColorModeValue('inherit', 'ui.white')
   const showToast = useCustomToast()
   const [editMode, setEditMode] = useState(false)
   const { user: currentUser } = useAuth()
@@ -109,7 +109,7 @@ const UserInformation: React.FC = () => {
                     message: 'Invalid email address',
                   },
                 })}
-                type="text"
+                type="email"
                 size="md"
               />
             ) : (
@@ -123,9 +123,7 @@ const UserInformation: React.FC = () => {
           </FormControl>
           <Flex mt={4} gap={3}>
             <Button
-              bg="ui.main"
-              color="white"
-              _hover={{ opacity: 0.8 }}
+              variant="primary"
               onClick={toggleEditMode}
               type={editMode ? 'button' : 'submit'}
               isLoading={editMode ? isSubmitting : false}