From 94279e8f7c19b77eff456cbf7898d37e727f7f66 Mon Sep 17 00:00:00 2001
From: conor <conormurphyx@gmail.com>
Date: Tue, 27 Feb 2024 15:33:26 -0800
Subject: [PATCH]  * fix annoying importing problems with bootstrap-icons  *
 add more color variable and color map overrides since bootstrap added them  *
 fix small about portal target having a style class on it

---
 .idea/codeStyles/Project.xml          |  8 +--
 client/package.json                   |  2 +-
 client/src/App.vue                    |  4 +-
 client/src/main.ts                    |  2 +-
 client/src/styles/_min-bootstrap.scss |  2 +-
 client/src/styles/_variables.scss     | 90 ++++++++++++++++++++++++---
 package-lock.json                     |  2 +-
 7 files changed, 92 insertions(+), 18 deletions(-)

diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml
index df209e9..544d23d 100644
--- a/.idea/codeStyles/Project.xml
+++ b/.idea/codeStyles/Project.xml
@@ -27,7 +27,7 @@
       <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
     </VueCodeStyleSettings>
     <codeStyleSettings language="HTML">
-      <option name="SOFT_MARGINS" value="80" />
+      <option name="SOFT_MARGINS" value="120" />
       <indentOptions>
         <option name="INDENT_SIZE" value="2" />
         <option name="CONTINUATION_INDENT_SIZE" value="2" />
@@ -35,7 +35,7 @@
       </indentOptions>
     </codeStyleSettings>
     <codeStyleSettings language="JavaScript">
-      <option name="SOFT_MARGINS" value="80" />
+      <option name="SOFT_MARGINS" value="120" />
       <indentOptions>
         <option name="INDENT_SIZE" value="2" />
         <option name="CONTINUATION_INDENT_SIZE" value="2" />
@@ -43,7 +43,7 @@
       </indentOptions>
     </codeStyleSettings>
     <codeStyleSettings language="TypeScript">
-      <option name="SOFT_MARGINS" value="80" />
+      <option name="SOFT_MARGINS" value="120" />
       <indentOptions>
         <option name="INDENT_SIZE" value="2" />
         <option name="CONTINUATION_INDENT_SIZE" value="2" />
@@ -51,7 +51,7 @@
       </indentOptions>
     </codeStyleSettings>
     <codeStyleSettings language="Vue">
-      <option name="SOFT_MARGINS" value="80" />
+      <option name="SOFT_MARGINS" value="120" />
       <indentOptions>
         <option name="CONTINUATION_INDENT_SIZE" value="2" />
       </indentOptions>
