Use modern SCSS package and syntax

package.json

@@ -62,7 +62,7 @@
     "@types/react-redux": "^7.1.24",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-vertical-timeline-component": "^3.3.3",
-    "node-sass": "^7.0.1",
+    "sass": "^1.62.1",
     "typescript": "^4.7.3"
   }
 }

src/pages/catalogue/catalogueListContainer.tsx

@@ -65,7 +65,7 @@ export const CatalogueListContainerUnconnected: React.FC<IProps> = (props: IProp
         return newDisplayItems;
     }
 
-    const displayItems = getDisplayItems(items, searchTerm);
+    const displayItems = getDisplayItems(items, searchTerm.trim());
     return (
         <CatalogueListPresenter
             {...props}

src/scss/custom/_community.scss

@@ -102,7 +102,7 @@ $community-search-icon-border-radius: 5px;
 
         .community-icon {
             img {
-                border-top-left-radius: $community-search-icon-border-radius;
+				border-top-left-radius: $community-search-icon-border-radius;
             }
         }
     }

src/scss/custom/_expedition.scss

@@ -61,7 +61,6 @@
             opacity: 1;
             transition: opacity 250ms ease-in-out;
             display: flex;
-            width: 100%;
 
             .text-container {
                 overflow: hidden;

src/scss/custom/_fab.scss

@@ -1,13 +1,11 @@
-.mdc-fab:not(.mdc-fab--extended) {
-    border-radius: 50%;
-}
 .fab-margin {
     margin: 0.5em;
 }
 
 .mdc-fab {
     fill: currentColor;
     align-items: center;
+    appearance: none;
     -moz-appearance: none;
     -webkit-appearance: none;
     border: none;
@@ -32,29 +30,30 @@
     -ms-user-select: none;
     user-select: none;
     width: 56px;
-}
 
-.mdc-fab:after,
-.mdc-fab:before {
-    height: 200%;
-    left: -50%;
-    top: -50%;
-    width: 200%;
-}
+    &::after,
+    &::before {
+        height: 200%;
+        left: -50%;
+        top: -50%;
+        width: 200%;
+        border-radius: 50%;
+        content: "";
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+    }
 
-.mdc-fab:before {
-    transition: opacity 15ms linear, background-color 15ms linear;
-    z-index: 1;
-}
-.mdc-fab:after,
-.mdc-fab:before {
-    border-radius: 50%;
-    content: "";
-    opacity: 0;
-    pointer-events: none;
-    position: absolute;
-}
+    &::before {
+        transition: opacity 15ms linear, background-color 15ms linear;
+        z-index: 1;
+    }
 
-.mdc-fab:focus {
-    outline: unset;
-}
+    &:focus {
+        outline: unset;
+    }
+
+    &:not(.mdc-fab--extended) {
+        border-radius: 50%;
+    }
+}

src/scss/custom/_general.scss

@@ -52,6 +52,10 @@ body {
 #app .main-panel #navbar.navbar {
     max-height: 80px;
 
+    @media screen and (min-width: 500px) and (max-width: 991px) {
+        padding-top: 0 !important;
+    }
+
     .navbar-toggler .icon-bar {
         background-color: white;
     }
@@ -307,12 +311,6 @@ img.tiny {
     padding-right: 0.5em;
 }
 
-#app .main-panel #navbar.navbar {
-    @media screen and (min-width: 500px) and (max-width: 991px) {
-        padding-top: 0 !important;
-    }
-}
-
 .colour-swatch {
     display: inline-block;
     height: 2em;