Update styling of resources page

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

@@ -4,13 +4,16 @@ import styles from "./style.module.scss";
 import classNames from "classnames";
 import MyBreadcrumbs from "components/atoms/MyBreadcrumbs";
 
+import graphIllustration from "assets/images/graph-illustration.svg";
 import InputGroup from "react-bootstrap/InputGroup";
 import FormControl from "react-bootstrap/FormControl";
+import Button from "react-bootstrap/Button";
+import Badge from "react-bootstrap/Badge";
 import Card from "react-bootstrap/Card";
 import Row from "react-bootstrap/esm/Row";
 import Col from "react-bootstrap/esm/Col";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faSearch } from "@fortawesome/free-solid-svg-icons";
+import { faInfoCircle, faFile } from "@fortawesome/free-solid-svg-icons";
 
 const ModuleResources: React.FC = () => {
   useEffect(() => {
@@ -21,14 +24,17 @@ const ModuleResources: React.FC = () => {
   return (
     <>
       <MyBreadcrumbs />
-      <InputGroup  style={{ marginTop: "3rem" }}>
-        <InputGroup.Prepend>
-          <InputGroup.Text>
-            <FontAwesomeIcon icon={faSearch} />
-          </InputGroup.Text>
-        </InputGroup.Prepend>
-
-        <FormControl aria-label="Search" placeholder="Search" />
+      <InputGroup>
+        <FormControl
+          className={styles.searchBar}
+          aria-label="Search"
+          placeholder="Search..."
+        />
+        <InputGroup.Append>
+          <Button className={styles.searchBarIcon}>
+            <FontAwesomeIcon size="1x" icon={faInfoCircle} />
+          </Button>
+        </InputGroup.Append>
       </InputGroup>
 
       <h5 className={classNames(styles.moduleSectionHeader)}>Quick Access</h5>
@@ -36,23 +42,41 @@ const ModuleResources: React.FC = () => {
       <Row>
         {[...Array(4)].map((e, i) => (
           <Col xs={6} sm={6} md={3} key={i}>
-            <Card style={{ marginTop: "1rem" }}>
-              <Card.Img variant="top" src="holder.js/100px100" />
+            <Card className={styles.quickViewCard}>
+              <Card.Img variant="top" src={graphIllustration} />
               <Card.Body>
                 <Card.Title>Document {i}</Card.Title>
+                <FontAwesomeIcon
+                  style={{ fontSize: "1.125rem" }}
+                  icon={faFile}
+                />
               </Card.Body>
+              <Card.Footer>
+                <Badge pill className={styles.quickViewTag}>
+                  New
+                </Badge>
+              </Card.Footer>
             </Card>
           </Col>
         ))}
       </Row>
 
-      <h5 className={classNames(styles.moduleSectionHeader)}>Folders</h5>
+      <h5
+        style={{ marginTop: "30px", marginBottom: "10px" }}
+        className={classNames(styles.moduleSectionHeader)}
+      >
+        Folders
+      </h5>
       <Row>
         {[...Array(10)].map((e, i) => (
           <Col xs={6} sm={6} md={3} key={i}>
-            <Card style={{ marginTop: ".6rem" }}>
+            <Card className={styles.folderCard}>
               <Card.Body style={{ padding: ".6rem" }}>
-                <Card.Text>Folder{i}</Card.Text>
+                <Card.Text style={{ marginBottom: 0 }}>Folder {i}</Card.Text>
+                <FontAwesomeIcon
+                  style={{ fontSize: "1.125rem" }}
+                  icon={faFile}
+                />
               </Card.Body>
             </Card>
           </Col>

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

@@ -5,7 +5,117 @@
 }
 
 .moduleParagraph {
-  margin-top: 1rem;	
+  margin-top: 1rem;
+}
+
+.searchBar {
+  border-radius: 8px;
+  background-color: $gray-100;
+  border-color: $gray-100;
+  transition: 0.5s border-color;
+  -webkit-transition: 0.5s border-color;
+  -moz-transition: 0.5s border-color;
+}
+
+.serachBar::placeholder {
+  color: #acb5bd;
+  opacity: 1;
+}
+
+.searchBar:focus {
+  box-shadow: none !important;
+  border-color: $gray-300;
+  background-color: $white;
+}
+
+.searchBarIcon {
+  border-radius: 8px;
+  background-color: $gray-100;
+  border-color: $gray-100;
+  color: $gray-500;
+  transition: 0.2s background;
+  -webkit-transition: 0.2s background;
+  -moz-transition: 0.2s background;
+  margin-left: 1px;
+}
+
+.searchBarIcon:hover {
+  background: $gray-200;
+  color: $gray-700 !important;
+  border-color: $gray-200;
+}
+
+.searchBarIcon:global(.active),
+.searchBarIcon:active {
+  background: $black !important;
+  font-weight: 500 !important;
+  color: $white !important;
+  border-color: $black;
+}
+
+.quickViewCard {
+  margin-top: 20px;
+  border-radius: 8px;
+  border-color: $gray-300;
+  transition: transform 0.2s;
+}
+
+.quickViewCard:hover {
+  transform: scale(1.03);
+}
+
+.quickViewCard :global(.card-body) {
+  padding: 0.5rem;
+  display: flex;
+  justify-content: space-between;
+  border-top: 1px solid $gray-300;
+}
+
+.quickViewCard :global(.card-footer) {
+  border-radius: 0.5rem !important;
+  background: #fff;
+  border-width: 0rem;
+  padding: 0.5rem;
+  display: flex;
+  align-items: flex-end;
+}
+
+.quickViewCard :global(.card-title) {
+  font-size: 18px;
+  font-weight: 400;
+  margin-bottom: 0px;
+}
+
+.quickViewCard :global(.card-img-top) {
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+
+$new-tag-background: transparentize($blue-100, 0.5);
+
+.quickViewTag {
+  text-transform: uppercase;
+  font-size: 14px;
+  font-weight: 500;
+  color: $blue-700;
+  background: $new-tag-background;
+  border-radius: 4px;
+}
+
+.folderCard {
+  border-radius: 8px;
+  transition: transform 0.2s;
+  margin-top: 10px;
+}
+
+.folderCard:hover {
+  transform: scale(1.03);
+}
+
+.folderCard :global(.card-body) {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 @media (max-width: 62rem) {