From 14b3cfff1be9920e66e90e8732f510cc1aadcf62 Mon Sep 17 00:00:00 2001
From: Lauris BH <lauris@nix.lv>
Date: Fri, 17 Jun 2022 03:00:31 +0300
Subject: [PATCH] Improve dark style text color for better readibility (#985)

---
 web/src/App.vue                               | 48 -----------------
 web/src/assets/locales/en.json                |  2 +-
 web/src/components/atomic/Button.vue          |  2 +-
 web/src/components/atomic/IconButton.vue      |  4 +-
 .../components/build-feed/BuildFeedItem.vue   |  2 +-
 .../build-feed/BuildFeedSidebar.vue           |  2 +-
 web/src/components/form/Checkbox.vue          |  6 +--
 web/src/components/form/InputField.vue        |  4 +-
 web/src/components/form/RadioField.vue        |  6 +--
 web/src/components/form/SelectField.vue       |  4 +-
 web/src/components/form/TextField.vue         | 18 +------
 web/src/components/layout/header/Navbar.vue   |  6 +--
 web/src/components/repo/build/BuildItem.vue   | 17 ++----
 web/src/components/repo/build/BuildList.vue   |  2 +-
 web/src/components/repo/build/BuildLog.vue    |  2 +-
 .../components/repo/settings/ActionsTab.vue   |  2 +-
 web/src/components/repo/settings/BadgeTab.vue | 10 ++--
 .../components/repo/settings/GeneralTab.vue   |  4 +-
 .../repo/settings/RegistriesTab.vue           |  8 +--
 .../components/repo/settings/SecretsTab.vue   | 10 ++--
 web/src/components/tabs/Tabs.vue              |  4 +-
 web/src/main.ts                               |  1 +
 web/src/style.css                             | 52 +++++++++++++++++++
 web/src/views/Login.vue                       |  2 +-
 web/src/views/RepoAdd.vue                     |  6 +--
 web/src/views/Repos.vue                       |  4 +-
 web/src/views/ReposOwner.vue                  |  6 +--
 web/src/views/User.vue                        | 10 ++--
 web/src/views/repo/RepoBranch.vue             |  2 +-
 web/src/views/repo/RepoBranches.vue           |  2 +-
 web/src/views/repo/RepoSettings.vue           |  2 +-
 web/src/views/repo/RepoWrapper.vue            |  4 +-
 web/src/views/repo/build/Build.vue            |  8 +--
 .../views/repo/build/BuildChangedFiles.vue    |  4 +-
 web/src/views/repo/build/BuildConfig.vue      |  2 +-
 web/src/views/repo/build/BuildWrapper.vue     |  4 +-
 36 files changed, 125 insertions(+), 147 deletions(-)
 create mode 100644 web/src/style.css

diff --git a/web/src/App.vue b/web/src/App.vue
index 960bde1fa..1d5fee581 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -49,54 +49,6 @@ export default defineComponent({
 });
 </script>
 
-<!-- eslint-disable-next-line vue-scoped-css/require-scoped -->
-<style>
-html,
-body,
-#app {
-  width: 100%;
-  height: 100%;
-}
-
-.vue-notification {
-  @apply rounded-md text-base border-l-6;
-}
-
-.vue-notification .notification-title {
-  @apply font-normal;
-}
-
-.vue-notification.success {
-  @apply bg-lime-600 border-l-lime-700;
-}
-
-.vue-notification.error {
-  @apply bg-red-600 border-l-red-700;
-}
-
-*::-webkit-scrollbar {
-  @apply bg-transparent w-12px h-12px;
-}
-
-* {
-  scrollbar-width: thin;
-}
-
-*::-webkit-scrollbar-thumb {
-  transition: background 0.2s ease-in-out;
-  border: 3px solid transparent;
-  @apply bg-cool-gray-200 dark:bg-dark-200 rounded-full bg-clip-content;
-}
-
-*::-webkit-scrollbar-thumb:hover {
-  @apply bg-cool-gray-300 dark:bg-dark-100;
-}
-
-*::-webkit-scrollbar-corner {
-  @apply bg-transparent;
-}
-</style>
-
 <style scoped>
 .app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
