Skip to content

Commit

Permalink
Start cleaning up styles, structure of staking modals
Browse files Browse the repository at this point in the history
  • Loading branch information
@sisou
sisou committed Sep 30, 2021
1 parent f3774ae commit da1b93d
Show file tree
Hide file tree
Showing 7 changed files with 99 additions and 168 deletions.
2 changes: 1 addition & 1 deletion src/components/icons/Staking/XCloseIcon.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template functional>
<svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.5" d="M10.6966 8.29117C11.0513 8.68617 11.0357 9.28937 10.661 9.66552C10.2863 10.0417 9.683 10.0598 9.28636 9.70688L6.17374 6.59532C6.07552 6.49844 5.91765 6.49844 5.81944 6.59532L2.70781 9.70688C2.31269 10.0879 1.68673 10.0879 1.29161 9.70688C1.10368 9.51921 0.998077 9.26456 0.998077 8.99902C0.998077 8.73348 1.10368 8.47883 1.29161 8.29117L4.40424 5.18061C4.45124 5.13386 4.47767 5.07031 4.47767 5.00402C4.47767 4.93774 4.45124 4.87419 4.40424 4.82744L1.29161 1.71588C0.932602 1.32123 0.946463 0.714413 1.32312 0.336552C1.69978 -0.04131 2.30675 -0.0573141 2.7028 0.300173L5.81443 3.41173C5.86137 3.45877 5.92511 3.48521 5.99158 3.48521C6.05805 3.48521 6.12179 3.45877 6.16873 3.41173L9.28136 0.300173C9.67243 -0.0904874 10.3063 -0.0902634 10.6971 0.300673C11.0879 0.69161 11.0876 1.32522 10.6966 1.71588L7.58393 4.82744C7.48658 4.92505 7.48658 5.083 7.58393 5.18061L10.6966 8.29117Z" fill="#0582CA"/>
<path opacity=".5" d="M10.7 8.3a1 1 0 01-1.41 1.4L6.17 6.6a.25.25 0 00-.35 0L2.7 9.7a1 1 0 11-1.42-1.42L4.4 5.2a.25.25 0 000-.35L1.3 1.72A1 1 0 012.7.3l3.11 3.11a.25.25 0 00.36 0L9.28.3a1 1 0 011.42 1.42l-3.12 3.1c-.1.1-.1.26 0 .36L10.7 8.3z" fill="currentColor"/>
</svg>
</template>
118 changes: 38 additions & 80 deletions src/components/stake/StakeInfoPage.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div>
<div class="stake-info-page flex-column">
<PageHeader>
<template #default>
<div class="staking-icon">
Expand All @@ -8,26 +8,26 @@
{{ $t('Stake NIM to earn NIM') }}
</template>
<template #more>
<span class="nq-text nq-blue">
<p class="nq-text nq-blue">
{{ $t('Help secure the network by locking up NIM and get a percentage as a reward.') }}
</span>
</p>
</template>
</PageHeader>
<PageBody>
<div class="staking-rounded-background">
<div class="staking-rounded-background flex-column">
<div class="staking-icons-lace">
<img v-for="(icon, index) in orderOfValidators"
:key="index"
:src="`/img/staking/providers/${icon}`"
:style="{top: `${((Math.sin((index + 1) * (Math.PI / 10))) * 25)}px`}"
:style="{top: `${((Math.sin((index + 1) * (Math.PI / 10))) * 20)}px`}"
/>
</div>
<div class="staking-under-icons-text">
{{ $t('So called validators facilitate this process.'
+ ' Choose one to stake on your behalf, set an amount and go.') }}
</div>
<button class="nq-button light-blue stake-button" @click="$emit('next')">
{{ $t('let\'s go') }}
{{ $t('Let\'s go') }}
</button>
</div>
</PageBody>
Expand Down Expand Up @@ -76,13 +76,17 @@ export default defineComponent({
</script>

<style lang="scss" scoped>
.stake-info-page {
flex-grow: 1;
}
.page-header {
height: 36.625rem;
padding-top: 3rem;
line-height: 1;
/deep/ .nq-h1 {
font-size: 3rem;
color: var(--nimiq-blue);
font-size: var(--h1-size);
}
.staking-icon {
margin-top: .75rem;
Expand All @@ -96,35 +100,23 @@ export default defineComponent({
.page-body {
padding: 0;
margin: 0;
height: 31rem;
flex-grow: 1;
.staking-rounded-background {
display: flex;
flex-direction: column;
justify-content: center;
background-image: url('/img/staking/background-collar.svg');
background-size: cover;
background-position: 0rem -1rem;
background-repeat: no-repeat;
text-align: center;
.staking-under-icons-text {
font-size: 1.75rem;
font-weight: 600;
padding: 7.625rem 2rem;
padding-bottom: 1.25rem;
line-height: 2.45rem;
text-align: center;
color: #231044;
opacity: 0.6;
width: 95%;
margin: auto;
}
padding-bottom: 2rem;
height: 100%;
.staking-icons-lace {
position: relative;
top: 3.0rem;
left: -3.25rem;
left: -2rem;
margin-top: 3rem;
white-space: nowrap;
width: 95%;
margin: auto;
flex-grow: 1;
min-height: 9rem;
img {
position: relative;
Expand All @@ -133,34 +125,30 @@ export default defineComponent({
margin-left: .81rem;
}
}
.staking-under-icons-text {
font-size: var(--small-size);
font-weight: 600;
padding: 0 4rem;
padding-bottom: 1.25rem;
line-height: 2.45rem;
text-align: center;
color: var(--text-60);
}
.stake-button {
height: 8rem;
width: 31.5rem;
font-weight: bold;
font-size: 2rem;
line-height: 2.5rem;
letter-spacing: 0.1875rem;
}
}
}
.nq-text {
display: inline-block;
margin-top: 1.25rem;
margin: 1.25rem 0 0;
padding: 0rem 1rem;
font-size: 2rem;
font-weight: 400;
line-height: 140%;
color: #231044;
}
@media (max-width: 960px) and (min-width: 701px) { // Tablet breakpoint
}
@media (max-width: 700px) { // Full mobile breakpoint
.page-header {
height: 36.625rem;
padding-top: 3.5rem;
.staking-icon {
margin-top: 1.375rem;
margin-bottom: 1.25rem;
Expand All @@ -169,55 +157,25 @@ export default defineComponent({
height: 16rem;
}
}
/deep/ .nq-h1 {
font-size: 2.75rem;
font-weight: 700;
line-height: 3.3rem;
color: var(--nimiq-blue);
}
}
.page-body {
padding: 0;
margin-top: -1.375rem;
height: 32.375rem;
.staking-rounded-background {
.staking-under-icons-text {
position: relative;
left: .125rem;
padding-top: 7.75rem;
padding-bottom: .25rem;
width: 37rem;
font-weight: 600;
font-size: 1.625rem;
line-height: 140%;
}
.staking-icons-lace {
position: relative;
top: 2.5rem;
margin-top: 2.5rem;
img {
margin-left: .65rem;
width: 4.75rem;
height: 4.75rem;
}
}
.stake-button {
position: relative;
top: -.25rem;
left: .25rem;
height: 7rem;
width: 34rem;
font-size: 1.875rem;
letter-spacing: 0.1875rem;
.staking-under-icons-text {
padding-bottom: .25rem;
}
}
}
.nq-text {
font-size: 1.875rem;
margin-top: 1rem;
margin-left: .25rem;
line-height: 2.5rem;
font-weight: 600;
opacity: 0.8;
margin: 1rem 0 0;
}
}
</style>
4 changes: 0 additions & 4 deletions src/components/stake/StakeModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,10 +125,6 @@ export default defineComponent({
}
}
}
/deep/ .page-header-back-button {
margin-top: 3.25rem;
margin-left: 1rem;
}
&.fat-modal {
/deep/ .small-page {
width: 63.5rem;
Expand Down
33 changes: 22 additions & 11 deletions src/components/stake/StakeValidatorFilter.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="validator-filter">
<div class="stake-validator-filter">
<div class="validator-filter-wrapper" v-if="state !== FilterState.SEARCH">
<button class="validator-switch" :class="{ selected: state === FilterState.TRUST }"
@click="state = FilterState.TRUST">
Expand Down Expand Up @@ -49,18 +49,19 @@ export default defineComponent({
const $search = ref<HTMLInputElement>();
watch(state, () => context.emit('changed', state.value));
function enableSearch() {
state.value = FilterState.SEARCH;
context.root.$nextTick(() => $search.value?.focus());
}
return {
state,
FilterState,
$search,
enableSearch: () => {
state.value = FilterState.SEARCH;
setTimeout(() => $search.value?.focus(), 0);
},
enableSearch,
};
},
props: {
},
components: {
FatSearchIcon,
SearchIcon,
Expand All @@ -70,20 +71,21 @@ export default defineComponent({
</script>

<style lang="scss" scoped>
.validator-filter {
.stake-validator-filter {
width: 38rem;
height: 3.75rem;
margin: auto;
margin-bottom: 1.5rem;
white-space: nowrap;
.validator-filter-wrapper {
background-color: #f2f2f4;
background-color: var(--text-6);
height: 3.75rem;
border-radius: 2rem;
padding: 0;
padding-top: .125rem;
padding-left: .25rem;
white-space: nowrap;
overflow: hidden;
.validator-switch {
font-family: Muli, Helvetica, serif;
Expand All @@ -102,12 +104,20 @@ export default defineComponent({
line-height: 1.75rem;
text-align: center;
color: #9c9eae;
color: var(--text-50);
cursor: pointer;
transition: color 0.3s;
* {
select: none;
}
&:hover,
&:focus {
color: var(--text-80);
}
&.selected {
color: var(--nimiq-blue);
background: white;
Expand Down Expand Up @@ -193,6 +203,7 @@ export default defineComponent({
cursor: pointer;
border: 0;
background: transparent;
color: #0582CA;
}
}
}
Expand Down
31 changes: 10 additions & 21 deletions src/components/stake/StakeValidatorListItem.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
<button
class="validator-list-item reset flex-row"
:class="{ 'wrapper-mini': isMini }"
@click="selectValidator(validatorData)"
@focus="$emit('focus', true)"
@blur="$emit('focus', false)">

Expand Down Expand Up @@ -79,37 +78,29 @@ const getPayoutText = (payout: number) => {
};
export default defineComponent({
setup(props) {
return {
payoutText: getPayoutText(props.validatorData.payout),
Helpers: {
capitalise: (string: string) => string.charAt(0).toUpperCase() + string.slice(1),
},
};
},
props: {
validatorData: {
type: Object as () => ValidatorData,
required: true,
},
validatorsList: {
type: Array as () => ValidatorData[],
required: true,
},
stakingData: {
type: Object as () => StakingData,
required: true,
},
selectValidator: {
type: Function as () => unknown,
required: true,
},
isMini: {
type: Boolean,
required: false,
default: false,
},
},
setup(props) {
return {
payoutText: getPayoutText(props.validatorData.payout),
Helpers: {
capitalise: (string: string) => string.charAt(0).toUpperCase() + string.slice(1),
},
};
},
components: {
LabelTooltip,
ScoreTooltip,
Expand All @@ -124,7 +115,7 @@ export default defineComponent({
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 48.5rem;
width: calc(100% - 4rem);
line-height: 9rem;
margin: auto;
margin-bottom: -.25rem;
Expand All @@ -136,9 +127,7 @@ export default defineComponent({
outline: none;
&:focus {
width: 49.5rem;
border: 4px solid #f2f2f4;
margin: -.375rem -.5rem -.875rem .5rem;
outline: 4px solid #f2f2f4;
box-shadow: none;
}
Expand Down

0 comments on commit da1b93d

Please sign in to comment.