feat: ✨ feat(settings-page-improvements): Enhance UI components on se…

…ttings page

Description:
This commit introduces enhancements to the user interface components on the settings page. The changes are part of the ongoing work on the `settings-page-improvements` branch.
- In `app/(protected)/_components/navbar.tsx`, `app/(protected)/settings/page.tsx`, and `components/client-only.tsx`, updates have been made to handle the UI enhancements.

Changes:
- Update `app/(protected)/_components/navbar.tsx` to modify the text and hover colors
- Update `app/(protected)/settings/page.tsx` and `components/client-only.tsx` for functionality updates

This commit doesn't introduce any breaking changes. The updates are compatible with the existing codebase.
Co-authored-by: Ricardo Esteves <[email protected]>

app/(protected)/_components/navbar.tsx

@@ -37,7 +37,7 @@ const Navbar = () => {
               asChild
               variant="secondary"
               size="sm"
-              className="w-full text-background hover:text-sky-400"
+              className="w-full text-sky-400 hover:text-background"
             >
               <MdMenu />
             </Button>

app/(protected)/settings/page.tsx

@@ -8,6 +8,8 @@ import { useSession } from "next-auth/react";
 import { RiUserSettingsLine } from "react-icons/ri";
 
 import { useCurrentUser } from "@/hooks/use-current-user";
+import { useIsClient } from "@/hooks/use-is-client";
+import Spinner from "@/components/spinner";
 import { SettingsSchema } from "@/schemas";
 import { settings } from "@/actions/settings";
 import { Card, CardHeader, CardContent } from "@/components/ui/card";
@@ -45,6 +47,8 @@ export default function SettingsPage() {
 
   const [isPending, startTransition] = useTransition();
 
+  const isClient = useIsClient();
+
   const form = useForm<z.infer<typeof SettingsSchema>>({
     resolver: zodResolver(SettingsSchema),
     defaultValues: {
@@ -75,12 +79,15 @@ export default function SettingsPage() {
     } catch (error) {
       setError("Something went wrong!");
     } finally {
-      form.reset();
-      setError("");
-      setSuccess("");
+      // TODO: Check if needed
+      // form.reset();
+      // setError("");
+      // setSuccess("");
     }
   };
 
+  if (!isClient) return <Spinner />;
+
   return (
     <Card className="w-auto shadow-sm">
       <CardHeader className="flex-row items-center justify-center font-semibold gap-x-3">
@@ -113,6 +120,7 @@ export default function SettingsPage() {
                   </FormItem>
                 )}
               />
+
               {user?.isOAuth === false && (
                 <>
                   <FormField
@@ -195,6 +203,7 @@ export default function SettingsPage() {
                   />
                 </>
               )}
+
               <FormField
                 control={form.control}
                 name="role"
@@ -220,6 +229,7 @@ export default function SettingsPage() {
                   </FormItem>
                 )}
               />
+
               {user?.isOAuth === false && (
                 <FormField
                   control={form.control}
@@ -234,11 +244,13 @@ export default function SettingsPage() {
                       </div>
                       <FormControl>
                         <Switch
+                          value={field.name}
                           disabled={isPending}
                           checked={field.value}
                           onCheckedChange={field.onChange}
                         />
                       </FormControl>
+                      <FormMessage />
                     </FormItem>
                   )}
                 />

components/client-only.tsx

@@ -1,7 +1,8 @@
 import { useIsClient } from "@/hooks/use-is-client";
+import Spinner from "./spinner";
 
 export function ClientOnly({ children }: { children: React.ReactNode }) {
   const isClient = useIsClient();
 
-  return isClient ? <>{children}</> : null;
+  return isClient ? <>{children}</> : <Spinner />;
 }