163 lines
8.3 KiB
Vue
163 lines
8.3 KiB
Vue
// Copyright (C) 2019 Storj Labs, Inc.
|
|
// See LICENSE for copying information.
|
|
|
|
<template>
|
|
<div class="add-stripe-card-popup-container-overflow">
|
|
<div class="add-stripe-card-popup-container">
|
|
<div class="add-stripe-card-popup-container__title-container">
|
|
<svg class="add-stripe-card-popup-container__title-container__image" width="113" height="90" viewBox="0 0 113 90" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<g filter="url(#filter0_d)">
|
|
<path d="M86.0972 64.0932L26.9457 64.329C23.7672 64.329 21.2089 61.7346 21.2089 58.5898L21.1313 23.0537C21.1313 19.8303 23.6897 17.2359 26.7907 17.2359L85.9422 17C89.1207 17 91.679 19.5944 91.679 22.7392L91.8341 58.3539C91.7565 61.4987 89.2757 64.0932 86.0972 64.0932Z" fill="#2683FF"/>
|
|
</g>
|
|
<path d="M83.9628 62.1047L26.6351 62.3301C23.5546 62.3301 21.0751 59.8507 21.0751 56.8453L21 22.8845C21 19.804 23.4794 17.3245 26.4848 17.3245L83.8125 17.0991C86.893 17.0991 89.3724 19.5786 89.3724 22.5839L89.5227 56.6199C89.4476 59.6253 87.0433 62.1047 83.9628 62.1047Z" fill="#2683FF"/>
|
|
<path d="M71.9968 51.5825L71.02 51.5862L71.0303 54.291L72.007 54.2873L71.9968 51.5825Z" fill="#2683FF"/>
|
|
<path d="M73.6496 51.5825L72.6729 51.5862L72.6831 54.291L73.6599 54.2873L73.6496 51.5825Z" fill="white"/>
|
|
<path d="M75.2282 51.5076L74.2515 51.5114L74.2617 54.2162L75.2385 54.2125L75.2282 51.5076Z" fill="white"/>
|
|
<path d="M76.8801 51.5078L75.9033 51.5115L75.9135 54.2163L76.8902 54.2126L76.8801 51.5078Z" fill="white"/>
|
|
<path d="M78.4582 51.5073L77.4814 51.511L77.4916 54.2158L78.4684 54.2122L78.4582 51.5073Z" fill="white"/>
|
|
<path d="M80.111 51.5073L79.1343 51.511L79.1445 54.2158L80.1212 54.2122L80.111 51.5073Z" fill="white"/>
|
|
<path d="M83.3412 40.5921L29.4697 40.7955L29.4814 43.876L83.3528 43.6726L83.3412 40.5921Z" fill="white"/>
|
|
<path d="M37.6648 34.8313H30.2264C29.8508 34.8313 29.4751 34.4557 29.4751 34.0048V28.7454C29.4751 28.2946 29.7756 27.9189 30.1513 27.9189H37.5896C37.9653 27.9189 38.341 28.2946 38.341 28.7454V34.0048C38.4161 34.4557 38.1156 34.8313 37.6648 34.8313Z" fill="white"/>
|
|
<path d="M36.371 27.8972L36.2207 27.8978L36.2476 34.8317L36.3979 34.8311L36.371 27.8972Z" fill="#2683FF"/>
|
|
<path d="M31.5668 27.9201L31.4165 27.9207L31.4419 34.833L31.5921 34.8325L31.5668 27.9201Z" fill="#2683FF"/>
|
|
<path d="M38.4163 30.1705L36.3125 30.1785L36.3131 30.3287L38.4168 30.3208L38.4163 30.1705Z" fill="#2683FF"/>
|
|
<path d="M38.4163 31.7491L36.3125 31.7571L36.3131 31.9073L38.4168 31.8994L38.4163 31.7491Z" fill="#2683FF"/>
|
|
<path d="M38.491 33.1009L36.3872 33.1089L36.3878 33.2592L38.4915 33.2512L38.491 33.1009Z" fill="#2683FF"/>
|
|
<path d="M31.5037 29.9435L29.2832 29.9519L29.2838 30.1022L31.5043 30.0938L31.5037 29.9435Z" fill="#2683FF"/>
|
|
<path d="M31.5037 31.9798L29.2832 31.9882L29.2838 32.1384L31.5043 32.1301L31.5037 31.9798Z" fill="#2683FF"/>
|
|
<path d="M31.5037 33.4566L29.2832 33.465L29.2838 33.6152L31.5043 33.6069L31.5037 33.4566Z" fill="#2683FF"/>
|
|
<path d="M35.0358 29.1919L32.7817 29.2004L32.7823 29.3507L35.0363 29.3422L35.0358 29.1919Z" fill="#2683FF"/>
|
|
<path d="M35.0353 33.5508L32.7812 33.5593L32.7818 33.7096L35.0359 33.7011L35.0353 33.5508Z" fill="#2683FF"/>
|
|
<defs>
|
|
<filter id="filter0_d" x="0.181719" y="0.240297" width="112.602" height="89.2283" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
|
<feOffset dy="4.18993"/>
|
|
<feGaussianBlur stdDeviation="10.4748"/>
|
|
<feColorMatrix type="matrix" values="0 0 0 0 0.14902 0 0 0 0 0.513726 0 0 0 0 1 0 0 0 0.4 0"/>
|
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
|
|
</filter>
|
|
</defs>
|
|
</svg>
|
|
<h1 class="add-stripe-card-popup-container__title-container__title">Add New Card</h1>
|
|
</div>
|
|
<div class="add-stripe-card-popup-container__input-container">
|
|
<!--Stripe card input here-->
|
|
</div>
|
|
<div class="add-stripe-card-popup-container__checkbox-container">
|
|
<VCheckbox/>
|
|
<h2 class="add-stripe-card-popup-container__checkbox-container__title">Make this card default payment method</h2>
|
|
</div>
|
|
<VButton
|
|
label="Save Card"
|
|
height="48px"
|
|
width="100%"
|
|
/>
|
|
<div class="add-stripe-card-popup-container__close-cross-container">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" >
|
|
<path d="M15.7071 1.70711C16.0976 1.31658 16.0976 0.683417 15.7071 0.292893C15.3166 -0.0976311 14.6834 -0.0976311 14.2929 0.292893L15.7071 1.70711ZM0.292893 14.2929C-0.0976311 14.6834 -0.0976311 15.3166 0.292893 15.7071C0.683417 16.0976 1.31658 16.0976 1.70711 15.7071L0.292893 14.2929ZM1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L14.2929 15.7071ZM14.2929 0.292893L0.292893 14.2929L1.70711 15.7071L15.7071 1.70711L14.2929 0.292893ZM0.292893 1.70711L14.2929 15.7071L15.7071 14.2929L1.70711 0.292893L0.292893 1.70711Z" fill="#384B65"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue } from 'vue-property-decorator';
|
|
|
|
import VButton from '@/components/common/VButton.vue';
|
|
import VCheckbox from '@/components/common/VCheckbox.vue';
|
|
|
|
@Component({
|
|
components: {
|
|
VCheckbox,
|
|
VButton,
|
|
},
|
|
})
|
|
|
|
export default class AddStripeCardPopup extends Vue {}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.add-stripe-card-popup-container-overflow {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(134, 134, 148, 0.4);
|
|
z-index: 1000;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-family: 'font_regular';
|
|
}
|
|
|
|
.add-stripe-card-popup-container {
|
|
width: 100%;
|
|
max-width: 600px;
|
|
max-height: 440px;
|
|
background-color: #FFFFFF;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
justify-content: center;
|
|
padding: 68px 45px;
|
|
}
|
|
|
|
.add-stripe-card-popup-container__title-container {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
|
|
&__image {
|
|
margin-left: -21px;
|
|
}
|
|
|
|
&__title {
|
|
font-family: 'font_bold';
|
|
font-size: 32px;
|
|
line-height: 39px;
|
|
color: #384B65;
|
|
}
|
|
}
|
|
|
|
.add-stripe-card-popup-container__input-container {
|
|
width: 100%;
|
|
height: 48px;
|
|
margin-top: 30px;
|
|
margin-bottom: 13px;
|
|
}
|
|
|
|
.add-stripe-card-popup-container__checkbox-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
margin-bottom: 40px;
|
|
|
|
&__title {
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
color: #384B65;
|
|
margin-top: 17px;
|
|
}
|
|
}
|
|
|
|
.add-stripe-card-popup-container__close-cross-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
right: 40px;
|
|
top: 40px;
|
|
height: 24px;
|
|
width: 24px;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|