Various small bug fixes and little tweaks.

Senexis · May 9, 2024 · ae30951 · ae30951
1 parent fff70e1
commit ae30951
Show file tree

Hide file tree

Showing 23 changed files with 750 additions and 585 deletions.
diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
     <title>RDO.GG Tunables</title>
     <link rel="preconnect" href="https://api.rdo.gg">
   </head>
-  <body class="bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300">
+  <body class="bg-secondary-100 dark:bg-secondary-800 text-secondary-700 dark:text-secondary-300">
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
   </body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,36 +10,37 @@
     "types": "node .github/scripts/tunables_types.cjs"
   },
   "dependencies": {
-    "@fingerprintjs/fingerprintjs": "^4.2.2",
+    "@fingerprintjs/fingerprintjs": "^4.3.0",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-brands-svg-icons": "^6.5.2",
     "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/vue-fontawesome": "^3.0.6",
-    "@headlessui/vue": "^1.7.19",
+    "@headlessui/vue": "^1.7.22",
     "@heroicons/vue": "^2.1.3",
-    "@sentry/tracing": "^7.109.0",
-    "@sentry/vue": "^7.109.0",
-    "ajv": "^8.12.0",
+    "@sentry/tracing": "^7.114.0",
+    "@sentry/vue": "^7.114.0",
+    "ajv": "^8.13.0",
     "floating-vue": "^5.2.2",
     "jsondiffpatch": "^0.6.0",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
     "pretty-ms": "^9.0.0",
-    "vue": "^3.4.21"
+    "theme-colors": "^0.1.0",
+    "vue": "^3.4.27"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.10.1",
+    "@rushstack/eslint-patch": "^1.10.2",
     "@sentry/vite-plugin": "^2.16.1",
     "@tailwindcss/forms": "^0.5.7",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/eslint-config-prettier": "^9.0.0",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.24.0",
+    "eslint-plugin-vue": "^9.26.0",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "tailwindcss": "^3.4.3",
-    "vite": "^5.2.8"
+    "vite": "^5.2.11"
   }
 }
