fix: use new css

Rule-34 · Apr 6, 2021 · 1496f8f · 1496f8f
1 parent f6d32dc
commit 1496f8f
Show file tree

Hide file tree

Showing 12 changed files with 45 additions and 36 deletions.
diff --git a/components/layout/navigation/sidenav/SideNav.vue b/components/layout/navigation/sidenav/SideNav.vue
@@ -13,7 +13,7 @@
 
           <img
             loading="eager"
-            class="transition-transform duration-500 ease-in-out delay-300 transform hover:scale-150"
+            class="transition-transform duration-500 delay-300 transform hover:scale-150"
             src="~/assets/img/brand/icon.png"
             alt="Rule 34 App Logo"
             height="512"
@@ -35,7 +35,7 @@
         <ul class="flex-auto leading-loose text-center sm:text-left">
           <li v-for="link in sideNavLinks" :key="link.url">
             <NuxtLink
-              class="relative block transition-transform duration-300 transform hover:translate-x-1"
+              class="relative block transition-transform duration-300 transform color-util hover:translate-x-1"
               :to="link.url"
             >
               <span class="absolute inset-0 opacity-0" />
@@ -46,7 +46,7 @@
           <!-- Premium -->
           <li>
             <NuxtLink
-              class="relative block transition-transform duration-300 transform hover:translate-x-1"
+              class="relative block transition-transform duration-300 transform color-util hover:translate-x-1"
               to="/premium"
             >
               <span class="absolute inset-0 opacity-0" />
@@ -63,7 +63,7 @@
           <!-- Discord -->
           <li>
             <a
-              class="flex transition-transform duration-300 transform hover:scale-110"
+              class="flex transition-transform duration-300 transform color-util hover:scale-110"
               href="https://redirect.r34.app/discord"
             >
               <svg
@@ -83,7 +83,7 @@
           <!-- Legal -->
           <li>
             <NuxtLink
-              class="flex transition-transform duration-300 transform hover:scale-110"
+              class="flex transition-transform duration-300 transform color-util hover:scale-110"
               to="/legal"
             >
               Legal
@@ -93,7 +93,7 @@
           <!-- Donate -->
           <li>
             <a
-              class="flex transition-transform duration-300 transform hover:scale-110"
+              class="flex transition-transform duration-300 transform color-util hover:scale-110"
               href="https://redirect.r34.app/donations"
             >
               <svg

diff --git a/components/pages/posts/content/Post.vue b/components/pages/posts/content/Post.vue
@@ -89,7 +89,7 @@
             <!-- If text is an Url then make it linkable -->
             <a
               :href="post.source[0]"
-              class="inline-flex"
+              class="inline-flex color-util"
               rel="noopener"
               target="_blank"
             >

