From 3c50651a6708687164c7787fd039ba9010a83b8b Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Mon, 18 Dec 2023 00:15:13 +0000
Subject: [PATCH] increase visibility of separators

---
 .vscode/settings.json                             |  3 +++
 src/components/ChainTiers.vue                     | 10 +++++++---
 src/components/InfoCard.vue                       |  4 ++--
 src/components/InfoCard/InfoCardItem.vue          |  1 +
 src/components/InfoCard/InfoCardItemWorldIcon.vue |  1 +
 src/components/ProductionChain.vue                |  2 +-
 src/layouts/MainLayout.vue                        |  1 -
 src/pages/AnnoBase.vue                            |  6 ++++--
 src/pages/AnnoMisc.vue                            |  6 ++++--
 src/pages/AnnoSeason1.vue                         |  8 +++++---
 src/pages/AnnoSeason2.vue                         |  8 +++++---
 src/pages/AnnoSeason3.vue                         |  8 +++++---
 src/pages/AnnoSeason4.vue                         |  8 +++++---
 13 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index ec79142..f89bdd7 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -8,5 +8,8 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }
diff --git a/src/components/ChainTiers.vue b/src/components/ChainTiers.vue
index bcb613d..cac1822 100644
--- a/src/components/ChainTiers.vue
+++ b/src/components/ChainTiers.vue
@@ -8,7 +8,7 @@
       'q-ma-sm',
       'border',
       'text-center',
-      calculateColBreak()
+      calculateColBreak(),
     ]"
   >
     <div v-if="!colBreak">
@@ -19,8 +19,11 @@
           {{ title }}
         </div>
       </q-card-section>
-
-      <q-separator inset class="q-mb-lg" />
+      <q-separator
+        v-if="leadingSeparator"
+        inset
+        class="q-mb-lg toolbar-background"
+      />
     </div>
 
     <slot></slot>
@@ -31,6 +34,7 @@
 const props = defineProps<{
   title: string;
   colBreak: boolean;
+  leadingSeparator: { type: boolean; required: false; default: true };
 }>();
 
 const calculateColBreak = () => (props.colBreak ? 'hide-item' : '');
diff --git a/src/components/InfoCard.vue b/src/components/InfoCard.vue
index eb22844..4ce87d5 100644
--- a/src/components/InfoCard.vue
+++ b/src/components/InfoCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-list separator class="big-font text-left">
+  <q-list class="big-font text-left">
     <slot></slot>
     <InfoCardItemWorldIcon
       v-for="item in infoCardItemWorldData"
