@designcrowd/fe-shared-lib 1.0.15 → 1.0.17-fe-upgrade-rc

package/src/atoms/components/Modal/Modal.vue

@@ -2,10 +2,11 @@
   <div
     v-show="visible"
     :aria-hidden="visible ? 'false' : 'true'"
-    class="tw-bg-black tw-bg-opacity-75 tw-flex tw-items-center tw-justify-center tw-fixed tw-w-full tw-h-full tw-top-0 tw-left-0 tw-z-50"
+    class="tw-bg-black tw-flex tw-items-center tw-justify-center tw-fixed tw-w-full tw-h-full tw-top-0 tw-left-0 tw-z-50"
     :class="{
       'tw-px-4': fullScreenBreakpoint === undefined && !isImageMode,
       'sm:tw-px-4': fullScreenBreakpoint === 'sm' && !isImageMode,
+      'tw-bg-opacity-75': !darkOverlay,
     }"
     @mousedown.self="close"
   >
@@ -23,6 +24,7 @@
           'tw-rounded-md': fullScreenBreakpoint !== 'sm',
           'modal-bg': !simple && !isImageMode && showModalBackgroundImage,
           'modal-image': isImageMode,
+          'tw-bg-transparent': transparentModal,
         },
         classes,
       ]"
@@ -144,6 +146,16 @@ export default {
       required: false,
       default: false,
     },
+    darkOverlay: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    transparentModal: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     isImageMode() {

package/src/experiences/components/SellDomainNameModalApplication/SellDomainNameModalApplication.vue

@@ -1,36 +1,74 @@
 <template>
-  <Modal
-    classes="sell-domain-name-list-modal--modal tw-text-black"
-    close-on-esc
-    full-screen-breakpoint="md"
-    :visible="visible"
-    :hide-scrollbar="false"
-    :show-modal-background-image="false"
-    @close-modal="onCloseModal"
-  >
-    <template #header>
-      <SellDomainNameSearch
-        v-if="visible"
-        :is-design-com="isDesignCom"
-        :header-title="headerTitle"
-        :header-subtitle="headerSubtitle"
-        :initial-search-term="initialSearchTerm"
-        @onSearch="onSearchDomainName"
-        @onSearchTextInputChange="onSearchTextInputChange"
-      />
-    </template>
-    <template #default>
-      <SellDomainNameSearchResult
-        v-if="visible"
-        :is-design-com="isDesignCom"
-        :previous-search-text="previousSearchText"
-        :is-busy="isBusy"
-        :domain-name-items="domainNameItems"
-        :currency="userCurrency"
-        :model-value="modelValue"
-      />
-    </template>
-  </Modal>
+  <template v-if="!!this.$slots['header']">
+    <Modal
+      classes="sell-domain-name-list-modal--modal tw-text-black"
+      close-on-esc
+      full-screen-breakpoint="md"
+      :visible="visible"
+      :hide-scrollbar="false"
+      :show-modal-background-image="false"
+      @close-modal="onCloseModal"
+    >
+      <template #header>
+        <slot name="header" />
+        <hr class="tw-border-0 tw-border-b-2 tw-border-solid tw-border-grayscale-400 tw-py-2 header-divider" />
+      </template>
+      <template #default>
+        <h3 class="tw-text-center tw-text-2xl tw-font-bold tw-my-5 tw-mb-0">{{ headerTitle }}</h3>
+        <div class="tw-text-center tw-mb-8 tw-text-grayscale-600">{{ headerSubtitle }}</div>
+        <SellDomainNameSearch
+          v-if="visible"
+          :is-design-com="isDesignCom"
+          :initial-search-term="initialSearchTerm"
+          @onSearch="onSearchDomainName"
+          @onSearchTextInputChange="onSearchTextInputChange"
+        />
+        <SellDomainNameSearchResult
+          v-if="visible"
+          :is-design-com="isDesignCom"
+          :previous-search-text="previousSearchText"
+          :is-busy="isBusy"
+          :domain-name-items="domainNameItems"
+          :currency="userCurrency"
+          :model-value="modelValue"
+        />
+      </template>
+    </Modal>
+  </template>
+  <template v-else>
+    <Modal
+      classes="sell-domain-name-list-modal--modal tw-text-black"
+      close-on-esc
+      full-screen-breakpoint="md"
+      :visible="visible"
+      :hide-scrollbar="false"
+      :show-modal-background-image="false"
+      @close-modal="onCloseModal"
+    >
+      <template #header>
+        <SellDomainNameSearch
+          v-if="visible"
+          :is-design-com="isDesignCom"
+          :header-title="headerTitle"
+          :header-subtitle="headerSubtitle"
+          :initial-search-term="initialSearchTerm"
+          @onSearch="onSearchDomainName"
+          @onSearchTextInputChange="onSearchTextInputChange"
+        />
+      </template>
+      <template #default>
+        <SellDomainNameSearchResult
+          v-if="visible"
+          :is-design-com="isDesignCom"
+          :previous-search-text="previousSearchText"
+          :is-busy="isBusy"
+          :domain-name-items="domainNameItems"
+          :currency="userCurrency"
+          :model-value="modelValue"
+        />
+      </template>
+    </Modal>
+  </template>
 </template>
 <script>
 import Modal from '../../../../src/atoms/components/Modal/Modal.vue';
@@ -160,4 +198,8 @@ export default {
     width: 100%;
   }
 }
+
+.header-divider {
+  margin: 0 -1rem;
+}
 </style>