feat: add CSS reset & update styles accordingly (#24)

Author: cernymatej

app/app.vue

@@ -1,4 +1,10 @@
 <script setup lang="ts">
+useHead({
+  bodyAttrs: {
+    class: 'bg-shark-500 text-white',
+  },
+})
+
 useSeoMeta({
   title: 'unsight.dev',
   description: 'Detect duplicate GitHub issues, areas of concern and more across related repositories',
@@ -9,9 +15,9 @@ const { data: repos } = useRepos()
 
 <template>
   <div class="min-h-screen flex flex-col">
-    <main class="flex flex-col font-sans m-2 flex-grow">
+    <main class="flex flex-col font-sans m-4 flex-grow">
       <nav class="flex flex-row items-center gap-2 ">
-        <h1 class="text-lg">
+        <h1 class="text-lg font-bold my-4">
           <NuxtLink
             to="/"
             class="no-underline color-current"
@@ -44,10 +50,3 @@ const { data: repos } = useRepos()
     </footer>
   </div>
 </template>
-
-<style>
-:root {
-  background-color: #202830;
-  color: white;
-}
-</style>

app/pages/[owner]/[repo]/[issue].vue

@@ -14,7 +14,7 @@ const { data: issues, status } = useFetch(`/api/similarity/${route.params.owner}
       class="flex flex-col gap-4 md:rounded-md md:border-solid border border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 border-b-solid animate-pulse"
       :style="{ '--section-index': 1 }"
     >
-      <h2 class="flex items-center">
+      <h2 class="flex items-center my-4 font-bold text-2xl">
         <span class="text-gray-500 inline-block mr-1 font-normal">#</span>
         <span class="inline-block rounded-md h-5 bg-gray-500 w-5" />
       </h2>
@@ -28,7 +28,7 @@ const { data: issues, status } = useFetch(`/api/similarity/${route.params.owner}
       class="flex flex-col gap-4 md:rounded-md md:border-solid border border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 border-b-solid"
       :style="{ '--section-index': 1 }"
     >
-      <h2 class="flex items-center">
+      <h2 class="flex items-center my-4 font-bold text-2xl">
         <span class="text-gray-500 inline-block mr-1 font-normal">#</span>
         {{ issues[0]?.title }}
       </h2>

app/pages/[owner]/[repo]/index.vue

@@ -35,7 +35,7 @@ const openState = reactive<Record<string, boolean>>({})
   <div>
     <form @submit.prevent="() => refresh()">
       <div class="flex gap-2 items-center">
-        <h2 class="text-base font-normal">
+        <h2 class="text-base my-3 font-normal">
           {{ selectedRepo }}
         </h2>
         <button
@@ -50,7 +50,7 @@ const openState = reactive<Record<string, boolean>>({})
           <span class="sr-only">refresh data</span>
         </button>
       </div>
-      <label class="w-full border-solid border border-gray-600 rounded-md flex flex-row items-center relative">
+      <label class="w-full text-xs border-solid border border-gray-600 rounded-md flex flex-row items-center relative">
         <span class="sr-only">pick a repository to cluster issues</span>
         <select
           :value="selectedRepo"
@@ -77,7 +77,7 @@ const openState = reactive<Record<string, boolean>>({})
         :style="{ '--section-index': i }"
         class="flex flex-col gap-4 md:rounded-md md:border-solid border border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 border-b-solid animate-pulse"
       >
-        <h2 class="flex items-center">
+        <h2 class="flex items-center my-4 font-bold text-2xl">
           <span class="text-gray-500 inline-block mr-1 font-normal">#</span>
           <span class="inline-block rounded-md h-5 bg-gray-500 w-5" />
         </h2>
@@ -91,7 +91,7 @@ const openState = reactive<Record<string, boolean>>({})
       <section
         class="flex flex-col gap-4 md:rounded-md md:border-solid border border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 border-b-solid"
       >
-        <h2 class="flex items-center">
+        <h2 class="flex items-center my-4 font-bold text-2xl">
           <span class="text-gray-500 inline-block mr-1 font-normal">#</span>
         </h2>
         <p class="flex flex-row gap-2 leading-tightest">
@@ -109,7 +109,7 @@ const openState = reactive<Record<string, boolean>>({})
         :style="{ '--section-index': c }"
         class="flex flex-col gap-4 md:rounded-md md:border-solid border border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 border-b-solid"
       >
-        <h2>
+        <h2 class="my-4 font-bold text-2xl">
           <span class="text-gray-500 inline-block mr-1 font-normal">#</span>{{ c + 1 }}
         </h2>
         <GitHubIssue
@@ -126,7 +126,7 @@ const openState = reactive<Record<string, boolean>>({})
         />
         <button
           v-if="cluster.length > 5 && openState[c] !== true"
-          class="rounded-md border-solid border border-gray-700 bg-transparent color-gray-400 py-2 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
+          class="rounded-md text-sm border-solid border border-gray-700 bg-transparent color-gray-400 py-2 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
           type="button"
           @click="openState[c] = !openState[c]"
         >

app/pages/index.vue

@@ -31,7 +31,7 @@ const repos = computed(() => allowedRepos.value.filter(r => r.issuesIndexed > 10
       cluster issues by similarity across multiple repositories
     </p>
     <NuxtLink
-      class="bg-green-700 rounded-md px-5 py-3 font-medium flex flex-row gap-2 items-center color-white no-underline focus:bg-green-800 hover:bg-green-800 transition-colors shadow-lg"
+      class="bg-green-700 rounded-md px-5 py-2.5 font-medium flex flex-row gap-2 items-center color-white no-underline focus:bg-green-800 hover:bg-green-800 transition-colors shadow-lg"
       :href="isCallback ? '' : installationURL"
       :class="{ 'pointer-events-none opacity-50': isCallback }"
     >
@@ -44,13 +44,13 @@ const repos = computed(() => allowedRepos.value.filter(r => r.issuesIndexed > 10
         install as a github app
       </template>
     </NuxtLink>
-    <hr>
+    <hr class="w-32 border-shark-400">
     <section
       v-if="allowedRepos.length"
       class="text-center"
     >
       or pick a repository to browse issue clusters
-      <ul class="p-0 flex flex-row flex-wrap gap-4 justify-center px-10">
+      <ul class="p-0 flex flex-row flex-wrap gap-x-4 gap-y-3 justify-center px-10 my-4">
         <li
           v-for="repo in repos"
           :key="repo.repo"

nuxt.config.ts

@@ -19,6 +19,9 @@ export default defineNuxtConfig({
       htmlAttrs: { lang: 'en' },
     },
   },
+  css: [
+    '@unocss/reset/tailwind-compat.css',
+  ],
   runtimeConfig: {
     public: {
       remote: '/',
@@ -69,5 +72,14 @@ export default defineNuxtConfig({
   },
   unocss: {
     icons: true,
+    theme: {
+      colors: {
+        'shark-500': '#202830',
+        'shark-400': '#333c45',
+        'shark-300': '#3F4953',
+        'shark-200': '#4F5A65',
+        'shark-100': '#636E7A',
+      },
+    },
   },
 })

package.json

@@ -20,6 +20,7 @@
     "@octokit/rest": "^21.0.2",
     "@octokit/webhooks-types": "^7.6.1",
     "@unocss/nuxt": "^0.65.1",
+    "@unocss/reset": "^0.65.1",
     "hex-rgb": "^5.0.0",
     "ml-distance": "^4.0.1",
     "ml-kmeans": "^6.0.0",