diff --git a/web/src/assets/locales/en.json b/web/src/assets/locales/en.json
index 46d94c38f..a2615d04e 100644
--- a/web/src/assets/locales/en.json
+++ b/web/src/assets/locales/en.json
@@ -51,7 +51,7 @@
         "pipeline_path": {
           "path": "Pipeline path",
           "default": "By default: .woodpecker/*.yml -> .woodpecker.yml -> .drone.yml",
-          "desc": "Path to your pipeline config (for example<span class=\"bg-gray-300 dark:bg-dark-100 rounded-md px-1\">my/path/</span>). Folders should end with a<span class=\"bg-gray-300 dark:bg-dark-100 rounded-md px-1\">/</span>."
+          "desc": "Path to your pipeline config (for example <span class=\"bg-gray-300 dark:bg-dark-300 rounded-md px-1\">my/path/</span>). Folders should end with a <span class=\"bg-gray-300 dark:bg-dark-300 rounded-md px-1\">/</span>."
         },
 
         "allow_pr": {
diff --git a/web/src/components/atomic/Button.vue b/web/src/components/atomic/Button.vue
index a2bb8b9d4..64a86697e 100644
--- a/web/src/components/atomic/Button.vue
+++ b/web/src/components/atomic/Button.vue
@@ -18,7 +18,7 @@
       disabled:opacity-50 disabled:cursor-not-allowed
     "
     :class="{
-      'bg-white hover:bg-gray-200 border-gray-300 text-gray-500 dark:text-gray-500 dark:bg-dark-gray-700 dark:border-dark-400 dark:hover:bg-dark-gray-800':
+      'bg-white hover:bg-gray-200 border-gray-300 text-color dark:bg-dark-gray-700 dark:border-dark-400 dark:hover:bg-dark-gray-800':
         color === 'gray',
       'bg-lime-600 hover:bg-lime-700 border-lime-800 text-white dark:text-gray-400 dark:bg-lime-900 dark:hover:bg-lime-800':
         color === 'green',
diff --git a/web/src/components/atomic/IconButton.vue b/web/src/components/atomic/IconButton.vue
index 02835bbed..214734363 100644
--- a/web/src/components/atomic/IconButton.vue
+++ b/web/src/components/atomic/IconButton.vue
@@ -6,13 +6,13 @@
       flex
       items-center
       justify-center
-      text-gray-500
+      text-color
       px-1
       py-1
       rounded-full
       bg-transparent
       hover:bg-gray-200 hover:text-gray-700
-      dark:hover:bg-gray-600 dark:text-gray-500 dark:hover:text-gray-700
+      dark:hover:bg-gray-600 dark:hover:text-gray-700
       cursor-pointer
       transition-all
       duration-150
diff --git a/web/src/components/build-feed/BuildFeedItem.vue b/web/src/components/build-feed/BuildFeedItem.vue
index c6795af26..eee99538f 100644
--- a/web/src/components/build-feed/BuildFeedItem.vue
+++ b/web/src/components/build-feed/BuildFeedItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="build" class="flex text-gray-600 dark:text-gray-500 w-full">
+  <div v-if="build" class="flex text-color w-full">
     <BuildStatusIcon :build="build" class="flex items-center" />
     <div class="flex flex-col ml-4 min-w-0">
       <span class="underline">{{ build.owner }} / {{ build.name }}</span>
diff --git a/web/src/components/build-feed/BuildFeedSidebar.vue b/web/src/components/build-feed/BuildFeedSidebar.vue
index e28a31896..33f4fc661 100644
--- a/web/src/components/build-feed/BuildFeedSidebar.vue
+++ b/web/src/components/build-feed/BuildFeedSidebar.vue
@@ -21,7 +21,7 @@
       <BuildFeedItem :build="build" />
     </router-link>
 
-    <span v-if="sortedBuildFeed.length === 0" class="text-gray-500 m-4">{{ $t('repo.build.no_pipelines') }}</span>
+    <span v-if="sortedBuildFeed.length === 0" class="text-color m-4">{{ $t('repo.build.no_pipelines') }}</span>
   </div>
 </template>
 
diff --git a/web/src/components/form/Checkbox.vue b/web/src/components/form/Checkbox.vue
index 0759cacd2..cc3ff5e57 100644
--- a/web/src/components/form/Checkbox.vue
+++ b/web/src/components/form/Checkbox.vue
@@ -22,10 +22,8 @@
       @click="innerValue = !innerValue"
     />
     <div class="flex flex-col ml-4">
-      <label v-if="label" class="cursor-pointer text-gray-600 dark:text-gray-500" :for="`checkbox-${id}`">{{
-        label
-      }}</label>
-      <span v-if="description" class="text-sm text-gray-400 dark:text-gray-600">{{ description }}</span>
+      <label v-if="label" class="cursor-pointer text-color" :for="`checkbox-${id}`">{{ label }}</label>
+      <span v-if="description" class="text-sm text-color-alt">{{ description }}</span>
     </div>
   </div>
 </template>
diff --git a/web/src/components/form/InputField.vue b/web/src/components/form/InputField.vue
index 4edcbec7d..fb33dc1e6 100644
--- a/web/src/components/form/InputField.vue
+++ b/web/src/components/form/InputField.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="flex flex-col mt-2 mb-4">
-    <div class="flex items-center text-gray-500 font-bold mb-2">
+    <div class="flex items-center text-color font-bold mb-2">
       <label v-if="label" v-bind="$attrs">{{ label }}</label>
       <DocsLink v-if="docsUrl" :url="docsUrl" class="ml-2" />
     </div>
     <slot />
-    <div v-if="$slots['description']" class="ml-1 text-gray-400">
+    <div v-if="$slots['description']" class="ml-1 text-color-alt">
       <slot name="description" />
     </div>
   </div>
diff --git a/web/src/components/form/RadioField.vue b/web/src/components/form/RadioField.vue
index 9a72dd100..cda5b1e9c 100644
--- a/web/src/components/form/RadioField.vue
+++ b/web/src/components/form/RadioField.vue
@@ -21,10 +21,8 @@
       @click="innerValue = option.value"
     />
     <div class="flex flex-col ml-4">
-      <label class="cursor-pointer text-gray-600 dark:text-gray-500" :for="`radio-${id}-${option.value}`">{{
-        option.text
-      }}</label>
-      <span v-if="option.description" class="text-sm text-gray-400 dark:text-gray-600">{{ option.description }}</span>
+      <label class="cursor-pointer text-color" :for="`radio-${id}-${option.value}`">{{ option.text }}</label>
+      <span v-if="option.description" class="text-sm text-color-alt">{{ option.description }}</span>
     </div>
   </div>
 </template>
diff --git a/web/src/components/form/SelectField.vue b/web/src/components/form/SelectField.vue
index 5b1d4558e..8301230f2 100644
--- a/web/src/components/form/SelectField.vue
+++ b/web/src/components/form/SelectField.vue
@@ -3,12 +3,12 @@
     v-model="innerValue"
     class="w-full border border-gray-900 py-1 px-2 rounded-md bg-white focus:outline-none border-gray-900"
     :class="{
-      'text-gray-500': innerValue === '',
+      'text-color': innerValue === '',
       'text-gray-900': innerValue !== '',
     }"
   >
     <option v-if="placeholder" value="" class="hidden">{{ placeholder }}</option>
