CLASSROOMIO-T-97: Course UI improvement 😁😁😁

src/lib/components/Org/Settings/Profile.svelte

@@ -26,23 +26,19 @@
 
       const updates = {
         fullname: $profile.fullname,
-        username: $profile.username,
+        username: $profile.username
       };
 
       if (avatar) {
         const filename = `user/${$profile.username + Date.now()}.webp`;
 
-        const { data } = await supabase.storage
-          .from('avatars')
-          .upload(filename, avatar, {
-            cacheControl: '3600',
-            upsert: false,
-          });
+        const { data } = await supabase.storage.from('avatars').upload(filename, avatar, {
+          cacheControl: '3600',
+          upsert: false
+        });
 
         if (data && data.Key) {
-          const { publicURL } = supabase.storage
-            .from('avatars')
-            .getPublicUrl(filename);
+          const { publicURL } = supabase.storage.from('avatars').getPublicUrl(filename);
 
           updates.avatar_url = publicURL;
           $profile.avatar_url = publicURL;
@@ -50,14 +46,11 @@
         avatar = undefined;
       }
 
-      let { error } = await supabase
-        .from('profile')
-        .update(updates)
-        .match({ id: $profile.id });
+      let { error } = await supabase.from('profile').update(updates).match({ id: $profile.id });
 
       profile.update((_profile) => ({
         ..._profile,
-        ...updates,
+        ...updates
       }));
       $snackbarStore.open = true;
       $snackbarStore.message = 'Update successful';
@@ -85,11 +78,7 @@
       <SectionTitle>Profile Picture</SectionTitle>
     </Column>
     <Column sm={2} md={6} lg={8}>
-      <UploadImage
-        bind:avatar
-        src={$profile.avatar_url}
-        widthHeight="w-24 h-24"
-      />
+      <UploadImage bind:avatar src={$profile.avatar_url} widthHeight="w-24 h-24" />
     </Column>
   </Row>
   <Row class="py-7 border-bottom-c">
@@ -97,36 +86,19 @@
       <SectionTitle>Personal Information</SectionTitle>
     </Column>
     <Column sm={2} md={6} lg={8}>
-      <TextField
-        label="Full Name"
-        bind:value={$profile.fullname}
-        className="w-60 mb-4"
-      />
-      <TextField
-        label="Username"
-        bind:value={$profile.username}
-        className="w-60 mb-4"
-      />
-      <TextField
-        label="Email"
-        bind:value={$profile.email}
-        className="w-60 mb-4"
-      />
+      <TextField label="Full Name" bind:value={$profile.fullname} className="w-60 mb-4" />
+      <TextField label="Username" bind:value={$profile.username} className="w-60 mb-4" />
+      <TextField label="Email" bind:value={$profile.email} className="w-60 mb-4" />
     </Column>
   </Row>
   <Row class="m-5 w-full flex items-center justify-center">
     <PrimaryButton
       label="Update Profile"
-      className="px-6 py-3 mr-5"
+      className="mr-5"
       isLoading={loading}
       isDisabled={loading}
       onClick={handleUpdate}
     />
-    <PrimaryButton
-      className="px-6 py-3"
-      variant={VARIANTS.CONTAINED_DANGER}
-      label="Log out"
-      onClick={logout}
-    />
+    <PrimaryButton variant={VARIANTS.CONTAINED_DANGER} label="Log out" onClick={logout} />
   </Row>
 </Grid>