Add new style to highlight important UI elements.

Move common styles to CSS file rather than root app component.
krazkidd · Sep 27, 2023 · 715f544 · 715f544
1 parent 34ceff1
commit 715f544
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 23 deletions.
diff --git a/app.vue b/app.vue
@@ -85,22 +85,3 @@ const menuPassThroughOptions = {
 
   <Toast />
 </template>
-
-<style>
-body,
-#__nuxt {
-  min-height: 100vh;
-}
-
-body {
-  @apply text-gray-800 dark:text-gray-300 dark:bg-[#091a28];
-}
-
-input {
-  @apply placeholder-gray-600 dark:placeholder-gray-400;
-}
-
-.router-link-exact-active {
-  @apply text-orange-600 dark:text-yellow-300;
-}
-</style>
diff --git a/assets/css/common.css b/assets/css/common.css
@@ -0,0 +1,22 @@
+body,
+#__nuxt {
+  min-height: 100vh;
+}
+
+body {
+  @apply text-gray-800 dark:text-gray-300 dark:bg-[#091a28];
+}
+
+/* accentuate important UI components */
+.accent {
+    @apply text-slate-800 bg-blue-200 dark:text-slate-100 dark:bg-sky-700;
+}
+
+input {
+  @apply placeholder-gray-600 dark:placeholder-gray-400;
+}
+
+/* highlight active router links */
+.router-link-exact-active {
+  @apply text-orange-600 dark:text-yellow-300;
+}
diff --git a/components/lineup/LineupSpot.vue b/components/lineup/LineupSpot.vue
@@ -49,7 +49,7 @@ onKeyStroke("Backspace", (e) => {
 
         <LineupPositionButton
             :spot="props.spot"
-            class="shrink-0 inline-block cursor-pointer hover:outline hover:outline-blue-950 bg-white rounded-full text-center w-[3em]"
+            class="shrink-0 inline-block cursor-pointer hover:outline hover:outline-blue-950 text-gray-800 bg-white rounded-full text-center w-[3em]"
         />
     </div>
 </template>

diff --git a/components/scoreboard/ScoreboardTeamTile.vue b/components/scoreboard/ScoreboardTeamTile.vue
@@ -16,7 +16,7 @@ const emit = defineEmits<{
 
 const cardPassThroughOptions = {
   root: {
-    class: `text-gray-800 dark:text-gray-800 bg-blue-200 dark:bg-blue-200 m-1 w-64`
+    class: `accent m-1 w-64`
   }
 } as CardPassThroughOptions;
 

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -15,7 +15,8 @@ export default defineNuxtConfig({
   css: [
     'primevue/resources/themes/saga-blue/theme.css',
     'primevue/resources/primevue.css',
-    'primeicons/primeicons.css'
+    'primeicons/primeicons.css',
+    '~/assets/css/common.css',
   ],
   app: {
     // required for GitHub deployment

diff --git a/pages/lineup/index.vue b/pages/lineup/index.vue
@@ -54,7 +54,7 @@ useSortable(sortableContainer, spots, {
                     :key="spot.player.id"
                     :spot="spot"
                     @delete="!teamStore.isLocked && removeSpot(lineup!.spots, $event)"
-                    class="text-gray-800 bg-blue-200"
+                    class="accent"
                 />
             </ClientOnly>
         </div>