JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite project payment methods code refactored, dialogs repositioned, bugs fixed (#2643)

Browse Source
This commit is contained in:
Vitalii Shpital 2019-07-29 15:47:49 +03:00 committed by GitHub
parent 64199d37bd
commit 5ab32a4944
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 223 additions and 282 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
web/satellite/src/components/project/paymentMethods/CardComponent.vue
View File

@ -7,7 +7,6 @@
<img class="payment-methods-container__card-container__info-area__card-logo" src="@/../static/images/Logo.svg">
<div class="payment-methods-container__card-container__info-area__info-container">
<h1>xxxx {{paymentMethod.lastFour}}</h1>
<h2>{{paymentMethod.holderName}}</h2>
</div>
<div class="payment-methods-container__card-container__info-area__expire-container">
<h2>Expires</h2>
@ -18,92 +17,106 @@
<div class="payment-methods-container__card-container__default-button" v-if="paymentMethod.isDefault">
<p class="payment-methods-container__card-container__default-button__label">Default</p>
</div>
<div class="payment-methods-container__card-container__button-area" v-if="!paymentMethod.isDefault">
<div class="make-default-container">
<div class="payment-methods-container__card-container__button-area__make-button" v-on:click="onMakeDefaultClick(paymentMethod.id)" id="makeDefaultPaymentMethodButton">
<p class="payment-methods-container__card-container__button-area__make-button__label" >Make Default</p>
<div class="payment-methods-container__card-container__make-default-container" v-if="!paymentMethod.isDefault">
<div class="payment-methods-container__card-container__make-default-container__make-button" v-on:click="onMakeDefaultClick(paymentMethod.id)" id="makeDefaultPaymentMethodButton">
<p class="payment-methods-container__card-container__make-default-container__make-button__label">Make Default</p>
</div>
<MakeDefaultPaymentMethodDialog :paymentMethodID="paymentMethod.id" v-if="isSetDefaultPaymentMethodPopupShown"/>
</div>
<div v-on:click="onDeletePaymentMethodClick" id="deletePaymentMethodButton">
<svg class="payment-methods-container__card-container__button-area__delete-button"
width="34"
<div class="payment-methods-container__card-container__delete-button-container">
<div class="payment-methods-container__card-container__delete-button-container__delete-button" v-on:click="onDeletePaymentMethodClick" id="deletePaymentMethodButton">
<svg width="34"
height="34"
viewBox="0 0 34 34"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect width="34" height="34" rx="17" fill="#EB5757"/>
<path d="M19.7834 11.9727V11.409C19.7834 10.6576 19.1215 10 18.2706 10H16.0014C15.1504 10 14.4886 10.6576 14.4886 11.409V11.9727H10.7065V13.1938H12.0302V22.3057C12.0302 23.5269 12.9758 24.4662 14.0158 24.4662H20.1616C21.2962 24.4662 22.1471 23.5269 22.1471 22.3057V13.1938H23.4709V11.9727H19.7834ZM16.6632 22.3057H15.3395V14.2271H16.6632V22.3057ZM18.9324 22.3057H17.6087V14.2271H18.9324V22.3057Z" fill="white"/>
</svg>
</div>
<DeletePaymentMethodDialog :paymentMethodID="paymentMethod.id" v-if="isDeletePaymentMethodPopupShown"/>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Component, Prop, Vue } from 'vue-property-decorator';
import Button from '@/components/common/Button.vue';
import { APP_STATE_ACTIONS, } from '@/utils/constants/actionNames';
import DeletePaymentMethodDialog from '@/components/project/paymentMethods/DeletePaymentMethodDialog.vue';
import MakeDefaultPaymentMethodDialog from '@/components/project/paymentMethods/MakeDefaultPaymentMethodDialog.vue';
@Component({
props: {
paymentMethod: {
type: Object,
default: {}
},
},
methods: {
formatDate: function (d: string): string {
return new Date(d).toLocaleDateString('en-US', {timeZone: 'UTC'});
},
onMakeDefaultClick: async function () {
if ((this as any).getSetDefaultPaymentMethodID == this.$props.paymentMethod.id) {
this.$store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
return;
}
this.$store.dispatch(APP_STATE_ACTIONS.SHOW_SET_DEFAULT_PAYMENT_METHOD_POPUP, this.$props.paymentMethod.id);
},
onDeletePaymentMethodClick: async function() {
if ((this as any).getDeletePaymentMethodID == this.$props.paymentMethod.id) {
this.$store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
return;
}
this.$store.dispatch(APP_STATE_ACTIONS.SHOW_DELETE_PAYMENT_METHOD_POPUP, this.$props.paymentMethod.id);
}
},
computed: {
getDeletePaymentMethodID: function(): string {
return this.$store.state.appStateModule.appState.deletePaymentMethodID;
},
getSetDefaultPaymentMethodID: function(): string {
return this.$store.state.appStateModule.appState.setDefaultPaymentMethodID;
},
isDeletePaymentMethodPopupShown: function (): boolean {
return this.$store.state.appStateModule.appState.deletePaymentMethodID == this.$props.paymentMethod.id;
},
isSetDefaultPaymentMethodPopupShown: function(): boolean {
return this.$store.state.appStateModule.appState.setDefaultPaymentMethodID == this.$props.paymentMethod.id;
},
},
components: {
MakeDefaultPaymentMethodDialog,
Button,
DeletePaymentMethodDialog,
}
})
export default class CardComponent extends Vue {}
export default class CardComponent extends Vue {
@Prop({default: {}})
private readonly paymentMethod: PaymentMethod;
public formatDate(d: string): string {
return new Date(d).toLocaleDateString('en-US', {timeZone: 'UTC'});
}
public async onMakeDefaultClick(): Promise<void> {
if (this.getSetDefaultPaymentMethodID == this.paymentMethod.id) {
this.$store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
return;
}
this.$store.dispatch(APP_STATE_ACTIONS.SHOW_SET_DEFAULT_PAYMENT_METHOD_POPUP, this.paymentMethod.id);
}
public async onDeletePaymentMethodClick(): Promise<void> {
if (this.getDeletePaymentMethodID == this.paymentMethod.id) {
this.$store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
return;
}
this.$store.dispatch(APP_STATE_ACTIONS.SHOW_DELETE_PAYMENT_METHOD_POPUP, this.paymentMethod.id);
}
public get getDeletePaymentMethodID(): string {
return this.$store.state.appStateModule.appState.deletePaymentMethodID;
}
public get getSetDefaultPaymentMethodID(): string {
return this.$store.state.appStateModule.appState.setDefaultPaymentMethodID;
}
public get isDeletePaymentMethodPopupShown(): boolean {
return this.$store.state.appStateModule.appState.deletePaymentMethodID == this.paymentMethod.id;
}
public get isSetDefaultPaymentMethodPopupShown(): boolean {
return this.$store.state.appStateModule.appState.setDefaultPaymentMethodID == this.paymentMethod.id;
}
}
</script>
<style scoped lang="scss">
h1 {
font-family: 'font_bold';
font-size: 16px;
line-height: 21px;
color: #61666B;
margin-block-start: 0.5em;
margin-block-end: 0.5em;
}
h2 {
font-family: 'font_regular';
font-size: 16px;
line-height: 21px;
color: #61666B;
margin-right: 5px;
}
.payment-methods-container__card-container {
width: calc(100% - 80px);
margin-top: 24px;
@ -126,41 +139,19 @@
}
&__info-container {
h1 {
font-family: 'font_bold';
font-size: 16px;
line-height: 21px;
color: #61666B;
}
h2 {
font-family: 'font_regular';
font-size: 16px;
line-height: 21px;
color: #61666B;
margin-block-start: 0.5em;
margin-block-end: 0.5em;
}
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: auto;
}
&__expire-container {
h1 {
font-family: 'font_bold';
font-size: 16px;
line-height: 21px;
color: #61666B;
margin-block-start: 0.5em;
margin-block-end: 0.5em;
}
h2 {
font-family: 'font_regular';
font-size: 16px;
line-height: 21px;
color: #61666B;
}
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: auto;
}
&__added-text {
@ -188,11 +179,7 @@
}
}
&__button-area {
width: 20%;
display: flex;
justify-content: space-between;
align-items: center;
&__make-default-container {
position: relative;
&__make-button {
@ -212,14 +199,17 @@
color: #2683FF;
}
}
}
&__delete-button-container {
position: relative;
&__delete-button {
svg {
cursor: pointer;
}
}
}
.make-default-container {
position: relative;
}
</style>

