added a hideUI option to hide buttons. fixed a mess of runtime warnings mostly related to how scss files can be included in each other

1 files changed, 89 insertions, 90 deletions

diff --git a/src/client/views/newlightbox/RecommendationList/RecommendationList.scss b/src/client/views/newlightbox/RecommendationList/RecommendationList.scss
index 40dd47e47..99c935e0c 100644
--- a/src/client/views/newlightbox/RecommendationList/RecommendationList.scss
+++ b/src/client/views/newlightbox/RecommendationList/RecommendationList.scss
@@ -1,4 +1,4 @@
-@import '../NewLightboxStyles.scss';
+@use '../NewLightboxStyles.scss' as newstyles;
 
 .recommendationlist-container {
     height: calc(100% - 40px);
@@ -7,111 +7,110 @@
     overflow-y: scroll;
 
     .recommendations {
-      height: fit-content;
-      padding: 20px;
-      display: flex;
-      flex-direction: column;
-      gap: 20px;
-      background: $gray-l1;
-      border-radius: 0px 0px 20px 20px;
+        height: fit-content;
+        padding: 20px;
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        background: newstyles.$gray-l1;
+        border-radius: 0px 0px 20px 20px;
     }
 
     .header {
-      top: 0px;
-      position: sticky;
-      background: $gray-l1;
-      border-bottom: $standard-border;
-      border-color: $gray-l2;
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      align-items: flex-start;
-      border-radius: 20px 20px 0px 0px;
-      padding: 20px;
-      z-index: 2;
-      gap: 10px;
-      color: $text-color-lm;
-
-      .lb-label {
-        color: $gray-l3;
-        font-weight: $h1-weight;
-        font-size: $body-size;
-      }
-
-      .lb-caret {
+        top: 0px;
+        position: sticky;
+        background: newstyles.$gray-l1;
+        border-bottom: newstyles.$standard-border;
+        border-color: newstyles.$gray-l2;
         display: flex;
-        flex-direction: row;
-        justify-content: flex-end;
-        align-items: center;
-        gap: 5px;
-        cursor: pointer;
-        width: 100%;
-        user-select: none;
-        font-size: $body-size;
-      }
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        border-radius: 20px 20px 0px 0px;
+        padding: 20px;
+        z-index: 2;
+        gap: 10px;
+        color: newstyles.$text-color-lm;
 
-      .more {
-        width: 100%;
-      }
+        .lb-label {
+            color: newstyles.$gray-l3;
+            font-weight: newstyles.$h1-weight;
+            font-size: newstyles.$body-size;
+        }
 
-      &.dark {
-        color: $text-color-dm;
-      }
+        .lb-caret {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-end;
+            align-items: center;
+            gap: 5px;
+            cursor: pointer;
+            width: 100%;
+            user-select: none;
+            font-size: newstyles.$body-size;
+        }
 
-      .title {
-        height: 30px;
-        min-height: 30px;
-        font-size: $h1-size;
-        font-weight: $h1-weight;
-        text-align: left;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        width: 100%;
-      }
+        .more {
+            width: 100%;
+        }
 
-      .keywords {
-        display: flex;
-        flex-flow: row wrap;
-        gap: 5px;
+        &.dark {
+            color: newstyles.$text-color-dm;
+        }
 
-        .keyword-input {
-          padding: 3px 7px;
-          background: $gray-l2;
-          outline: none;
-          border: none;
-          height: 21.5px;
-          color: $text-color-lm;
+        .title {
+            height: 30px;
+            min-height: 30px;
+            font-size: newstyles.$h1-size;
+            font-weight: newstyles.$h1-weight;
+            text-align: left;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 100%;
         }
 
-        .keyword {
-          padding: 3px 7px;
-          width: fit-content;
-          background: $gray-l2;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          flex-direction: row;
-          gap: 10px;
-          font-size: $body-size;
-          font-weight: $body-weight;
+        .keywords {
+            display: flex;
+            flex-flow: row wrap;
+            gap: 5px;
 
-          &.loading {
-            animation: skeleton-loading-l2 1s linear infinite alternate;
-            min-width: 70px;
-            height: 21.5px;
-          }
-        }
+            .keyword-input {
+                padding: 3px 7px;
+                background: newstyles.$gray-l2;
+                outline: none;
+                border: none;
+                height: 21.5px;
+                color: newstyles.$text-color-lm;
+            }
+
+            .keyword {
+                padding: 3px 7px;
+                width: fit-content;
+                background: newstyles.$gray-l2;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                flex-direction: row;
+                gap: 10px;
+                font-size: newstyles.$body-size;
+                font-weight: newstyles.$body-weight;
 
-      }
+                &.loading {
+                    animation: skeleton-loading-l2 1s linear infinite alternate;
+                    min-width: 70px;
+                    height: 21.5px;
+                }
+            }
+        }
     }
-  
+
     &.dark {
-      background: $black;
+        background: newstyles.$black;
     }
-  
+
     &.light,
     &.default {
-      background: $gray-l1;
+        background: newstyles.$gray-l1;
     }
-}
\ No newline at end of file
+}