@designcrowd/fe-shared-lib 1.0.17-kp-1 → 1.0.17-kp-3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.0.17-kp-1",
+  "version": "1.0.17-kp-3",
   "scripts": {
     "start": "npm run storybook",
     "build": "npm run build:css --production",

package/public/css/tailwind-brandCrowd.css

@@ -651,6 +651,10 @@ video {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+.theme-brandCrowd .tw-my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
 .theme-brandCrowd .tw-my-auto {
   margin-top: auto;
   margin-bottom: auto;
@@ -1190,6 +1194,9 @@ video {
 .theme-brandCrowd .tw-border-b-0 {
   border-bottom-width: 0px;
 }
+.theme-brandCrowd .tw-border-b-2 {
+  border-bottom-width: 2px;
+}
 .theme-brandCrowd .tw-border-b-4 {
   border-bottom-width: 4px;
 }

package/public/css/tailwind-brandPage.css

@@ -651,6 +651,10 @@ video {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+.theme-brandPage .tw-my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
 .theme-brandPage .tw-my-auto {
   margin-top: auto;
   margin-bottom: auto;
@@ -1190,6 +1194,9 @@ video {
 .theme-brandPage .tw-border-b-0 {
   border-bottom-width: 0px;
 }
+.theme-brandPage .tw-border-b-2 {
+  border-bottom-width: 2px;
+}
 .theme-brandPage .tw-border-b-4 {
   border-bottom-width: 4px;
 }

package/public/css/tailwind-crazyDomains.css

@@ -651,6 +651,10 @@ video {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+.theme-crazyDomains .tw-my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
 .theme-crazyDomains .tw-my-auto {
   margin-top: auto;
   margin-bottom: auto;
@@ -1190,6 +1194,9 @@ video {
 .theme-crazyDomains .tw-border-b-0 {
   border-bottom-width: 0px;
 }
+.theme-crazyDomains .tw-border-b-2 {
+  border-bottom-width: 2px;
+}
 .theme-crazyDomains .tw-border-b-4 {
   border-bottom-width: 4px;
 }

package/public/css/tailwind-designCom.css

@@ -651,6 +651,10 @@ video {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+.theme-designCom .tw-my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
 .theme-designCom .tw-my-auto {
   margin-top: auto;
   margin-bottom: auto;
@@ -1190,6 +1194,9 @@ video {
 .theme-designCom .tw-border-b-0 {
   border-bottom-width: 0px;
 }
+.theme-designCom .tw-border-b-2 {
+  border-bottom-width: 2px;
+}
 .theme-designCom .tw-border-b-4 {
   border-bottom-width: 4px;
 }

package/public/css/tailwind-designCrowd.css

@@ -651,6 +651,10 @@ video {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+.theme-designCrowd .tw-my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
 .theme-designCrowd .tw-my-auto {
   margin-top: auto;
   margin-bottom: auto;
@@ -1190,6 +1194,9 @@ video {
 .theme-designCrowd .tw-border-b-0 {
   border-bottom-width: 0px;
 }
+.theme-designCrowd .tw-border-b-2 {
+  border-bottom-width: 2px;
+}
 .theme-designCrowd .tw-border-b-4 {
   border-bottom-width: 4px;
 }

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

@@ -12,15 +12,15 @@
     ></Button>
     <Dropdown v-if="!isLoading && !isAddPaymentProviderButtonVisible" ref="dropdown">
       <template #title>
-        <div v-if="selectedPaymentConfig" class="tw-flex">
-          <span class="tw-text-sm tw-grow tw-select-none"
-            >{{ selectedPaymentConfig.name }} &nbsp;
-            <small>({{ selectedPaymentConfig.paymentProviderExternalId }})</small></span
-          >
-          <Pill
-            class="tw-text-white tw-mr-2"
-            :class="getPaymentConfigStatusDisplayClasses(selectedPaymentConfig.status)"
-          >
+        <div
+          v-if="selectedPaymentConfig"
+          class="tw-flex tw-items-center tw-px-2 tw-py-2 drop-down-item tw-cursor-pointer"
+        >
+          <span class="tw-text-sm tw-grow tw-select-none tw-flex tw-flex-col">
+            <span>{{ selectedPaymentConfig.name }}</span>
+            <small class="stripe-acct">({{ selectedPaymentConfig.paymentProviderExternalId }})</small>
+          </span>
+          <Pill class="tw-text-white" :class="getPaymentConfigStatusDisplayClasses(selectedPaymentConfig.status)">
             {{ getPaymentConfigStatusDisplayText(selectedPaymentConfig.status) }}
           </Pill>
         </div>
@@ -31,9 +31,10 @@
         :key="`payment-config-${paymentConfig.id}`"
         @click="onPaymentConfigClick(paymentConfig)"
       >
-        <span class="tw-text-sm tw-grow tw-select-none"
-          >{{ paymentConfig.name }} &nbsp;<small>({{ paymentConfig.paymentProviderExternalId }})</small></span
-        >
+        <span class="tw-text-sm tw-grow tw-select-none tw-flex tw-flex-col">
+          <span>{{ paymentConfig.name }}</span>
+          <small class="stripe-acct">({{ paymentConfig.paymentProviderExternalId }})</small>
+        </span>
         <Pill class="tw-text-white" :class="getPaymentConfigStatusDisplayClasses(paymentConfig.status)">
           {{ getPaymentConfigStatusDisplayText(paymentConfig.status) }}
         </Pill>
@@ -124,3 +125,10 @@ export default {
   },
 };
 </script>
+
+<style>
+.stripe-acct {
+  font-size: 0.7rem;
+  opacity: 0.5;
+}
+</style>

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

@@ -17,6 +17,7 @@
           <img class="tw-h-6" :src="paymentConfig.paymentProviderImageUrl" alt="Payment provider's logo" />
           {{ paymentConfig.paymentProviderName }}
           {{ paymentConfig.defaultCurrency }}
+          <small>({{ paymentConfig.paymentProviderExternalId }})</small>
           <p
             class="tw-ml-auto tw-text-xs tw-rounded-full tw-py-0.5 tw-my-0 tw-text-white tw-px-4 tw-outline-none tw-uppercase"
             :class="getPaymentConfigStatusDisplayClasses(paymentConfig.status)"