@@ -19,7 +19,7 @@ import InfoCardItem from './InfoCard/InfoCardItem.vue';
 import InfoCardItemWorldIcon from './InfoCard/InfoCardItemWorldIcon.vue';
 import {
   InfoCardItem as InfoCardItemModel,
-  InfoCardItemWorldIcon as InfoCardItemWorldIconModel
+  InfoCardItemWorldIcon as InfoCardItemWorldIconModel,
 } from 'pages/data/models';
 
 defineProps<{
diff --git a/src/components/InfoCard/InfoCardItem.vue b/src/components/InfoCard/InfoCardItem.vue
index 79d09a4..9af814d 100644
--- a/src/components/InfoCard/InfoCardItem.vue
+++ b/src/components/InfoCard/InfoCardItem.vue
@@ -1,4 +1,5 @@
 <template>
+  <q-separator inset class="q-mb-sm toolbar-background" />
   <q-item>
     <q-item-section avatar>
       <q-img :src="icon" class="info-icon"></q-img>
diff --git a/src/components/InfoCard/InfoCardItemWorldIcon.vue b/src/components/InfoCard/InfoCardItemWorldIcon.vue
index 3aece8b..555f0b7 100644
--- a/src/components/InfoCard/InfoCardItemWorldIcon.vue
+++ b/src/components/InfoCard/InfoCardItemWorldIcon.vue
@@ -1,4 +1,5 @@
 <template>
+  <q-separator inset class="q-mb-sm toolbar-background" />
   <q-item>
     <q-item-section avatar>
       <q-img :src="icon" class="info-icon"></q-img>
diff --git a/src/components/ProductionChain.vue b/src/components/ProductionChain.vue
index 942a5a9..7f1bf9b 100644
--- a/src/components/ProductionChain.vue
+++ b/src/components/ProductionChain.vue
@@ -4,7 +4,7 @@
     :chain-multiplier="chainMultiplier"
   ></ProductionChainMultiplier>
   <div ref="diagram"></div>
-  <q-separator inset class="q-my-lg" />
+  <q-separator inset class="q-my-lg toolbar-background" />
 </template>
 
 <script setup lang="ts">
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index c3b3834..3763ae9 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -30,7 +30,6 @@
           Navigation
         </q-item-label>
         <q-separator inset class="q-mb-sm" />
-
         <EssentialLink
           v-for="link in linksList"
           :key="link.title"
diff --git a/src/pages/AnnoBase.vue b/src/pages/AnnoBase.vue
index 1040426..fcd9301 100644
--- a/src/pages/AnnoBase.vue
+++ b/src/pages/AnnoBase.vue
@@ -8,6 +8,7 @@
         <ChainTiers
           :title="expansionInfoItem.title"
           :col-break="false"
+          :leading-separator="false"
           class="masonry-col item"
         >
           <InfoCard
@@ -22,6 +23,7 @@
           :key="tier.tierName"
           :title="tier.tierName"
           :col-break="tier.colBreak"
+          :leading-separator="true"
           class="masonry-col item"
         >
           <div v-if="!tier.colBreak">
@@ -64,7 +66,7 @@ initialiseMermaid();
 const expansionInfoItem = ref({
   title: 'Base Game',
   icon: icons.siteLogoIcon,
-  text: 'All chains for Base Game consumer goods.'
+  text: 'All chains for Base Game consumer goods.',
 });
 </script>
 
@@ -88,7 +90,7 @@ $column: 3;
 }
 
 .masonry-container {
-  height: 3760px;
+  height: 3755px;
 
   .masonry-col {
     width: 1000px;
diff --git a/src/pages/AnnoMisc.vue b/src/pages/AnnoMisc.vue
index 4025d2c..933bdcc 100644
--- a/src/pages/AnnoMisc.vue
+++ b/src/pages/AnnoMisc.vue
@@ -8,6 +8,7 @@
         <ChainTiers
           :title="expansionInfoItem.title"
           :col-break="false"
+          :leading-separator="false"
           class="masonry-col item"
         >
           <InfoCard
@@ -22,6 +23,7 @@
           :key="tier.tierName"
           :title="tier.tierName"
           :col-break="tier.colBreak"
+          :leading-separator="true"
           class="masonry-col item"
         >
           <div v-if="!tier.colBreak">
@@ -64,7 +66,7 @@ initialiseMermaid();
 const expansionInfoItem = ref({
   title: 'ratios | fuel | materials',
   icon: icons.siteLogoIcon,
-  text: 'All chains for building materials, electricity, fuel and ratios.'
+  text: 'All chains for building materials, electricity, fuel and ratios.',
 });
 </script>
 
@@ -88,7 +90,7 @@ $column: 3;
 }
 
 .masonry-container {
-  height: 4600px;
+  height: 4595px;
 
   .masonry-col {
     width: 1000px;
diff --git a/src/pages/AnnoSeason1.vue b/src/pages/AnnoSeason1.vue
index 3b8b700..39d5c92 100644
--- a/src/pages/AnnoSeason1.vue
+++ b/src/pages/AnnoSeason1.vue
@@ -7,6 +7,7 @@
         <ChainTiers
           :title="expansionInfoItem.title"
           :col-break="false"
+          :leading-separator="false"
           class="masonry-col item"
         >
           <InfoCard
@@ -21,6 +22,7 @@
           :key="tier.tierName"
           :title="tier.tierName"
           :col-break="tier.colBreak"
+          :leading-separator="true"
           class="masonry-col item"
         >
           <div v-if="!tier.colBreak">
@@ -53,7 +55,7 @@ import { productionChainsSeason1 } from './data/production-chains-season-1';
 // Info Card Data
 import {
   season1ItemData,
-  season1ItemWorldData
+  season1ItemWorldData,
 } from 'src/pages/data/info-card';
 
 // Icons
@@ -66,7 +68,7 @@ initialiseMermaid();
 const expansionInfoItem = ref({
   title: 'Season 1',
   icon: icons.passageIcon,
-  text: 'All chains for Season 1 (Sunken Treasures, Botanica & The Passage) consumer goods.'
+  text: 'All chains for Season 1 (Sunken Treasures, Botanica & The Passage) consumer goods.',
 });
 </script>
 
@@ -90,7 +92,7 @@ $column: 2;
 }
 
 .masonry-container {
-  height: 1430px;
+  height: 1420px;
 
   .masonry-col {
     width: 1000px;
diff --git a/src/pages/AnnoSeason2.vue b/src/pages/AnnoSeason2.vue
index 05f15a3..a3cb1ea 100644
--- a/src/pages/AnnoSeason2.vue
+++ b/src/pages/AnnoSeason2.vue
@@ -8,6 +8,7 @@
         <ChainTiers
           :title="expansionInfoItem.title"
           :col-break="false"
+          :leading-separator="false"
           class="masonry-col item"
         >
           <InfoCard
@@ -22,6 +23,7 @@
           :key="tier.tierName"
           :title="tier.tierName"
           :col-break="tier.colBreak"
+          :leading-separator="true"
           class="masonry-col item"
         >
           <div v-if="!tier.colBreak">
@@ -54,7 +56,7 @@ import { productionChainsSeason2 } from './data/production-chains-season-2';
 // Info Card Data
 import {
   season2ItemData,
-  season2ItemWorldData
+  season2ItemWorldData,
 } from 'src/pages/data/info-card';
 
 // Icons
@@ -67,7 +69,7 @@ initialiseMermaid();
 const expansionInfoItem = ref({
   title: 'Season 2',
   icon: icons.landOfLionsIcon,
-  text: 'All chains for Season 2 (Seat of Power, Bright Harvest & Land of Lions) consumer goods.'
+  text: 'All chains for Season 2 (Seat of Power, Bright Harvest & Land of Lions) consumer goods.',
 });
 </script>
 
@@ -91,7 +93,7 @@ $column: 3;
 }
 
 .masonry-container {
-  height: 2780px;
+  height: 2765px;
 
   .masonry-col {
     width: 1000px;
diff --git a/src/pages/AnnoSeason3.vue b/src/pages/AnnoSeason3.vue
index 9f5c51c..6095236 100644
--- a/src/pages/AnnoSeason3.vue
+++ b/src/pages/AnnoSeason3.vue
@@ -9,6 +9,7 @@
         <ChainTiers
           :title="expansionInfoItem.title"
           :col-break="false"
+          :leading-separator="false"
           class="masonry-col item"
         >
           <InfoCard
@@ -23,6 +24,7 @@
           :key="tier.tierName"
           :title="tier.tierName"
           :col-break="tier.colBreak"
+          :leading-separator="true"
           class="masonry-col item"
         >
           <div v-if="!tier.colBreak">
@@ -55,7 +57,7 @@ import { productionChainsSeason3 } from './data/production-chains-season-3';
 // Info Card Data
 import {
   season3ItemData,
-  season3ItemWorldData
+  season3ItemWorldData,
 } from 'src/pages/data/info-card';
 
 // Icons
@@ -68,7 +70,7 @@ initialiseMermaid();
 const expansionInfoItem = ref({
   title: 'Season 3',
   icon: icons.highLifeIcon,
-  text: 'All chains for Season 3 (Docklands, Tourist Season & The High Life) consumer goods.'
+  text: 'All chains for Season 3 (Docklands, Tourist Season & The High Life) consumer goods.',
 });
 </script>
 
@@ -92,7 +94,7 @@ $column: 4;
 }
 
 .masonry-container {
-  height: 8220px;
+  height: 8190px;
 
   .masonry-col {
     width: 1000px;
diff --git a/src/pages/AnnoSeason4.vue b/src/pages/AnnoSeason4.vue
index 3ab96cc..5709fe5 100644
--- a/src/pages/AnnoSeason4.vue
+++ b/src/pages/AnnoSeason4.vue
@@ -8,6 +8,7 @@
         <ChainTiers
           :title="expansionInfoItem.title"
           :col-break="false"
+          :leading-separator="false"
           class="masonry-col item"
         >
           <InfoCard
@@ -22,6 +23,7 @@
           :key="tier.tierName"
           :title="tier.tierName"
           :col-break="tier.colBreak"
+          :leading-separator="true"
           class="masonry-col item"
         >
           <div v-if="!tier.colBreak">
@@ -54,7 +56,7 @@ import { productionChainsSeason4 } from './data/production-chains-season-4';
 // Info Card Data
 import {
   season4ItemData,
-  season4ItemWorldData
+  season4ItemWorldData,
 } from 'src/pages/data/info-card';
 
 // Icons
@@ -67,7 +69,7 @@ initialiseMermaid();
 const expansionInfoItem = ref({
   title: 'Season 4',
   icon: icons.newWorldRisingIcon,
-  text: 'All chains for Season 4 (Seeds of Change, Empire of the Skies & New World Rising) consumer goods.'
+  text: 'All chains for Season 4 (Seeds of Change, Empire of the Skies & New World Rising) consumer goods.',
 });
 </script>
 
@@ -91,7 +93,7 @@ $column: 3;
 }
 
 .masonry-container {
-  height: 5860px;
+  height: 5855px;
 
   .masonry-col {
     width: 1000px;