diff --git a/client/package.json b/client/package.json
index d11d832..4bb41cc 100644
--- a/client/package.json
+++ b/client/package.json
@@ -15,7 +15,7 @@
   "devDependencies": {
     "@popperjs/core": "^2.11.6",
     "bootstrap": "^5.3.3",
-    "bootstrap-icons": "^1.11.0",
+    "bootstrap-icons": "^1.11.3",
     "pinia": "^2.1.7",
     "portal-vue": "^3.0.0",
     "socket.io-client": "^4.7.2",
diff --git a/client/src/App.vue b/client/src/App.vue
index 9c64602..9ea836d 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -32,7 +32,9 @@ function onLogoClick() {
         :role="canNavigateHome ? 'button' : ''"
         @click="onLogoClick" />
       <router-view class="mt-2 mb-5" />
-      <portal-target name="banner" class="mb-2" />
+      <div class="mb-2">
+        <portal-target name="banner" />
+      </div>
     </div>
   </div>
 </template>
diff --git a/client/src/main.ts b/client/src/main.ts
index dc0e8dc..282a910 100644
--- a/client/src/main.ts
+++ b/client/src/main.ts
@@ -8,7 +8,7 @@ import PortalVue from 'portal-vue';
 
 // only import bootstrap components that are used
 import { Collapse, Dropdown } from 'bootstrap';
-import 'bootstrap-icons/font/bootstrap-icons.css';
+import 'bootstrap-icons/font/bootstrap-icons.min.css';
 import { useGameStore } from '@/stores/game.js';
 import { useRoomStore } from '@/stores/room.js';
 import socket from '@/socket/socket.js';
diff --git a/client/src/styles/_min-bootstrap.scss b/client/src/styles/_min-bootstrap.scss
index c2ba27a..0d1602a 100644
--- a/client/src/styles/_min-bootstrap.scss
+++ b/client/src/styles/_min-bootstrap.scss
@@ -38,4 +38,4 @@
 @import '~bootstrap/scss/utilities/api';
 
 // Icons
-@import '~bootstrap-icons/font/bootstrap-icons';
+@import '~bootstrap-icons/font/bootstrap-icons.min.css';
diff --git a/client/src/styles/_variables.scss b/client/src/styles/_variables.scss
index 16fc561..0a0cd35 100644
--- a/client/src/styles/_variables.scss
+++ b/client/src/styles/_variables.scss
@@ -1,6 +1,18 @@
 // 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
 @import '~bootstrap/scss/functions';
 
+$white:    #fff;
+$gray-100: #f8f9fa;
+$gray-200: #e9ecef;
+$gray-300: #dee2e6;
+$gray-400: #ced4da;
+$gray-500: #adb5bd;
+$gray-600: #6c757d;
+$gray-700: #495057;
+$gray-800: #343a40;
+$gray-900: #212529;
+$black:    #000;
+
 // 2. Include any default variable overrides here
 $orange: #ff6415;
 $blue: #165dcf;
@@ -11,23 +23,83 @@ $primary: $orange;
 $secondary: #f6f3f0;
 $dark: #212529;
 
+$orange-text-emphasis: shade-color($orange, 60%);
+$blue-text-emphasis: shade-color($blue, 60%);
+$red-text-emphasis: shade-color($red, 60%);
+$burgundy-text-emphasis: shade-color($burgundy, 60%);
+$yellow-text-emphasis: shade-color($yellow, 60%);
+$primary-text-emphasis: $orange-text-emphasis;
+$secondary-text-emphasis: $gray-700;
+$dark-text-emphasis: $gray-700;
+
+$orange-bg-subtle: tint-color($orange, 80%);
+$blue-bg-subtle: tint-color($blue, 80%);
+$red-bg-subtle: tint-color($red, 80%);
+$burgundy-bg-subtle: tint-color($burgundy, 80%);
+$yellow-bg-subtle: tint-color($yellow, 80%);
+$primary-bg-subtle: $orange-bg-subtle;
+$secondary-bg-subtle: mix($gray-100, $white);
+$dark-bg-subtle: $gray-400;
+
+$orange-border-subtle: tint-color($orange, 60%);
+$blue-border-subtle: tint-color($blue, 60%);
+$red-border-subtle: tint-color($red, 60%);
+$burgundy-border-subtle: tint-color($burgundy, 60%);
+$yellow-border-subtle: tint-color($yellow, 60%);
+$primary-border-subtle: $orange-border-subtle;
+$secondary-border-subtle: $gray-200;
+$dark-border-subtle: $gray-500;
+
 $main-font: Quicksand, 'Lucida Handwriting', cursive;
 $header-font: Pacifico, 'Brush Script MT', cursive;
 
 $border-radius: 0.7rem;
 
+$theme-colors: (
+  'primary': $primary,
+  'secondary': $secondary,
+  'orange': $orange,
+  'yellow': $yellow,
+  'blue': $blue,
+  'red': $red,
+  'burgundy': $burgundy,
+  'dark': $dark
+);
+
 // 3. Include remainder of required Bootstrap stylesheets
 @import '~bootstrap/scss/variables';
 
-$theme-colors: (
-        'primary': $primary,
-        'secondary': $secondary,
-        'orange': $orange,
-        'yellow': $yellow,
-        'blue': $blue,
-        'red': $red,
-        'burgundy': $burgundy,
-        'dark': $dark
+$theme-colors-text: (
+  'primary': $primary-text-emphasis,
+  'secondary': $secondary-text-emphasis,
+  'orange': $orange-text-emphasis,
+  'yellow': $yellow-text-emphasis,
+  'blue': $blue-text-emphasis,
+  'red': $red-text-emphasis,
+  'burgundy': $burgundy-text-emphasis,
+  'dark': $dark-text-emphasis
+);
+
+$theme-colors-bg-subtle: (
+  'primary': $primary-bg-subtle,
+  'secondary': $secondary-bg-subtle,
+  'orange': $orange-bg-subtle,
+  'yellow': $yellow-bg-subtle,
+  'blue': $blue-bg-subtle,
+  'red': $red-bg-subtle,
+  'burgundy': $burgundy-bg-subtle,
+  'dark': $dark-bg-subtle
+);
+
+$theme-colors-border-subtle: (
+  'primary': $primary-border-subtle,
+  'secondary': $secondary-border-subtle,
+  'orange': $orange-border-subtle,
+  'yellow': $yellow-border-subtle,
+  'blue': $blue-border-subtle,
+  'red': $red-border-subtle,
+  'burgundy': $burgundy-border-subtle,
+  'dark': $dark-border-subtle
 );
 
 @import '~bootstrap/scss/maps';
diff --git a/package-lock.json b/package-lock.json
index 4460923..856ddd7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -44,7 +44,7 @@
         "@vue/tsconfig": "^0.5.1",
         "autoprefixer": "^10.4.16",
         "bootstrap": "^5.3.3",
-        "bootstrap-icons": "^1.11.0",
+        "bootstrap-icons": "^1.11.3",
         "pinia": "^2.1.7",
         "pinia-logger": "^1.3.12",
         "portal-vue": "^3.0.0",