Improve styling on Manage Tests

Author: jacbn

src/app/components/elements/layout/SidebarLayout.tsx

@@ -645,7 +645,7 @@ export const SetQuizzesSidebar = (props: SetQuizzesSidebarProps) => {
     return <ContentSidebar buttonTitle="Search & Filter">
         {above["lg"](deviceSize) && <div className="section-divider mt-5"/>}
         <h5>Search &amp; Filter</h5>
-        <span className="quiz-filter-date-span">Title</span>
+        <span className="quiz-filter-date-span mt-2">Title</span>
         <Input
             id="available-quizzes-title-filter" type="search"
             value={titleFilter} onChange={event => setTitleFilter(event.target.value)}
@@ -741,4 +741,4 @@ export const ManageQuizzesSidebar = (props: ManageQuizzesSidebarProps) => {
         {setDateFilterInput}
         {dueDateFilterInput}
     </ContentSidebar>;
-};
+};

src/app/components/pages/quizzes/SetQuizzes.tsx

@@ -216,7 +216,7 @@ function QuizAssignment({assignedGroups, index}: QuizAssignmentProps) {
 
         </tr>
         {isExpanded && <tr>
-            <td colSpan={4} className={classNames("bg-white border-0", {"px-2 pb-2": isPhy})}>
+            <td colSpan={siteSpecific(5, 4)} className={classNames("bg-white border-0", {"px-2 pb-2": isPhy})}>
                 <Table striped className="w-100 set-quiz-table-inner mb-1">
                     <thead>
                         <tr>
@@ -252,8 +252,8 @@ function QuizAssignment({assignedGroups, index}: QuizAssignmentProps) {
                                     </td>
                                 }
                                 <td className={isPhy ? "text-end" : "text-center"}>
-                                    <Button tag={Link} size="sm" to={`/test/assignment/${assignedGroup.assignment.id}/feedback`} disabled={isCancelling} color="tertiary" className={`px-1 bg-transparent text-center ${below["md"](deviceSize) ? "btn-collapsed" : "btn-full"}`}>
-                                        View {assignmentNotYetStarted ? siteSpecific("Details", "details") : siteSpecific("Results", "results")}
+                                    <Button tag={Link} size="sm" to={`/test/assignment/${assignedGroup.assignment.id}/feedback`} disabled={isCancelling} color="tertiary" className={classNames(`px-2 text-center ${below["md"](deviceSize) ? "btn-collapsed" : "btn-full"}`, {"bg-transparent": isAda})}>
+                                        View {assignmentNotYetStarted ? "details" : "results"}
                                     </Button>
                                 </td>
 

src/scss/common/quiz.scss

@@ -169,9 +169,10 @@
     content: "";
     background-image: url('/assets/common/icons/chevron_down.svg');
     background-repeat: no-repeat;
-    background-position: center;
+    background-position: left center;
     width: 20px;
     height: 10px;
+    min-width: 1rem;
     margin-right: 1rem;
     margin-top: auto;
     margin-bottom: auto;
@@ -181,12 +182,8 @@
     }
   }
 
-  button {
-    min-width: 150px !important;
-  
-    &.btn-sm {
-      min-width: 100px !important;
-    }
+  button.btn.btn {
+    min-width: max-content;
   }
 }
 

src/scss/cs/quiz.scss

@@ -21,3 +21,13 @@
         margin-top: -10px;
     }
 }
+
+.set-quiz-table-dropdown {
+    button {
+        min-width: 150px !important;
+      
+        &.btn-sm {
+          min-width: 100px !important;
+        }
+      }
+}

src/scss/phy/button.scss

@@ -82,7 +82,7 @@
   color: var(--buttons-light-text);
 
   &:hover, &.btn-dropdown.active {
-    background: var(--buttons-light-hover);
+    background-color: var(--buttons-light-hover);
     color: var(--buttons-dark-text);
     text-decoration: none;
   }

src/scss/phy/color-theme.scss

@@ -70,6 +70,7 @@
       --buttons-dark-prefix: #{$color-neutral-200};
       --buttons-keyline-border: #{$color-neutral-700};
       --buttons-keyline-white-hover: #{$color-brand-700};
+      --buttons-light-hover: #{$color-brand-500};
       --buttons-light-hover-prefix: #{$color-neutral-200};
 
       --nav-primary: #{$color-brand-500};

src/scss/phy/quiz.scss

@@ -6,6 +6,7 @@
 }
 
 .set-quiz-table-inner {
+  table-layout: auto;
   background-color: white;
   color: black;
   border: 1px solid $color-neutral-200;
@@ -23,4 +24,4 @@
   font-size: 1.25rem;
   font-family: $secondary-font-medium;
   font-weight: bold;
-}
+}