fix(demo): style bugs, after unocss config change (#298)

Author: BrocksiNet

packages/cms-base/components/SwProductCard.vue

@@ -155,7 +155,7 @@ const srcPath = computed(() => {
       aria-label="Add to wishlist"
       type="button"
       @click="toggleWishlistProduct"
-      class="absolute top-2 right-2 hover:animate-count-infinite hover:animate-heart-beat"
+      class="absolute bg-transparent top-2 right-2 hover:animate-count-infinite hover:animate-heart-beat"
       data-testid="product-box-toggle-wishlist-button"
     >
       <client-only>

packages/cms-base/components/SwProductListingFilters.vue

@@ -194,7 +194,7 @@ onClickOutside(dropdownElement, () => (isSortMenuOpen.value = false));
                 <button
                   type="button"
                   @click="isSortMenuOpen = !isSortMenuOpen"
-                  class="group inline-flex justify-center text-base font-medium text-gray-700 hover:text-gray-900"
+                  class="group inline-flex justify-center bg-transparent text-base font-medium text-gray-700 hover:text-gray-900"
                   id="menu-button"
                   aria-expanded="false"
                   aria-haspopup="true"

packages/cms-base/components/SwSlider.vue

@@ -281,7 +281,7 @@ defineExpose({
       <button
         aria-label="Chevron left"
         :class="{
-          'absolute top-1/2 left-0 transform -translate-y-1/2 py-4': true,
+          'absolute bg-transparent top-1/2 left-0 transform -translate-y-1/2 py-4': true,
           'transition bg-white/20 hover:bg-white/50':
             navigationArrowsValue === 'inside',
         }"
@@ -292,7 +292,7 @@ defineExpose({
       <button
         aria-label="Chevron right"
         :class="{
-          'absolute top-1/2 right-0 transform -translate-y-1/2 py-4': true,
+          'absolute bg-transparent top-1/2 right-0 transform -translate-y-1/2 py-4': true,
           'transition bg-white/20 hover:bg-white/50':
             navigationArrowsValue === 'inside',
         }"

packages/cms-base/components/public/cms/element/CmsElementText.vue

@@ -64,7 +64,7 @@ const CmsTextRender = () => {
             const btnClass =
               "rounded-md inline-block my-2 py-2 px-4 border border-transparent text-sm font-medium focus:outline-none disabled:opacity-75";
 
-            _class = node?.attrs?.class
+            _class = node.attrs.class
               .replace("btn-secondary", `${btnClass} bg-brand-dark text-white`)
               .replace(
                 "btn-primary",

templates/vue-demo-store/components/account/AccountMenu.vue

@@ -16,7 +16,7 @@ async function invokeLogout() {
     <div class="my-account-area">
       <div v-show="!isLoggedIn">
         <button
-          class="whitespace-nowrap text-base font-medium text-gray-500 hover:text-gray-900"
+          class="whitespace-nowrap bg-transparent text-base font-medium text-gray-500 hover:text-gray-900"
           data-testid="header-sign-in-link"
           @click="loginModalController.open"
         >
@@ -39,7 +39,7 @@ async function invokeLogout() {
           />
           <button
             type="button"
-            class="text-sm text-gray-700 focus:outline-none hidden sm:block"
+            class="text-sm text-gray-700 bg-transparent focus:outline-none hidden sm:block"
             data-testid="account-menu-hello-button"
             @click="isAccountMenuOpen = !isAccountMenuOpen"
           >

templates/vue-demo-store/components/checkout/CheckoutCartItem.vue

@@ -113,7 +113,7 @@ const removeCartItem = async () => {
           v-if="!isPromotion"
           type="button"
           :disabled="isLoading"
-          class="font-medium text-brand-dark"
+          class="font-medium text-brand-dark bg-transparent"
           :class="{ 'text-gray-500': isLoading }"
           data-testid="product-remove-button"
           @click="removeCartItem"

templates/vue-demo-store/components/checkout/CheckoutSideCart.vue

@@ -20,7 +20,7 @@ const localePath = useLocalePath();
         <div class="ml-3 flex h-7 items-center">
           <button
             type="button"
-            class="-m-2 p-2 text-gray-400 hover:text-gray-500"
+            class="-m-2 p-2 bg-transparent text-gray-400 hover:text-gray-500"
             data-testid="cart-close-button"
             @click="props.controller.close"
           >
@@ -87,7 +87,7 @@ const localePath = useLocalePath();
           or
           <button
             type="button"
-            class="font-medium"
+            class="font-medium bg-transparent"
             data-testid="cart-continue-button"
             @click="props.controller.close"
           >

templates/vue-demo-store/components/layout/LayoutHeader.vue

@@ -58,7 +58,7 @@ const sidebarController = useModal();
           <!-- Cart -->
           <div class="flex ml-4 flow-root lg:ml-6">
             <button
-              class="group -m-2 p-2 flex items-center relative"
+              class="group bg-transparent -m-2 p-2 flex items-center relative"
               aria-label="cart"
               data-testid="cart-button"
               @click="sidebarController.open"

templates/vue-demo-store/components/product/ProductCard.vue

@@ -120,7 +120,7 @@ const srcPath = computed(() => {
     <button
       aria-label="Add to wishlist"
       type="button"
-      class="absolute top-2 right-2 hover:animate-count-infinite hover:animate-heart-beat"
+      class="absolute bg-transparent top-2 right-2 hover:animate-count-infinite hover:animate-heart-beat"
       data-testid="product-box-toggle-wishlist-button"
       @click="toggleWishlistProduct"
     >

templates/vue-demo-store/layouts/account.vue

@@ -55,7 +55,7 @@ provide("swNavigation-footer-navigation", footerData);
                 >
                   My account
                 </h1>
-                <ul class="space-y-2">
+                <ul class="space-y-2 list-none pl-0">
                   <li>
                     <NuxtLink
                       :to="localePath(`/account`)"
@@ -93,7 +93,9 @@ provide("swNavigation-footer-navigation", footerData);
                     </NuxtLink>
                   </li>
                 </ul>
-                <ul class="pt-4 mt-4 space-y-2 border-t border-gray-200">
+                <ul
+                  class="pt-4 mt-4 space-y-2 border-t border-gray-200 list-none pl-0"
+                >
                   <li>
                     <NuxtLink
                       :to="localePath(`/account/order`)"

templates/vue-demo-store/nuxt.config.ts

@@ -38,9 +38,11 @@ export default defineNuxtConfig({
     compressPublicAssets: true,
   },
   unocss: {
-    preflight: true, // this is needed by @unocss/reset
     // for presets, theme config, ... look at the uno.config.ts file
   },
+  css: [
+    "@unocss/reset/tailwind-compat.css", // needed to reset styles see https://unocss.dev/guide/style-reset (@unocss/reset)
+  ],
   router: {
     options: {
       linkExactActiveClass: "text-brand-primary",

templates/vue-demo-store/pages/account/profile.vue

@@ -32,7 +32,7 @@ const toggleTabs = (tabNumber: number) => {
     <div class="mb-4 border-b border-gray-200">
       <ul
         id="myTab"
-        class="flex flex-wrap -mb-px font-medium md:text-2xl md:space-x-8"
+        class="flex flex-wrap -mb-px font-medium md:text-2xl md:space-x-8 list-none pl-0"
         data-tabs-toggle="#profileTabContent"
         role="tablist"
       >

templates/vue-demo-store/pages/checkout/index.vue

@@ -752,7 +752,7 @@ const addAddressModalController = useModal();
             <button
               type="button"
               data-testid="checkout-add-new-billing-address-button"
-              class="flex font-medium text-brand-dark"
+              class="flex font-medium text-brand-dark bg-transparent"
               @click="addAddressModalController.open"
             >
               {{ $t("checkout.addNewBillingAddress") }}
@@ -803,7 +803,7 @@ const addAddressModalController = useModal();
                 <button
                   type="button"
                   data-testid="checkout-add-new-shipping-address-button"
-                  class="flex font-medium text-brand-dark"
+                  class="flex font-medium text-brand-dark bg-transparent"
                   @click="addAddressModalController.open"
                 >
                   {{ $t("checkout.addNewShippingAddress") }}