ux improvements in course creation

src/lib/components/Course/components/Navigation/index.svelte

@@ -211,16 +211,16 @@
         hideSortIcon: true
       },
       {
-        label: 'Settings',
-        to: getNavItemRoute($course.id, 'settings'),
+        label: 'Landing Page',
+        to: getNavItemRoute($course.id, 'landingpage'),
         hideSortIcon: true,
         show() {
           return !isStudent;
         }
       },
       {
-        label: 'Landing Page',
-        to: getNavItemRoute($course.id, 'landingpage'),
+        label: 'Settings',
+        to: getNavItemRoute($course.id, 'settings'),
         hideSortIcon: true,
         show() {
           return !isStudent;

src/lib/components/Course/components/Settings/index.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { Grid, Row, Column, Toggle } from 'carbon-components-svelte';
+  import { CodeSnippet, Grid, Row, Column, Toggle } from 'carbon-components-svelte';
 
   import SectionTitle from '$lib/components/Org/SectionTitle.svelte';
   import TextField from '$lib/components/Form/TextField.svelte';
@@ -212,7 +212,7 @@
 
   <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
     <Column sm={8} md={8} lg={8}>
-      <SectionTitle>Update course details</SectionTitle>
+      <SectionTitle>Course details</SectionTitle>
     </Column>
 
     <Column sm={8} md={8} lg={8}>
@@ -230,6 +230,18 @@
         bind:value={$settings.course_description}
         errorMessage={errors.description}
       />
+      <div class="">
+        <p class="text-md">Course Link</p>
+        {#if $course.slug}
+          <CodeSnippet
+            wrapText
+            type="multi"
+            code={`https://${$currentOrg.siteName}.classroomio.com/course/${$course.slug}`}
+          />
+        {:else}
+          <CodeSnippet code="Setup landing page to get course link" />
+        {/if}
+      </div>
     </Column>
   </Row>
   <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">

src/lib/components/UploadWidget/index.svelte

@@ -7,6 +7,7 @@
   import Modal from '$lib/components/Modal/index.svelte';
   import { handleOpenWidget } from '$lib/components/CourseLandingPage/store';
   import { queryUnsplash } from './utils';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
 
   export let imageURL = '';
 
@@ -16,6 +17,7 @@
     { label: 'Upload', value: 'upload' }
   ];
 
+  let isUploading = false;
   let currentTab = tabs[0].value;
   let searchQuery = '';
   let unsplashImages: {
@@ -30,7 +32,6 @@
     alt_description: string;
   }[] = [];
   let fileInput: HTMLInputElement;
-  let imagebuffer;
 
   const onChange = (tabValue: string) => () => (currentTab = tabValue);
 
@@ -45,13 +46,13 @@
       let reader = new FileReader();
       reader.readAsDataURL(file);
       reader.onload = (e) => {
-        imagebuffer = file;
         uploadImage(file);
       };
     }
   };
 
   const uploadImage = async (image: File) => {
+    isUploading = true;
     if (!image) {
       return;
     }
@@ -65,6 +66,7 @@
       const { data: response } = await supabase.storage.from('avatars').getPublicUrl(filename);
       imageURL = response.publicUrl;
     }
+    isUploading = false;
 
     snackbar.success(`Complete :)`);
     $handleOpenWidget.open = false;
@@ -104,11 +106,14 @@
               style="display: none;"
               bind:this={fileInput}
               on:change={onFileSelected}
+              disabled={isUploading}
+            />
+            <PrimaryButton
+              label="Upload Image"
+              onClick={handleUpload}
+              isLoading={isUploading}
+              className="w-full font-semibold m-auto"
             />
-            <button
-              on:click={handleUpload}
-              class="py-2 w-full font-semibold hover:bg-gray-200 border-[1px]">Upload Image</button
-            >
             <p class="text-center text-sm text-gray-500 my-2">
               Images wider than 1500 pixels work best.
             </p>