feat: update common styles

jsdelivr · Sep 7, 2024 · 8e0d9bb · 8e0d9bb
1 parent 6d84b3e
commit 8e0d9bb
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 14 deletions.
diff --git a/assets/css/global.css b/assets/css/global.css
@@ -71,7 +71,7 @@ input[disabled], textarea[disabled], select[disabled='disabled'] {
 }
 
 @layer classes {
- .title {
+ .page-title {
  @apply text-2xl font-bold
  }
 }
diff --git a/pages/credits.vue b/pages/credits.vue
@@ -1,7 +1,7 @@
 <template>
- <div class="flex min-h-full flex-col p-6" :class="{'min-w-[640px]': creditsChanges.length}">
- <div class="mb-6 flex">
- <h1 class="title">Credits</h1>
+ <div class="min-h-full p-6" :class="{'min-w-[640px]': creditsChanges.length}">
+ <div class="mb-4 flex">
+ <h1 class="page-title">Credits</h1>
  <NuxtLink to="https://github.com/sponsors/jsdelivr" tabindex="-1" class="ml-auto" target="_blank" rel="noopener">
  <Button label="Become a sponsor" icon="pi pi-github"/>
  </NuxtLink>

diff --git a/pages/index.vue b/pages/index.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="grid grid-cols-2 gap-4 p-6">
- <h1 class="title col-span-2 mb-2">Overview</h1>
+ <h1 class="page-title col-span-2 mb-2">Overview</h1>
 
  <div class="rounded-xl border bg-surface-0 max-xl:col-span-2 dark:bg-dark-800">
  <p class="flex border-b px-6 py-3 font-bold text-bluegray-700 dark:text-dark-0">Summary</p>

diff --git a/pages/probes.vue b/pages/probes.vue
@@ -1,8 +1,8 @@
 <template>
  <!-- TODO: P1: @MartinKolarik - review including all texts after the design update. -->
- <div class="flex min-h-full flex-col p-6" :class="{'min-w-[1024px]': probes?.length}">
- <div class="mb-6 flex">
- <h1 class="title">Probes</h1>
+ <div class="min-h-full p-6" :class="{'min-w-[1024px]': probes?.length}">
+ <div class="mb-4 flex">
+ <h1 class="page-title">Probes</h1>
  <Button class="ml-auto" @click="adoptProbeDialog = true">
  <nuxt-icon class="pi" name="capture"/>
  <span class="font-bold">Adopt a probe</span>

diff --git a/pages/settings.vue b/pages/settings.vue
@@ -1,9 +1,7 @@
 <template>
- <div class="flex min-h-full flex-col p-6">
+ <div class="min-h-full p-6">
  <div>
- <!-- TODO: P3: this and most likely other elements should use custom classes, e.g. page-title -->
- <!-- https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes -->
- <h1 class="title">Settings</h1>
+ <h1 class="page-title">Settings</h1>
  </div>
  <div class="mt-6 flex rounded-xl border bg-surface-0 p-6 max-sm:flex-col dark:bg-dark-800">
  <div class="max-sm:mb-4 sm:w-2/5">

diff --git a/pages/tokens.vue b/pages/tokens.vue
@@ -1,7 +1,7 @@
 <template>
- <div class="flex min-h-full flex-col p-6" :class="{'min-w-[640px]': tokens.length}">
+ <div class="min-h-full p-6" :class="{'min-w-[640px]': tokens.length}">
  <div class="mb-4 flex">
- <h1 class="title">Tokens</h1>
+ <h1 class="page-title">Tokens</h1>
  <Button class="ml-auto" label="Generate new token" @click="openTokenDetails('generate')"/>
  </div>
  <p class="xl:w-1/2">