remove default shadow

ppy-sb · Oct 9, 2023 · 9bb6b42 · 9bb6b42
1 parent 26ffb0c
commit 9bb6b42
Show file tree

Hide file tree

Showing 20 changed files with 189 additions and 88 deletions.
diff --git a/src/assets/styles/daisyui.scss b/src/assets/styles/daisyui.scss
@@ -4,24 +4,19 @@ html {
   @apply bg-transparent #{!important};
 }
 
-.btn {
+.btn.btn-shadow {
   @apply transition-shadow transition-[background];
   @apply shadow-lg;
   @apply dark:shadow-md;
   animation: none;
 
   @each $variant in $variants {
-    &.btn-#{$variant}:not(.no-shadow) {
+    &.btn-#{$variant} {
       @apply shadow-#{$variant}/40 hover:shadow-#{$variant}/60 dark:shadow-#{$variant}/20 hover:dark:shadow-#{$variant}/30;
     }
   }
-
-  &.btn-ghost,
-  &.no-shadow {
-    @apply shadow-none;
-  }
 }
-.input {
+.input.input-shadow {
   @each $variant in $variants {
     &.input-#{$variant} {
       @apply shadow-#{$variant}/40 hover:shadow-#{$variant}/50 dark:shadow-#{$variant}/20 hover:dark:shadow-#{$variant}/30;

diff --git a/src/components/T/nuxt-link-locale-button.vue → src/components/T/nuxt-link-button.vue b/src/components/T/nuxt-link-locale-button.vue → src/components/T/nuxt-link-button.vue
diff --git a/src/components/app/dynamic-settings.vue b/src/components/app/dynamic-settings.vue
@@ -45,7 +45,7 @@ fr-FR:
           v-model="model[key]"
           :placeholder="setting.label"
           :disabled="setting.disabled"
-          class="input input-sm grow blur-sm hover:blur-none"
+          class="input input-shadow input-sm grow blur-sm hover:blur-none"
           :class="{
             'input-bordered input-primary':
               props.unchanged[key] !== model[key],

diff --git a/src/components/app/score/heading.vue b/src/components/app/score/heading.vue
@@ -138,6 +138,6 @@ fr-FR:
     </div>
   </div>
   <div>
-    <a :href="`/replay/${score.id}/download`" class="btn btn-primary">{{ t('download-replay') }} <icon name="line-md:download-loop" class="w-5 h-5" /></a>
+    <a :href="`/replay/${score.id}/download`" class="btn btn-shadow btn-primary">{{ t('download-replay') }} <icon name="line-md:download-loop" class="w-5 h-5" /></a>
   </div>
 </template>
diff --git a/src/components/app/search-modal.client.vue b/src/components/app/search-modal.client.vue
@@ -123,7 +123,7 @@ const {
             v-model="keyword"
             type="text"
             :placeholder="t('search')"
-            class="input grow border-label-0 focus:input-primary bg-transparent !outline-0"
+            class="input input-shadow grow border-label-0 focus:input-primary bg-transparent !outline-0"
             @input="onInput"
             @keyup.enter="raw(true)"
           >
@@ -133,7 +133,7 @@ const {
           v-model="keyword"
           type="text"
           :placeholder="t('search')"
-          class="input grow border-label-0 focus:input-primary bg-transparent !outline-0"
+          class="input input-shadow grow border-label-0 focus:input-primary bg-transparent !outline-0"
           @input="onInput"
           @keyup.enter="raw(true)"
         >

diff --git a/src/components/content/editor/bubble-menu.client.vue b/src/components/content/editor/bubble-menu.client.vue
@@ -61,9 +61,9 @@ function setLink() {
           <div class="card-body p-2">
             <div class="input-group input-group-sm">
               <span>URL</span>
-              <input id="url" v-model="link" type="url" class="input input-sm shadow-sm">
+              <input id="url" v-model="link" type="url" class="input input-shadow input-sm shadow-sm">
               <button
-                class="btn btn-sm btn-success" @click="() => {
+                class="btn btn-shadow btn-sm btn-success" @click="() => {
                   setLink()
                   hide()
                 }"

diff --git a/src/components/content/editor/insert-image.client.vue b/src/components/content/editor/insert-image.client.vue
@@ -70,7 +70,7 @@ fr-FR:
               id="src"
               v-model="img.src"
               type="url"
-              class="input input-sm input-ghost"
+              class="input input-shadow input-sm input-ghost"
               required
             >
           </div>
@@ -82,7 +82,7 @@ fr-FR:
               id="title"
               v-model="img.title"
               type="text"
-              class="input input-sm input-ghost"
+              class="input input-shadow input-sm input-ghost"
             >
           </div>
           <div class="form-control">
@@ -92,18 +92,18 @@ fr-FR:
             <textarea
               id="description"
               v-model="img.alt"
-              class="input input-sm input-ghost"
+              class="input input-shadow input-sm input-ghost"
             />
           </div>
         </div>
         <div class="flex p-4 gap-2">
-          <t-button size="sm" variant="accent" class="grow">
+          <t-button class="btn-shadow grow" size="sm" variant="accent">
             {{ t('ok') }}
           </t-button>
           <t-button
+            class="btn-shadow grow"
             size="sm"
             variant="secondary"
-            class="grow"
             type="button"
             @click="closeModal"
           >

diff --git a/src/components/content/editor/variables/fallback.vue b/src/components/content/editor/variables/fallback.vue
@@ -21,8 +21,8 @@ defineExpose({
   <form action="#" @submit.prevent="send">
     <div class="card bg-gbase-100/80 backdrop-blur shadow-md p-3 gap-2">
       <label>Fallback content for <b>{{ $props.name }}</b>:</label>
-      <input ref="input" v-model="model" class="input input-sm input-primary" type="text">
-      <input type="submit" value="Save" class="btn btn-primary btn-sm">
+      <input ref="input" v-model="model" class="input input-shadow input-sm input-primary" type="text">
+      <input type="submit" value="Save" class="btn btn-shadow btn-primary btn-sm">
     </div>
   </form>
 </template>
diff --git a/src/components/userpage/heading.vue b/src/components/userpage/heading.vue
@@ -138,9 +138,9 @@ fr-FR:
         </p>
         <t-button
           ref="changeFriendStateButton"
+          class="btn-shadow gap-1"
           size="sm"
           :variant="isMutualFriend ? 'primary' : isFriend ? 'secondary' : 'gbase'"
-          class="gap-1"
           @click="toggleFriend"
         >
           <icon
@@ -157,7 +157,7 @@ fr-FR:
           />
           <span>{{ friendButtonContent }}</span>
         </t-button>
-        <!-- <t-button
+        <!-- <t-button class="btn-shadow"
           v-if="session.$state.loggedIn"
           size="sm"
           variant="secondary"
@@ -171,21 +171,22 @@ fr-FR:
         v-else
         class="container flex justify-around order-3 gap-3 pb-4 mx-auto md:order-1 md:justify-end md:pb-0"
       >
-        <!-- <t-button
+        <!-- <t-button class="btn-shadow"
           size="sm"
           variant="primary"
         >
           add as friend
         </t-button> -->
-        <t-nuxt-link-locale-button
+        <t-nuxt-link-button
+          class="btn-shadow"
           size="sm"
           variant="accent"
           :to="{
             name: 'me-settings',
           }"
         >
           {{ t('edit') }}
-        </t-nuxt-link-locale-button>
+        </t-nuxt-link-button>
       </div>
       <div
         class="container flex flex-col flex-wrap gap-4 mx-auto lg:flex-row lg:gap-0 sm:order-2 md:items-end md:justify-between md:pb-2"

diff --git a/src/pages/admin/index.vue b/src/pages/admin/index.vue
@@ -2,24 +2,37 @@
 const { t } = useI18n()
 </script>
 
+<i18n lang="yaml">
+en-GB:
+  user-management: User Management
+</i18n>
+
 <template>
   <div class="join">
-    <t-nuxt-link-locale-button
+    <t-nuxt-link-button
       :to="{
         name: 'article-edit',
       }"
-      class="join-item"
+      class="btn-shadow join-item"
     >
       {{ t('titles.articles') }}
-    </t-nuxt-link-locale-button>
-    <t-nuxt-link-locale-button
+    </t-nuxt-link-button>
+    <t-nuxt-link-button
       :to="{
         name: 'admin-logs',
       }"
-      class="join-item"
+      class="btn-shadow join-item"
     >
       {{ t('titles.logs') }}
-    </t-nuxt-link-locale-button>
+    </t-nuxt-link-button>
+    <t-nuxt-link-button
+      :to="{
+        name: 'admin-users',
+      }"
+      class="btn-shadow join-item"
+    >
+      {{ t('user-management') }}
+    </t-nuxt-link-button>
   </div>
 </template>
 

diff --git a/src/pages/admin/users.vue b/src/pages/admin/users.vue
@@ -4,7 +4,95 @@
 
 <template>
   <div>
-    users
+    <div class="join">
+      <div>
+        <div>
+          <input class="input input-shadow input-bordered join-item" placeholder="Search">
+        </div>
+      </div>
+      <select class="select select-bordered join-item">
+        <option disabled selected>
+          Filter
+        </option>
+        <option>Sci-fi</option>
+        <option>Drama</option>
+        <option>Action</option>
+      </select>
+      <div class="indicator">
+        <span class="indicator-item badge badge-secondary">new</span>
+        <button class="btn btn-shadow join-item">
+          Search
+        </button>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="overflow-x-auto">
+      <table class="table">
+        <!-- head -->
+        <thead>
+          <tr>
+            <th>
+              <label>
+                <input type="checkbox" class="checkbox">
+              </label>
+            </th>
+            <th>Name</th>
+            <th>Job</th>
+            <th>Favorite Color</th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          <!-- row 1 -->
+          <tr>
+            <th>
+              <label>
+                <input type="checkbox" class="checkbox">
+              </label>
+            </th>
+            <td>
+              <div class="flex items-center space-x-3">
+                <div class="avatar">
+                  <div class="mask mask-squircle w-12 h-12">
+                    <img src="/[email protected]" alt="Avatar Tailwind CSS Component">
+                  </div>
+                </div>
+                <div>
+                  <div class="font-bold">
+                    Hart Hagerty
+                  </div>
+                  <div class="text-sm opacity-50">
+                    United States
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td>
+              Zemlak, Daniel and Leannon
+              <br>
+              <span class="badge badge-ghost badge-sm">Desktop Support Technician</span>
+            </td>
+            <td>Purple</td>
+            <th>
+              <button class="btn btn-ghost btn-xs">
+                details
+              </button>
+            </th>
+          </tr>
+        </tbody>
+        <!-- foot -->
+        <!-- <tfoot>
+          <tr>
+            <th />
+            <th>Name</th>
+            <th>Job</th>
+            <th>Favorite Color</th>
+            <th />
+          </tr>
+        </tfoot> -->
+      </table>
+    </div>
   </div>
 </template>
 

diff --git a/src/pages/article/[...id].vue b/src/pages/article/[...id].vue
@@ -26,7 +26,7 @@ fr-FR:
 <template>
   <section class="container mx-auto with-editor relative">
     <content-render v-bind="content" />
-    <button v-if="content.access.write" class="btn btn-neutral d-flex gap-1 absolute top-0 right-0">
+    <button v-if="content.access.write" class="btn btn-shadow btn-neutral d-flex gap-1 absolute top-0 right-0">
       {{ t('edit') }} <icon name="ic:round-edit-note" class="w-5 h-5" />
     </button>
   </section>

diff --git a/src/pages/article/edit.vue b/src/pages/article/edit.vue
@@ -199,37 +199,37 @@ fr-FR:
       <div>
         <div class="flex gap-2 items-baseline">
           {{ t('editing') }}: <input
-            v-model="article.slug" type="text" class="input input-sm shadow-lg" :class="{
+            v-model="article.slug" type="text" class="input input-shadow input-sm shadow-lg" :class="{
               'input-error': !article.slug,
             }"
           >
-          <button class="btn btn-sm btn-info" @click="() => { update(); postFetch() }">
+          <button class="btn btn-shadow btn-sm btn-info" @click="() => { update(); postFetch() }">
             {{ t('load') }}
           </button>
-          <button class="btn btn-sm btn-primary" @click="() => { create(); postFetch() }">
+          <button class="btn btn-shadow btn-sm btn-primary" @click="() => { create(); postFetch() }">
             {{ t('new') }}
           </button>
           <button
-            class="btn btn-sm btn-success" :class="{
+            class="btn btn-shadow btn-sm btn-success" :class="{
               'btn-disabled': !(article.slug && article.json),
             }" @click="() => { save(); postFetch() }"
           >
             {{ t('save') }}
           </button>
           <div class="divider divider-horizontal" />
           <button
-            class="btn btn-sm btn-error" :class="{
+            class="btn btn-shadow btn-sm btn-error" :class="{
               'btn-disabled': !(article.slug && access?.write),
             }" @click="() => { del().then(postFetch) }"
           >
             {{ t('delete') }}
           </button>
           <div class="divider divider-horizontal" />
           <input ref="importArticleFile" type="file" hidden @change="importArticle">
-          <button class="btn btn-sm btn-primary" @click="importArticleFile?.click">
+          <button class="btn btn-shadow btn-sm btn-primary" @click="importArticleFile?.click">
             {{ t('import') }}
           </button>
-          <button class="btn btn-sm btn-secondary" @click="exportArticle">
+          <button class="btn btn-shadow btn-sm btn-secondary" @click="exportArticle">
             {{ t('export') }}
           </button>
         </div>