Skip to content

Commit df2c026

Browse files
ldmwebldmweb
authored
style: polish darkmode for encryption key and account layout (#1125)
* style: polish darkmode for encryption key and account layout * fix: prop type on basicSwitch
1 parent 410d68a commit df2c026

File tree

4 files changed

+46
-28
lines changed

4 files changed

+46
-28
lines changed

‎src/components/BasicSwitch.vue

+10-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
<template>
22
<div
33
class="relative w-14 h-7 transition duration-500 ease-in-out rounded-full cursor-pointer"
4-
:class="[enabled ? 'bg-primary' : 'bg-gray1 dark:bg-gray7']"
4+
:class="[enabled ? 'bg-primary' : [onBG ? 'bg-gray3' : 'bg-gray1 dark:bg-gray7']]"
55
@click="toggleSwitch"
66
>
77
<label
88
class="absolute left-0 w-7 h-7 mb-2 transition duration-300 ease-in-out transform bg-lightBG dark:bg-darkBG border-2 rounded-full flex justify-center items-center"
9-
:class="[enabled ? 'translate-x-full border-primary' : 'translate-x-0 border-gray1 dark:border-gray7']"
9+
:class="[
10+
enabled
11+
? 'translate-x-full border-primary'
12+
: [onBG ? 'translate-x-0 border-gray3' : 'translate-x-0 border-gray1 dark:border-gray7'],
13+
]"
1014
>
1115
</label>
1216
<input type="checkbox" class="w-full h-full appearance-none focus:outline-none" />
@@ -22,6 +26,10 @@ export default Vue.extend({
2226
type: Boolean,
2327
default: false,
2428
},
29+
onBG: {
30+
type: Boolean,
31+
default: false,
32+
},
2533
},
2634
methods: {
2735
toggleSwitch() {

‎src/components/register/DownloadKey.vue

+10-8
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,7 @@
1010
<label for="encryptButton" class="text-gray7 dark:text-gray3 w-4/5">
1111
Add an optional password to encrypt your private key:
1212
</label>
13-
<BasicSwitch
14-
:enabled="encrypted"
15-
:class="[encrypted ? 'bg-primary' : 'bg-gray2 dark:bg-gray7']"
16-
@toggle="toggleEncrypted"
17-
/>
13+
<BasicSwitch :enabled="encrypted" :onBG="true" @toggle="toggleEncrypted" />
1814
</div>
1915
<div class="flex flex-col sm:flex-row items-center justify-between">
2016
<div class="flex flex-row items-center">
@@ -40,7 +36,9 @@
4036
>
4137
<div class="flex flex-row justify-between items-center">
4238
<!-- title, close button -->
43-
<h2 class="text-xl font-semibold">Encrypt your private key</h2>
39+
<h2 class="text-xl font-semibold text-lightPrimaryText dark:text-darkPrimaryText">
40+
Encrypt your private key
41+
</h2>
4442
<button
4543
class="bg-gray1 dark:bg-gray5 focus:outline-none rounded-full p-1"
4644
@click="showEncryptedInput = false"
@@ -58,10 +56,14 @@
5856
ref="encryptedPassword"
5957
v-model="encryptedPassword"
6058
:type="seePassword ? `text` : `password`"
61-
class="w-full focus:outline-none bg-transparent pr-6"
59+
class="w-full focus:outline-none bg-transparent pr-6 text-lightPrimaryText dark:text-darkPrimaryText"
6260
placeholder="Enter password"
6361
/>
64-
<button class="absolute" style="right: 1rem; top: 1.1rem" @click="seePassword = !seePassword">
62+
<button
63+
class="absolute text-gray5 dark:text-gray3"
64+
style="right: 1rem; top: 1.1rem"
65+
@click="seePassword = !seePassword"
66+
>
6567
<EyeIcon />
6668
</button>
6769
</div>

‎src/pages/login.vue

+7-3
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@
8787
>
8888
<div class="flex flex-row justify-between items-center">
8989
<!-- title, close button -->
90-
<h2 class="text-xl font-semibold">Private key protected</h2>
90+
<h2 class="text-xl font-semibold text-lightPrimaryText dark:text-darkPrimaryText">Private key protected</h2>
9191
<button class="bg-gray1 dark:bg-gray5 focus:outline-none rounded-full p-1" @click="showPasswordPopup = false">
9292
<CloseIcon />
9393
</button>
@@ -101,10 +101,14 @@
101101
ref="password"
102102
v-model="password"
103103
:type="seePassword ? `text` : `password`"
104-
class="w-full focus:outline-none bg-transparent pr-6"
104+
class="w-full focus:outline-none bg-transparent pr-6 text-lightPrimaryText dark:text-darkPrimaryText"
105105
placeholder="Enter password"
106106
/>
107-
<button class="absolute" style="right: 1rem; top: 1.1rem" @click="seePassword = !seePassword">
107+
<button
108+
class="absolute text-gray5 dark:text-gray3"
109+
style="right: 1rem; top: 1.1rem"
110+
@click="seePassword = !seePassword"
111+
>
108112
<EyeIcon />
109113
</button>
110114
</div>

‎src/pages/settings/account.vue

+19-15
Original file line numberDiff line numberDiff line change
@@ -8,33 +8,31 @@
88
<!-- Account Security -->
99
<h3 class="text-lightPrimaryText dark:text-darkPrimaryText pb-4 text-base font-semibold">Account Security</h3>
1010
<!-- ID -->
11-
<div class="mb-4 flex w-full flex-row items-center">
12-
<label for="id" class="w-48 font-semibold text-gray5 dark:text-gray3 text-sm">Identifier</label>
11+
<div class="mb-4 flex w-full flex-col sm:flex-row items-start sm:items-center">
12+
<label for="id" class="w-48 font-semibold text-gray5 dark:text-gray3 text-sm mb-2 sm:mb-0">Identifier</label>
1313
<input
1414
id="id"
1515
type="text"
1616
:placeholder="$store.state.session.id"
17-
class="cursor-not-allowed bg-gray1 dark:bg-gray7 text-gray5 dark:text-gray3 placeholder-gray5 dark:placeholder-gray3 flex-grow rounded-lg px-2 py-1"
17+
class="cursor-not-allowed bg-gray1 dark:bg-gray7 text-gray5 dark:text-gray2 placeholder-gray5 dark:placeholder-gray2 flex-grow w-full sm:w-min rounded-lg px-2 py-1"
1818
disabled
1919
/>
2020
</div>
2121
<!-- Export Private Key -->
22-
<div class="mb-8 flex w-full flex-row items-start">
23-
<h6 class="w-48 flex-shrink-0 font-semibold text-gray5 dark:text-gray3 text-sm">Blogchain private key</h6>
22+
<div class="mb-8 flex w-full flex-col sm:flex-row items-start">
23+
<h6 class="w-48 flex-shrink-0 font-semibold text-gray5 dark:text-gray3 text-sm mb-2 sm:mb-0">
24+
Blogchain private key
25+
</h6>
2426
<div class="bg-gray1 dark:bg-gray7 rounded-lg pt-4 pb-5 px-6 w-full">
2527
<!-- Optional encryption -->
2628
<div class="flex flex-row justify-between mb-6">
27-
<label for="encryptButton" class="text-gray7 dark:text-gray3 w-4/5">
29+
<label for="encryptButton" class="text-gray7 dark:text-gray2 w-4/5">
2830
Export my private key with a password:
2931
</label>
30-
<BasicSwitch
31-
:enabled="encrypted"
32-
:class="[encrypted ? 'bg-primary' : 'bg-gray2 dark:bg-gray7']"
33-
@toggle="toggleEncrypted"
34-
/>
32+
<BasicSwitch :enabled="encrypted" :onBG="true" @toggle="toggleEncrypted" />
3533
</div>
3634
<div class="flex flex-col sm:flex-row items-center justify-between">
37-
<div class="flex flex-row items-center">
35+
<div class="flex flex-row items-center mb-6 sm:mb-0">
3836
<FileDownloadIcon class="text-primary" />
3937
<div>
4038
<h6 class="text-gray pl-4 text-lg font-semibold dark:text-darkPrimaryText">Blogchain Private Key</h6>
@@ -57,7 +55,9 @@
5755
>
5856
<div class="flex flex-row justify-between items-center">
5957
<!-- title, close button -->
60-
<h2 class="text-xl font-semibold">Encrypt your private key</h2>
58+
<h2 class="text-xl font-semibold text-lightPrimaryText dark:text-darkPrimaryText">
59+
Encrypt your private key
60+
</h2>
6161
<button
6262
class="bg-gray1 dark:bg-gray5 focus:outline-none rounded-full p-1"
6363
@click="showEncryptedInput = false"
@@ -75,10 +75,14 @@
7575
ref="encryptedPassword"
7676
v-model="encryptedPassword"
7777
:type="seePassword ? `text` : `password`"
78-
class="w-full focus:outline-none bg-transparent pr-6"
78+
class="w-full focus:outline-none bg-transparent pr-6 text-lightPrimaryText dark:text-darkPrimaryText"
7979
placeholder="Enter password"
8080
/>
81-
<button class="absolute" style="right: 1rem; top: 1.1rem" @click="seePassword = !seePassword">
81+
<button
82+
class="absolute text-gray5 dark:text-gray3"
83+
style="right: 1rem; top: 1.1rem"
84+
@click="seePassword = !seePassword"
85+
>
8286
<EyeIcon />
8387
</button>
8488
</div>

0 commit comments

Comments
 (0)