84
web/satellite/src/components/project/paymentMethods/DeletePaymentMethodDialog.vue
View File

@ -7,15 +7,15 @@
<h1>Confirm Delete Card</h1>
<h2>Are you sure you want to remove your card?</h2>
<div class="button-container">
<Button height="48px" width="128px" label="Cancel" isWhite="true" :on-press="onCancelClick"/>
<Button class="delete-button" height="48px" width="128px" label="Delete" :on-press="onDeleteClick"/>
<Button height="48px" width="128px" label="Cancel" isWhite="true" :onPress="onCancelClick"/>
<Button class="delete-button" height="48px" width="128px" label="Delete" :onPress="onDeleteClick"/>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Component, Prop, Vue } from 'vue-property-decorator';
import Button from '@/components/common/Button.vue';
import {
APP_STATE_ACTIONS,
@ -24,54 +24,46 @@
} from '@/utils/constants/actionNames';
@Component({
props: {
paymentMethodID: {
type: String,
default: ''
},
},
methods: {
onCancelClick: function () {
components: {
Button,
}
})
export default class DeletePaymentMethodDialog extends Vue {
@Prop({default: ''})
private readonly paymentMethodID: string;
public onCancelClick(): void {
this.$store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
},
onDeleteClick: async function () {
const response = await this.$store.dispatch(PROJECT_PAYMENT_METHODS_ACTIONS.DELETE, this.$props.paymentMethodID);
}
public async onDeleteClick(): Promise<void> {
const response = await this.$store.dispatch(PROJECT_PAYMENT_METHODS_ACTIONS.DELETE, this.paymentMethodID);
if (!response.isSuccess) {
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, response.errorMessage);
}
const paymentMethodsResponse = await this.$store.dispatch(PROJECT_PAYMENT_METHODS_ACTIONS.FETCH);
if (!paymentMethodsResponse.isSuccess) {
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, 'Unable to fetch payment methods: ' + paymentMethodsResponse.errorMessage);
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, `Unable to fetch payment methods: ${paymentMethodsResponse.errorMessage}`);
}
this.$store.dispatch(NOTIFICATION_ACTIONS.SUCCESS, 'Successfully delete payment method');
this.$store.dispatch(NOTIFICATION_ACTIONS.SUCCESS, 'Payment method deleted successfully');
}
},
components: {
Button,
}
})
export default class DeletePaymentMethodDialog extends Vue {
}
</script>
<style scoped lang="scss">
.dialog-container {
background-image: url('../../../../static/images/container.svg');
background-size: cover;
background-repeat: no-repeat;
background-image: url('../../../../static/images/container.png');
background-size: 340px 240px;
z-index: 1;
position: absolute;
top: 40px;
right: -38px;
height: 223px;
width: 351px;
bottom: 40px;
right: -17px;
height: 240px;
width: 340px;
}
h1 {
font-family: 'font_bold';
font-size: 16px;
@ -83,45 +75,31 @@
font-family: 'font_regular';
font-size: 12px;
color: #384B65;
margin-top: 20px;
}
.delete-container {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 25px 32px 33px 32px;
box-shadow: 0px 4px 20px rgba(204, 208, 214, 0.25);
margin-top: 12px;
}
.button-container {
display: flex;
flex-direction: row;
margin-top: 25px;
justify-content: space-between;
margin-top: 35px;
}
.delete-button {
margin-left: 11px;
/*&:hover {*/
/*&.container {*/
/*box-shadow: none;*/
/*background-color: #d24949;*/
/*}*/
/*}*/
}
.delete-button.container {
background-color: #EB5757;
&:hover {
color: white;
&:hover {
box-shadow: none;
background-color: #d24949;
}
}
.delete-button.label {
color: white;
}
</style>

61
web/satellite/src/components/project/paymentMethods/MakeDefaultPaymentMethodDialog.vue
View File

@ -7,15 +7,15 @@
<h1>Update Default Card</h1>
<h2>We will automatically charge your default card at the close of the current billing period</h2>
<div class="button-container">
<Button height="48px" width="128px" label="Cancel" isWhite="true" :on-press="onCancelClick"/>
<Button class="delete-button" height="48px" width="128px" label="Update" :on-press="onUpdateClick"/>
<Button height="48px" width="128px" label="Cancel" isWhite="true" :onPress="onCancelClick"/>
<Button class="delete-button" height="48px" width="128px" label="Update" :onPress="onUpdateClick"/>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Component, Prop, Vue } from 'vue-property-decorator';
import Button from '@/components/common/Button.vue';
import {
APP_STATE_ACTIONS,
@ -24,18 +24,20 @@
} from '@/utils/constants/actionNames';
@Component({
props: {
paymentMethodID: {
type: String,
default: ''
},
},
methods: {
onCancelClick: function () {
components: {
Button,
}
})
export default class MakeDefaultPaymentMethodDialog extends Vue {
@Prop({default: ''})
private readonly paymentMethodID: string;
public onCancelClick(): void {
this.$store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
},
onUpdateClick: async function () {
const result = await this.$store.dispatch(PROJECT_PAYMENT_METHODS_ACTIONS.SET_DEFAULT, this.$props.paymentMethodID);
}
public async onUpdateClick(): Promise<void> {
const result = await this.$store.dispatch(PROJECT_PAYMENT_METHODS_ACTIONS.SET_DEFAULT, this.paymentMethodID);
if (!result.isSuccess) {
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, result.errorMessage);
@ -44,36 +46,25 @@
const paymentMethodsResponse = await this.$store.dispatch(PROJECT_PAYMENT_METHODS_ACTIONS.FETCH);
if (!paymentMethodsResponse.isSuccess) {
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, 'Unable to fetch payment methods: ' + paymentMethodsResponse.errorMessage);
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, `Unable to fetch payment methods: ${paymentMethodsResponse.errorMessage}`);
}
this.$store.dispatch(NOTIFICATION_ACTIONS.SUCCESS, 'Successfully set default payment method');
this.$store.dispatch(NOTIFICATION_ACTIONS.SUCCESS, 'Default payment method set successfully');
}
},
components: {
Button,
}
})
export default class MakeDefaultPaymentMethodDialog extends Vue {
}
</script>
<style scoped lang="scss">
.dialog-container {
background-image: url('../../../../static/images/ContainerCentered.svg');
background-size: cover;
background-repeat: no-repeat;
background-image: url('../../../../static/images/ContainerCentered.png');
background-size: 340px 240px;
z-index: 1;
position: absolute;
left: 50%;
bottom: 40px;
transform: translate(-50%);
top: 40px;
height: 240px;
width: 351px;
width: 340px;
}
h1 {
@ -94,17 +85,13 @@
flex-direction: column;
padding: 25px 32px 33px 32px;
box-shadow: 0px 4px 20px rgba(204, 208, 214, 0.25);
margin-top: 12px;
margin-top: 4px;
}
.button-container {
display: flex;
flex-direction: row;
margin-top: 25px;
}
.delete-button {
margin-left: 11px;
justify-content: space-between;
}
</style>

