Skip to content

Commit e5620b9

Browse files
ldmwebldmweb
authored
polishing settings page + general styling fixes an all pages (#220)
1 parent 4a08e7f commit e5620b9

File tree

8 files changed

+87
-39
lines changed

8 files changed

+87
-39
lines changed

‎src/components/Header.vue‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,18 +19,19 @@
1919
<div
2020
v-show="showDropdown"
2121
class="
22+
dropdownOpen
2223
absolute
2324
flex flex-col
24-
mt-12
25+
mt-16
2526
rounded-lg
2627
shadow-lg
2728
p-4
2829
bg-gradient-to-r
2930
from-lightBGStart
3031
to-lightBGStop
3132
backdrop-filter backdrop-blur-lg
33+
border border-lightBorder
3234
"
33-
style="margin-left: -6rem"
3435
>
3536
<nuxt-link :to="$store.state.session.id" class="text-left w-full flex flex-row items-center text-gray7 mb-4"
3637
><ProfileIcon class="flex-shrink-0 w-5 h-5 mr-2" />Profile</nuxt-link
@@ -133,3 +134,20 @@ export default Vue.extend({
133134
},
134135
})
135136
</script>
137+
<style>
138+
.dropdownOpen {
139+
margin-left: -6rem;
140+
backdrop-filter: blur(10px);
141+
}
142+
.dropdownOpen::before {
143+
content: '';
144+
position: absolute;
145+
top: -0.5rem;
146+
right: 0.95rem;
147+
transform: rotate(45deg);
148+
width: 1rem;
149+
height: 1rem;
150+
background-color: #fff;
151+
border-radius: 2px;
152+
}
153+
</style>

‎src/components/Settings.vue‎

Lines changed: 28 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,32 @@
22
<div class="popup w-full p-5">
33
<!-- Header and Close button -->
44
<header class="flex flex-row justify-between mb-2">
5-
<h2 class="font-bold text-xl">Edit Profile</h2>
5+
<h2 class="font-bold text-xl">Edit your profile</h2>
66
<button class="rounded-full bg-gray1 p-1" @click="$emit(`close`)"><CloseIcon /></button>
77
</header>
88
<!-- Change avatar -->
9-
<div class="flex justify-center w-full mb-2">
9+
<div class="flex justify-center w-full mb-5">
1010
<button class="focus:outline-none" @click="handleImageClick">
11-
<Avatar :authorID="$store.state.session.id" :avatar="profilePic" :noClick="true" :size="`w-24 h-24`" />
11+
<span class="absolute inline-flex">
12+
<Avatar :authorID="$store.state.session.id" :avatar="profilePic" :noClick="true" :size="`w-24 h-24`" />
13+
</span>
14+
<span
15+
class="
16+
h-24
17+
w-24
18+
bg-lightOnSurfaceText
19+
text-lightOnPrimaryText
20+
relative
21+
inline-flex
22+
rounded-lg
23+
flex
24+
items-center
25+
justify-center
26+
bg-opacity-25
27+
"
28+
>
29+
<PencilIcon class="w-5 h-5 fill-current" />
30+
</span>
1231
</button>
1332
<input
1433
id="file-input"
@@ -85,7 +104,7 @@
85104
/>
86105
</div>
87106
<!-- Preferred Node -->
88-
<div class="flex flex-row mb-2">
107+
<!-- <div class="flex flex-row mb-2">
89108
<label for="nodeURL" class="w-32">OrbitDB URL</label>
90109
<input
91110
id="nodeURL"
@@ -94,11 +113,11 @@
94113
:placeholder="$store.state.nodeURL"
95114
class="text-black placeholder-black px-2 py-1 bg-gray1 rounded-lg flex-grow"
96115
/>
97-
</div>
116+
</div> -->
98117
<!-- Socials -->
99-
<div class="flex flex-row mb-2">
118+
<!-- <div class="flex flex-row mb-2">
100119
<label class="w-32">Socials</label>
101-
</div>
120+
</div> -->
102121

