Move view toggle to be inline with breadcrumb

src/components/atoms/MyBreadcrumbs/style.module.scss

@@ -6,7 +6,6 @@
   text-transform: uppercase;
   font-weight: 500;
   padding: 0rem;
-  margin-bottom: 1.875rem;
 }
 
 .breadcrumbItem * {

src/components/molecules/SelectionView/index.tsx

@@ -141,7 +141,7 @@ class SelectionView extends React.Component<MyProps, MyState> {
           showDownload={this.isAnySelected()}
           onSelectAllClick={() => this.handleSelectAllClick()}
           selectAllIcon={this.isAllSelected() ? faCheckSquare : faSquare}
-          checkBoxColur={this.isAnySelected() ? "#495057" : "#dee2e6"}
+          checkBoxColur={this.isAnySelected() ? "#495057" : "#e9ecef"}
         />
 
         {this.props.render(selection)}

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

+import React from "react";
+import MyBreadcrumbs from "components/atoms/MyBreadcrumbs";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Button from "react-bootstrap/Button";
+import styles from "./style.module.scss";
+import { faBorderAll, faList } from "@fortawesome/free-solid-svg-icons";
+
+export interface TopSectionProps {
+  onViewButtonClick: (event: React.MouseEvent) => void;
+  currentView: string;
+}
+
+const TopSection: React.FC<TopSectionProps> = ({
+  onViewButtonClick,
+  currentView,
+}) => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "space-between",
+				alignItems: "center",
+				marginTop: "-0.375rem"
+      }}
+    >
+      <MyBreadcrumbs />
+      <Button
+        className={styles.viewToggleButton}
+        onClick={onViewButtonClick}
+        variant="secondary"
+      >
+        <FontAwesomeIcon
+          icon={currentView === "folder" ? faBorderAll : faList}
+        />
+      </Button>
+    </div>
+  );
+};
+
+export default TopSection;

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

+@import "assets/scss/custom";
+
+.viewToggleButton {
+  background-color: $white !important;
+	// color: $gray-500 !important;
+	color: $gray-700 !important;
+  border-width: 0px !important;	
+  justify-content: space-between !important;
+	height: 2.25rem !important;
+	box-shadow: none !important;
+	border-radius: .5rem;
+	margin-bottom: 1rem;
+	font-size: 1.05rem;
+	padding-top: 0;
+	padding-bottom: 0;
+}
+
+.viewToggleButton:hover{
+  background-color: $gray-100 !important;
+	color: $gray-700 !important;
+}
+
+.buttonIcon {
+  margin-top: 0.22rem;
+}
\ No newline at end of file

src/components/pages/ModuleResources/index.tsx

 import React from "react";
-import Button from "react-bootstrap/Button";
-
 import { request, download } from "../../../utils/api";
 import { api, methods } from "../../../constants/routes";
-import MyBreadcrumbs from "components/atoms/MyBreadcrumbs";
 import SearchBox from "components/molecules/SearchBox";
 import QuickAccessView from "./components/QuickAccessView";
 import CurrentDirectoryView from "./components/CurrentDirectoryView";
 import FoldersView from "./components/FoldersView";
 import ListView from "./components/ListView";