BIN
web/satellite/static/images/ContainerCentered.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

7
web/satellite/static/images/ContainerCentered.svg
View File

@ -1,7 +0,0 @@
<svg width="331" height="211" viewBox="0 0 331 211" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-inside-1" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M331 205C331 208.314 328.314 211 325 211L6.00001 211C2.6863 211 1.77983e-05 208.313 1.75321e-05 205L2.32832e-06 15.7512C2.0621e-06 12.4375 2.6863 9.75124 6.00001 9.75124L158.565 9.75144C159.269 9.75144 159.921 9.38114 160.282 8.77648L164.389 1.89675C165.165 0.596804 167.047 0.596804 167.823 1.89675L171.93 8.77652C172.291 9.38117 172.943 9.75147 173.647 9.75147L325 9.75167C328.314 9.75168 331 12.438 331 15.7517L331 205Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M331 205C331 208.314 328.314 211 325 211L6.00001 211C2.6863 211 1.77983e-05 208.313 1.75321e-05 205L2.32832e-06 15.7512C2.0621e-06 12.4375 2.6863 9.75124 6.00001 9.75124L158.565 9.75144C159.269 9.75144 159.921 9.38114 160.282 8.77648L164.389 1.89675C165.165 0.596804 167.047 0.596804 167.823 1.89675L171.93 8.77652C172.291 9.38117 172.943 9.75147 173.647 9.75147L325 9.75167C328.314 9.75168 331 12.438 331 15.7517L331 205Z" fill="white"/>
<path d="M325 211L325 212L325 211ZM331 205L332 205L331 205ZM6.00001 211L6.00001 210L6.00001 211ZM1.75321e-05 205L-0.999982 205L1.75321e-05 205ZM2.32832e-06 15.7512L-0.999998 15.7512L2.32832e-06 15.7512ZM6.00001 9.75124L6.00001 8.75124H6.00001L6.00001 9.75124ZM325 9.75167L325 8.75167L325 9.75167ZM331 15.7517L330 15.7517L331 15.7517ZM171.93 8.77652L172.788 8.26399L171.93 8.77652ZM173.647 9.75147L173.647 10.7515L173.647 9.75147ZM164.389 1.89675L165.247 2.40927L164.389 1.89675ZM167.823 1.89675L166.965 2.40926L167.823 1.89675ZM158.565 9.75144L158.565 8.75144L158.565 9.75144ZM160.282 8.77648L159.424 8.26396L160.282 8.77648ZM325 212C328.866 212 332 208.866 332 205L330 205C330 207.761 327.761 210 325 210L325 212ZM6.00001 212L325 212L325 210L6.00001 210L6.00001 212ZM-0.999982 205C-0.999982 208.866 2.13402 212 6.00001 212L6.00001 210C3.23859 210 1.00002 207.761 1.00002 205L-0.999982 205ZM-0.999998 15.7512L-0.999982 205L1.00002 205L1 15.7512L-0.999998 15.7512ZM6.00001 8.75124C2.13401 8.75124 -0.999998 11.8852 -0.999998 15.7512L1 15.7512C1 12.9898 3.23858 10.7512 6.00001 10.7512L6.00001 8.75124ZM158.565 8.75144L6.00001 8.75124L6.00001 10.7512L158.565 10.7514L158.565 8.75144ZM161.141 9.289L165.247 2.40927L163.53 1.38422L159.424 8.26396L161.141 9.289ZM166.965 2.40926L171.071 9.28903L172.788 8.26399L168.682 1.38422L166.965 2.40926ZM325 8.75167L173.647 8.75147L173.647 10.7515L325 10.7517L325 8.75167ZM332 15.7517C332 11.8857 328.866 8.75168 325 8.75167L325 10.7517C327.761 10.7517 330 12.9902 330 15.7517L332 15.7517ZM332 205L332 15.7517L330 15.7517L330 205L332 205ZM171.071 9.28903C171.612 10.196 172.591 10.7515 173.647 10.7515L173.647 8.75147C173.295 8.75147 172.969 8.56632 172.788 8.26399L171.071 9.28903ZM165.247 2.40927C165.635 1.75929 166.577 1.75929 166.965 2.40926L168.682 1.38422C167.518 -0.565687 164.694 -0.565687 163.53 1.38422L165.247 2.40927ZM158.565 10.7514C159.621 10.7514 160.6 10.196 161.141 9.289L159.424 8.26396C159.243 8.56629 158.917 8.75144 158.565 8.75144L158.565 10.7514Z" fill="#C1C1C1" fill-opacity="0.3" mask="url(#path-1-inside-1)"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.1 KiB

