initial user dropdown markup (#672)
This commit is contained in:
Nikolay Yurchenko
GitHub
parent
f730ce451a
commit
367c483f78
@ -21,7 +21,6 @@
|
||||
|
||||
a{
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
input,
|
||||
|
||||
@ -59,7 +59,7 @@ export default class Button extends Vue {}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.buttonContainer {
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@ -37,6 +37,9 @@ export default class DashboardHeader extends Vue {}
|
||||
justify-content: flex-start;
|
||||
padding-left: 4vw;
|
||||
padding-right: 4vw;
|
||||
img {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.hLogo {
|
||||
width: 10vw;
|
||||
|
||||
@ -1,38 +1,37 @@
|
||||
<template>
|
||||
<router-link to="/dashboard/account" exact>
|
||||
<div class="abContainer">
|
||||
<div class="abToggleContainer">
|
||||
<!-- background of this div generated and stores in store -->
|
||||
<div class="abAvatar" :style="style">
|
||||
<!-- First digit of firstName after Registration -->
|
||||
<!-- img if avatar was set -->
|
||||
<h1>{{avatarLetter}}</h1>
|
||||
</div>
|
||||
<h1>{{userName}}</h1>
|
||||
<div class="abExpanderArea">
|
||||
<img v-if="!isMatchesWithPath" src="../../../../static/images/register/BlueExpand.svg" />
|
||||
<img v-if="isMatchesWithPath" src="../../../../static/images/register/BlueHide.svg" />
|
||||
</div>
|
||||
<div class="abContainer" >
|
||||
<div class="abToggleContainer" v-on:click="toggleSelection" >
|
||||
<!-- background of this div generated and stores in store -->
|
||||
<div class="abAvatar" :style="style">
|
||||
<!-- First digit of firstName after Registration -->
|
||||
<!-- img if avatar was set -->
|
||||
<h1>{{avatarLetter}}</h1>
|
||||
</div>
|
||||
<h1>{{userName}}</h1>
|
||||
<div class="abExpanderArea">
|
||||
<img v-if="!isChoiceShown" src="../../../../static/images/register/BlueExpand.svg" />
|
||||
<img v-if="isChoiceShown" src="../../../../static/images/register/BlueHide.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
<AccountDropdown v-if="isChoiceShown" @onClose="toggleSelection" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import AccountDropdown from "./AccountDropdown.vue";
|
||||
|
||||
@Component(
|
||||
{
|
||||
data: function() {
|
||||
return {
|
||||
// check if this.$router.history.current mathes with path
|
||||
isMatchesWithPath: false,
|
||||
// this.$store.userName
|
||||
userName: "User Name"
|
||||
userName: "User Name",
|
||||
isChoiceShown: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
style: function() {
|
||||
style: function() : object {
|
||||
//color from $store
|
||||
return { background: "#95D486" }
|
||||
},
|
||||
@ -40,6 +39,14 @@ import { Component, Vue } from 'vue-property-decorator';
|
||||
avatarLetter: function() : string {
|
||||
return this.$data.userName.slice(0,1).toUpperCase();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleSelection: function() : void {
|
||||
this.$data.isChoiceShown = !this.$data.isChoiceShown;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
AccountDropdown
|
||||
}
|
||||
}
|
||||
)
|
||||
@ -53,9 +60,11 @@ export default class AccountButton extends Vue {}
|
||||
outline: none;
|
||||
}
|
||||
.abContainer {
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
background-color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
h1 {
|
||||
font-family: 'montserrat_medium';
|
||||
font-size: 16px;
|
||||
|
||||
@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<!-- To close popup we need to use method onCloseClick -->
|
||||
<div class="adChoiceContainer" >
|
||||
<div class="adOverflowContainer">
|
||||
<!-- TODO: add selection logic onclick -->
|
||||
<div class="adItemContainer settings" v-on:click="onAccountSettingsClick" >
|
||||
<div class="adImageContainer">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20 8.72549C20 9.60784 20 10.4902 20 11.2745C19.9024 11.5686 19.7073 11.6667 19.4146 11.7647C18.7317 11.9608 18.1463 12.0588 17.4634 12.2549C17.3659 12.2549 17.2683 12.3529 17.2683 12.451C17.1707 12.7451 16.9756 13.0392 16.878 13.4314C16.878 13.5294 16.878 13.6275 16.878 13.7255C17.1707 14.2157 17.4634 14.7059 17.7561 15.2941C17.9512 15.6863 17.9512 15.8824 17.6585 16.1765C17.1707 16.6667 16.6829 17.1569 16.1951 17.6471C15.9024 17.9412 15.6098 17.9412 15.3171 17.7451C14.8293 17.451 14.3415 17.1569 13.8537 16.8627C13.7561 16.7647 13.6585 16.7647 13.561 16.8627C13.2683 17.0588 12.878 17.1569 12.5854 17.2549C12.4878 17.2549 12.3902 17.3529 12.3902 17.451C12.1951 18.1373 12.0976 18.7255 11.9024 19.4118C11.8049 19.7059 11.7073 19.902 11.4146 20C10.5366 20 9.65854 20 8.87805 20C8.58537 19.902 8.48781 19.7059 8.39024 19.4118C8.19512 18.7255 8.09756 18.1373 7.90244 17.451C7.90244 17.3529 7.80488 17.2549 7.70732 17.2549C7.41463 17.1569 7.02439 16.9608 6.73171 16.8627C6.63415 16.7647 6.53659 16.8627 6.43902 16.8627C5.95122 17.1569 5.46341 17.451 4.97561 17.7451C4.58537 17.9412 4.39024 17.9412 4.09756 17.6471C3.60976 17.1569 3.12195 16.6667 2.63415 16.1765C2.34146 15.8824 2.34146 15.5882 2.53659 15.2941C2.82927 14.8039 3.12195 14.3137 3.41463 13.8235C3.5122 13.7255 3.5122 13.6275 3.41463 13.5294C3.21951 13.2353 3.12195 12.8431 3.02439 12.549C3.02439 12.451 2.92683 12.3529 2.82927 12.3529C2.14634 12.1569 1.46341 12.0588 0.780488 11.8627C0.195122 11.7647 0 11.5686 0 11.1765C0 10.4902 0 9.70588 0 9.01961C0 8.62745 0.195122 8.43137 0.585366 8.33333C1.26829 8.13725 1.95122 7.94118 2.53659 7.7451C2.63415 7.7451 2.73171 7.64706 2.73171 7.54902C2.92683 7.35294 3.02439 7.05882 3.12195 6.76471C3.12195 6.66667 3.12195 6.56863 3.12195 6.47059C2.82927 5.88235 2.43902 5.39216 2.14634 4.80392C1.95122 4.41176 1.95122 4.21569 2.2439 3.92157C2.73171 3.43137 3.21951 2.94118 3.70732 2.45098C4 2.15686 4.29268 2.15686 4.58537 2.35294C5.17073 2.64706 5.65854 3.03922 6.2439 3.33333C6.34146 3.33333 6.43902 3.33333 6.53659 3.33333C6.82927 3.13725 7.21951 2.94118 7.5122 2.84314C7.60976 2.84314 7.70732 2.7451 7.70732 2.64706C7.90244 1.96078 8 1.27451 8.19512 0.588235C8.39024 0.196078 8.58537 0 8.97561 0C9.65854 0 10.439 0 11.122 0C11.5122 0 11.7073 0.196078 11.8049 0.588235C12 1.27451 12.0976 1.96078 12.2927 2.64706C12.2927 2.7451 12.3902 2.84314 12.4878 2.84314C12.7805 2.94118 13.1707 3.13725 13.4634 3.23529C13.561 3.33333 13.6585 3.23529 13.7561 3.23529C14.2439 2.94118 14.7317 2.64706 15.2195 2.35294C15.6098 2.15686 15.8049 2.15686 16.1951 2.45098C16.6829 2.94118 17.1707 3.43137 17.6585 3.92157C17.9512 4.21569 18.0488 4.5098 17.7561 4.90196C17.4634 5.39216 17.1707 5.88235 16.878 6.47059C16.878 6.56863 16.878 6.66667 16.878 6.76471C16.9756 7.05882 17.1707 7.45098 17.2683 7.7451C17.2683 7.84314 17.3659 7.94118 17.4634 7.94118C18.1463 8.13726 18.7317 8.23529 19.4146 8.43137C19.7073 8.33333 19.9024 8.52941 20 8.72549ZM10.0488 5.98039C7.80488 5.98039 5.95122 7.84314 5.95122 10.098C5.95122 12.3529 7.80488 14.2157 10.0488 14.2157C12.2927 14.2157 14.1463 12.3529 14.1463 10.098C14.1463 7.7451 12.2927 5.98039 10.0488 5.98039Z" fill="#354049"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2>Account settings</h2>
|
||||
</div>
|
||||
<div class="adItemContainer billing" >
|
||||
<div class="adImageContainer">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20 7.26316V3.87134C20 3.40351 19.7938 2.93567 19.4845 2.5848C19.1753 2.23392 18.7629 2 18.3505 2H1.64948C1.23711 2 0.824742 2.23392 0.515464 2.5848C0.206186 2.93567 0 3.40351 0 3.87134V7.26316H20Z" fill="#354049"/>
|
||||
<path d="M0 9.36816V16.1852C0 16.5862 0.206186 16.9872 0.515464 17.288C0.824742 17.5887 1.23711 17.7892 1.64948 17.7892H18.3505C18.7629 17.7892 19.1753 17.5887 19.4845 17.288C19.7938 16.9872 20 16.5862 20 16.1852V9.36816H0ZM5.36083 15.1827H2.68041V13.8794H5.36083V15.1827ZM10.7217 15.1827H6.70103V13.8794H10.7217V15.1827Z" fill="#354049"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2>Billing History</h2>
|
||||
</div>
|
||||
<div class="adItemContainer payment" >
|
||||
<div class="adImageContainer">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.898 4.28571L12.7143 0.102041C12.7143 0 12.6122 0 12.4082 0H3.63265C2.71429 0 2 0.714286 2 1.63265V18.3673C2 19.2857 2.71429 20 3.63265 20H15.3673C16.2857 20 17 19.2857 17 18.3673V4.59184C17 4.4898 17 4.38775 16.898 4.28571ZM6.18367 10.9184C7 10.9184 7.71429 11.6327 7.71429 12.449C7.71429 13.1633 7.30612 13.6735 6.69388 13.8776V13.9796C6.69388 14.2857 6.4898 14.4898 6.18367 14.4898C5.87755 14.4898 5.67347 14.2857 5.67347 13.9796H5.16327C4.85714 13.9796 4.65306 13.7755 4.65306 13.4694C4.65306 13.1633 4.85714 12.9592 5.16327 12.9592H6.18367C6.4898 12.9592 6.69388 12.7551 6.69388 12.449C6.69388 12.1429 6.4898 11.9388 6.18367 11.9388C5.36735 11.9388 4.65306 11.2245 4.65306 10.4082C4.65306 9.69388 5.06122 9.18367 5.67347 8.97959V8.87755C5.67347 8.57143 5.87755 8.36735 6.18367 8.36735C6.4898 8.36735 6.69388 8.57143 6.69388 8.87755H7.20408C7.5102 8.87755 7.71429 9.08163 7.71429 9.38775C7.71429 9.69388 7.5102 9.89796 7.20408 9.89796H6.18367C5.87755 9.89796 5.67347 10.102 5.67347 10.4082C5.67347 10.7143 5.87755 10.9184 6.18367 10.9184ZM13.4286 14.3878H9.34694V12.551H13.3265V14.3878H13.4286ZM15.3673 10.7143H9.34694V8.87755H15.3673V10.7143ZM13.7347 4.18367C13.2245 4.18367 12.9184 3.77551 12.9184 3.36735V1.42857L15.6735 4.18367H13.7347Z" fill="#354049"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2>Payment Settup</h2>
|
||||
</div>
|
||||
<div class="adItemContainer logout" >
|
||||
<div class="adImageContainer">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.53516 1C4.28906 1 0 5.25293 0 10.5C0 15.7471 4.28906 20 9.53516 20C14.3887 20 18.4229 16.3604 19 11.6611H10.2783L11.8682 13.2441C12.1562 13.5322 12.248 14.0156 12.1436 14.4277C12.0947 14.6211 12.0029 14.7988 11.8682 14.9336C11.4443 15.3555 10.5967 15.3555 10.1729 14.9336L5.72266 10.5L10.1729 6.06641C10.5967 5.64453 11.4443 5.64453 11.8682 6.06641C12.291 6.48926 12.291 7.33301 11.8682 7.75586L10.2783 9.33887H19C18.4229 4.63965 14.3887 1 9.53516 1Z" fill="#354049"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2>Log Out</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
@Component(
|
||||
{
|
||||
data: function() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
props: {
|
||||
onClose: {
|
||||
type: Function
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onCloseClick: function() : void {
|
||||
this.$emit("onClose");
|
||||
},
|
||||
onAccountSettingsClick: function() : void {
|
||||
this.$router.push("/dashboard/account");
|
||||
this.$emit("onClose");
|
||||
}
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
export default class ProjectSelectionDropdown extends Vue {}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.adChoiceContainer {
|
||||
position: absolute;
|
||||
top: 9vh;
|
||||
left: 0px;
|
||||
border-radius: 4px;
|
||||
padding: 10px 0px 10px 0px;
|
||||
box-shadow: 0px 4px rgba(231, 232, 238, 0.6);
|
||||
background-color: #FFFFFF;
|
||||
z-index: 800;
|
||||
}
|
||||
.adOverflowContainer {
|
||||
position: relative;
|
||||
width: 12.5vw;
|
||||
height: auto;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.adItemContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
h2{
|
||||
font-family: 'montserrat_regular';
|
||||
margin-left: 20px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #354049;
|
||||
}
|
||||
}
|
||||
.adItemContainer:hover {
|
||||
background-color: #F2F2F6;
|
||||
path {
|
||||
fill: #2683FF !important;
|
||||
}
|
||||
}
|
||||
.adSelected {
|
||||
font-family: 'montserrat_bold';
|
||||
}
|
||||
.adNotSelected {
|
||||
font-family: 'montserrat_regular';
|
||||
}
|
||||
.adImageContainer {
|
||||
width: 20px;
|
||||
svg {
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
@ -38,6 +38,7 @@ export default class NewProjectArea extends Vue {}
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
background-color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
.npButtonContainer {
|
||||
display: flex;
|
||||
|
||||
@ -44,6 +44,7 @@ export default class ProjectSelectionArea extends Vue {}
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
background-color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
h1 {
|
||||
font-family: 'montserrat_medium';
|
||||
font-size: 16px;
|
||||
|
||||
@ -34,8 +34,8 @@
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
import HeaderlessInput from '@/components/HeaderlessInput.vue';
|
||||
import Button from '@/components/Button.vue';
|
||||
import HeaderlessInput from '@/components/common/HeaderlessInput.vue';
|
||||
import Button from '@/components/common/Button.vue';
|
||||
|
||||
@Component({
|
||||
data: function() {
|
||||
|
||||
@ -1,19 +0,0 @@
|
||||
// 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 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 isWhite prop 1`] = `
|
||||
<div class="container white" style="width: inherit; height: inherit;">
|
||||
<h1 class="label white">Default</h1>
|
||||
</div>
|
||||
`;
|
||||
@ -1,3 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Checkbox.vue renders correctly 1`] = `<label class="container"><input type="checkbox"> <span class="checkmark"></span></label>`;
|
||||
@ -1,39 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`HeaderedInput.vue renders correctly with default props 1`] = `
|
||||
<div class="inputContainer">
|
||||
<div class="labelContainer">
|
||||
<!---->
|
||||
<h3></h3>
|
||||
<h3 class="hiAddLabel"></h3>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
<!----> <input id="" placeholder="default" type="text" style="width: 100%; height: 48px;">
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`HeaderedInput.vue renders correctly with input error 1`] = `
|
||||
<div class="inputContainer">
|
||||
<div class="labelContainer"><img src="../../../static/images/register/ErrorInfo.svg">
|
||||
<!---->
|
||||
<h3 class="hiAddLabel"></h3>
|
||||
<h3 class="error">testError</h3>
|
||||
</div>
|
||||
<!---->
|
||||
<!----> <input id="" placeholder="default" type="text" style="width: 100%; height: 48px;">
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`HeaderedInput.vue renders correctly with isMultiline props 1`] = `
|
||||
<div class="inputContainer">
|
||||
<div class="labelContainer">
|
||||
<!---->
|
||||
<h3></h3>
|
||||
<h3 class="hiAddLabel"></h3>
|
||||
<!---->
|
||||
</div>
|
||||
<!----> <textarea id="" placeholder="default" rows="5" cols="40" wrap="hard" style="width: 100%; height: 48px;"></textarea>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
@ -1,5 +1,5 @@
|
||||
import { shallowMount, mount } from '@vue/test-utils';
|
||||
import HeaderlessInput from '@/components/HeaderlessInput.vue';
|
||||
import HeaderlessInput from '@/components/common/HeaderlessInput.vue';
|
||||
|
||||
describe('HeaderlessInput.vue', () => {
|
||||
|
||||
@ -0,0 +1,33 @@
|
||||
import { shallowMount, mount } from '@vue/test-utils';
|
||||
import AccountDropdown from '@/components/dashboard/account/AccountDropdown.vue';
|
||||
import * as sinon from 'sinon';
|
||||
|
||||
describe('AccountDropdown.vue', () => {
|
||||
|
||||
it('renders correctly', () => {
|
||||
|
||||
const wrapper = shallowMount(AccountDropdown);
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('trigger onPress correctly', () => {
|
||||
let onCloseSpy = sinon.spy();
|
||||
|
||||
const wrapper = mount(AccountDropdown, {
|
||||
propsData: {
|
||||
onClose: onCloseSpy
|
||||
},
|
||||
mocks: {
|
||||
$router: {
|
||||
push: onCloseSpy
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.find('.adItemContainer.settings').trigger('click');
|
||||
|
||||
expect(onCloseSpy.callCount).toBe(1);
|
||||
expect(wrapper.emitted("onClose").length).toEqual(1);
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,33 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`AccountDropdown.vue renders correctly 1`] = `
|
||||
<div class="adChoiceContainer">
|
||||
<div class="adOverflowContainer">
|
||||
<div class="adItemContainer settings">
|
||||
<div class="adImageContainer"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20 8.72549C20 9.60784 20 10.4902 20 11.2745C19.9024 11.5686 19.7073 11.6667 19.4146 11.7647C18.7317 11.9608 18.1463 12.0588 17.4634 12.2549C17.3659 12.2549 17.2683 12.3529 17.2683 12.451C17.1707 12.7451 16.9756 13.0392 16.878 13.4314C16.878 13.5294 16.878 13.6275 16.878 13.7255C17.1707 14.2157 17.4634 14.7059 17.7561 15.2941C17.9512 15.6863 17.9512 15.8824 17.6585 16.1765C17.1707 16.6667 16.6829 17.1569 16.1951 17.6471C15.9024 17.9412 15.6098 17.9412 15.3171 17.7451C14.8293 17.451 14.3415 17.1569 13.8537 16.8627C13.7561 16.7647 13.6585 16.7647 13.561 16.8627C13.2683 17.0588 12.878 17.1569 12.5854 17.2549C12.4878 17.2549 12.3902 17.3529 12.3902 17.451C12.1951 18.1373 12.0976 18.7255 11.9024 19.4118C11.8049 19.7059 11.7073 19.902 11.4146 20C10.5366 20 9.65854 20 8.87805 20C8.58537 19.902 8.48781 19.7059 8.39024 19.4118C8.19512 18.7255 8.09756 18.1373 7.90244 17.451C7.90244 17.3529 7.80488 17.2549 7.70732 17.2549C7.41463 17.1569 7.02439 16.9608 6.73171 16.8627C6.63415 16.7647 6.53659 16.8627 6.43902 16.8627C5.95122 17.1569 5.46341 17.451 4.97561 17.7451C4.58537 17.9412 4.39024 17.9412 4.09756 17.6471C3.60976 17.1569 3.12195 16.6667 2.63415 16.1765C2.34146 15.8824 2.34146 15.5882 2.53659 15.2941C2.82927 14.8039 3.12195 14.3137 3.41463 13.8235C3.5122 13.7255 3.5122 13.6275 3.41463 13.5294C3.21951 13.2353 3.12195 12.8431 3.02439 12.549C3.02439 12.451 2.92683 12.3529 2.82927 12.3529C2.14634 12.1569 1.46341 12.0588 0.780488 11.8627C0.195122 11.7647 0 11.5686 0 11.1765C0 10.4902 0 9.70588 0 9.01961C0 8.62745 0.195122 8.43137 0.585366 8.33333C1.26829 8.13725 1.95122 7.94118 2.53659 7.7451C2.63415 7.7451 2.73171 7.64706 2.73171 7.54902C2.92683 7.35294 3.02439 7.05882 3.12195 6.76471C3.12195 6.66667 3.12195 6.56863 3.12195 6.47059C2.82927 5.88235 2.43902 5.39216 2.14634 4.80392C1.95122 4.41176 1.95122 4.21569 2.2439 3.92157C2.73171 3.43137 3.21951 2.94118 3.70732 2.45098C4 2.15686 4.29268 2.15686 4.58537 2.35294C5.17073 2.64706 5.65854 3.03922 6.2439 3.33333C6.34146 3.33333 6.43902 3.33333 6.53659 3.33333C6.82927 3.13725 7.21951 2.94118 7.5122 2.84314C7.60976 2.84314 7.70732 2.7451 7.70732 2.64706C7.90244 1.96078 8 1.27451 8.19512 0.588235C8.39024 0.196078 8.58537 0 8.97561 0C9.65854 0 10.439 0 11.122 0C11.5122 0 11.7073 0.196078 11.8049 0.588235C12 1.27451 12.0976 1.96078 12.2927 2.64706C12.2927 2.7451 12.3902 2.84314 12.4878 2.84314C12.7805 2.94118 13.1707 3.13725 13.4634 3.23529C13.561 3.33333 13.6585 3.23529 13.7561 3.23529C14.2439 2.94118 14.7317 2.64706 15.2195 2.35294C15.6098 2.15686 15.8049 2.15686 16.1951 2.45098C16.6829 2.94118 17.1707 3.43137 17.6585 3.92157C17.9512 4.21569 18.0488 4.5098 17.7561 4.90196C17.4634 5.39216 17.1707 5.88235 16.878 6.47059C16.878 6.56863 16.878 6.66667 16.878 6.76471C16.9756 7.05882 17.1707 7.45098 17.2683 7.7451C17.2683 7.84314 17.3659 7.94118 17.4634 7.94118C18.1463 8.13726 18.7317 8.23529 19.4146 8.43137C19.7073 8.33333 19.9024 8.52941 20 8.72549ZM10.0488 5.98039C7.80488 5.98039 5.95122 7.84314 5.95122 10.098C5.95122 12.3529 7.80488 14.2157 10.0488 14.2157C12.2927 14.2157 14.1463 12.3529 14.1463 10.098C14.1463 7.7451 12.2927 5.98039 10.0488 5.98039Z" fill="#354049"></path>
|
||||
</svg></div>
|
||||
<h2>Account settings</h2>
|
||||
</div>
|
||||
<div class="adItemContainer billing">
|
||||
<div class="adImageContainer"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20 7.26316V3.87134C20 3.40351 19.7938 2.93567 19.4845 2.5848C19.1753 2.23392 18.7629 2 18.3505 2H1.64948C1.23711 2 0.824742 2.23392 0.515464 2.5848C0.206186 2.93567 0 3.40351 0 3.87134V7.26316H20Z" fill="#354049"></path>
|
||||
<path d="M0 9.36816V16.1852C0 16.5862 0.206186 16.9872 0.515464 17.288C0.824742 17.5887 1.23711 17.7892 1.64948 17.7892H18.3505C18.7629 17.7892 19.1753 17.5887 19.4845 17.288C19.7938 16.9872 20 16.5862 20 16.1852V9.36816H0ZM5.36083 15.1827H2.68041V13.8794H5.36083V15.1827ZM10.7217 15.1827H6.70103V13.8794H10.7217V15.1827Z" fill="#354049"></path>
|
||||
</svg></div>
|
||||
<h2>Billing History</h2>
|
||||
</div>
|
||||
<div class="adItemContainer payment">
|
||||
<div class="adImageContainer"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.898 4.28571L12.7143 0.102041C12.7143 0 12.6122 0 12.4082 0H3.63265C2.71429 0 2 0.714286 2 1.63265V18.3673C2 19.2857 2.71429 20 3.63265 20H15.3673C16.2857 20 17 19.2857 17 18.3673V4.59184C17 4.4898 17 4.38775 16.898 4.28571ZM6.18367 10.9184C7 10.9184 7.71429 11.6327 7.71429 12.449C7.71429 13.1633 7.30612 13.6735 6.69388 13.8776V13.9796C6.69388 14.2857 6.4898 14.4898 6.18367 14.4898C5.87755 14.4898 5.67347 14.2857 5.67347 13.9796H5.16327C4.85714 13.9796 4.65306 13.7755 4.65306 13.4694C4.65306 13.1633 4.85714 12.9592 5.16327 12.9592H6.18367C6.4898 12.9592 6.69388 12.7551 6.69388 12.449C6.69388 12.1429 6.4898 11.9388 6.18367 11.9388C5.36735 11.9388 4.65306 11.2245 4.65306 10.4082C4.65306 9.69388 5.06122 9.18367 5.67347 8.97959V8.87755C5.67347 8.57143 5.87755 8.36735 6.18367 8.36735C6.4898 8.36735 6.69388 8.57143 6.69388 8.87755H7.20408C7.5102 8.87755 7.71429 9.08163 7.71429 9.38775C7.71429 9.69388 7.5102 9.89796 7.20408 9.89796H6.18367C5.87755 9.89796 5.67347 10.102 5.67347 10.4082C5.67347 10.7143 5.87755 10.9184 6.18367 10.9184ZM13.4286 14.3878H9.34694V12.551H13.3265V14.3878H13.4286ZM15.3673 10.7143H9.34694V8.87755H15.3673V10.7143ZM13.7347 4.18367C13.2245 4.18367 12.9184 3.77551 12.9184 3.36735V1.42857L15.6735 4.18367H13.7347Z" fill="#354049"></path>
|
||||
</svg></div>
|
||||
<h2>Payment Settup</h2>
|
||||
</div>
|
||||
<div class="adItemContainer logout">
|
||||
<div class="adImageContainer"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.53516 1C4.28906 1 0 5.25293 0 10.5C0 15.7471 4.28906 20 9.53516 20C14.3887 20 18.4229 16.3604 19 11.6611H10.2783L11.8682 13.2441C12.1562 13.5322 12.248 14.0156 12.1436 14.4277C12.0947 14.6211 12.0029 14.7988 11.8682 14.9336C11.4443 15.3555 10.5967 15.3555 10.1729 14.9336L5.72266 10.5L10.1729 6.06641C10.5967 5.64453 11.4443 5.64453 11.8682 6.06641C12.291 6.48926 12.291 7.33301 11.8682 7.75586L10.2783 9.33887H19C18.4229 4.63965 14.3887 1 9.53516 1Z" fill="#354049"></path>
|
||||
</svg></div>
|
||||
<h2>Log Out</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
Loading…
Reference in New Issue
Block a user