From 984a3d5e07461aba33fd4f0579b41c610d04a0e3 Mon Sep 17 00:00:00 2001
From: rotimi-best <best@classroomio.com>
Date: Fri, 17 Sep 2021 07:48:26 +0300
Subject: [PATCH] CLASSROOMIO-T-3: Mobile improvments

---
 .../Course/components/Navigation/index.svelte | 19 +++++----
 src/components/Snackbar/index.svelte          | 42 ++++++++++---------
 src/routes/courses/[id]/people.svelte         |  8 ++--
 src/routes/courses/[id]/submissions.svelte    |  5 ++-
 src/routes/login.svelte                       |  2 +-
 5 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/src/components/Course/components/Navigation/index.svelte b/src/components/Course/components/Navigation/index.svelte
index 4c771751..69ef3262 100644
--- a/src/components/Course/components/Navigation/index.svelte
+++ b/src/components/Course/components/Navigation/index.svelte
@@ -204,7 +204,6 @@
           value="toggle"
           onClick={() => goto('/courses')}
           buttonClassName="mx-3"
-          size={$isMobile ? 'large' : 'small'}
         >
           <Home32 class="carbon-icon" />
         </IconButton>
@@ -218,12 +217,14 @@
     <IconButton
       value="toggle"
       onClick={() => (show = !show)}
