@designcrowd/fe-shared-lib 1.5.29-jj-1 → 1.5.29-jj-2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.5.29-jj-1",
+  "version": "1.5.29-jj-2",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",

package/public/css/tailwind-brandCrowd.css

@@ -1446,6 +1446,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(0 121 172 / var(--tw-bg-opacity));
 }
+.theme-brandCrowd .tw-bg-primary-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 209 217 / var(--tw-bg-opacity));
+}
 .theme-brandCrowd .tw-bg-primary-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(247 118 140 / var(--tw-bg-opacity));
@@ -2062,6 +2066,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(230 230 230 / var(--tw-border-opacity));
 }
+.theme-brandCrowd .hover\:tw-border-grayscale-500:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(208 208 208 / var(--tw-border-opacity));
+}
 .theme-brandCrowd .hover\:tw-border-info-600:hover {
   --tw-border-opacity: 1;
   border-color: rgb(0 121 172 / var(--tw-border-opacity));
@@ -2098,6 +2106,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(230 230 230 / var(--tw-bg-opacity));
 }
+.theme-brandCrowd .hover\:tw-bg-grayscale-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(208 208 208 / var(--tw-bg-opacity));
+}
 .theme-brandCrowd .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(204 234 247 / var(--tw-bg-opacity));
@@ -2150,10 +2162,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(194 140 34 / var(--tw-bg-opacity));
 }
-.theme-brandCrowd .hover\:tw-text-grayscale-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(17 21 23 / var(--tw-text-opacity));
-}
 .theme-brandCrowd .hover\:tw-text-primary-600:hover {
   --tw-text-opacity: 1;
   color: rgb(194 22 50 / var(--tw-text-opacity));
@@ -2273,12 +2281,18 @@ video {
 .theme-brandCrowd .sm\:tw-w-auto {
     width: auto;
   }
+.theme-brandCrowd .sm\:tw-grow {
+    flex-grow: 1;
+  }
 .theme-brandCrowd .sm\:tw-flex-row {
     flex-direction: row;
   }
 .theme-brandCrowd .sm\:tw-items-center {
     align-items: center;
   }
+.theme-brandCrowd .sm\:tw-gap-3 {
+    gap: 0.75rem;
+  }
 .theme-brandCrowd .sm\:tw-rounded-md {
     border-radius: 0.375rem;
   }

package/public/css/tailwind-brandPage.css

@@ -1850,6 +1850,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(230 230 230 / var(--tw-border-opacity));
 }
+.theme-brandPage .hover\:tw-border-grayscale-500:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(208 208 208 / var(--tw-border-opacity));
+}
 .theme-brandPage .hover\:tw-bg-grayscale-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(244 244 244 / var(--tw-bg-opacity));
@@ -1862,9 +1866,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(230 230 230 / var(--tw-bg-opacity));
 }
-.theme-brandPage .hover\:tw-text-grayscale-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(17 21 23 / var(--tw-text-opacity));
+.theme-brandPage .hover\:tw-bg-grayscale-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(208 208 208 / var(--tw-bg-opacity));
 }
 .theme-brandPage .hover\:tw-text-white:hover {
   --tw-text-opacity: 1;
@@ -1953,12 +1957,18 @@ video {
 .theme-brandPage .sm\:tw-w-auto {
     width: auto;
   }
+.theme-brandPage .sm\:tw-grow {
+    flex-grow: 1;
+  }
 .theme-brandPage .sm\:tw-flex-row {
     flex-direction: row;
   }
 .theme-brandPage .sm\:tw-items-center {
     align-items: center;
   }
+.theme-brandPage .sm\:tw-gap-3 {
+    gap: 0.75rem;
+  }
 .theme-brandPage .sm\:tw-rounded-md {
     border-radius: 0.375rem;
   }

package/public/css/tailwind-crazyDomains.css

@@ -1446,6 +1446,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(0 129 191 / var(--tw-bg-opacity));
 }
+.theme-crazyDomains .tw-bg-primary-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 238 213 / var(--tw-bg-opacity));
+}
 .theme-crazyDomains .tw-bg-primary-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(169 205 130 / var(--tw-bg-opacity));
@@ -2062,6 +2066,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(235 238 243 / var(--tw-border-opacity));
 }