-    <option v-for="option in options" :key="option.value" :value="option.value" class="text-gray-500">
+    <option v-for="option in options" :key="option.value" :value="option.value" class="text-color">
       {{ option.text }}
     </option>
   </select>
diff --git a/web/src/components/form/TextField.vue b/web/src/components/form/TextField.vue
index 57212cefb..b84d71b55 100644
--- a/web/src/components/form/TextField.vue
+++ b/web/src/components/form/TextField.vue
@@ -14,14 +14,7 @@
     <input
       v-if="lines === 1"
       v-model="innerValue"
-      class="
-        w-full
-        bg-transparent
-        text-gray-600
-        placeholder-gray-400
-        focus:outline-none focus:border-blue-400
-        dark:placeholder-gray-600 dark:text-gray-500
-      "
+      class="w-full bg-transparent text-color focus:outline-none focus:border-blue-400"
       :disabled="disabled"
       :type="type"
       :placeholder="placeholder"
@@ -29,14 +22,7 @@
     <textarea
       v-else
       v-model="innerValue"
-      class="
-        w-full
-        bg-transparent
-        text-gray-600
-        placeholder-gray-400
-        focus:outline-none focus:border-blue-400
-        dark:placeholder-gray-600 dark:text-gray-500
-      "
+      class="w-full bg-transparent text-color focus:outline-none focus:border-blue-400"
       :disabled="disabled"
       :placeholder="placeholder"
       :rows="lines"
diff --git a/web/src/components/layout/header/Navbar.vue b/web/src/components/layout/header/Navbar.vue
index c7811fb18..8dc8044ec 100644
--- a/web/src/components/layout/header/Navbar.vue
+++ b/web/src/components/layout/header/Navbar.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="flex shadow-lg bg-lime-600 text-neutral-content px-2 md:px-8 py-2 dark:bg-dark-gray-900">
-    <div class="flex text-white dark:text-gray-500 items-center">
+  <div class="flex shadow-lg dark:shadow-sm bg-lime-600 text-neutral-content px-2 md:px-8 py-2 dark:bg-dark-gray-900">
+    <div class="flex text-white dark:text-gray-400 items-center">
       <router-link :to="{ name: 'home' }" class="relative">
         <img class="-mt-3 w-8" src="../../../assets/logo.svg?url" />
         <span class="absolute -bottom-4 text-xs">{{ version }}</span>
@@ -14,7 +14,7 @@
         <span class="hidden md:flex">{{ $t('repositories') }}</span>
       </router-link>
     </div>
-    <div class="flex ml-auto items-center space-x-4 text-white dark:text-gray-500">
+    <div class="flex ml-auto items-center space-x-4 text-white dark:text-gray-400">
       <a
         :href="docsUrl"
         target="_blank"
diff --git a/web/src/components/repo/build/BuildItem.vue b/web/src/components/repo/build/BuildItem.vue
index b674d583d..a143b7a9a 100644
--- a/web/src/components/repo/build/BuildItem.vue
+++ b/web/src/components/repo/build/BuildItem.vue
@@ -23,22 +23,13 @@
       </div>
 
       <div class="w-full md:w-auto md:mx-4 flex items-center min-w-0">
-        <span
-          class="text-gray-600 <md:underline dark:text-gray-500 whitespace-nowrap overflow-hidden overflow-ellipsis"
-          >{{ message }}</span
-        >
+        <span class="text-color-alt <md:underline whitespace-nowrap overflow-hidden overflow-ellipsis">{{
+          message
+        }}</span>
       </div>
 
       <div
-        class="
-          grid grid-rows-2 grid-flow-col
-          w-full
-          md:ml-auto md:w-96
-          py-2
-          gap-x-4 gap-y-2
-          flex-shrink-0
-          text-gray-500
-        "
+        class="grid grid-rows-2 grid-flow-col w-full md:ml-auto md:w-96 py-2 gap-x-4 gap-y-2 flex-shrink-0 text-color"
       >
         <div class="flex space-x-2 items-center min-w-0">
           <Icon v-if="build.event === 'pull_request'" name="pull_request" />
