Skip to content

Commit

Permalink
Merge pull request #150 from aeternity/feature/design-changes
Browse files Browse the repository at this point in the history
Design changes (modals, buttons, favicons)
  • Loading branch information
mradkov authored Apr 12, 2020
2 parents db76255 + 109fb5c commit 51f7770
Show file tree
Hide file tree
Showing 16 changed files with 239 additions and 99 deletions.
9 changes: 5 additions & 4 deletions src/common/variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,16 @@ $bg-color: #16161D;
$white-color: #F1F1F1;
$border-color: #34343B;
$input-bg-color: #121217;
$button-color: #3F4048;
$button-text-color: #CFCFCF;
$button-color: #2A9CFF;
$button-text-color: #FFFFFF;
$modal-background: #1B1B23;
$placeholder-color: #67676D;
$text-color: #BCBCC4;
$accent-color: #67f7b8;
$secondary-color: #2a9cff;
$nav-bg-color: #21212A;
$input-focus-color: #67f7b8;
$input-error-color: #2a9cff;
$input-focus-color: #2a9cff;
$input-error-color: #FF5857;
$transactions-bg: #12121b;
$nav-border-color: #3A3A47;
$tx-border-color: #33343e;
Expand Down
Binary file modified src/icons/icon_128.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/icons/icon_48.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 12 additions & 4 deletions src/popup/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@
"wholeTransaction": "Whole transaction history",
"latestTransactions": "Latest transactions",
"noTransactionsFound": "No transactions found!",
"tipSomeone": "Send Tips",
"tipSomeone": "Send Tip",
"howToClaim": "How to claim AE",
"balance": "Balance",
"copied": "Copied!",
Expand Down Expand Up @@ -594,6 +594,7 @@
},
"tipPage": {
"back": "Back",
"OkButton": "OK",
"noImage": "No Image",
"domainVerified": "Verified",
"domainNotVerified": "Not verified",
Expand All @@ -607,6 +608,9 @@
"tipDetails": "Details",
"tipWebsite": "Website",
"heading": "Send",
"sendTipConfirmationHeader": "Send Tip Confirmation",
"sendTipConfirmationBody": "You are going to send tip to untrusted URL. Third party issues prevent us to ensure that tips will be directly delivered to the URL owner.",
"sendTipConfirmationQstn":"Are you sure you would like to send the tip anyway?",
"headingSending": "Sending",
"selectTip": "Select amount to tip",
"tipDomain": "Tip domain",
Expand All @@ -618,15 +622,19 @@
"title": "Title",
"titlePlaceholder": "Send a message of #support along with your donation...",
"account": "Account",
"next": "Send Tips",
"url": "Send a tip to",
"next": "Send Tip",
"url": "Send Tip to",
"to": "to",
"amountPlaceholder": "Enter amount",
"amountLabel": "Amount",
"availableLabel": "Available",
"confirm": "Confirm",
"cancel": "Cancel",
"edit": "Edit AE Details"
"edit": "Edit AE Details",
"whatIsVerifieddUrl": "What is \"Verified\" URL?",
"whatIsUntrustedUrl": "What is \"Untrusted\" URL?",
"untrustedUrlInfo": "Third party issues prevent us to ensure that tips will be directly delivered to the URL owner. You are sending the tip at your own risk.",
"verifiedUrlInfo": "If a URL is marked as verified, it means the owner of this URL is already a fellow Superhero — and that is awesome! An AE address has been included in the URL and tips can be claimed."
},
"successTip": {
"sendMore": "Send More AE",
Expand Down
5 changes: 5 additions & 0 deletions src/popup/router/components/Button.vue
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export default {
small: Boolean,
third: Boolean,
onboarding: Boolean,
dark: Boolean,
},
computed: {
getClasses() {
Expand All @@ -23,6 +24,7 @@ export default {
if (this.small) c.push('small');
if (this.third) c.push('third');
if (this.onboarding) c.push('onboarding');
if (this.dark) c.push('dark');
return c.join(' ');
},
},
Expand Down Expand Up @@ -61,6 +63,9 @@ export default {
width: 48% !important;
margin: 0 !important;
}
.primary-button.dark {
background: $box-button-color !important;
}
.primary-button.small {
width: auto !important;
line-height: 1px !important;
Expand Down
96 changes: 51 additions & 45 deletions src/popup/router/components/Modal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
<div class="popup">
<transition name="modal">
<div class="modal--mask">
<div class="modal--wrapper" @click="$emit('close')">
<div class="modal--wrapper">
<div class="modal--container">
<!-- <Close class="modal--close" @click="$emit('close')" /> -->
<Close class="modal--close" @click="$emit('close')" />
<div class="modal--header">
<slot name="header" />
</div>
Expand All @@ -22,7 +22,12 @@
</template>

<script>
import Close from '../../../icons/close.svg?vue-component';
export default {
components: {
Close,
},
mounted() {
if (document.body.style.overflow) return;
document.body.style.overflow = 'hidden';
Expand All @@ -32,6 +37,7 @@ export default {
},
};
</script>

<style lang="scss" scoped>
@import '../../../common/variables';
.modal--mask {
Expand All @@ -41,50 +47,50 @@ export default {
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
background-color: rgba(0, 0, 0, 0.7);
display: table;
transition: opacity 0.3s ease;
}
.modal--wrapper {
display: table-cell;
vertical-align: middle;
}
.modal--container {
position: relative;
width: 90%;
margin: 0 auto;
padding: 20px;
background: #fff;
border: 1px solid $tx-border-color;
border-radius: 5px;
transition: all 0.3s ease;
}
.modal--close {
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
}
.modal--header {
color: $white-color;
font-size: 16px;
}
.modal--body {
margin: 20px 0;
color: $text-color;
font-size: 14px;
word-break: break-word;
text-align: left;
}
.modal--enter {
opacity: 0;
}
.modal--leave--active {
opacity: 0;
}
.modal--enter .modal--container,
.modal--leave--active .modal--container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
.modal--wrapper {
display: table-cell;
vertical-align: middle;
}
.modal--container {
position: relative;
width: 87%;
margin: 0 auto;
padding: 62px 25px 30px;
background: $modal-background;
border: 1px solid $tx-border-color;
border-radius: 5px;
transition: all 0.3s ease;
}
.modal--close {
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
}
.modal--header {
color: $white-color;
font-size: 16px;
}
.modal--body {
margin: 20px 0;
color: $text-color;
font-size: 14px;
word-break: break-word;
text-align: left;
}
.modal--enter {
opacity: 0;
}
.modal--leave--active {
opacity: 0;
}
.modal--enter .modal--container,
.modal--leave--active .modal--container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
</style>
2 changes: 1 addition & 1 deletion src/popup/router/components/Modals/ClaimSuccessModal.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<Modal>
<Modal @close="resolve">
<div slot="body">
<CheckIcon /> <br />
<b>{{ $t('pages.claim.url') }}:</b> {{ url }} <br />
Expand Down
64 changes: 64 additions & 0 deletions src/popup/router/components/Modals/ConfirmTip.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<template>
<Modal @close="resolve">
<h4 class="confirmtip-modal-header" slot="header">
{{ $t('pages.tipPage.sendTipConfirmationHeader') }}
</h4>
<div class="confirmtip-modal--body" slot="body">
{{ $t('pages.tipPage.sendTipConfirmationBody') }}
<p class="confirmation--question">{{ $t('pages.tipPage.sendTipConfirmationQstn') }}</p>
</div>
<div class="confirmtip-modal--footer" slot="footer">
<Button data-cy="cancel-tip" dark @click="cancelTip">
{{ $t('pages.tipPage.cancel') }}
</Button>
<Button data-cy="to-confirm" @click="toConfirm">
{{ $t('pages.tipPage.sendTipBtn') }}
</Button>
</div>
</Modal>
</template>

<script>
import Modal from '../Modal';
import Button from '../Button';
export default {
props: {
resolve: { type: Function, required: true },
reject: { type: Function, required: true },
},
components: { Modal, Button },
methods: {
toConfirm() {
this.resolve(true);
},
cancelTip() {
this.reject(new Error('reject'));
},
},
};
</script>

<style lang="scss" scoped>
.confirmtip-modal-header {
margin: 0 !important;
font-weight: 500 !important;
}
.confirmtip-modal--body {
padding-bottom: 20px;
.confirmation--question {
font-weight: 500 !important;
color: #fff !important;
}
}
.confirmtip-modal--footer {
display: flex;
justify-content: space-between;
button {
margin: 0 !important;
width: 120px !important;
font-weight: 700 !important;
font-size: 15px !important;
}
}
</style>
2 changes: 1 addition & 1 deletion src/popup/router/components/Modals/DefaultModal.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<Modal>
<Modal @close="resolve">
<div v-if="title" slot="header">{{ title || $t(`modals.${type}.title`) }}</div>
<div slot="body">{{ msg || $t(`modals.${type}.msg`) }}</div>
<div slot="footer">
Expand Down
58 changes: 58 additions & 0 deletions src/popup/router/components/Modals/TipBadgeModal.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<template>
<Modal @close="resolve">
<div class="badge-modal-header" slot="header">
<UrlBadge :type="verifiedStatus" />
<h4>
{{
verifiedStatus == 'verified'
? $t('pages.tipPage.whatIsVerifieddUrl')
: $t('pages.tipPage.whatIsUntrustedUrl')
}}
</h4>
</div>
<div slot="body">
{{
verifiedStatus == 'verified'
? $t('pages.tipPage.verifiedUrlInfo')
: $t('pages.tipPage.untrustedUrlInfo')
}}
</div>
<div slot="footer">
<Button class="ok-button" @click="resolve">{{ $t('pages.tipPage.OkButton') }}</Button>
</div>
</Modal>
</template>

<script>
import Modal from '../Modal';
import Button from '../Button';
import UrlBadge from '../UrlBadge';
export default {
props: {
resolve: { type: Function, required: true },
verifiedStatus: { type: String, required: true },
},
components: { Modal, Button, UrlBadge },
};
</script>

<style lang="scss" scoped>
.badge-modal-header {
display: flex;
align-items: center;
justify-content: center;
.badge {
font-weight: 400 !important;
margin: 0 !important;
}
h4 {
margin: 0 5px;
}
}
.ok-button {
width: 120px !important;
font-weight: 700 !important;
font-size: 15px !important;
}
</style>
28 changes: 0 additions & 28 deletions src/popup/router/components/Modals/TipVerifiedModal.vue

This file was deleted.

Loading

0 comments on commit 51f7770

Please sign in to comment.