diff --git a/components/pages/posts/navigation/Notifications.vue b/components/pages/posts/navigation/Notifications.vue
@@ -178,17 +178,17 @@ export default {
 /* 
       Slide-over panel, show/hide based on slide-over state.
 
-        Entering: "transform transition ease-in-out duration-500 sm:duration-700"
+        Entering: "transform transition  duration-500 sm:duration-700"
           From: "translate-x-full"
           To: "translate-x-0"
-        Leaving: "transform transition ease-in-out duration-500 sm:duration-700"
+        Leaving: "transform transition  duration-500 sm:duration-700"
           From: "translate-x-0"
           To: "translate-x-full" 
 */
 
 .notifications-enter-active,
 .notifications-leave-active {
-  @apply transform transition ease-in-out duration-300;
+  @apply transform transition  duration-300;
 }
 
 .notifications-enter,

diff --git a/components/pages/posts/navigation/search/SearchTagCollections.vue b/components/pages/posts/navigation/search/SearchTagCollections.vue
@@ -16,7 +16,7 @@
       <menu class="flex flex-col w-full h-full p-4 m-0 material-container">
         <!-- Title -->
         <header
-          class="text-xl font-semibold tracking-wide text-center text-gradient-one"
+          class="text-xl font-semibold tracking-wide text-center text-lilac-gra"
         >
           Tag Collections
         </header>
@@ -48,15 +48,17 @@
               error-data="No Tag Collections available"
             >
               <template #customAction>
-                <NuxtLink to="/premium">Create some?</NuxtLink>
+                <NuxtLink to="/premium" class="color-util">
+                  Create some?
+                </NuxtLink>
               </template>
             </Error>
           </template>
         </section>
 
         <!-- CTA -->
         <footer class="space-y-1 text-sm text-center">
-          <NuxtLink to="/premium">Create more</NuxtLink>
+          <NuxtLink to="/premium" class="color-util">Create more</NuxtLink>
 
           <p class="text-xs text-default-text-muted">Or</p>
 

diff --git a/components/pages/premium/PremiumSubscription.vue b/components/pages/premium/PremiumSubscription.vue
@@ -34,7 +34,7 @@
         <!--  -->
         <li class="flex items-start">
           <div class="flex-shrink-0">
-            <check-icon class="w-6 h-6 icon text-gradient-one" />
+            <check-icon class="w-6 h-6 icon text-lilac-gra" />
           </div>
           <NuxtLink
             to="/premium/booru"
@@ -47,7 +47,7 @@
         <!--  -->
         <li class="flex items-start mt-4">
           <div class="flex-shrink-0">
-            <check-icon class="w-6 h-6 icon text-gradient-one" />
+            <check-icon class="w-6 h-6 icon text-lilac-gra" />
           </div>
           <NuxtLink
             to="/premium/tags"
@@ -60,7 +60,7 @@
         <!--  -->
         <li class="flex items-start mt-4">
           <div class="flex-shrink-0">
-            <check-icon class="w-6 h-6 icon text-gradient-one" />
+            <check-icon class="w-6 h-6 icon text-lilac-gra" />
           </div>
           <p
             class="ml-3 text-base font-medium leading-6 text-default-text-muted"
@@ -72,7 +72,7 @@
         <!--  -->
         <li class="flex items-start mt-4">
           <div class="flex-shrink-0">
-            <check-icon class="w-6 h-6 icon text-gradient-one" />
+            <check-icon class="w-6 h-6 icon text-lilac-gra" />
           </div>
           <p
             class="ml-3 text-base font-medium leading-6 text-default-text-muted"
@@ -88,7 +88,7 @@
             target="_blank"
             rel="noopener"
             :href="'https://gum.co/Rule34App'"
-            class="block w-full px-6 py-3 text-lg font-medium leading-6 text-center transition duration-150 ease-in-out border-0 rounded-lg bg-gradient-lilac-blue text-default-text focus:outline-none focus:shadow-outline"
+            class="block w-full px-6 py-3 text-lg font-medium leading-6 text-center transition border-0 rounded-lg color-util bg-gradient-lilac-blue text-default-text focus:outline-none focus:ring"
           >
             Subscribe
           </a>

diff --git a/components/utils/ContentContainer.vue b/components/utils/ContentContainer.vue
@@ -34,7 +34,11 @@
           <template v-for="(link, index) in links">
             <!-- Internal link -->
             <template v-if="link.isInternal">
-              <NuxtLink :key="link.text" :to="link.href" class="text-sm">
+              <NuxtLink
+                :key="link.text"
+                :to="link.href"
+                class="text-sm color-util"
+              >
                 {{ link.text }}
               </NuxtLink>
             </template>
@@ -46,7 +50,7 @@
                 :href="link.href"
                 target="_blank"
                 rel="noopener"
-                class="text-sm"
+                class="text-sm color-util"
               >
                 {{ link.text }}
               </a>

diff --git a/components/utils/Error.vue b/components/utils/Error.vue
@@ -6,7 +6,7 @@
     <!-- Header -->
     <div>
       <h1
-        class="px-2 mx-auto mb-1 text-2xl font-bold tracking-wide border w-max-content"
+        class="px-2 mx-auto mb-1 text-2xl font-bold tracking-wide border w-max"
       >
         {{ errorTitle }}
       </h1>

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -46,9 +46,7 @@ export default {
     return {
       // Define color theme based on settings
       bodyAttrs: {
-        class: this.getUserSettings.darkTheme.value
-          ? 'dark bg-background'
-          : 'light bg-background',
+        class: 'bg-background',
       },
     }
   },
@@ -86,7 +84,7 @@ console.info(
 /* Transition that is gonna be applied */
 .sidenav-enter-active,
 .sidenav-leave-active {
-  @apply transition-transform duration-300 ease-in-out;
+  @apply transition-transform duration-300;
 }
 
 /* Initial state */
@@ -103,6 +101,6 @@ console.info(
 /* Transition that is gonna be applied */
 .search-enter-active,
 .search-leave-active {
-  @apply transition-transform duration-300 ease-in-out;
+  @apply transition-transform duration-300;
 }
 </style>
diff --git a/pages/about.vue b/pages/about.vue
@@ -20,7 +20,7 @@
         href="https://akbal.dev/"
         target="_blank"
         rel="noopener"
-        class="block px-3 py-1 mx-auto mt-5 mb-2 rounded-full shadow-md border-util w-max-content bg-background"
+        class="block px-3 py-1 mx-auto mt-5 mb-2 rounded-full shadow-md color-util border-util w-max bg-background"
       >
         Alejandro Akbal
       </a>

diff --git a/pages/premium/booru.vue b/pages/premium/booru.vue
@@ -76,7 +76,7 @@
         <select
           v-model="formBooru.type"
           name="booruType"
-          class="block p-1 outline-none bg-background w-max-content"
+          class="block p-1 outline-none bg-background w-max"
           required
         >
           <option

diff --git a/pages/premium/index.vue b/pages/premium/index.vue
@@ -25,7 +25,7 @@
           <!-- Status -->
           <div class="my-4 text-center">
             <p class="text-sm text-default-text-muted">Your subscription is</p>
-            <p class="text-3xl font-semibold text-gradient-one">Active</p>
+            <p class="text-3xl font-semibold text-lilac-gra">Active</p>
           </div>
 
           <!-- Log out -->
@@ -48,7 +48,7 @@
           </div>
 
           <NuxtLink
-            class="flex items-center justify-center px-4 transition-colors duration-300 border rounded-full shadow border-border bg-background hover:border-border-hover"
+            class="flex items-center justify-center px-4 transition-colors duration-300 border rounded-full shadow color-util border-border bg-background hover:border-border-hover"
             to="/premium/booru"
           >
             Modify
@@ -65,7 +65,7 @@
           </div>
 
           <NuxtLink
-            class="flex items-center justify-center px-4 transition-colors duration-300 border rounded-full shadow border-border bg-background hover:border-border-hover"
+            class="flex items-center justify-center px-4 transition-colors duration-300 border rounded-full shadow color-util border-border bg-background hover:border-border-hover"
             to="/premium/tags"
           >
             Modify
@@ -78,7 +78,12 @@
         <!-- Notice -->
         <p class="text-sm text-center text-default-text-muted">
           Manage your subscription on
-          <a rel="noopener" target="_blank" href="https://gumroad.com/library">
+          <a
+            rel="noopener"
+            target="_blank"
+            href="https://gumroad.com/library"
+            class="color-util"
+          >
             Gumroad
           </a>
         </p>

diff --git a/pages/settings.vue b/pages/settings.vue
@@ -2,9 +2,7 @@
   <div
     class="relative flex flex-col items-center justify-center max-w-3xl min-h-screen px-4 mx-auto sm:px-6 lg:px-8"
   >
-    <main
-      class="p-5 rounded-lg shadow-xl w-max-content bg-elevation border-util"
-    >
+    <main class="p-5 rounded-lg shadow-xl w-max bg-elevation border-util">
       <div class="flex flex-row space-x-10">
         <!-- Reset -->
         <div
@@ -33,7 +31,9 @@
     </main>
 
     <footer class="absolute inset-x-0 bottom-0 p-2 text-center">
-      <NuxtLink to="/usage" class="text-xs">What does X do?</NuxtLink>
+      <NuxtLink to="/usage" class="text-xs color-util">
+        What does X do?
+      </NuxtLink>
     </footer>
   </div>
 </template>