103122
<!-- Submit button -->
104123
<div class="flex justify-end">
@@ -119,6 +138,7 @@ import BrandedButton from '@/components/BrandedButton.vue'
119138
import { MutationType, getProfileFromSession, namespace as sessionStoreNamespace } from '~/store/session'
120139
import { getProfile, setProfile } from '@/backend/profile'
121140
import { addPhotoToIPFS, getPhotoFromIPFS, preUploadPhoto } from '@/backend/photos'
141+
import PencilIcon from '@/components/icons/Pencil.vue'
122142
123143
interface IData {
124144
newName: string
@@ -137,6 +157,7 @@ export default Vue.extend({
137157
CloseIcon,
138158
Avatar,
139159
BrandedButton,
160+
PencilIcon,
140161
// ColorMode,
141162
},
142163
data(): IData {

‎src/components/post/Card.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,12 @@
1010
>
1111
<div
1212
class="card"
13-
:class="showComments ? `shadow rounded-lg p-5 bg-white mt-10 max-h-screen overflow-y-auto` : ``"
14-
:style="showComments ? `width: 750px` : ``"
13+
:class="
14+
showComments
15+
? `shadow-lg rounded-lg p-5 bg-gradient-to-r from-lightBGStart to-lightBGStop backdrop-filter backdrop-blur-lg mt-10 max-h-screen overflow-y-auto`
16+
: ``
17+
"
18+
:style="showComments ? `width: 750px; backdrop-filter: blur(10px)` : ``"
1519
>
1620
<div class="sticky top-0 z-10">
1721
<!-- IF reposted -->

‎src/components/widgets/Editor.vue‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,10 @@
7272
"
7373
>
7474
<h6 class="text-primary font-semibold">Category</h6>
75-
<button class="w-full p-2 my-1 mt-3 rounded-lg bg-gray1" @click="showCategoryDropdown = !showCategoryDropdown">
75+
<button
76+
class="w-full p-2 my-1 mt-3 rounded-lg bg-gray1 focus:outline-none"
77+
@click="showCategoryDropdown = !showCategoryDropdown"
78+
>
7679
<div class="flex justify-between items-center">
7780
<div v-if="category" class="flex flex-row items-center">
7881
<img
@@ -126,7 +129,7 @@
126129
v-model="tag"
127130
type="text"
128131
placeholder="Add a tag..."
129-
class="focus:outline-none bg-gray1"
132+
class="focus:outline-none bg-gray1 placeholder-gray5"
130133
@keyup.enter="addTag"
131134
/>
132135
</div>

‎src/layouts/settings.vue‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
shadow-lg
2525
mr-5
2626
p-6
27+
pt-4
2728
z-10
2829
bg-gradient-to-r
2930
from-lightBGStart
@@ -47,26 +48,27 @@
4748
mb-5
4849
py-4
4950
px-6
51+
pb-2
5052
"
5153
>
5254
<h3 class="text-primary text-base font-semibold pb-4">Settings</h3>
5355
<button
54-
:class="tab === `account` ? `bg-primary bg-opacity-25` : ``"
55-
class="w-full rounded-lg text-primary py-2 px-4 mb-4 text-left focus:outline-none"
56+
:class="tab === `account` ? `bg-lightInput font-semibold` : ``"
57+
class="w-full rounded-lg text-gray5 py-2 px-4 mb-4 text-left focus:outline-none"
5658
@click="changeTab(`account`)"
5759
>
5860
Account
5961
</button>
6062
<button
61-
:class="tab === `security` ? `bg-primary bg-opacity-25` : ``"
62-
class="w-full rounded-lg text-primary py-2 px-4 mb-4 text-left focus:outline-none"
63+
:class="tab === `security` ? `bg-lightInput font-semibold` : ``"
64+
class="w-full rounded-lg text-gray5 py-2 px-4 mb-4 text-left focus:outline-none"
6365
@click="changeTab(`security`)"
6466
>
6567
Confidentiality and Security
6668
</button>
6769
<button
68-
:class="tab === `network` ? `bg-primary bg-opacity-25` : ``"
69-
class="w-full rounded-lg text-primary py-2 px-4 mb-4 text-left focus:outline-none"
70+
:class="tab === `network` ? `bg-lightInput font-semibold` : ``"
71+
class="w-full rounded-lg text-gray5 py-2 px-4 mb-4 text-left focus:outline-none"
7072
@click="changeTab(`network`)"
7173
>
7274
Nodes and Network

‎src/pages/_id.vue‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
<article ref="topContainer" class="px-6 pt-6 z-20 w-full">
66
<!-- Back button -->
77
<div v-if="$route.params.id !== $store.state.session.id" class="pb-4">
8-
<button class="flex flex-row items-center -mt-1" @click="$router.go(-1)">
8+
<button class="flex flex-row items-center -mt-1 focus:outline-none" @click="$router.go(-1)">
99
<span class="bg-gray1 rounded-full p-1"><BackButton :reduceSize="true" /></span>
10-
<h6 class="font-semibold ml-2 font-sans">Home</h6>
10+
<h6 class="font-semibold ml-2 font-sans">Back</h6>
1111
</button>
1212
</div>
1313
<!-- Name, socials, follow, bio -->
@@ -102,7 +102,11 @@
102102
bg-opacity-50
103103
"
104104
>
105-
<SettingsPopup class="bg-white rounded-lg" style="width: 589px" @close="toggleSettings" />
105+
<SettingsPopup
106+
class="bg-gradient-to-r from-lightBGStart to-lightBGStop backdrop-filter backdrop-blur-lg shadow-lg rounded-lg"
107+
style="width: 589px; backdrop-filter: blur(10px)"
108+
@close="toggleSettings"
109+
/>
106110
</div>
107111
</section>
108112
</template>

‎src/pages/settings/index.vue‎

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
id="id"
1111
type="text"
1212
:placeholder="$store.state.session.id"
13-
class="flex-grow bg-primary bg-opacity-25 text-primary placeholder-primary rounded-lg px-2 py-1"
13+
class="flex-grow bg-gray1 text-gray5 placeholder-gray5 rounded-lg px-2 py-1"
1414
disabled
1515
/>
1616
<button class="w-32" disabled></button>
@@ -24,42 +24,37 @@
2424
<h2 class="text-primary font-semibold text-sm py-4">Account Profile</h2>
2525
<div class="flex flex-row items-center w-full mb-4">
2626
<label for="editProfile" class="w-32 font-semibold">Public Profile</label>
27-
<nuxt-link :to="$store.state.session.id" class="bg-primary text-white rounded-lg focus:outline-none px-4 py-2">
27+
<nuxt-link
28+
:to="$store.state.session.id"
29+
class="bg-secondary text-white rounded-lg focus:outline-none"
30+
style="padding: 0.4rem 1.5rem"
31+
>
2832
Edit your Profile
2933
</nuxt-link>
3034
</div>
3135
<!-- Account Data -->
32-
<h2 class="text-primary font-semibold pt-4 mb-4">Account Data</h2>
36+
<h2 class="text-primary font-semibold pt-4 mb-4 text-sm">Account Data</h2>
3337
<div class="flex mb-4">
34-
<h3 class="w-48 font-semibold">Your Capsule data</h3>
38+
<h3 class="w-56 font-semibold">Your Capsule data</h3>
3539
<button class="text-primary focus:outline-none">Request a download of your Capsule data</button>
3640
</div>
3741
<div class="flex mb-4">
38-
<h3 class="w-48 font-semibold">Deactivate My Account</h3>
39-
<button class="text-lightError focus:outline-none">Deactivate my Capsule Account</button>
42+
<h3 class="w-56 font-semibold">Deactivate My Account</h3>
43+
<button class="text-negative focus:outline-none">Deactivate my Capsule Account</button>
4044
</div>
4145
</div>
4246

4347
<!-- Network Tab -->
4448
<div v-show="tab === `network`">
45-
<h2 class="text-primary font-semibold mb-4">OrbitDB</h2>
49+
<h2 class="text-primary font-semibold mb-4 text-sm">OrbitDB</h2>
4650
<div class="flex flex-row items-center w-full mb-4">
4751
<label for="node" class="w-48 font-semibold">Preferred Node URL:</label>
4852
<input
4953
id="node"
5054
v-model="nodeURL"
5155
type="text"
5256
:placeholder="$store.state.nodeURL"
53-
class="
54-
flex-grow
55-
bg-primary bg-opacity-25
56-
text-primary
57-
placeholder-primary
58-
rounded-lg
59-
px-2
60-
py-1
61-
focus:outline-none
62-
"
57+
class="flex-grow bg-gray1 text-gray5 placeholder-gray5 rounded-lg px-2 py-1 focus:outline-none"
6358
/>
6459
<button class="w-48 focus:outline-none" disabled></button>
6560
</div>

‎src/tailwind.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ module.exports = {
6666
lightOnSurfaceText: '#000000',
6767
lightOnSurfaceVariantText: '#000000',
6868
lightDialog: '#EEEEEE',
69+
lightInput: 'rgba(46, 85, 106, 0.05)',
6970
lightButtonBG: '#2E556A',
7071
lightButtonText: '#FFFFFF',
7172
lightActive: '#2E556A',

0 commit comments

Comments
 (0)