style: update some styling

rotki · Mar 22, 2024 · f6f0705 · f6f0705
1 parent 551a03a
commit f6f0705
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/components/checkout/pay/CryptoPaymentForm.vue b/components/checkout/pay/CryptoPaymentForm.vue
@@ -153,6 +153,7 @@ const showChangePaymentDialog = ref(false);
         :copy-value="data.cryptoAddress"
       />
     </div>
+    <RuiDivider class="mt-8" />
     <SelectedPlanOverview
       :plan="data"
       :disabled="processing"
@@ -171,7 +172,7 @@ const showChangePaymentDialog = ref(false);
         </p>
       </div>
     </div>
-    <div class="my-4 flex gap-4">
+    <div class="my-4 flex flex-col sm:flex-row gap-4">
       <div class="grow">
         <RuiButton
           :disabled="processing"
@@ -238,7 +239,7 @@ const showChangePaymentDialog = ref(false);
 }
 
 .hint {
-  @apply text-rui-text mt-4 mb-4;
+  @apply text-rui-text mt-6 mb-6 text-sm;
 }
 
 .info {

diff --git a/components/common/ModalDialog.vue b/components/common/ModalDialog.vue
@@ -20,20 +20,23 @@ const props = withDefaults(
 const emit = defineEmits<{ (e: 'update:modelValue', value: boolean): void }>();
 
 const { width, height, padding, modelValue } = toRefs(props);
-const out = ref(false);
+const out = ref(true);
 const visible = ref(false);
 
 onMounted(() => set(visible, get(modelValue)));
 watch(modelValue, (display) => {
   if (display) {
-    out.value = false;
-    visible.value = true;
+    set(visible, true);
+    set(out, true);
+    nextTick(() => {
+      set(out, false);
+    });
   }
   else {
-    out.value = true;
+    set(out, true);
     nextTick(() => {
       setTimeout(() => {
-        visible.value = false;
+        set(visible, false);
       }, 800);
     });
   }
@@ -87,9 +90,7 @@ const css = useCssModule();
 @import '@/assets/css/main.scss';
 
 .overlay {
-  @apply w-screen h-screen overflow-y-hidden z-30 fixed top-0 right-0;
-
-  background-color: #00000099;
+  @apply w-screen h-screen overflow-y-hidden z-30 fixed top-0 right-0 bg-black/[0.6];
 }
 
 .wrapper {
@@ -101,8 +102,7 @@ const css = useCssModule();
     @apply bg-white flex flex-col rounded-lg mb-2;
   }
 
-  @apply transition;
-  transform: translateY(0);
+  @apply transition transform translate-y-0;
 }
 
 .out .dialog {