+import TopSection from "./components/TopSection";
 
 export interface Resource {
   title: string;
@@ -85,33 +83,24 @@ class ModuleResources extends React.Component<ResourcesProps, ResourceState> {
       let filename = this.state.resources.filter(
         (document) => document.id === indices[0]
       )[0].title;
-      download(
-        api.MATERIALS_RESOURCES_FILE(indices[0]),
-        methods.GET,
-        filename
-      );
+      download(api.MATERIALS_RESOURCES_FILE(indices[0]), methods.GET, filename);
     } else {
       // Multiple files to download, call zipped selection endpoint
-      download(
-        api.MATERIALS_ZIPPED_SELECTION,
-        methods.GET,
-        "materials.zip",
-        {
-          ids: indices,
-          course: this.moduleCode,
-          year: this.props.year
-        }
-      );
+      download(api.MATERIALS_ZIPPED_SELECTION, methods.GET, "materials.zip", {
+        ids: indices,
+        course: this.moduleCode,
+        year: this.props.year,
+      });
     }
   }
 
   handleSectionDownload(category: string) {
-		download(api.MATERIALS_ZIPPED, methods.GET, category + ".zip", {
-			year: this.props.year,
-			course: this.moduleCode,
-			category: category,
-		})
-	}
+    download(api.MATERIALS_ZIPPED, methods.GET, category + ".zip", {
+      year: this.props.year,
+      course: this.moduleCode,
+      category: category,
+    });
+  }
 
   handleFileClick(id: number) {
     const onSuccess = (data: any) => {
@@ -195,65 +184,63 @@ class ModuleResources extends React.Component<ResourcesProps, ResourceState> {
     }));
 
     const view = () => {
-      switch(this.state.view) {
-        case "folder": return (
-          <>
-            <FoldersView
-              folders={folders}
-              scope={scope}
-              searchText={this.state.searchText}
-            />
-
-            <CurrentDirectoryView
-              resources={this.state.resources}
-              scope={scope}
-              searchText={this.state.searchText}
-              onDownloadClick={(ids) => this.handleFileDownload(ids)}
-              onItemClick={(id) => this.handleFileClick(id)}
-              includeInSearchResult={this.includeInSearchResult}
-            />
-
-            <QuickAccessView
-              resources={this.state.resources}
-              scope={scope}
-              searchText={this.state.searchText}
-              onDownloadClick={(ids) => this.handleFileDownload(ids)}
-              onItemClick={(id) => this.handleFileClick(id)}
-            />
-          </>
-        );
-        case "list": return (
-          <>
-            <ListView
-              folders={folders}
-              resources={this.state.resources}
-              searchText={this.state.searchText}
-              onDownloadClick={(ids) => this.handleFileDownload(ids)}
-              onSectionDownloadClick={(category) => this.handleSectionDownload(category)}
-              onItemClick={(id) => this.handleFileClick(id)}
-              includeInSearchResult={this.includeInSearchResult}
-            />
-          </>
-        );
+      switch (this.state.view) {
+        case "folder":
+          return (
+            <>
+              <FoldersView
+                folders={folders}
+                scope={scope}
+                searchText={this.state.searchText}
+              />
+
+              <CurrentDirectoryView
+                resources={this.state.resources}
+                scope={scope}
+                searchText={this.state.searchText}
+                onDownloadClick={(ids) => this.handleFileDownload(ids)}
+                onItemClick={(id) => this.handleFileClick(id)}
+                includeInSearchResult={this.includeInSearchResult}
+              />
+
+              <QuickAccessView
+                resources={this.state.resources}
+                scope={scope}
+                searchText={this.state.searchText}
+                onDownloadClick={(ids) => this.handleFileDownload(ids)}
+                onItemClick={(id) => this.handleFileClick(id)}
+              />
+            </>
+          );
+        case "list":
+          return (
+            <>
+              <ListView
+                folders={folders}
+                resources={this.state.resources}
+                searchText={this.state.searchText}
+                onDownloadClick={(ids) => this.handleFileDownload(ids)}
+                onSectionDownloadClick={(category) =>
+                  this.handleSectionDownload(category)
+                }
+                onItemClick={(id) => this.handleFileClick(id)}
+                includeInSearchResult={this.includeInSearchResult}
+              />
+            </>
+          );
       }
-    }
+    };
     return (
       <>
-        <MyBreadcrumbs />
+        <TopSection
+          onViewButtonClick={() => this.toggleView()}
+          currentView={this.state.view}
+        />
         <SearchBox
           searchText={this.state.searchText}
           onSearchTextChange={(text) => this.setState({ searchText: text })}
         />
-        {this.getloadedItems() || (
-          <>
-            { view() }
-            <Button
-              variant="secondary"
-              className="mt-5"
-              onClick={this.state.isLoaded ? () => this.toggleView() : undefined}
-            >Toggle view</Button>
-          </>
-        )}
+        {this.getloadedItems() || view()}
       </>
     );
   }