diff --git a/web/src/components/repo/build/BuildList.vue b/web/src/components/repo/build/BuildList.vue
index 64458c5cc..e3a749292 100644
--- a/web/src/components/repo/build/BuildList.vue
+++ b/web/src/components/repo/build/BuildList.vue
@@ -9,7 +9,7 @@
       <BuildItem :build="build" />
     </router-link>
     <Panel v-if="builds.length === 0">
-      <span class="text-gray-500">{{ $t('repo.build.no_pipelines') }}</span>
+      <span class="text-color">{{ $t('repo.build.no_pipelines') }}</span>
     </Panel>
   </div>
 </template>
diff --git a/web/src/components/repo/build/BuildLog.vue b/web/src/components/repo/build/BuildLog.vue
index e9ec308db..7e4ab9260 100644
--- a/web/src/components/repo/build/BuildLog.vue
+++ b/web/src/components/repo/build/BuildLog.vue
@@ -13,7 +13,7 @@
         <div id="terminal" class="w-full h-full" />
       </div>
 
-      <div class="m-auto text-xl text-gray-500 dark:text-gray-500">
+      <div class="m-auto text-xl text-color">
         <span v-if="proc?.error" class="text-red-400">{{ proc.error }}</span>
         <span v-else-if="proc?.state === 'skipped'" class="text-red-400">{{ $t('repo.build.actions.canceled') }}</span>
         <span v-else-if="!proc?.start_time">{{ $t('repo.build.step_not_started') }}</span>
diff --git a/web/src/components/repo/settings/ActionsTab.vue b/web/src/components/repo/settings/ActionsTab.vue
index 95af9e58f..78510feef 100644
--- a/web/src/components/repo/settings/ActionsTab.vue
+++ b/web/src/components/repo/settings/ActionsTab.vue
@@ -1,7 +1,7 @@
 <template>
   <Panel>
     <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
-      <h1 class="text-xl ml-2 text-gray-500">{{ $t('repo.settings.actions.actions') }}</h1>
+      <h1 class="text-xl ml-2 text-color">{{ $t('repo.settings.actions.actions') }}</h1>
     </div>
 
     <div class="flex flex-col">
diff --git a/web/src/components/repo/settings/BadgeTab.vue b/web/src/components/repo/settings/BadgeTab.vue
index aa1319668..640c19c88 100644
--- a/web/src/components/repo/settings/BadgeTab.vue
+++ b/web/src/components/repo/settings/BadgeTab.vue
@@ -1,7 +1,7 @@
 <template>
   <Panel>
     <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
-      <h1 class="text-xl ml-2 text-gray-500">{{ $t('repo.settings.badge.badge') }}</h1>
+      <h1 class="text-xl ml-2 text-color">{{ $t('repo.settings.badge.badge') }}</h1>
       <a v-if="badgeUrl" :href="badgeUrl" target="_blank" class="ml-auto">
         <img :src="badgeUrl" />
       </a>
@@ -9,17 +9,17 @@
 
     <div class="flex flex-col space-y-4">
       <div>
-        <h2 class="text-lg text-gray-500 ml-2">{{ $t('url') }}</h2>
+        <h2 class="text-lg text-color ml-2">{{ $t('url') }}</h2>
         <pre class="box">{{ baseUrl }}{{ badgeUrl }}</pre>
       </div>
 
       <div>
-        <h2 class="text-lg text-gray-500 ml-2">{{ $t('repo.settings.badge.url_branch') }}</h2>
+        <h2 class="text-lg text-color ml-2">{{ $t('repo.settings.badge.url_branch') }}</h2>
         <pre class="box">{{ baseUrl }}{{ badgeUrl }}?branch=<span class="font-bold">&lt;branch&gt;</span></pre>
       </div>
 
       <div>
-        <h2 class="text-lg text-gray-500 ml-2">{{ $t('repo.settings.badge.markdown') }}</h2>
+        <h2 class="text-lg text-color ml-2">{{ $t('repo.settings.badge.markdown') }}</h2>
         <pre class="box">[![status-badge]({{ baseUrl }}{{ badgeUrl }})]({{ baseUrl }}{{ repoUrl }})</pre>
       </div>
     </div>
