Improve sora card styles

src/components/SoraCard/steps/TermsAndConditions.vue

@@ -41,6 +41,9 @@ import TranslationMixin from '@/components/mixins/TranslationMixin';
 import { Components, TosExternalLinks } from '@/consts';
 import { lazyComponent } from '@/router';
 import { getter } from '@/store/decorators';
+import { delay } from '@/utils';
+
+type TermsAndConditionsType = 't&c' | 'privacyPolicy' | 'unsupported';
 
 @Component({
   components: {
@@ -70,19 +73,18 @@ export default class TermsAndConditions extends Mixins(TranslationMixin, mixins.
     this.$emit('confirm');
   }
 
-  openDialog(policy: string): void {
+  async openDialog(policy: TermsAndConditionsType): Promise<void> {
     if (policy === 't&c') {
       this.link = this.termsLink;
       this.dialogTitle = this.termsAndConditionsTitle;
-    }
-    if (policy === 'privacyPolicy') {
+    } else if (policy === 'privacyPolicy') {
       this.link = this.privacyLink;
       this.dialogTitle = this.privacyPolicyTitle;
-    }
-    if (policy === 'unsupported') {
+    } else if (policy === 'unsupported') {
       this.link = '';
       this.dialogTitle = this.unsupportedCountriesTitle;
     }
+    await delay(); // small delay is required for dialog re-rendering
     this.showDialog = true;
   }
 }

src/components/SoraCard/steps/ToSDialog.vue

@@ -1,9 +1,7 @@
 <template>
   <dialog-base :visible.sync="isVisible" class="terms-of-service-dialog" :title="title">
-    <div v-if="srcLink" v-loading="loading" class="tos__section">
-      <iframe @load="onIFrameLoad" :src="srcLink" width="100%" height="600px" frameborder="0"></iframe>
-    </div>
-    <div v-else>
+    <widget v-if="srcLink" class="tos__section" with-border :src="srcLink" />
+    <template v-else>
       <div class="sora-card__excuse">
         {{ t('card.blacklistedCountriesExcuse') }}
       </div>
@@ -14,7 +12,7 @@
           </li>
         </ul>
       </div>
-    </div>
+    </template>
   </dialog-base>
 </template>
 
@@ -25,10 +23,13 @@ import { components, mixins } from '@soramitsu/soraneo-wallet-web';
 
 import TranslationMixin from '@/components/mixins/TranslationMixin';
 import { state } from '@/store/decorators';
+import { lazyComponent } from '@/router';
+import { Components } from '@/consts';
 
 @Component({
   components: {
     DialogBase: components.DialogBase,
+    Widget: lazyComponent(Components.Widget),
   },
 })
 export default class TermsAndConditionsDialog extends Mixins(TranslationMixin, mixins.DialogMixin) {
@@ -37,9 +38,6 @@ export default class TermsAndConditionsDialog extends Mixins(TranslationMixin, m
 
   @state.settings.displayRegions private displayRegions!: Nullable<Intl.DisplayNames>;
 
-  loading = true;
-  flags: string[] = [];
-
   countryCodeEmoji = countryCodeEmoji;
 
   formatCountryName(key: string, defaultValue: string): string {
@@ -81,38 +79,27 @@ export default class TermsAndConditionsDialog extends Mixins(TranslationMixin, m
     sy: 'Syria',
     th: 'Thailand',
     us: 'United States',
-  };
-
-  onIFrameLoad(): void {
-    this.loading = false;
-  }
+  } as const;
 }
 </script>
 
 <style lang="scss">
-.terms-of-service-dialog .el-dialog {
-  margin-top: 12vh !important;
-  max-width: 1000px !important;
+.dialog-wrapper.terms-of-service-dialog .el-dialog:not(.is-fullscreen) {
+  max-width: 1000px;
 }
 </style>
 
 <style lang="scss" scoped>
 .tos__section {
   width: 100%;
-  height: 600px;
   background-color: transparent;
-  box-shadow: var(--s-shadow-element);
-  border-radius: 10px;
-  padding: 0;
-  padding-left: $basic-spacing;
-  padding-right: $inner-spacing-tiny;
-  padding-top: $inner-spacing-mini;
   overflow: hidden;
+  margin-bottom: calc(var(--s-basic-spacing) * 2);
 }
 
 .sora-card {
   &__unsupported-countries {
-    margin-top: 24px;
+    padding-left: 0;
     display: grid;
     grid-template-columns: 1fr 1fr;
 

src/components/pages/Moonpay/Moonpay.vue

@@ -3,7 +3,7 @@
     <template #title>
       <moonpay-logo :theme="libraryTheme" />
     </template>
-    <moonpay-widget :src="widgetUrl" />
+    <widget :src="widgetUrl" />
   </dialog-base>
 </template>
 
@@ -28,7 +28,7 @@ import type { MoonpayTransaction } from '@/utils/moonpay';
   components: {
     DialogBase: components.DialogBase,
     MoonpayLogo,
-    MoonpayWidget: lazyComponent(Components.MoonpayWidget),
+    Widget: lazyComponent(Components.Widget),
   },
 })
 export default class Moonpay extends Mixins(MoonpayBridgeInitMixin) {

src/components/pages/Moonpay/Widget.vue → src/components/shared/Widget.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="widget-container" v-loading="widgetLoading">
+  <div class="widget-container" :class="{ 'widget-container--bordered': withBorder }" v-loading="widgetLoading">
     <iframe v-if="src" class="widget" :src="src" @load="onLoadWidget" />
   </div>
 </template>
@@ -8,8 +8,9 @@
 import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
 
 @Component
-export default class MoonpayWidget extends Vue {
+export default class Widget extends Vue {
   @Prop({ default: '', type: String }) readonly src!: string;
+  @Prop({ default: false, type: Boolean }) readonly withBorder!: boolean;
 
   @Watch('src', { immediate: true })
   private onChangeSrc(value) {
@@ -33,16 +34,27 @@ export default class MoonpayWidget extends Vue {
 </style>
 
 <style lang="scss" scoped>
-.widget-container {
-  display: flex;
-  border: none;
-  width: 100%;
-  min-height: 600px;
-  overflow: hidden;
-}
+$widget-border-radius: 20px;
+
 .widget {
   flex: 1;
   border: none;
-  border-radius: 20px;
+  border-radius: $widget-border-radius;
+
+  &-container {
+    display: flex;
+    border: none;
+    width: 100%;
+    min-height: 600px;
+    overflow: hidden;
+
+    &--bordered {
+      .widget {
+        box-shadow: var(--s-shadow-element);
+        padding: $widget-border-radius $inner-spacing-mini;
+        margin: $inner-spacing-tiny;
+      }
+    }
+  }
 }
 </style>

src/consts/index.ts

@@ -177,7 +177,6 @@ export enum Components {
   BridgeSelectNetwork = 'pages/Bridge/SelectNetwork',
   // Moonpay Page
   Moonpay = 'pages/Moonpay/Moonpay',
-  MoonpayWidget = 'pages/Moonpay/Widget',
   MoonpayNotification = 'pages/Moonpay/Notification',
   MoonpayConfirmation = 'pages/Moonpay/Confirmation',
   MoonpayHistoryButton = 'pages/Moonpay/HistoryButton',
@@ -205,6 +204,7 @@ export enum Components {
   ValueStatusWrapper = 'shared/ValueStatusWrapper',
   TransactionDetails = 'shared/TransactionDetails',
   PoolInfo = 'shared/PoolInfo',
+  Widget = 'shared/Widget',
   // Shared Buttons
   SortButton = 'shared/Button/SortButton',
   SvgIconButton = 'shared/Button/SvgIconButton/SvgIconButton',

src/views/MoonpayHistory.vue

@@ -61,7 +61,7 @@
         />
       </template>
       <template v-else>
-        <moonpay-widget :src="detailsWidgetUrl" />
+        <widget :src="detailsWidgetUrl" />
         <s-button
           v-if="isCompletedTransaction"
           :type="actionButtonType"
@@ -103,7 +103,7 @@ const DetailsView = 'details';
     MoonpayLogo,
     FormattedAmount: components.FormattedAmount,
     GenericPageHeader: lazyComponent(Components.GenericPageHeader),
-    MoonpayWidget: lazyComponent(Components.MoonpayWidget),
+    Widget: lazyComponent(Components.Widget),
     HistoryPagination: components.HistoryPagination,
   },
 })

src/views/SoraCard.vue

@@ -56,7 +56,6 @@ export default class SoraCard extends Mixins(mixins.LoadingMixin, SubscriptionsM
 
   @Watch('soraCardEnabled', { immediate: true })
   private checkAvailability(value: Nullable<boolean>): void {
-    console.info('SoraCard.vue::soraCardEnabled:', value); // For tests on PR env
     if (value === false) {
       goTo(PageNames.Swap);
     }