refactor: rework general appearance

src/App.vue

 <template>
   <template v-if="authStore.currentUser">
-    <div :key="locale" class="app tw-flex tw-flex-col md:tw-grid">
+    <div :key="locale" class="app tw-flex tw-flex-col md:tw-grid tw-bg-gray-50">
       <ABreadcrumbs
         v-if="navStore.breadcrumbs.length > 0"
         class="tw-px-6 tw-border-solid tw-border-gray-200 tw-border-0 tw-border-b"
@@ -39,7 +39,7 @@ const navStore = useNavStore()
 <style scoped>
 .app {
   min-height: calc(100dvh - 40px);
-  grid-template-areas: 'nav breadcrumbs breadcrumbs' 'nav main slot';
+  grid-template-areas: 'nav breadcrumbs breadcrumbs' 'nav main main';
   grid-template-columns: 360px minmax(320px, 1200px) minmax(0, 1fr);
   grid-template-rows: min-content minmax(0, 1fr);
 }

src/Pages/ShowEpisodeDetails.vue

@@ -10,7 +10,7 @@
       <template #header>
         <label
           v-if="playlist && playlist.entries.length > 0"
-          class="btn btn-sm tw-gap-2 -tw-ml-4"
+          class="btn btn-sm tw-gap-2 -tw-ml-4 tw-mb-0"
           :aria-disabled="playlist.entries.length > 1"
         >
           <input

src/Pages/ShowEpisodes.vue

 <template>
-  <div class="tw-max-w-5xl">
-    <PageHeader :lead="show.name" :title="t('navigation.show.episodes')" :editing-metadata="show" />
+  <PageHeader :lead="show.name" :title="t('navigation.show.episodes')" :editing-metadata="show" />
 
+  <div class="tw-max-w-5xl">
     <TimeSlotList :show="show" />
     <ScheduleList :show="show" />
   </div>

src/assets/styles/tailwind.css

@@ -31,6 +31,10 @@ footer a:hover {
   color: white;
 }
 
+.fc-scroller {
+  background: white;
+}
+
 .otherShow {
   background-color: theme('colors.gray.300');
   border-color: theme('colors.gray.400');

src/components/PageHeader.vue

 <template>
   <header
-    class="tw-flex tw-items-center tw-justify-between tw-mb-10 tw-border-solid tw-border-gray-200 tw-border-0 tw-border-b tw-pb-6"
+    class="tw-flex tw-items-center tw-justify-between -tw-m-6 tw-p-6 tw-mb-10 tw-bg-white tw-shadow-sm"
     data-testid="page-header"
   >
     <h1 class="tw-text-5xl tw-font-black tw-m-0">

src/components/generic/AFieldset.vue

+<template>
+  <component :is="as" class="tw-shadow tw-p-6 tw-rounded tw-m-0">
+    <template v-if="title">
+      <component
+        :is="as === 'fieldset' ? 'legend' : 'h2'"
+        class="tw-text-xl tw-font-bold -tw-mt-2 tw-m-0 tw-mb-3"
+        :class="{ 'tw-float-left tw-w-full': as === 'fieldset' }"
+        >{{ title }}</component
+      >
+      <div v-if="as === 'fieldset'" class="tw-clear-left" role="presentation" />
+    </template>
+
+    <slot />
+  </component>
+</template>
+
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    title?: string
+    as?: string
+  }>(),
+  {
+    as: 'fieldset',
+    title: '',
+  },
+)
+</script>

src/components/generic/FormGroup.vue

@@ -19,7 +19,7 @@
       <label
         v-if="label"
         :for="id"
-        class="tw-text-gray-500 tw-font-medium tw-flex tw-gap-2 tw-items-center tw-grow tw-m-0"
+        class="tw-text-gray-600 tw-flex tw-gap-2 tw-items-center tw-grow tw-m-0"
       >
         <span>{{ label }}</span>
         <button v-if="withEditButton" type="button" class="btn btn-sm tw-p-0" @click="emit('edit')">

src/components/nav/ANavMenu.vue

@@ -77,7 +77,7 @@ const attrs = useAttrs()
 }
 
 .a-nav-link {
-  @apply tw-bg-white tw-rounded-lg tw-transition-colors tw-border tw-border-solid tw-border-black/5;
+  @apply tw-bg-white tw-rounded tw-transition-colors tw-border tw-border-solid tw-border-black/5;
   color: inherit;
 
   &:hover {
@@ -85,7 +85,7 @@ const attrs = useAttrs()
   }
 
   &.is-active {
-    @apply tw-bg-blue-100 tw-text-aura-primary;
+    @apply tw-bg-aura-primary tw-text-white;
   }
 }
 </style>

src/components/shows/AHousekeeping.vue

 <template>
-  <div id="danger-zone" class="tw-bg-stripes tw-p-4 [background-size:14.14px_14.14px] tw-rounded">
-    <div class="tw-bg-white tw-p-6 tw-shadow">
-      <h2 class="tw-text-xl tw-font-bold -tw-mt-2 tw-mb-3">{{ t('show.housekeeping.title') }}</h2>
+  <div
+    id="danger-zone"
+    class="tw-bg-stripes -tw-mx-3 tw-p-3 [background-size:10px_10px] tw-rounded"
+  >
+    <AFieldset class="tw-bg-white" :title="t('show.housekeeping.title')">
       <div class="tw-flex tw-gap-6 tw-flex-wrap">
         <AHousekeepingSection :title="t('show.housekeeping.flows.archival')">
           <AShowArchivalFlow :show="show" />
@@ -16,7 +18,7 @@
           <AShowSlugRenamingFlow :show="show" />
         </AHousekeepingSection>
       </div>
-    </div>
+    </AFieldset>
   </div>
 </template>
 
@@ -27,6 +29,7 @@ import AShowDeletionFlow from '@/components/shows/AShowDeletionFlow.vue'
 import AShowSlugRenamingFlow from '@/components/shows/AShowSlugRenamingFlow.vue'
 import AHousekeepingSection from '@/components/shows/AHousekeepingSection.vue'
 import { useI18n } from '@/i18n'
+import AFieldset from '@/components/generic/AFieldset.vue'
 
 defineProps<{
   show: Show