@@ -62,7 +62,7 @@ export default defineComponent({
 
 <style scoped>
 .box {
-  @apply bg-gray-400 p-2 rounded-md text-white break-words dark:bg-dark-300 dark:text-gray-500;
+  @apply bg-gray-500 p-2 rounded-md text-white break-words dark:bg-dark-400 dark:text-gray-400;
   white-space: pre-wrap;
 }
 </style>
diff --git a/web/src/components/repo/settings/GeneralTab.vue b/web/src/components/repo/settings/GeneralTab.vue
index d93ef0081..ab4f330e6 100644
--- a/web/src/components/repo/settings/GeneralTab.vue
+++ b/web/src/components/repo/settings/GeneralTab.vue
@@ -1,7 +1,7 @@
 <template>
   <Panel>
     <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
-      <h1 class="text-xl ml-2 text-gray-500">{{ $t('general') }}</h1>
+      <h1 class="text-xl ml-2 text-color">{{ $t('general') }}</h1>
     </div>
 
     <div v-if="repoSettings" class="flex flex-col">
@@ -16,7 +16,7 @@
         />
         <template #description>
           <!-- eslint-disable-next-line vue/no-v-html -->
-          <p class="text-sm text-gray-400 dark:text-gray-600" v-html="$t('repo.settings.general.pipeline_path.desc')" />
+          <p class="text-sm text-color-alt" v-html="$t('repo.settings.general.pipeline_path.desc')" />
         </template>
       </InputField>
 
diff --git a/web/src/components/repo/settings/RegistriesTab.vue b/web/src/components/repo/settings/RegistriesTab.vue
index aa41cda56..04cebe2c4 100644
--- a/web/src/components/repo/settings/RegistriesTab.vue
+++ b/web/src/components/repo/settings/RegistriesTab.vue
@@ -2,8 +2,8 @@
   <Panel>
     <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
       <div class="ml-2">
-        <h1 class="text-xl text-gray-500">{{ $t('repo.settings.registries.creds') }}</h1>
-        <p class="text-sm text-gray-400 dark:text-gray-600">
+        <h1 class="text-xl text-color">{{ $t('repo.settings.registries.creds') }}</h1>
+        <p class="text-sm text-color-alt">
           {{ $t('repo.settings.registries.desc') }}
           <DocsLink url="docs/usage/registries" />
         </p>
@@ -24,13 +24,13 @@
       />
     </div>
 
-    <div v-if="!selectedRegistry" class="space-y-4 text-gray-500">
+    <div v-if="!selectedRegistry" class="space-y-4 text-color">
       <ListItem v-for="registry in registries" :key="registry.id" class="items-center">
         <span>{{ registry.address }}</span>
         <IconButton icon="edit" class="ml-auto w-8 h-8" @click="selectedRegistry = registry" />
         <IconButton
           icon="trash"
-          class="w-8 h-8 hover:text-red-400"
+          class="w-8 h-8 hover:text-red-400 hover:dark:text-red-500"
           :is-loading="isDeleting"
           @click="deleteRegistry(registry)"
         />
diff --git a/web/src/components/repo/settings/SecretsTab.vue b/web/src/components/repo/settings/SecretsTab.vue
index eff87dbd1..e47eb0f28 100644
--- a/web/src/components/repo/settings/SecretsTab.vue
+++ b/web/src/components/repo/settings/SecretsTab.vue
@@ -2,8 +2,8 @@
   <Panel>
     <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
       <div class="ml-2">
-        <h1 class="text-xl text-gray-500">{{ $t('repo.settings.secrets.secrets') }}</h1>
-        <p class="text-sm text-gray-400 dark:text-gray-600">
+        <h1 class="text-xl text-color">{{ $t('repo.settings.secrets.secrets') }}</h1>
+        <p class="text-sm text-color-alt">
           {{ $t('repo.settings.secrets.desc') }}
           <DocsLink url="docs/usage/secrets" />
         </p>
@@ -18,21 +18,21 @@
       <Button v-else class="ml-auto" :text="$t('repo.settings.secrets.add')" start-icon="plus" @click="showAddSecret" />
     </div>
 
-    <div v-if="!selectedSecret" class="space-y-4 text-gray-500">
+    <div v-if="!selectedSecret" class="space-y-4 text-color">
       <ListItem v-for="secret in secrets" :key="secret.id" class="items-center">
         <span>{{ secret.name }}</span>
         <div class="ml-auto">
           <span
             v-for="event in secret.event"
             :key="event"
-            class="bg-gray-400 dark:bg-dark-200 dark:text-gray-500 text-white rounded-md mx-1 py-1 px-2 text-sm"
+            class="bg-gray-500 dark:bg-dark-700 dark:text-gray-400 text-white rounded-md mx-1 py-1 px-2 text-sm"
             >{{ event }}</span
           >
         </div>
         <IconButton icon="edit" class="ml-2 w-8 h-8" @click="selectedSecret = secret" />
         <IconButton
           icon="trash"
-          class="ml-2 w-8 h-8 hover:text-red-400"
+          class="ml-2 w-8 h-8 hover:text-red-400 hover:dark:text-red-500"
           :is-loading="isDeleting"
           @click="deleteSecret(secret)"
         />
diff --git a/web/src/components/tabs/Tabs.vue b/web/src/components/tabs/Tabs.vue
index 1ea49f724..0688ec505 100644
--- a/web/src/components/tabs/Tabs.vue
+++ b/web/src/components/tabs/Tabs.vue
@@ -11,9 +11,9 @@
           flex
           cursor-pointer
           md:border-b-2
-          text-gray-500
+          text-color
           hover:text-gray-700
-          dark:text-gray-500 dark:hover:text-gray-400
+          dark:hover:text-gray-400
           items-center
         "
         :class="{
diff --git a/web/src/main.ts b/web/src/main.ts
index c46ad3b72..5f7e47629 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -1,6 +1,7 @@
 import 'windi.css';
 import 'floating-vue/dist/style.css'; // eslint-disable-line no-restricted-imports
 import '~/compositions/useFavicon';
+import '~/style.css';
 
 import { createPinia } from 'pinia';
 import { createApp } from 'vue';
diff --git a/web/src/style.css b/web/src/style.css
new file mode 100644
index 000000000..720d6e9e9
--- /dev/null
+++ b/web/src/style.css
@@ -0,0 +1,52 @@
+html,
+body,
+#app {
+  width: 100%;
+  height: 100%;
+}
+
+.vue-notification {
+  @apply rounded-md text-base border-l-6;
+}
+
+.vue-notification .notification-title {
+  @apply font-normal;
+}
+
+.vue-notification.success {
+  @apply bg-lime-600 border-l-lime-700;
+}
+
+.vue-notification.error {
+  @apply bg-red-600 border-l-red-700;
+}
+
+*::-webkit-scrollbar {
+  @apply bg-transparent w-12px h-12px;
+}
+
+* {
+  scrollbar-width: thin;
+}
+
+*::-webkit-scrollbar-thumb {
+  transition: background 0.2s ease-in-out;
+  border: 3px solid transparent;
+  @apply bg-cool-gray-200 dark:bg-dark-200 rounded-full bg-clip-content;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  @apply bg-cool-gray-300 dark:bg-dark-100;
+}
+
+*::-webkit-scrollbar-corner {
+  @apply bg-transparent;
+}
+
+.text-color {
+  @apply text-gray-600 dark:text-gray-400 placeholder-gray-400 dark:placeholder-gray-500;
+}
+
+.text-color-alt {
+  @apply text-gray-500 dark:text-gray-500;
+}
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index 25ca84039..275573d48 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -19,7 +19,7 @@
         <img class="w-48 h-48" src="../assets/logo.svg?url" />
       </div>
       <div class="flex flex-col my-8 md:w-2/5 p-4 items-center justify-center">
-        <h1 class="text-xl text-gray-600 dark:text-gray-500">{{ $t('welcome') }}</h1>
+        <h1 class="text-xl text-color">{{ $t('welcome') }}</h1>
         <Button class="mt-4" @click="doLogin">{{ $t('login') }}</Button>
       </div>
     </div>
diff --git a/web/src/views/RepoAdd.vue b/web/src/views/RepoAdd.vue
index 085c00935..d14c92406 100644
--- a/web/src/views/RepoAdd.vue
+++ b/web/src/views/RepoAdd.vue
@@ -2,7 +2,7 @@
   <FluidContainer class="flex flex-col">
     <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-dark-200">
       <IconButton :to="{ name: 'repos' }" icon="back" />
-      <h1 class="text-xl ml-2 text-gray-500">{{ $t('repo.add') }}</h1>
+      <h1 class="text-xl ml-2 text-color">{{ $t('repo.add') }}</h1>
       <TextField v-model="search" class="w-auto ml-auto" :placeholder="$t('search')" />
       <Button
         class="ml-auto"
@@ -21,8 +21,8 @@
         :clickable="repo.active"
         @click="repo.active && $router.push({ name: 'repo', params: { repoOwner: repo.owner, repoName: repo.name } })"
       >
-        <span class="text-gray-500">{{ repo.full_name }}</span>
-        <span v-if="repo.active" class="ml-auto text-gray-500">{{ $t('repo.enable.enabled') }}</span>
+        <span class="text-color">{{ repo.full_name }}</span>
+        <span v-if="repo.active" class="ml-auto text-color-alt">{{ $t('repo.enable.enabled') }}</span>
         <Button
           v-if="!repo.active"
           class="ml-auto"
diff --git a/web/src/views/Repos.vue b/web/src/views/Repos.vue
index ad31c4fd5..95ddc639f 100644
--- a/web/src/views/Repos.vue
+++ b/web/src/views/Repos.vue
@@ -1,7 +1,7 @@
 <template>
   <FluidContainer class="flex flex-col">
     <div class="flex flex-row flex-wrap md:grid md:grid-cols-3 border-b pb-4 mb-4 dark:border-dark-200">
-      <h1 class="text-xl text-gray-500">Repositories</h1>
+      <h1 class="text-xl text-color">Repositories</h1>
       <TextField v-model="search" class="w-auto md:ml-auto md:mr-auto" :placeholder="$t('search')" />
       <Button class="md:ml-auto" :to="{ name: 'repo-add' }" start-icon="plus" :text="$t('repo.add')" />
     </div>
@@ -13,7 +13,7 @@
         clickable
         @click="$router.push({ name: 'repo', params: { repoName: repo.name, repoOwner: repo.owner } })"
       >
-        <span class="text-gray-500">{{ `${repo.owner} / ${repo.name}` }}</span>
+        <span class="text-color">{{ `${repo.owner} / ${repo.name}` }}</span>
       </ListItem>
     </div>
   </FluidContainer>
diff --git a/web/src/views/ReposOwner.vue b/web/src/views/ReposOwner.vue
index b7c2267ec..e6cfd9e77 100644
--- a/web/src/views/ReposOwner.vue
+++ b/web/src/views/ReposOwner.vue
@@ -1,7 +1,7 @@
 <template>
   <FluidContainer class="flex flex-col">
     <div class="flex flex-row flex-wrap md:grid md:grid-cols-3 border-b pb-4 mb-4 dark:border-dark-200">
-      <h1 class="text-xl text-gray-500">{{ repoOwner }}</h1>
+      <h1 class="text-xl text-color">{{ repoOwner }}</h1>
       <TextField v-model="search" class="w-auto md:ml-auto md:mr-auto" :placeholder="$t('search')" />
     </div>
 
@@ -12,11 +12,11 @@
         clickable
         @click="$router.push({ name: 'repo', params: { repoName: repo.name, repoOwner: repo.owner } })"
       >
-        <span class="text-gray-500">{{ `${repo.name}` }}</span>
+        <span class="text-color">{{ `${repo.name}` }}</span>
       </ListItem>
     </div>
     <div v-if="(searchedRepos || []).length <= 0" class="text-center">
-      <span class="text-gray-500 m-auto">{{ $t('repo.user_none') }}</span>
+      <span class="text-color m-auto">{{ $t('repo.user_none') }}</span>
     </div>
   </FluidContainer>
 </template>
diff --git a/web/src/views/User.vue b/web/src/views/User.vue
index f15b50252..4adc3b228 100644
--- a/web/src/views/User.vue
+++ b/web/src/views/User.vue
@@ -3,23 +3,23 @@
     <Button class="ml-auto" :text="$t('logout')" :to="`${address}/logout`" />
 
     <div>
-      <h2 class="text-lg text-gray-500">{{ $t('user.token') }}</h2>
+      <h2 class="text-lg text-color">{{ $t('user.token') }}</h2>
       <pre class="cli-box">{{ token }}</pre>
     </div>
 
     <div>
-      <h2 class="text-lg text-gray-500">{{ $t('user.shell_setup') }}</h2>
+      <h2 class="text-lg text-color">{{ $t('user.shell_setup') }}</h2>
       <pre class="cli-box">{{ usageWithShell }}</pre>
     </div>
 
     <div>
-      <h2 class="text-lg text-gray-500">{{ $t('user.api_usage') }}</h2>
+      <h2 class="text-lg text-color">{{ $t('user.api_usage') }}</h2>
       <pre class="cli-box">{{ usageWithCurl }}</pre>
     </div>
 
     <div>
       <div class="flex items-center">
-        <h2 class="text-lg text-gray-500">{{ $t('user.cli_usage') }}</h2>
+        <h2 class="text-lg text-color">{{ $t('user.cli_usage') }}</h2>
         <a :href="cliDownload" target="_blank" class="ml-4 text-link">{{ $t('user.dl_cli') }}</a>
       </div>
       <pre class="cli-box">{{ usageWithCli }}</pre>
@@ -77,7 +77,7 @@ export default defineComponent({
 
 <style scoped>
 .cli-box {
-  @apply bg-gray-400 p-2 rounded-md text-white break-words dark:bg-dark-300 dark:text-gray-500;
+  @apply bg-gray-500 p-2 rounded-md text-white break-words dark:bg-dark-400 dark:text-gray-400;
   white-space: pre-wrap;
 }
 </style>
diff --git a/web/src/views/repo/RepoBranch.vue b/web/src/views/repo/RepoBranch.vue
index 520df24d1..8d1bc4071 100644
--- a/web/src/views/repo/RepoBranch.vue
+++ b/web/src/views/repo/RepoBranch.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex w-full mb-4 justify-center">
-    <span class="text-gray-600 dark:text-gray-500 text-xl">{{ $t('repo.build.pipelines_for', { branch }) }}</span>
+    <span class="text-color text-xl">{{ $t('repo.build.pipelines_for', { branch }) }}</span>
   </div>
   <BuildList :builds="builds" :repo="repo" />
 </template>
diff --git a/web/src/views/repo/RepoBranches.vue b/web/src/views/repo/RepoBranches.vue
index 185f63fc7..0588c0a90 100644
--- a/web/src/views/repo/RepoBranches.vue
+++ b/web/src/views/repo/RepoBranches.vue
@@ -6,7 +6,7 @@
       :to="{ name: 'repo-branch', params: { branch } }"
       class="flex"
     >
-      <ListItem clickable class="text-gray-600 dark:text-gray-500">
+      <ListItem clickable class="text-color">
         {{ branch }}
       </ListItem>
     </router-link>
diff --git a/web/src/views/repo/RepoSettings.vue b/web/src/views/repo/RepoSettings.vue
index 433f87dee..7b4e34cae 100644
--- a/web/src/views/repo/RepoSettings.vue
+++ b/web/src/views/repo/RepoSettings.vue
@@ -2,7 +2,7 @@
   <FluidContainer>
     <div class="flex border-b items-center pb-4 mb-4 dark:border-gray-600">
       <IconButton icon="back" @click="goBack" />
-      <h1 class="text-xl ml-2 text-gray-500">{{ $t('repo.settings.settings') }}</h1>
+      <h1 class="text-xl ml-2 text-color">{{ $t('repo.settings.settings') }}</h1>
     </div>
 
     <Tabs>
diff --git a/web/src/views/repo/RepoWrapper.vue b/web/src/views/repo/RepoWrapper.vue
index 0a7220a78..1550fee88 100644
--- a/web/src/views/repo/RepoWrapper.vue
+++ b/web/src/views/repo/RepoWrapper.vue
@@ -1,7 +1,7 @@
 <template>
   <FluidContainer v-if="repo && repoPermissions && $route.meta.repoHeader">
     <div class="flex flex-wrap border-b items-center pb-4 mb-4 dark:border-gray-600 justify-center">
-      <h1 class="text-xl text-gray-500 w-full md:w-auto text-center mb-4 md:mb-0">
+      <h1 class="text-xl text-color w-full md:w-auto text-center mb-4 md:mb-0">
         <router-link :to="{ name: 'repos-owner', params: { repoOwner } }">{{ repoOwner }}</router-link>
         {{ ` / ${repo.name}` }}
       </h1>
@@ -11,7 +11,7 @@
       <a
         :href="repo.link_url"
         target="_blank"
-        class="flex ml-4 p-1 rounded-full text-gray-500 hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-600"
+        class="flex ml-4 p-1 rounded-full text-color hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-600"
       >
         <Icon v-if="repo.link_url.startsWith('https://github.com/')" name="github" />
         <Icon v-else name="repo" />
diff --git a/web/src/views/repo/build/Build.vue b/web/src/views/repo/build/Build.vue
index ba13acd5d..738b1a368 100644
--- a/web/src/views/repo/build/Build.vue
+++ b/web/src/views/repo/build/Build.vue
@@ -10,8 +10,8 @@
         </div>
 
         <div v-else-if="build.status === 'blocked'" class="flex flex-col flex-grow justify-center items-center">
-          <Icon name="status-blocked" class="w-32 h-32 text-gray-500" />
-          <p class="text-xl text-gray-500">{{ $t('repo.build.protected.awaits') }}</p>
+          <Icon name="status-blocked" class="w-32 h-32 text-color" />
+          <p class="text-xl text-color">{{ $t('repo.build.protected.awaits') }}</p>
           <div v-if="repoPermissions.push" class="flex mt-2 space-x-4">
             <Button
               color="green"
@@ -29,8 +29,8 @@
         </div>
 
         <div v-else-if="build.status === 'declined'" class="flex flex-col flex-grow justify-center items-center">
-          <Icon name="status-blocked" class="w-32 h-32 text-gray-500" />
-          <p class="text-xl text-gray-500">{{ $t('repo.build.protected.declined') }}</p>
+          <Icon name="status-blocked" class="w-32 h-32 text-color" />
+          <p class="text-xl text-color">{{ $t('repo.build.protected.declined') }}</p>
         </div>
 
         <BuildLog
diff --git a/web/src/views/repo/build/BuildChangedFiles.vue b/web/src/views/repo/build/BuildChangedFiles.vue
index 167e5abca..c84e07a95 100644
--- a/web/src/views/repo/build/BuildChangedFiles.vue
+++ b/web/src/views/repo/build/BuildChangedFiles.vue
@@ -1,8 +1,8 @@
 <template>
-  <FluidContainer v-if="build" class="flex flex-col gap-y-6 text-gray-500 justify-between py-0">
+  <FluidContainer v-if="build" class="flex flex-col gap-y-6 text-color justify-between py-0">
     <Panel>
       <div v-if="build.changed_files === undefined || build.changed_files.length < 1" class="w-full">
-        <span class="text-gray-500">{{ $t('repo.build.no_files') }}</span>
+        <span class="text-color">{{ $t('repo.build.no_files') }}</span>
       </div>
       <div v-for="file in build.changed_files" v-else :key="file" class="w-full">
         <div>- {{ file }}</div>
diff --git a/web/src/views/repo/build/BuildConfig.vue b/web/src/views/repo/build/BuildConfig.vue
index cde5e0a5e..6dd83b8b7 100644
--- a/web/src/views/repo/build/BuildConfig.vue
+++ b/web/src/views/repo/build/BuildConfig.vue
@@ -1,5 +1,5 @@
 <template>
-  <FluidContainer v-if="buildConfigs" class="flex flex-col gap-y-6 text-gray-500 justify-between !pt-0">
+  <FluidContainer v-if="buildConfigs" class="flex flex-col gap-y-6 text-color justify-between !pt-0">
     <Panel v-for="buildConfig in buildConfigs" :key="buildConfig.hash" :title="buildConfig.name">
       <span class="font-mono whitespace-pre">{{ buildConfig.data }}</span>
     </Panel>
diff --git a/web/src/views/repo/build/BuildWrapper.vue b/web/src/views/repo/build/BuildWrapper.vue
index d3d92f794..557782d84 100644
--- a/web/src/views/repo/build/BuildWrapper.vue
+++ b/web/src/views/repo/build/BuildWrapper.vue
@@ -11,7 +11,7 @@
             <md:flex-wrap
             md:order-none md:w-auto md:ml-2
             flex
-            text-center text-xl text-gray-500
+            text-center text-xl text-color
             whitespace-nowrap
             overflow-hidden overflow-ellipsis
           "
@@ -48,7 +48,7 @@
           <Tab id="changed-files" :title="$t('repo.build.files', { files: build.changed_files?.length || 0 })" />
         </Tabs>
 
-        <div class="flex justify-between gap-x-4 text-gray-500 flex-shrink-0 pb-2 md:p-0 mx-auto md:mr-0">
+        <div class="flex justify-between gap-x-4 text-color flex-shrink-0 pb-2 md:p-0 mx-auto md:mr-0">
           <div class="flex space-x-1 items-center flex-shrink-0">
             <Icon name="since" />
             <Tooltip>