-      size="small"
-      toolTipProps={{
-        title: 'Toggle sidebar',
-        hotkeys: ['B'],
-        direction: 'right',
-      }}
+      size={$isMobile ? 'large' : 'small'}
+      toolTipProps={$isMobile
+        ? {}
+        : {
+            title: 'Toggle sidebar',
+            hotkeys: ['B'],
+            direction: 'right',
+          }}
     >
       {#if show}
         <ChevronLeft16 class="carbon-icon" />
@@ -279,7 +280,7 @@
 
   .navItems {
     height: 82%;
-    overflow-y: scroll;
+    overflow-y: auto;
   }
 
   .toggler {
@@ -293,7 +294,7 @@
 
   @media (max-width: 760px) {
     .root {
-      width: 95%;
+      width: 98%;
       min-width: unset;
       max-width: unset;
     }
diff --git a/src/components/Snackbar/index.svelte b/src/components/Snackbar/index.svelte
index 1afe4015..2bb02462 100644
--- a/src/components/Snackbar/index.svelte
+++ b/src/components/Snackbar/index.svelte
@@ -36,32 +36,34 @@
 </script>
 
 {#if $snackbarStore.open}
-  <div
-    transition:fly={{ y: 200, duration: 500 }}
-    class="root text-white rounded-md flex justify-between items-center absolute {severityColor}"
-  >
-    <div class="flex items-center">
-      {#if $snackbarStore.severity === SNACKBAR_SEVERITY.SUCCESS}
-        <CheckmarkOutline24 class="carbon-icon" />
-      {:else if $snackbarStore.severity === SNACKBAR_SEVERITY.WARNING}
-        <Warning24 class="carbon-icon" />
-      {:else}
-        <Information24 class="carbon-icon" />
-      {/if}
-      <p class="ml-2 text-lg">{$snackbarStore.message}</p>
-    </div>
+  {#key $snackbarStore.message}
+    <div
+      transition:fly={{ x: 200, duration: 500 }}
+      class="root text-white rounded-md flex justify-between items-center absolute {severityColor}"
+    >
+      <div class="flex items-center">
+        {#if $snackbarStore.severity === SNACKBAR_SEVERITY.SUCCESS}
+          <CheckmarkOutline24 class="carbon-icon" />
+        {:else if $snackbarStore.severity === SNACKBAR_SEVERITY.WARNING}
+          <Warning24 class="carbon-icon" />
+        {:else}
+          <Information24 class="carbon-icon" />
+        {/if}
+        <p class="ml-2 text-lg">{$snackbarStore.message}</p>
+      </div>
 
-    <CloseButton onClick={handleClose} contained={true} color="text-white" />
-  </div>
+      <CloseButton onClick={handleClose} contained={true} color="text-white" />
+    </div>
+  {/key}
 {/if}
 
 <style>
   .root {
     font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-    left: 50%;
-    right: auto;
-    bottom: 24px;
-    transform: translateX(-50%);
+    right: 5%;
+    left: auto;
+    top: 24px;
+    transform: translateX(-5%);
     min-width: 288px;
     padding: 6px 16px;
     flex-wrap: wrap;
diff --git a/src/routes/courses/[id]/people.svelte b/src/routes/courses/[id]/people.svelte
index f9bf4ed9..6b1bb28d 100644
--- a/src/routes/courses/[id]/people.svelte
+++ b/src/routes/courses/[id]/people.svelte
@@ -141,7 +141,7 @@
         <p class="text-lg w-2/4">Name</p>
         <p class="text-lg w-1/4 ">Role</p>
         <RoleBasedSecurity allowedRoles={[1, 2]}>
-          <p class="text-lg w-20" />
+          <p class="hidden lg:block text-lg w-20" />
         </RoleBasedSecurity>
       </div>
 
@@ -149,7 +149,7 @@
         <div class="flex relative items-center p-3 {borderBottomGrey}">
           {#if !shouldEditMemberId}
             <p
-              class="mr-2 w-20 text-center {!isStudent &&
+              class="mr-2 w-10 text-center {!isStudent &&
                 'hover:bg-gray-100 cursor-pointer'} p-3"
               on:click={() => !isStudent && handleEditStudentIdMode()}
             >
@@ -160,7 +160,7 @@
               bind:value={person.assigned_student_id}
               type="string"
               placeholder="Unique ID"
-              className="w-24"
+              className="w-20"
               onChange={() => editMemberId(person)}
             />
           {/if}
@@ -199,7 +199,7 @@
           <p class="text-lg w-1/4 ">{ROLE_LABEL[person.role_id]}</p>
 
           <RoleBasedSecurity allowedRoles={[1, 2]}>
-            <div class="w-20">
+            <div class="hidden lg:block w-20">
               {#if person.profile_id !== $profile.id}
                 <IconButton
                   onClick={() => {
diff --git a/src/routes/courses/[id]/submissions.svelte b/src/routes/courses/[id]/submissions.svelte
index d0e96eb1..2cc58b8e 100644
--- a/src/routes/courses/[id]/submissions.svelte
+++ b/src/routes/courses/[id]/submissions.svelte
@@ -24,6 +24,7 @@
   } from '../../../utils/services/submissions';
   import { formatAnswers } from '../../../components/Course/function';
   import { snackbarStore } from '../../../components/Snackbar/store';
+  import { SNACKBAR_SEVERITY } from '../../../components/Snackbar/constants';
 
   const flipDurationMs = 300;
 
@@ -168,9 +169,11 @@
       { returning: 'minimal' }
     ).then((res) => console.log('Updated submission', res));
 
-    await Promise.all(updates);
     $snackbarStore.open = true;
     $snackbarStore.message = `Saved successfully`;
+    $snackbarStore.severity = SNACKBAR_SEVERITY.SUCCESS;
+
+    await Promise.all(updates);
   }
 
   onMount(async () => {
diff --git a/src/routes/login.svelte b/src/routes/login.svelte
index 4d4a372d..86863fc2 100644
--- a/src/routes/login.svelte
+++ b/src/routes/login.svelte
@@ -78,7 +78,7 @@
           <div class="h-40 text-md flex items-center justify-center flex-col">
             <p class="">
               A link has been sent to your email. Please check both your
-              <strong>spam </strong>and your<strong> inbox</strong>.
+              <strong>spam </strong>and your<strong>&nbsp; inbox</strong>.
             </p>
             <p class="mt-2 underline">
               If our email is in your spam, do make sure you mark our email