Fix scaling of quick view cards on smaller devices

frontend/src/components/pages/ModuleResources/index.tsx

@@ -41,7 +41,7 @@ const ModuleResources: React.FC = () => {
 
       <Row>
         {[...Array(4)].map((e, i) => (
-          <Col xs={6} sm={6} md={3} key={i}>
+          <Col xs={12} sm={6} md={6} lg={4} xl={3} key={i}>
             <Card className={styles.quickViewCard}>
               <Card.Img variant="top" src={graphIllustration} />
               <Card.Body>
@@ -52,9 +52,12 @@ const ModuleResources: React.FC = () => {
                 />
               </Card.Body>
               <Card.Footer>
-                <Badge pill className={styles.quickViewTag}>
+                <Badge pill className={classNames(styles.quickViewTag, styles.tagTeal)}>
                   New
                 </Badge>
+                <Badge pill className={classNames(styles.quickViewTag, styles.tagBlue)}>
+                  Week 1
+                </Badge>
               </Card.Footer>
             </Card>
           </Col>

frontend/src/components/pages/ModuleResources/style.module.scss

@@ -12,9 +12,9 @@
   border-radius: 8px;
   background-color: $gray-100;
 	border-color: $gray-100;
-	transition: 0s all;
-  -webkit-transition: 0s all;
-  -moz-transition: 0s all;
+	transition: 0.2s background-color;
+  -webkit-transition: 0.2s background-color;
+  -moz-transition: 0.2s back-ground-color;
 }
 
 .serachBar::placeholder {
@@ -42,10 +42,9 @@
   background-color: $gray-100;
   border-color: $gray-100;
   color: $gray-500;
-  transition: 0s all;
-  -webkit-transition: 0s all;
-  -moz-transition: 0s all;
-  margin-left: 1px;
+  transition: 0.2s background-color;
+  -webkit-transition: 0.2s background-color;
+  -moz-transition: 0.2s back-ground-color;
 }
 
 
@@ -78,6 +77,7 @@
   padding: 0.5rem;
   display: flex;
   justify-content: space-between;
+  align-items: center;
   border-top: 1px solid $gray-300;
 }
 
@@ -101,15 +101,25 @@
   border-top-right-radius: 8px;
 }
 
-$new-tag-background: transparentize($blue-100, 0.5);
+$blue-tag-background: transparentize($blue-100, 0.5);
+$teal-tag-background: transparentize($teal-100, 0.5);
 
 .quickViewTag {
   text-transform: uppercase;
   font-size: 14px;
   font-weight: 500;
-  color: $blue-700;
-  background: $new-tag-background;
   border-radius: 4px;
+  margin-right: 8px;
+}
+
+.tagBlue {
+  color: $blue-700;
+  background: $blue-tag-background;
+}
+
+.tagTeal {
+  color: $teal-700;
+  background: $teal-tag-background;
 }
 
 .folderCard {