Merge pull request #12 from YunoHost/enh-theming

Enh: misc styling improvements

app.vue

@@ -34,7 +34,8 @@ body {
 /* GLOBAL */
 .btn,
 .select,
-.input {
+.input.input,
+.join-item.btn {
   min-height: 2.5rem;
   height: 2.5rem;
 }

layouts/default.vue

@@ -37,7 +37,7 @@ async function logout() {
 </script>
 
 <template>
-  <div class="container mx-auto p-10 min-h-screen flex flex-col">
+  <div class="container mx-auto p-6 md:p-10 min-h-screen flex flex-col">
     <BaseAlert
       v-if="queryMsg"
       variant="warning"

pages/edit.vue

@@ -29,38 +29,22 @@ const localesAsOptions = computed(() => {
 const themesAsOptions = [
   'auto',
   'system',
+  // Daisyui default themes
   'light',
+  // Custom dark
   'dark',
-  'cupcake',
+  'omg',
-  'bumblebee',
+  'legacy',
-  'emerald',
+  // Daisyui dark
-  'corporate',
+  'black',
   'synthwave',
-  'retro',
+  'halloween',
+  'coffee',
+  // Daisyui light
+  'cupcake',
   'cyberpunk',
   'valentine',
-  'halloween',
-  'garden',
-  'forest',
-  'aqua',
-  'lofi',
-  'pastel',
-  'fantasy',
-  'wireframe',
-  'black',
-  'luxury',
-  'dracula',
-  'cmyk',
-  'autumn',
-  'business',
-  'acid',
-  'lemonade',
-  'night',
-  'coffee',
-  'winter',
-  'dim',
   'nord',
-  'sunset',
 ].map((theme) => ({
   text:
     theme !== 'auto'
@@ -76,25 +60,31 @@ const themesAsOptions = [
 
     <div class="lg:flex lg:justify-between">
       <section
-        class="lg:w-1/2 lg:me-20 h-full card card-body border border-neutral my-10"
+        class="lg:w-1/2 lg:me-20 h-full card card-bordered border-base-300 my-10"
       >
-        <h2 class="text-3xl mb-3">{{ t('edit_personal_settings') }}</h2>
+        <div class="card-header bg-base-300 py-4 px-8">
+          <h2 class="text-3xl">{{ t('edit_personal_settings') }}</h2>
+        </div>
 
-        <UserInfoForm />
+        <UserInfoForm class="p-8" />
       </section>
 
-      <section class="lg:w-1/2 card card-body border border-neutral my-10">
+      <section class="lg:w-1/2 card card-bordered border-base-300 my-10">
-        <h2 class="text-3xl mb-3">{{ $t('change_password') }}</h2>
+        <div class="card-header bg-base-300 py-4 px-8">
+          <h2 class="text-3xl">{{ $t('change_password') }}</h2>
+        </div>
 
-        <UserPasswordForm />
+        <UserPasswordForm class="p-8" />
       </section>
     </div>
 
-    <section class="card card-body border border-neutral my-10">
+    <section class="card card-bordered border-base-300 my-10">
-      <h2 class="text-3xl mb-3">{{ t('edit_browser_settings') }}</h2>
+      <div class="card-header bg-base-300 py-4 px-8">
+        <h2 class="text-3xl">{{ t('edit_browser_settings') }}</h2>
+      </div>
 
-      <form novalidate @submit.prevent>
+      <form class="p-8" novalidate @submit.prevent>
-        <div role="group" class="flex align mb-3">
+        <div role="group" class="flex flex-wrap align mb-3">
           <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
           <label for="language" class="label me-3">{{ t('language') }}</label>
           <select
@@ -113,7 +103,7 @@ const themesAsOptions = [
           </select>
         </div>
 
-        <div role="group" class="flex align">
+        <div role="group" class="flex flex-wrap align">
           <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
           <label for="theme" class="label me-3">{{ t('theme') }}</label>
           <select
@@ -135,3 +125,10 @@ const themesAsOptions = [
     </section>
   </div>
 </template>
+
+<style scoped>
+.card .card-header {
+  border-top-left-radius: var(--rounded-box);
+  border-top-right-radius: var(--rounded-box);
+}
+</style>

pages/index.vue

@@ -87,7 +87,7 @@ async function onSearchSubmit() {
         <li
           v-for="app in apps"
           :key="app.label"
-          class="flex flex-auto border border-neutral rounded p-4 relative hover:bg-neutral hover:text-neutral-content"
+          class="flex text-align flex-auto btn btn-outline btn-neutral !h-auto p-5 relative flex-nowrap items-start justify-normal text-left font-normal"
         >
           <img
             v-if="app.logo"

tailwind.config.js

@@ -1,8 +1,108 @@
 module.exports = {
   // Safelisting some classes to avoid content purge
   plugins: [require('daisyui')],
-  safelist: ['safelisted'],
+  safelist: [
+    'safelisted',
+    'bg-primary',
+    'bg-secondary',
+    'bg-accent',
+    'bg-neutral',
+    'bg-base-100',
+    'bg-base-200',
+    'bg-base-300',
+    'bg-base-content',
+    'bg-info',
+    'bg-success',
+    'bg-warning',
+    'bg-error',
+  ],
   daisyui: {
-    themes: true,
+    themes: [
+      {
+        legacy: {
+          primary: '#2980b9',
+          secondary: '#30333b',
+          accent: '#7028b8',
+          neutral: '#999',
+          info: '#2980b9',
+          success: '#27ae60',
+          warning: '#e67e22',
+          error: '#c0392b',
+          'base-100': '#41444f',
+          'base-200': '#999',
+          'base-300': '#30333b',
+          'base-content': '#fff',
+          'primary-content': '#fff',
+          'secondary-content': '#fff',
+          'accent-content': '#fff',
+          'neutral-content': '#fff',
+          'info-content': '#fff',
+          'success-content': '#fff',
+          'warning-content': '#fff',
+          'error-content': '#fff',
+          '--rounded-box': '0rem',
+          '--rounded-btn': '0rem',
+        },
+        dark: {
+          primary: '#53a5fb',
+          secondary: '#20cb98',
+          accent: '#b957ea',
+          neutral: '#EDEDED',
+          info: '#79e7f9',
+          success: '#70ea8d',
+          warning: '#ffd452',
+          error: '#ff5a5a',
+          'base-100': '#202020',
+          'base-200': '#3C3C3C',
+          'base-300': '#303030',
+          'base-content': '#fafafa',
+          'primary-content': '#000',
+          'secondary-content': '#000',
+          'accent-content': '#000',
+          'neutral-content': '#000',
+          'info-content': '#000',
+          'success-content': '#000',
+          'warning-content': '#000',
+          'error-content': '#000',
+          '--rounded-box': '0.1875rem',
+          '--rounded-btn': '0.1875rem',
+          '--border-btn': '1px',
+        },
+        omg: {
+          primary: '#ffe066',
+          secondary: '#eebefa',
+          accent: '#bac8ff',
+          neutral: '#e7ebf3',
+          info: '#a5d8ff',
+          success: '#63e6be',
+          warning: '#ff922b',
+          error: '#fcc2d7',
+          'base-100': '#343a40',
+          'base-200': '#6f7479',
+          'base-300': '#212529',
+          'base-content': '#f1f3f5',
+          '--rounded-box': '.13rem',
+          '--rounded-btn': '.3rem',
+          '--rounded-badge': '1.9rem',
+          '--animation-btn': '0.25s',
+          '--animation-input': '0.2s',
+          '--btn-focus-scale': '0.95',
+          '--border-btn': '1px',
+          '--tab-border': '1px',
+          '--tab-radius': '0.5rem',
+        },
+      },
+      'light',
+      // dark
+      'black', // to rework contrasts
+      'synthwave',
+      'halloween',
+      'coffee',
+      // light
+      'cupcake',
+      'cyberpunk',
+      'valentine',
+      'nord',
+    ],
   },
 }