storj/web/satellite/src/components/project/AddStripeCardPopup.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 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>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">
                <Checkbox />
                <h2>Make this card default payment method</h2>
            </div>
            <Button 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 Button from '@/components/common/Button.vue';
import Checkbox from '@/components/common/Checkbox.vue';

@Component({
    components: {
        Checkbox,
        Button,
    }
})

export default class AddStripeCardPopup extends Vue {}
</script>

<style scoped lang="scss">
    h1 {
        font-family: 'font_bold';
        font-size: 32px;
        line-height: 39px;
        color: #384B65;
    }

    h2 {
        font-family: 'font_regular';
        font-size: 14px;
        line-height: 20px;
        color: #384B65;
        margin-top: 17px;
    }
    
    .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;
    }
	
	.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%;
        
        svg {
            margin-left: -21px;
        }
    }
    
    .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;
    }
    
    .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>