diff --git a/src/App.vue b/src/App.vue
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -2,53 +2,97 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --color-primary-50: 243 251 254;
+  --color-primary-100: 231 246 253;
+  --color-primary-200: 195 233 250;
+  --color-primary-300: 159 219 246;
+  --color-primary-400: 86 192 240;
+  --color-primary-500: 14 165 233;
+  --color-primary-600: 13 149 210;
+  --color-primary-700: 8 99 140;
+  --color-primary-800: 6 74 105;
+  --color-primary-900: 4 50 70;
+
+  --color-secondary-50: 247 248 249;
+  --color-secondary-100: 240 241 243;
+  --color-secondary-200: 216 220 226;
+  --color-secondary-300: 193 199 209;
+  --color-secondary-400: 147 158 174;
+  --color-secondary-500: 100 116 139;
+  --color-secondary-600: 90 104 125;
+  --color-secondary-700: 60 70 83;
+  --color-secondary-800: 45 52 63;
+  --color-secondary-900: 30 35 42;
+
+  --color-danger-50: 254 246 246;
+  --color-danger-100: 253 236 236;
+  --color-danger-200: 251 208 208;
+  --color-danger-300: 249 180 180;
+  --color-danger-400: 244 124 124;
+  --color-danger-500: 239 68 68;
+  --color-danger-600: 215 61 61;
+  --color-danger-700: 143 41 41;
+  --color-danger-800: 108 31 31;
+  --color-danger-900: 72 20 20;
+}
+
 a {
-  @apply text-sky-600;
+  @apply text-primary-600;
 }
 
 a:hover {
-  @apply text-sky-400;
+  @apply text-primary-400;
 }
 
 code {
-  @apply text-red-400 font-mono;
+  @apply text-[#f87171] font-mono;
 }
 
 kbd {
-  @apply px-1.5 py-0.5 text-xs font-semibold text-slate-800 bg-slate-100 border border-slate-200 rounded-lg dark:bg-slate-600 dark:text-slate-100 dark:border-slate-500;
+  @apply px-1.5 py-0.5 text-xs font-semibold text-secondary-800 bg-secondary-100 border border-secondary-200 rounded-lg dark:bg-secondary-600 dark:text-secondary-100 dark:border-secondary-500;
 }
 
 .badge {
   @apply inline-flex items-center gap-x-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium whitespace-nowrap select-none;
 }
 
-/* Badge colors. */
+/* Text colors */
+.text-heart {
+  @apply text-[#ef4444];
+}
+
+.text-plus {
+  @apply text-[#fcaf17];
+}
+
+/* Badge colors */
 .badge-outline {
-  @apply bg-transparent text-slate-600 border border-slate-600;
+  @apply bg-transparent text-secondary-600 border border-secondary-600;
 }
 
 .dark .badge-outline {
-  @apply text-slate-400 border-slate-400;
+  @apply text-secondary-400 border-secondary-400;
 }
 
 .badge-outline-plus {
   @apply bg-transparent text-[#fcaf17] border border-[#fcaf17];
 }
 
 .badge-primary {
-  @apply bg-sky-700 text-white;
+  @apply bg-primary-700 text-white;
 }
 
 .badge-danger {
-  @apply bg-red-700 text-white;
+  @apply bg-danger-700 text-white;
 }
 
 .badge-plus {
   @apply bg-[#fcaf17] text-black;
 }
 
 .badge-gta {
-  @apply bg-sky-700 text-white;
+  @apply bg-[#0369a1] text-white;
 }
 
 .badge-rp {
@@ -88,23 +132,23 @@ kbd {
 
   .dark ::-webkit-scrollbar-track,
   .dark ::-webkit-scrollbar-corner {
-    @apply bg-slate-800;
+    @apply bg-secondary-800;
   }
 
   ::-webkit-scrollbar-thumb {
-    @apply bg-slate-400 bg-clip-content border-4 border-solid border-transparent rounded-full;
+    @apply bg-secondary-400 bg-clip-content border-4 border-solid border-transparent rounded-full;
   }
 
   .dark ::-webkit-scrollbar-thumb {
-    @apply bg-slate-700;
+    @apply bg-secondary-700;
   }
 
   ::-webkit-scrollbar-thumb:hover {
-    @apply bg-slate-500;
+    @apply bg-secondary-500;
   }
 
   .dark ::-webkit-scrollbar-thumb:hover {
-    @apply bg-slate-500;
+    @apply bg-secondary-500;
   }
 }
 
@@ -170,19 +214,19 @@ kbd {
 
 /* Custom Float Vue tweaks. */
 .v-popper--theme-tooltip .v-popper__inner {
-  @apply py-1.5 px-3 bg-slate-100 text-slate-700 text-sm rounded-md leading-none shadow-md;
+  @apply py-1.5 px-3 bg-secondary-100 text-secondary-700 text-sm rounded-md leading-none shadow-md;
 }
 
 .dark .v-popper--theme-tooltip .v-popper__inner {
-  @apply bg-slate-900 text-slate-300;
+  @apply bg-secondary-900 text-secondary-300;
 }
 
 .v-popper--theme-tooltip .v-popper__arrow-outer {
-  @apply border-slate-100;
+  @apply border-secondary-100;
 }
 
 .dark .v-popper--theme-tooltip .v-popper__arrow-outer {
-  @apply border-slate-900;
+  @apply border-secondary-900;
 }
 
 /* Custom JSON diff patch tweaks. */
@@ -269,22 +313,22 @@ kbd {
 .jsondiffpatch-child-node-type-object>.jsondiffpatch-property-name:after,
 .jsondiffpatch-property-name:after,
 .jsondiffpatch-value pre:after {
-  @apply text-slate-900;
+  @apply text-secondary-900;
 }
 
 .dark .jsondiffpatch-child-node-type-object>.jsondiffpatch-property-name:after,
 .dark .jsondiffpatch-property-name:after,
 .dark .jsondiffpatch-value pre:after {
-  @apply text-slate-50;
+  @apply text-secondary-50;
 }
 
 .jsondiffpatch-property-name:before {
   content: '"';
-  @apply text-slate-900;
+  @apply text-secondary-900;
 }
 
 .dark .jsondiffpatch-property-name:before {
-  @apply text-slate-50;
+  @apply text-secondary-50;
 }
 
 .jsondiffpatch-property-name:after {

diff --git a/src/components/Accordion.vue b/src/components/Accordion.vue
@@ -34,15 +34,15 @@ function toggleOpen() {
     <button
       @click="toggleOpen"
       type="button"
-      class="flex items-center justify-between text-sm px-3 py-2 w-full select-none hover:bg-slate-50 dark:hover:bg-slate-600"
+      class="flex items-center justify-between text-sm px-3 py-2 w-full select-none hover:bg-secondary-50 dark:hover:bg-secondary-600"
     >
       <slot name="title"></slot>
       <div class="px-2" v-tooltip="open ? 'Collapse' : 'Expand'">
         <PlusIcon v-if="!open" class="inline-block w-4 h-4" />
         <MinusIcon v-else class="inline-block w-4 h-4" />
       </div>
     </button>
-    <div v-show="open" class="bg-white dark:bg-slate-900 px-3 py-4">
+    <div v-show="open" class="bg-white dark:bg-secondary-900 px-3 py-4">
       <slot></slot>
     </div>
   </div>

diff --git a/src/components/Alerts/WithLink.vue b/src/components/Alerts/WithLink.vue
@@ -19,13 +19,13 @@ const props = defineProps({
 </script>
 
 <template>
-  <div v-if="show" class="rounded-lg bg-sky-600 p-2 mb-2 shadow-md sm:p-3">
+  <div v-if="show" class="rounded-lg bg-primary-600 p-2 mb-2 shadow-md sm:p-3">
     <div class="flex items-center">
-      <div class="flex-shrink-0 rounded-lg bg-sky-800 p-2">
-        <InformationCircleIcon class="h-5 w-5 text-slate-50" aria-hidden="true" />
+      <div class="flex-shrink-0 rounded-lg bg-primary-800 p-2">
+        <InformationCircleIcon class="h-5 w-5 text-secondary-50" aria-hidden="true" />
       </div>
       <div class="ml-3 flex-1 md:flex md:justify-between md:items-center">
-        <div class="text-sm text-slate-50 leading-tight">
+        <div class="text-sm text-secondary-50 leading-tight">
           <slot></slot>
         </div>
         <template v-if="props.buttonHandler">
@@ -34,7 +34,7 @@ const props = defineProps({
               :href="props.buttonHandler"
               @click="props.buttonHandler"
               type="button"
-              class="flex items-center whitespace-nowrap font-medium rounded-md md:p-2 md:hover:bg-sky-500 focus:outline-none focus:ring-2 focus:ring-slate-50 text-slate-50"
+              class="flex items-center whitespace-nowrap font-medium rounded-md md:p-2 md:hover:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-50 text-secondary-50"
             >
               {{ props.buttonText }}
             </button>

diff --git a/src/components/Banner.vue b/src/components/Banner.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { MegaphoneIcon, XMarkIcon } from '@heroicons/vue/24/outline';
+import { NoSymbolIcon, MegaphoneIcon, XMarkIcon } from '@heroicons/vue/24/outline';
 import { useStore } from '../stores/settings.js';
 
 const emit = defineEmits(['close']);
@@ -30,18 +30,23 @@ function dismiss() {
   settings.bannersDismissed = [...settings.bannersDismissed, props.id];
   emit('close');
 }
+
+function block() {
+  settings.bannersBlocked = true;
+  emit('close');
+}
 </script>
 
 <template>
   <div v-if="show" class="fixed inset-x-0 bottom-0 pb-2 sm:pb-5">
     <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
-      <div class="rounded-lg bg-sky-600 p-2 shadow-lg sm:p-3">
+      <div class="rounded-lg bg-primary-600 p-2 shadow-lg sm:p-3">
         <div class="flex flex-wrap items-center justify-between">
           <div class="flex w-0 flex-1 items-center">
-            <span class="flex rounded-lg bg-sky-800 p-2">
-              <MegaphoneIcon class="h-6 w-6 text-slate-50" aria-hidden="true" />
+            <span class="flex rounded-lg bg-primary-800 p-2">
+              <MegaphoneIcon class="h-6 w-6 text-secondary-50" aria-hidden="true" />
             </span>
-            <p class="ml-3 font-medium text-slate-50 leading-tight">
+            <p class="ml-3 font-medium text-secondary-50 leading-tight">
               <span class="inline">
                 <slot></slot>
               </span>
@@ -52,20 +57,30 @@ function dismiss() {
               :href="props.buttonLink"
               :target="props.buttonExternal ? '_blank' : undefined"
               :rel="props.buttonExternal ? 'noopener noreferrer' : undefined"
-              class="flex items-center justify-center rounded-md border border-transparent bg-slate-50 px-4 py-2 text-sm font-medium text-sky-600 shadow-sm hover:bg-sky-50"
+              class="flex items-center justify-center rounded-md border border-transparent bg-secondary-50 px-4 py-2 text-sm font-medium text-primary-600 shadow-sm hover:bg-primary-50"
             >
               {{ props.buttonText }}
             </a>
           </div>
-          <div class="order-2 flex-shrink-0 sm:order-3 sm:ml-2">
+          <div class="order-2 flex flex-row-reverse gap-2 flex-shrink-0 sm:order-3 sm:ml-2">
             <button
               type="button"
-              class="-mr-1 flex rounded-md p-2 hover:bg-sky-500 focus:outline-none focus:ring-2 focus:ring-slate-50"
+              class="-mr-1 flex rounded-md p-2 hover:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-50"
               v-tooltip="'Dismiss'"
               @click="dismiss"
             >
               <span class="sr-only">Dismiss</span>
-              <XMarkIcon class="h-6 w-6 text-slate-50" aria-hidden="true" />
+              <XMarkIcon class="h-6 w-6 text-secondary-50" aria-hidden="true" />
+            </button>
+
+            <button
+              type="button"
+              class="-mr-1 flex rounded-md p-2 hover:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-50"
+              v-tooltip="'Block all banners'"
+              @click="block"
+            >
+              <span class="sr-only">Block all banners</span>
+              <NoSymbolIcon class="h-6 w-6 text-secondary-50" aria-hidden="true" />
             </button>
           </div>
         </div>

diff --git a/src/components/Cards/Card.vue b/src/components/Cards/Card.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="divide-y divide-slate-200 dark:divide-slate-600 rounded-lg bg-white dark:bg-slate-700 mb-4 shadow-md">
+  <div class="divide-y divide-secondary-200 dark:divide-secondary-600 rounded-lg bg-white dark:bg-secondary-700 mb-4 shadow-md">
     <slot name="header"></slot>
     <slot></slot>
     <slot name="footer"></slot>

diff --git a/src/components/Cards/CardFooter.vue b/src/components/Cards/CardFooter.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="bg-white dark:bg-slate-700 text-slate-600/80 dark:text-slate-400/80 text-xs px-3 py-2 sm:flex items-center justify-between leading-tight gap-2 rounded-b-lg"
+    class="bg-white dark:bg-secondary-700 text-secondary-600/80 dark:text-secondary-400/80 text-xs px-3 py-2 sm:flex items-center justify-between leading-tight gap-2 rounded-b-lg"
   >
     <slot></slot>
   </div>