several user QoL styling improvements, incl. footer icon .active color painting

src/functional_tests/base.py

@@ -37,9 +37,12 @@ class FunctionalTest(StaticLiveServerTestCase):
     # Helper methods
     def setUp(self):
         options = webdriver.FirefoxOptions()
-        if os.environ.get("HEADLESS"):
+        headless = os.environ.get("HEADLESS")
+        if headless:
             options.add_argument("--headless")
         self.browser = webdriver.Firefox(options=options)
+        if headless:
+            self.browser.set_window_size(1366, 900)
         self.test_server = os.environ.get("TEST_SERVER")
         if self.test_server:
             self.live_server_url = 'http://' + self.test_server

src/functional_tests/test_gameboard.py

@@ -56,6 +56,7 @@ class GameboardNavigationTest(FunctionalTest):
         self.browser.find_element(By.CSS_SELECTOR, ".gear-btn")
         # 3. Assert Coin-on-a-String present in kit
         coin = self.browser.find_element(By.ID, "id_kit_coin_on_a_string")
+        self.browser.execute_script("arguments[0].scrollIntoView({block: 'center'});", coin)
         # 6. Hover over it; assert tooltip shows name, entry text & reuse description
         ActionChains(self.browser).move_to_element(coin).perform()
         self.wait_for(

src/static_src/scss/_applets.scss

@@ -24,9 +24,9 @@
     right: 0.5rem;
     z-index: 100;
     background-color: rgba(var(--priUser), 0.95);
-    border: 0.15rem solid rgba(var(--secUser), 0.5);
+    border: 0.15rem solid rgba(var(--secUser), 1);
     box-shadow:
-        0.1rem 0.1rem 0.12rem rgba(var(--priUser), 0.5),
+        0 0 0.5rem rgba(var(--secUser), 0.75),
         0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.25),
     ;
     border-radius: 0.75rem;

src/static_src/scss/_base.scss

@@ -175,11 +175,18 @@ body {
 
         a {
             font-size: 1.75rem;
-            color: rgba(var(--quaUser), 0.9);
+            color: rgba(var(--secUser), 0.6);
             text-shadow:
-                0 0 0.25rem rgba(0, 0, 0, 0.5),
+                0 0 0.25rem rgba(0, 0, 0, 0.25),
             ;
             
+            &.active {
+                color: rgba(var(--quaUser), 1);
+                text-shadow:
+                    0 0 0.5rem rgba(0, 0, 0, 0.5),
+                ;
+            }
+            
             &:hover {
                 color: rgba(var(--quaUser), 1);
                 text-shadow:

src/static_src/scss/_gameboard.scss

@@ -45,16 +45,51 @@ body.page-gameboard {
     #id_applet_game_kit {
         display: flex;
         flex-direction: column;
+        overflow: visible;
 
         #id_game_kit {
             flex: 1;
             display: flex;
             flex-direction: row;
             align-items: center;
-            gap: 0.75rem;
+            justify-content: space-evenly;
-            overflow-x: auto;
+            overflow-x: visible;
             scrollbar-width: none;
             &::-webkit-scrollbar { display: none; }
+
+            .token-tooltip {
+                z-index: 1000;
+            }
+
+            .token,
+            .kit-item {
+                font-size: 1.5rem;
+            }
+
+            .kit-item {
+                opacity: 0.6;
+            }
+        }
+    }
+}
+
+#id_applet_new_game,
+#id_applet_my_games {
+    display: flex;
+    flex-direction: column;
+
+    ul {
+        flex: 1;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        small {
+            opacity: 0.5;
+            font-style: italic;
         }
     }
 }

src/static_src/scss/_wallet-tokens.scss

@@ -1,7 +1,7 @@
 .token {
     position: relative;
     display: inline-block;
-    cursor: pointer;
+    cursor: help;
     color: rgba(var(--terUser), 1);
 
     .token-tooltip {

src/templates/core/_partials/_footer.html

@@ -1,7 +1,11 @@
 <footer id="id_footer">
     <nav id="id_footer_nav">
-        <a href="/"><i class="fa-solid fa-gauge"></i></a>
+        <a href="/" class="{% if request.path == '/' or '/dashboard/' in request.path %}active{% endif %}">
-        <a href="/gameboard/"><i class="fa-solid fa-chess-board"></i></a>
+            <i class="fa-solid fa-gauge"></i>
+        </a>
+        <a href="/gameboard/" class="{% if '/gameboard/' in request.path %}active{% endif %}">
+            <i class="fa-solid fa-chess-board"></i>
+        </a>
     </nav>
     <div class="footer-container">
         <small>&copy;{% now "Y" %} Dis Co.</small>