+.theme-crazyDomains .hover\:tw-border-grayscale-500:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(199 204 207 / var(--tw-border-opacity));
+}
 .theme-crazyDomains .hover\:tw-border-info-600:hover {
   --tw-border-opacity: 1;
   border-color: rgb(0 129 191 / var(--tw-border-opacity));
@@ -2098,6 +2106,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(235 238 243 / var(--tw-bg-opacity));
 }
+.theme-crazyDomains .hover\:tw-bg-grayscale-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(199 204 207 / var(--tw-bg-opacity));
+}
 .theme-crazyDomains .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(230 246 253 / var(--tw-bg-opacity));
@@ -2150,10 +2162,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(194 145 33 / var(--tw-bg-opacity));
 }
-.theme-crazyDomains .hover\:tw-text-grayscale-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(79 89 92 / var(--tw-text-opacity));
-}
 .theme-crazyDomains .hover\:tw-text-primary-600:hover {
   --tw-text-opacity: 1;
   color: rgb(89 138 38 / var(--tw-text-opacity));
@@ -2273,12 +2281,18 @@ video {
 .theme-crazyDomains .sm\:tw-w-auto {
     width: auto;
   }
+.theme-crazyDomains .sm\:tw-grow {
+    flex-grow: 1;
+  }
 .theme-crazyDomains .sm\:tw-flex-row {
     flex-direction: row;
   }
 .theme-crazyDomains .sm\:tw-items-center {
     align-items: center;
   }
+.theme-crazyDomains .sm\:tw-gap-3 {
+    gap: 0.75rem;
+  }
 .theme-crazyDomains .sm\:tw-rounded-md {
     border-radius: 0.375rem;
   }

package/public/css/tailwind-designCom.css

@@ -1446,6 +1446,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(50 71 197 / var(--tw-bg-opacity));
 }
+.theme-designCom .tw-bg-primary-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(236 238 254 / var(--tw-bg-opacity));
+}
 .theme-designCom .tw-bg-primary-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(178 189 251 / var(--tw-bg-opacity));
@@ -2062,6 +2066,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(227 227 227 / var(--tw-border-opacity));
 }
+.theme-designCom .hover\:tw-border-grayscale-500:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 209 209 / var(--tw-border-opacity));
+}
 .theme-designCom .hover\:tw-border-info-600:hover {
   --tw-border-opacity: 1;
   border-color: rgb(50 71 197 / var(--tw-border-opacity));
@@ -2098,6 +2106,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(227 227 227 / var(--tw-bg-opacity));
 }
+.theme-designCom .hover\:tw-bg-grayscale-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 209 209 / var(--tw-bg-opacity));
+}
 .theme-designCom .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(236 238 254 / var(--tw-bg-opacity));
@@ -2150,10 +2162,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(182 128 6 / var(--tw-bg-opacity));
 }
-.theme-designCom .hover\:tw-text-grayscale-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(23 23 23 / var(--tw-text-opacity));
-}
 .theme-designCom .hover\:tw-text-primary-600:hover {
   --tw-text-opacity: 1;
   color: rgb(50 71 197 / var(--tw-text-opacity));
@@ -2273,12 +2281,18 @@ video {
 .theme-designCom .sm\:tw-w-auto {
     width: auto;
   }
+.theme-designCom .sm\:tw-grow {
+    flex-grow: 1;
+  }
 .theme-designCom .sm\:tw-flex-row {
     flex-direction: row;
   }
 .theme-designCom .sm\:tw-items-center {
     align-items: center;
   }
+.theme-designCom .sm\:tw-gap-3 {
+    gap: 0.75rem;
+  }
 .theme-designCom .sm\:tw-rounded-md {
     border-radius: 0.375rem;
   }

package/public/css/tailwind-designCrowd.css

@@ -1446,6 +1446,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(14 121 188 / var(--tw-bg-opacity));
 }
+.theme-designCrowd .tw-bg-primary-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(207 234 251 / var(--tw-bg-opacity));
+}
 .theme-designCrowd .tw-bg-primary-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(112 193 243 / var(--tw-bg-opacity));
@@ -2062,6 +2066,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(230 230 230 / var(--tw-border-opacity));
 }
+.theme-designCrowd .hover\:tw-border-grayscale-500:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(204 204 204 / var(--tw-border-opacity));
+}
 .theme-designCrowd .hover\:tw-border-info-600:hover {
   --tw-border-opacity: 1;
   border-color: rgb(14 121 188 / var(--tw-border-opacity));
@@ -2098,6 +2106,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(230 230 230 / var(--tw-bg-opacity));
 }