BIN
web/satellite/static/images/container.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

7
web/satellite/static/images/container.svg
View File

@ -1,7 +0,0 @@
<svg width="331" height="211" viewBox="0 0 331 211" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-inside-1" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M331 205C331 208.314 328.314 211 325 211L6.00001 211C2.6863 211 1.77983e-05 208.313 1.75321e-05 205L2.32832e-06 15.7512C2.0621e-06 12.4375 2.6863 9.75124 6.00001 9.75124L274.722 9.75161C275.426 9.75161 276.078 9.38131 276.439 8.77665L280.545 1.89675C281.321 0.596805 283.204 0.59682 283.98 1.89675L288.087 8.77668C288.447 9.38132 289.1 9.75162 289.804 9.75162L325 9.75167C328.314 9.75168 331 12.438 331 15.7517L331 205Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M331 205C331 208.314 328.314 211 325 211L6.00001 211C2.6863 211 1.77983e-05 208.313 1.75321e-05 205L2.32832e-06 15.7512C2.0621e-06 12.4375 2.6863 9.75124 6.00001 9.75124L274.722 9.75161C275.426 9.75161 276.078 9.38131 276.439 8.77665L280.545 1.89675C281.321 0.596805 283.204 0.59682 283.98 1.89675L288.087 8.77668C288.447 9.38132 289.1 9.75162 289.804 9.75162L325 9.75167C328.314 9.75168 331 12.438 331 15.7517L331 205Z" fill="white"/>
<path d="M325 211L325 212L325 211ZM331 205L332 205L331 205ZM6.00001 211L6.00001 210L6.00001 211ZM1.75321e-05 205L-0.999982 205L1.75321e-05 205ZM2.32832e-06 15.7512L-0.999998 15.7512L2.32832e-06 15.7512ZM6.00001 9.75124L6.00001 8.75124L6.00001 8.75124L6.00001 9.75124ZM325 9.75167L325 8.75167L325 9.75167ZM331 15.7517L330 15.7517L331 15.7517ZM288.087 8.77668L288.945 8.26415L288.087 8.77668ZM289.804 9.75162L289.804 10.7516L289.804 9.75162ZM280.545 1.89675L281.404 2.40927L280.545 1.89675ZM283.98 1.89675L283.121 2.40927L283.98 1.89675ZM274.722 9.75161L274.722 10.7516L274.722 9.75161ZM276.439 8.77665L277.298 9.28917L276.439 8.77665ZM325 212C328.866 212 332 208.866 332 205L330 205C330 207.761 327.761 210 325 210L325 212ZM6.00001 212L325 212L325 210L6.00001 210L6.00001 212ZM-0.999982 205C-0.999982 208.866 2.13402 212 6.00001 212L6.00001 210C3.23859 210 1.00002 207.761 1.00002 205L-0.999982 205ZM-0.999998 15.7512L-0.999982 205L1.00002 205L1 15.7512L-0.999998 15.7512ZM6.00001 8.75124C2.13401 8.75124 -0.999998 11.8852 -0.999998 15.7512L1 15.7512C1 12.9898 3.23858 10.7512 6.00001 10.7512L6.00001 8.75124ZM274.722 8.75161L6.00001 8.75124L6.00001 10.7512L274.722 10.7516L274.722 8.75161ZM277.298 9.28917L281.404 2.40927L279.687 1.38422L275.58 8.26413L277.298 9.28917ZM283.121 2.40927L287.228 9.28919L288.945 8.26415L284.839 1.38422L283.121 2.40927ZM325 8.75167L289.804 8.75162L289.804 10.7516L325 10.7517L325 8.75167ZM332 15.7517C332 11.8857 328.866 8.75168 325 8.75167L325 10.7517C327.761 10.7517 330 12.9902 330 15.7517L332 15.7517ZM332 205L332 15.7517L330 15.7517L330 205L332 205ZM287.228 9.28919C287.769 10.1962 288.748 10.7516 289.804 10.7516L289.804 8.75162C289.452 8.75162 289.126 8.56647 288.945 8.26415L287.228 9.28919ZM281.404 2.40927C281.792 1.75931 282.733 1.7593 283.121 2.40927L284.839 1.38422C283.675 -0.56567 280.851 -0.565686 279.687 1.38422L281.404 2.40927ZM274.722 10.7516C275.778 10.7516 276.756 10.1961 277.298 9.28917L275.58 8.26413C275.4 8.56646 275.074 8.75161 274.722 8.75161L274.722 10.7516Z" fill="#C1C1C1" fill-opacity="0.3" mask="url(#path-1-inside-1)"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.1 KiB