Start cleaning up styles, structure of staking modals

Author: sisou

src/components/icons/Staking/XCloseIcon.vue

@@ -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>

src/components/stake/StakeAmountSlider.vue

@@ -135,8 +135,6 @@ export default defineComponent({
         const getPointAtPercent = (percent: number): number =>
             (percent / 100.0) * (sliderBox.width - knobBox.width);
 
-        let initialX = 0;
-
         const estimateTextWidth = (text: string, defaultSize: number, options:Record<string, number> = { ' ': 3 }) => {
             let result = 0;
             let special = 0;
@@ -329,7 +327,6 @@ export default defineComponent({
             amountBox = $stakedNIMAmount.value!.getBoundingClientRect();
             updatePosition(getPointAtPercent(currentPercentage.value!));
             pivotPoint = { x: 0, y: knobBox.y } as Point;
-            initialX = getPointAtPercent(alreadyStakedPercentage.value);
 
             if (alreadyStaked.value) {
                 $dotIndicator.value!.style.left = `${getPointAtPercent(alreadyStakedPercentage.value!)

src/components/stake/StakeInfoPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="stake-info-page flex-column">
         <PageHeader>
             <template #default>
                 <div class="staking-icon">
@@ -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>
@@ -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;
@@ -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;
@@ -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;
@@ -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>

src/components/stake/StakeModal.vue

@@ -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;

src/components/stake/StakeValidatorFilter.vue

@@ -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">
@@ -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,
@@ -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;
@@ -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;
@@ -193,6 +203,7 @@ export default defineComponent({
             cursor: pointer;
             border: 0;
             background: transparent;
+            color: #0582CA;
         }
     }
 }