+.theme-designCrowd .hover\:tw-bg-grayscale-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(204 204 204 / var(--tw-bg-opacity));
+}
 .theme-designCrowd .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(207 234 251 / var(--tw-bg-opacity));
@@ -2150,10 +2162,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(194 140 34 / var(--tw-bg-opacity));
 }
-.theme-designCrowd .hover\:tw-text-grayscale-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(39 52 56 / var(--tw-text-opacity));
-}
 .theme-designCrowd .hover\:tw-text-primary-600:hover {
   --tw-text-opacity: 1;
   color: rgb(14 121 188 / var(--tw-text-opacity));
@@ -2273,12 +2281,18 @@ video {
 .theme-designCrowd .sm\:tw-w-auto {
     width: auto;
   }
+.theme-designCrowd .sm\:tw-grow {
+    flex-grow: 1;
+  }
 .theme-designCrowd .sm\:tw-flex-row {
     flex-direction: row;
   }
 .theme-designCrowd .sm\:tw-items-center {
     align-items: center;
   }
+.theme-designCrowd .sm\:tw-gap-3 {
+    gap: 0.75rem;
+  }
 .theme-designCrowd .sm\:tw-rounded-md {
     border-radius: 0.375rem;
   }

package/src/experiences/components/PaymentConfigList/PaymentConfigDropdown.vue

@@ -5,19 +5,21 @@
     </div>
     <div
       v-if="showUpgradeBanner && !isLoading"
-      class="tw-p-3 tw-mb-3 tw-rounded tw-border tw-border-solid tw-border-grayscale-500 tw-bg-grayscale-100"
+      class="tw-p-3 tw-mb-3 tw-rounded tw-border tw-border-solid tw-border-primary-500 tw-bg-primary-100"
     >
       <div class="tw-flex tw-items-start tw-gap-2">
         <Icon name="upgrade-alt" size="md" class="tw-flex-shrink-0" />
-        <span class="tw-text-sm">{{ sharedPaymentConfigTr('upgradeMessage') }}</span>
+        <div class="tw-flex tw-flex-col tw-gap-2">
+          <span class="tw-text-sm">{{ sharedPaymentConfigTr('upgradeMessage') }}</span>
+          <Button
+            :label="sharedPaymentConfigTr('upgradeNow')"
+            variant="primary"
+            size="small"
+            class="tw-w-fit"
+            @on-click="onUpgradeClick"
+          />
+        </div>
       </div>
-      <Button
-        :label="sharedPaymentConfigTr('upgradeNow')"
-        variant="primary"
-        size="small"
-        class="tw-mt-2"
-        @on-click="onUpgradeClick"
-      />
     </div>
     <Button
       v-if="isAddPaymentProviderButtonVisible"

package/src/experiences/components/PaymentConfigList/PaymentConfigList.vue

@@ -6,16 +6,21 @@
     <div v-else>
       <div
         v-if="showUpgradeBanner"
-        class="tw-flex tw-items-center tw-gap-3 tw-p-3 tw-mb-3 tw-rounded tw-border tw-border-solid tw-border-grayscale-500 tw-bg-grayscale-100"
+        class="tw-p-3 tw-mb-3 tw-rounded tw-border tw-border-solid tw-border-primary-500 tw-bg-primary-100"
       >
-        <Icon name="upgrade-alt" size="md" class="tw-flex-shrink-0" />
-        <span class="tw-text-sm tw-grow">{{ sharedPaymentConfigTr('upgradeMessage') }}</span>
-        <Button
-          :label="sharedPaymentConfigTr('upgradeNow')"
-          variant="primary"
-          size="small"
-          @on-click="onUpgradeClick"
-        />
+        <div class="tw-flex tw-items-start tw-gap-2 sm:tw-items-center sm:tw-gap-3 sm:tw-flex-row">
+          <Icon name="upgrade-alt" size="md" class="tw-flex-shrink-0" />
+          <div class="tw-flex tw-flex-col tw-gap-2 sm:tw-flex-row sm:tw-items-center sm:tw-grow">
+            <span class="tw-text-sm sm:tw-grow">{{ sharedPaymentConfigTr('upgradeMessage') }}</span>
+            <Button
+              :label="sharedPaymentConfigTr('upgradeNow')"
+              variant="primary"
+              size="small"
+              class="tw-w-fit"
+              @on-click="onUpgradeClick"
+            />
+          </div>
+        </div>
       </div>
       <div
         v-for="(paymentConfig, index) in paymentConfigs"