web/satellite: copy api key container reworked

Change-Id: I51945d260095605327cd36e2f7d6e51f4044a429
This commit is contained in:
VitaliiShpital 2020-04-02 14:28:25 +03:00 committed by Vitalii Shpital
parent 3ee6c14f54
commit d392c6e658
14 changed files with 83 additions and 175 deletions

View File

@ -288,15 +288,15 @@ export default class PaymentMethods extends Vue {
display: flex;
justify-content: center;
align-items: center;
width: 123px;
height: 48px;
width: 125px;
height: 50px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
border-radius: 6px;
background-color: #2683ff;
font-family: 'font_bold', sans-serif;
font-family: 'font_medium', sans-serif;
font-size: 16px;
line-height: 23px;
color: #fff;

View File

@ -8,24 +8,24 @@
<div class="save-api-popup__copy-area__key-area">
<p class="save-api-popup__copy-area__key-area__key">{{ apiKeySecret }}</p>
</div>
<div class="copy-button" @click="onCopyClick">
<CopyButtonLabelIcon/>
<p class="copy-button__label">Copy</p>
</div>
<p class="save-api-popup__copy-area__copy-button" @click="onCopyClick">Copy</p>
</div>
<div class="save-api-popup__link-container">
<div class="save-api-popup__next-step-area">
<span class="save-api-popup__next-step-area__label">Next Step:</span>
<a
class="save-api-popup__link-container__link"
class="save-api-popup__next-step-area__link"
href="https://documentation.tardigrade.io/getting-started/uploading-your-first-object/set-up-uplink-cli"
target="_blank"
v-if="isLinkVisible"
@click.self.stop="segmentTrack"
>
Create a Bucket & Upload an Object ->
Set Up Uplink CLI
</a>
</div>
<div class="save-api-popup__close-cross-container" @click="onCloseClick">
<CloseCrossIcon/>
<VButton
label="Done"
width="156px"
height="40px"
:on-press="onCloseClick"
/>
</div>
<div class="blur-content"></div>
</div>
@ -35,17 +35,14 @@
import { Component, Prop, Vue } from 'vue-property-decorator';
import HeaderlessInput from '@/components/common/HeaderlessInput.vue';
import CopyButtonLabelIcon from '@/../static/images/apiKeys/copyButtonLabel.svg';
import CloseCrossIcon from '@/../static/images/common/closeCross.svg';
import VButton from '@/components/common/VButton.vue';
import { SegmentEvent } from '@/utils/constants/analyticsEventNames';
@Component({
components: {
VButton,
HeaderlessInput,
CopyButtonLabelIcon,
CloseCrossIcon,
},
})
export default class ApiKeysCopyPopup extends Vue {
@ -58,24 +55,23 @@ export default class ApiKeysCopyPopup extends Vue {
private readonly apiKeySecret: string;
/**
* Indicates if link to doc should appear after api key secret copy.
* Closes popup.
*/
public isLinkVisible: boolean = false;
public onCloseClick(): void {
this.$emit('closePopup');
this.isLinkVisible = false;
}
/**
* Copies api key secret to buffer.
*/
public onCopyClick(): void {
this.isLinkVisible = true;
this.$copyText(this.apiKeySecret);
this.$notify.success('Key saved to clipboard');
}
/**
* Tracks if user checked uplink CLI docs.
*/
public segmentTrack(): void {
this.$segment.track(SegmentEvent.CLI_DOCS_VIEWED, {
email: this.$store.getters.user.email,
@ -121,36 +117,54 @@ export default class ApiKeysCopyPopup extends Vue {
word-break: break-all;
}
}
&__copy-button {
padding: 11px 22px;
margin: 0 0 0 20px;
background: #fff;
border-radius: 6px;
font-size: 15px;
cursor: pointer;
color: #2683ff;
&:hover {
color: #fff;
background-color: #2683ff;
}
}
}
&__link-container {
&__next-step-area {
display: flex;
justify-content: flex-end;
align-items: center;
width: 100%;
height: 21px;
&__label {
font-size: 15px;
line-height: 49px;
letter-spacing: -0.100741px;
color: #a0a0a0;
margin-right: 15px;
}
&__link {
font-size: 16px;
line-height: 21px;
text-decoration: underline;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #2683ff;
border-radius: 6px;
width: 154px;
height: 38px;
font-size: 15px;
line-height: 22px;
color: #2683ff;
}
}
margin-right: 15px;
&__close-cross-container {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 29px;
top: 29px;
height: 24px;
width: 24px;
cursor: pointer;
&:hover .close-cross-svg-path {
fill: #2683ff;
&:hover {
color: #fff;
background-color: #2683ff;
}
}
}
@ -165,29 +179,4 @@ export default class ApiKeysCopyPopup extends Vue {
opacity: 0.3;
}
}
.copy-button {
display: flex;
background-color: #2683ff;
padding: 13px 36px;
cursor: pointer;
align-items: center;
justify-content: space-between;
color: #fff;
border: 1px solid #2683ff;
box-sizing: border-box;
border-radius: 8px;
font-size: 14px;
font-family: 'font_bold', sans-serif;
margin-left: 10px;
&__label {
margin: 0 0 0 5px;
user-select: none;
}
&:hover {
background-color: #196cda;
}
}
</style>

View File

@ -7,7 +7,7 @@
:class="containerClassName"
:style="style"
@click="onPress">
<h1 class="label">{{label}}</h1>
<span class="label">{{label}}</span>
</div>
</template>

View File

@ -1,6 +0,0 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3763 7.7002H3.34383C2.46383 7.7002 1.76001 8.40402 1.76001 9.28402V19.3378C1.76001 20.1954 2.46383 20.9216 3.34383 20.9216H13.3976C14.2553 20.9216 14.9814 20.2178 14.9814 19.3378L14.9823 9.28402C14.96 8.40402 14.2561 7.7002 13.3761 7.7002H13.3763ZM13.6401 19.3164C13.6401 19.4488 13.5301 19.5588 13.3977 19.5588L3.34397 19.5579C3.21162 19.5579 3.10161 19.4479 3.10161 19.3156L3.10247 9.284C3.10247 9.15165 3.21247 9.04164 3.34483 9.04164H13.3986C13.5309 9.04164 13.641 9.15164 13.641 9.284L13.6401 19.3164Z" fill="white"/>
<path d="M18.6563 1.09974H8.62386C7.74386 1.09974 7.04004 1.80356 7.04004 2.68356V6.37978H8.36004V2.68356C8.36004 2.55122 8.47004 2.44121 8.60239 2.44121H18.6562C18.7885 2.44121 18.8985 2.55121 18.8985 2.68356V12.7373C18.8985 12.8697 18.7885 12.9797 18.6562 12.9797H16.2799V14.2997H18.6562C19.5138 14.2997 20.24 13.5959 20.24 12.7159V2.68343C20.24 1.80343 19.5362 1.09961 18.6562 1.09961L18.6563 1.09974Z" fill="#354049"/>
<rect x="2.93335" y="8.7998" width="11.7333" height="11" fill="white"/>
<rect x="7.1001" y="1.2334" width="12.9333" height="12.9333" rx="1.5" fill="white" stroke="#2683FF"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -20,9 +20,7 @@ exports[`AddStorjForm renders correctly 1`] = `
</div>
<div class="add-storj-area__submit-area">
<!---->
<div class="confirm-add-storj-button container" style="width: 251px; height: 48px;">
<h1 class="label">Continue to Coin Payments</h1>
</div>
<div class="confirm-add-storj-button container" style="width: 251px; height: 48px;"><span class="label">Continue to Coin Payments</span></div>
</div>
</div>
`;

View File

@ -49,9 +49,7 @@ exports[`PaymentMethods renders correctly after add STORJ and cancel click 1`] =
</div>
<div class="add-storj-area__submit-area">
<!---->
<div class="confirm-add-storj-button container" style="width: 251px; height: 48px;">
<h1 class="label">Continue to Coin Payments</h1>
</div>
<div class="confirm-add-storj-button container" style="width: 251px; height: 48px;"><span class="label">Continue to Coin Payments</span></div>
</div>
</div>
<!---->
@ -70,9 +68,7 @@ exports[`PaymentMethods renders correctly after add STORJ and cancel click 2`] =
<h1 class="payment-methods-area__functional-area__title">Payment Method</h1>
<div class="payment-methods-area__functional-area__button-area">
<div class="payment-methods-area__functional-area__button-area__default-buttons">
<div class="add-storj-button container blue-white" style="width: 123px; height: 48px;">
<h1 class="label">Add STORJ</h1>
</div>
<div class="add-storj-button container blue-white" style="width: 123px; height: 48px;"><span class="label">Add STORJ</span></div>
</div>
</div>
</div>
@ -162,9 +158,7 @@ exports[`PaymentMethods renders correctly with card 1`] = `
<h1 class="payment-methods-area__functional-area__title">Payment Method</h1>
<div class="payment-methods-area__functional-area__button-area">
<div class="payment-methods-area__functional-area__button-area__default-buttons">
<div class="add-storj-button container blue-white" style="width: 123px; height: 48px;">
<h1 class="label">Add STORJ</h1>
</div>
<div class="add-storj-button container blue-white" style="width: 123px; height: 48px;"><span class="label">Add STORJ</span></div>
</div>
</div>
</div>
@ -232,9 +226,7 @@ exports[`PaymentMethods renders correctly without card 1`] = `
<h1 class="payment-methods-area__functional-area__title">Payment Method</h1>
<div class="payment-methods-area__functional-area__button-area">
<div class="payment-methods-area__functional-area__button-area__default-buttons">
<div class="add-storj-button container blue-white" style="width: 123px; height: 48px;">
<h1 class="label">Add STORJ</h1>
</div>
<div class="add-storj-button container blue-white" style="width: 123px; height: 48px;"><span class="label">Add STORJ</span></div>
</div>
</div>
</div>

View File

@ -25,7 +25,7 @@ const testKey = 'test';
const store = new Vuex.Store({ modules: { notificationsModule, apiKeysModule }});
describe('ApiKeysCopyPopup', () => {
it('renders correctly', async () => {
it('renders correctly', async (): Promise<void> => {
const wrapper = mount(ApiKeysCopyPopup, {
store,
localVue,
@ -36,13 +36,10 @@ describe('ApiKeysCopyPopup', () => {
});
expect(wrapper).toMatchSnapshot();
expect(wrapper.find('.save-api-popup__copy-area__key-area__key').text()).toBe(testKey);
await wrapper.find('.copy-button').trigger('click');
expect(wrapper).toMatchSnapshot();
await expect(wrapper.find('.save-api-popup__copy-area__key-area__key').text()).toBe(testKey);
});
it('function onCloseClick works correctly', async () => {
it('function onCloseClick works correctly', async (): Promise<void> => {
const wrapper = mount(ApiKeysCopyPopup, {
store,
localVue,

View File

@ -26,9 +26,7 @@ exports[`ApiKeysArea renders empty screen with add key prompt 1`] = `
<div class="no-api-keys-area collapsed">
<h1 class="no-api-keys-area__title">Create Your First API Key</h1>
<p class="no-api-keys-area__sub-title">API keys give access to the project to create buckets, upload objects</p>
<div class="no-api-keys-area__button container" style="width: 180px; height: 48px;">
<h1 class="label">Create API Key</h1>
</div>
<div class="no-api-keys-area__button container" style="width: 180px; height: 48px;"><span class="label">Create API Key</span></div>
<div class="no-api-keys-area__steps-area">
<div class="no-api-keys-area__steps-area__numbers"><svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" class="no-api-keys-area__steps-area__numbers__icon">
<circle cx="15" cy="15" r="15" fill="#519CFF"></circle>

View File

@ -7,47 +7,13 @@ exports[`ApiKeysCopyPopup renders correctly 1`] = `
<div class="save-api-popup__copy-area__key-area">
<p class="save-api-popup__copy-area__key-area__key">test</p>
</div>
<div class="copy-button"><svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3763 7.7002H3.34383C2.46383 7.7002 1.76001 8.40402 1.76001 9.28402V19.3378C1.76001 20.1954 2.46383 20.9216 3.34383 20.9216H13.3976C14.2553 20.9216 14.9814 20.2178 14.9814 19.3378L14.9823 9.28402C14.96 8.40402 14.2561 7.7002 13.3761 7.7002H13.3763ZM13.6401 19.3164C13.6401 19.4488 13.5301 19.5588 13.3977 19.5588L3.34397 19.5579C3.21162 19.5579 3.10161 19.4479 3.10161 19.3156L3.10247 9.284C3.10247 9.15165 3.21247 9.04164 3.34483 9.04164H13.3986C13.5309 9.04164 13.641 9.15164 13.641 9.284L13.6401 19.3164Z" fill="white"></path>
<path d="M18.6563 1.09974H8.62386C7.74386 1.09974 7.04004 1.80356 7.04004 2.68356V6.37978H8.36004V2.68356C8.36004 2.55122 8.47004 2.44121 8.60239 2.44121H18.6562C18.7885 2.44121 18.8985 2.55121 18.8985 2.68356V12.7373C18.8985 12.8697 18.7885 12.9797 18.6562 12.9797H16.2799V14.2997H18.6562C19.5138 14.2997 20.24 13.5959 20.24 12.7159V2.68343C20.24 1.80343 19.5362 1.09961 18.6562 1.09961L18.6563 1.09974Z" fill="#354049"></path>
<rect x="2.93335" y="8.7998" width="11.7333" height="11" fill="white"></rect>
<rect x="7.1001" y="1.2334" width="12.9333" height="12.9333" rx="1.5" fill="white" stroke="#2683FF"></rect>
</svg>
<p class="copy-button__label">Copy</p>
</div>
<p class="save-api-popup__copy-area__copy-button">Copy</p>
</div>
<div class="save-api-popup__link-container">
<!---->
<div class="save-api-popup__next-step-area"><span class="save-api-popup__next-step-area__label">Next Step:</span> <a href="https://documentation.tardigrade.io/getting-started/uploading-your-first-object/set-up-uplink-cli" target="_blank" class="save-api-popup__next-step-area__link">
Set Up Uplink CLI
</a>
<div class="container" style="width: 156px; height: 40px;"><span class="label">Done</span></div>
</div>
<div class="save-api-popup__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" class="close-cross-svg-path"></path>
</svg></div>
<div class="blur-content"></div>
</div>
`;
exports[`ApiKeysCopyPopup renders correctly 2`] = `
<div class="save-api-popup">
<h2 class="save-api-popup__title">Save Your Secret API Key! It Will Appear Only Once.</h2>
<div class="save-api-popup__copy-area">
<div class="save-api-popup__copy-area__key-area">
<p class="save-api-popup__copy-area__key-area__key">test</p>
</div>
<div class="copy-button"><svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3763 7.7002H3.34383C2.46383 7.7002 1.76001 8.40402 1.76001 9.28402V19.3378C1.76001 20.1954 2.46383 20.9216 3.34383 20.9216H13.3976C14.2553 20.9216 14.9814 20.2178 14.9814 19.3378L14.9823 9.28402C14.96 8.40402 14.2561 7.7002 13.3761 7.7002H13.3763ZM13.6401 19.3164C13.6401 19.4488 13.5301 19.5588 13.3977 19.5588L3.34397 19.5579C3.21162 19.5579 3.10161 19.4479 3.10161 19.3156L3.10247 9.284C3.10247 9.15165 3.21247 9.04164 3.34483 9.04164H13.3986C13.5309 9.04164 13.641 9.15164 13.641 9.284L13.6401 19.3164Z" fill="white"></path>
<path d="M18.6563 1.09974H8.62386C7.74386 1.09974 7.04004 1.80356 7.04004 2.68356V6.37978H8.36004V2.68356C8.36004 2.55122 8.47004 2.44121 8.60239 2.44121H18.6562C18.7885 2.44121 18.8985 2.55121 18.8985 2.68356V12.7373C18.8985 12.8697 18.7885 12.9797 18.6562 12.9797H16.2799V14.2997H18.6562C19.5138 14.2997 20.24 13.5959 20.24 12.7159V2.68343C20.24 1.80343 19.5362 1.09961 18.6562 1.09961L18.6563 1.09974Z" fill="#354049"></path>
<rect x="2.93335" y="8.7998" width="11.7333" height="11" fill="white"></rect>
<rect x="7.1001" y="1.2334" width="12.9333" height="12.9333" rx="1.5" fill="white" stroke="#2683FF"></rect>
</svg>
<p class="copy-button__label">Copy</p>
</div>
</div>
<div class="save-api-popup__link-container"><a href="https://documentation.tardigrade.io/getting-started/uploading-your-first-object/set-up-uplink-cli" target="_blank" class="save-api-popup__link-container__link">
Create a Bucket &amp; Upload an Object -&gt;
</a></div>
<div class="save-api-popup__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" class="close-cross-svg-path"></path>
</svg></div>
<div class="blur-content"></div>
</div>
`;

View File

@ -12,9 +12,7 @@ exports[`ApiKeysCreationPopup renders correctly 1`] = `
<!---->
<!---->
</div>
<div class="next-button container" style="width: 128px; height: 48px;">
<h1 class="label">Next &gt;</h1>
</div>
<div class="next-button container" style="width: 128px; height: 48px;"><span class="label">Next &gt;</span></div>
<div class="new-api-key__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" class="close-cross-svg-path"></path>
</svg></div>

View File

@ -1,19 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Button.vue renders correctly 1`] = `
<div class="container" style="width: inherit; height: inherit;">
<h1 class="label">Default</h1>
</div>
`;
exports[`Button.vue renders correctly 1`] = `<div class="container" style="width: inherit; height: inherit;"><span class="label">Default</span></div>`;
exports[`Button.vue renders correctly with isDisabled prop 1`] = `
<div class="container disabled" style="width: inherit; height: inherit;">
<h1 class="label">Default</h1>
</div>
`;
exports[`Button.vue renders correctly with isDisabled prop 1`] = `<div class="container disabled" style="width: inherit; height: inherit;"><span class="label">Default</span></div>`;
exports[`Button.vue renders correctly with isWhite prop 1`] = `
<div class="container white" style="width: inherit; height: inherit;">
<h1 class="label">Default</h1>
</div>
`;
exports[`Button.vue renders correctly with isWhite prop 1`] = `<div class="container white" style="width: inherit; height: inherit;"><span class="label">Default</span></div>`;

View File

@ -47,12 +47,8 @@ exports[`NewProjectArea renders correctly without projects and with credit card
<!---->
</div>
<div class="new-project-popup__form-container__button-container">
<div class="container white" style="width: 205px; height: 48px;">
<h1 class="label">Back to Billing</h1>
</div>
<div class="container" style="width: 205px; height: 48px;">
<h1 class="label">Next</h1>
</div>
<div class="container white" style="width: 205px; height: 48px;"><span class="label">Back to Billing</span></div>
<div class="container" style="width: 205px; height: 48px;"><span class="label">Next</span></div>
</div>
</div>
<div class="new-project-popup__close-cross-container"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">

View File

@ -34,12 +34,8 @@ exports[`NewProjectPopup.vue renders correctly 1`] = `
<!---->
</div>
<div class="new-project-popup__form-container__button-container">
<div class="container white" style="width: 205px; height: 48px;">
<h1 class="label">Back to Billing</h1>
</div>
<div class="container" style="width: 205px; height: 48px;">
<h1 class="label">Next</h1>
</div>
<div class="container white" style="width: 205px; height: 48px;"><span class="label">Back to Billing</span></div>
<div class="container" style="width: 205px; height: 48px;"><span class="label">Next</span></div>
</div>
</div>
<div class="new-project-popup__close-cross-container"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">

View File

@ -20,12 +20,8 @@ exports[`ProjectDetails.vue editing works correctly 1`] = `
<!---->
</div>
<div class="project-details__description-container__editing__buttons-area">
<div class="container white" style="width: 180px; height: 48px;">
<h1 class="label">Cancel</h1>
</div>
<div class="save-button container" style="width: 180px; height: 48px;">
<h1 class="label">Save</h1>
</div>
<div class="container white" style="width: 180px; height: 48px;"><span class="label">Cancel</span></div>
<div class="save-button container" style="width: 180px; height: 48px;"><span class="label">Save</span></div>
</div>
</div>
</div>