Skip to content

Commit 8baf2ae

Browse files
jackdishmanldmweb
jackdishman
and
ldmweb
authored
UI/reader image (#233)
* polish login/signup styling * fix comments popup bg post when scrolling comments Co-authored-by: ldmweb <[email protected]>
1 parent 9fad6a3 commit 8baf2ae

File tree

3 files changed

+45
-41
lines changed

3 files changed

+45
-41
lines changed

‎src/components/post/Card.vue

+8-5
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,19 @@
99
"
1010
>
1111
<div
12-
class="card pt-5 px-6"
12+
class="card"
1313
:class="
1414
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`
15+
? `shadow-lg rounded-lg bg-gradient-to-r from-lightBGStart to-lightBGStop backdrop-filter backdrop-blur-lg mt-10 overflow-y-auto`
1616
: ``
1717
"
18-
:style="showComments ? `width: 750px; backdrop-filter: blur(10px)` : ``"
18+
:style="showComments ? `width: 750px; backdrop-filter: blur(10px); max-height: 90vh` : ``"
1919
style="backdrop-filter: blur(10px)"
2020
>
21-
<div class="sticky top-0 z-10 pb-5 border-b">
21+
<div
22+
class="sticky top-0 z-10 pb-5 border-b bg-gradient-to-r from-lightBGStart to-lightBGStop px-6 pt-5"
23+
style="backdrop-filter: blur(10px)"
24+
>
2225
<!-- IF reposted -->
2326
<div v-if="repostedBy !== `` && !hideRepostIcon" class="flex w-full -mt-2 mb-2 text-gray5">
2427
<RepostIcon :shrink="true" />
@@ -113,7 +116,7 @@
113116
</div>
114117
</div>
115118
</div>
116-
<PostActions v-if="showComments" :postCID="post._id" :initComments="comments" class="px-5" />
119+
<PostActions v-if="showComments" :postCID="post._id" :initComments="comments" class="px-6 pb-6" />
117120
</div>
118121
</div>
119122
</article>

‎src/layouts/unauth.vue

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<main
3-
class="emoji-cursor h-screen p-0 m-0 bg-img-unauth"
3+
class="h-screen p-0 m-0 bg-img-unauth"
44
:style="{ backgroundImage: `url(${require(`@/assets/images/brand/auth.jpg`)})` }"
55
>
66
<Nuxt />
@@ -14,10 +14,6 @@ export default Vue.extend({})
1414
</script>
1515

1616
<style>
17-
.emoji-cursor {
18-
cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🚀</text></svg>"),
19-
auto;
20-
}
2117
.bg-img-unauth {
2218
background-position: right top;
2319
background-size: cover;

‎src/pages/index.vue

+36-31
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,38 @@
11
<template>
2-
<main style="backdrop-filter: blur(10px)" class="bg-white bg-opacity-75 w-1/2 h-screen">
3-
<CapsuleIcon class="pt-5 pl-10" />
4-
<section class="flex justify-center items-center">
5-
<div class="flex flex-col items-center w-full">
2+
<main
3+
style="backdrop-filter: blur(10px)"
4+
class="bg-gradient-to-r from-lightBGStart to-lightBGStop w-3/5 h-screen overflow-y-scroll flex-col justify-between"
5+
>
6+
<CapsuleIcon class="pt-6 pl-10" />
7+
<section class="flex justify-center items-center" style="height: 86%">
8+
<div class="flex flex-col items-center w-full p-14 -mt-5">
69
<!-- Step 1: Choose Login / register -->
7-
<article v-show="!userInfo" class="w-1/2">
8-
<h1 class="mb-10 text-2xl text-primary font-bold text-center">Sign in or sign up using...</h1>
10+
<article v-show="!userInfo && !isLoading" class="w-1/2">
11+
<h1 class="font-semibold text-primary mb-10" style="font-size: 2.6rem">Signup</h1>
912
<button
10-
class="w-full rounded-lg w-1/2 bg-gray2 mb-4 py-2 flex justify-center items-center"
13+
class="w-full rounded-lg w-1/2 bg-gray2 mb-4 py-2 flex justify-center items-center focus:outline-none"
1114
@click="() => torusLogin('discord')"
1215
>
13-
<DiscordIcon style="width: 32px; height: 32px" />
14-
<h6 class="text-xl ml-2">Discord</h6>
16+
<DiscordIcon style="width: 28px; height: 28px" />
17+
<h6 class="font-semibold text-gray7 text-sm ml-4">Sign up with Discord</h6>
1518
</button>
1619
<button
17-
class="w-full rounded-lg w-1/2 bg-gray2 mb-4 py-2 flex justify-center items-center"
20+
class="w-full rounded-lg w-1/2 bg-gray2 py-2 flex justify-center items-center focus:outline-none"
1821
@click="() => torusLogin('google')"
1922
>
20-
<GoogleIcon style="width: 32px; height: 32px" />
21-
<h6 class="text-xl ml-2">Google</h6>
23+
<GoogleIcon style="width: 28px; height: 28px" />
24+
<h6 class="font-semibold text-gray7 text-sm ml-4">Sign up with Google</h6>
2225
</button>
23-
<div class="w-full flex justify-center items-center mb-4">
24-
<span class="border border-black flex-grow" style="height: 1px"></span>
25-
<p class="px-4">OR</p>
26-
<span class="border border-black flex-grow" style="height: 1px"></span>
26+
<div class="w-full flex justify-center items-center my-6">
27+
<span class="border border-gray5 flex-grow rounded-lg" style="height: 1px"></span>
28+
<p class="px-4 text-gray5 text-xs">OR</p>
29+
<span class="border border-gray5 flex-grow rounded-lg" style="height: 1px"></span>
2730
</div>
28-
<button class="w-full rounded-lg w-1/2 bg-gray2 mb-4 py-2 flex justify-center items-center">
29-
<NearIcon style="width: 28px; height: 28px" />
30-
<h6 class="text-xl ml-2">Signup with NEAR</h6>
31+
<button
32+
class="w-full rounded-lg w-1/2 bg-gray2 mb-4 py-3 flex justify-center items-center focus:outline-none"
33+
>
34+
<NearIcon style="width: 22px; height: 22px" />
35+
<h6 class="font-semibold text-gray7 text-sm ml-4">Signup with NEAR</h6>
3136
</button>
3237
</article>
3338
<!-- Step 2: Sign up -->
@@ -41,14 +46,13 @@
4146
Verify you’re a human with your phone number so that Capsule can fund your wallet. This is the last
4247
step needed to create your Capsule account.
4348
</p>
44-
<label for="id" class="font-semibold text-sm text-gray-600 pb-1 block">Phone Number</label>
49+
<label for="id" class="font-semibold text-sm text-gray5 pb-1 block">Phone Number</label>
4550
<input
4651
id="phoneNumber"
4752
v-model="phoneNumber"
4853
type="tel"
49-
placeholder="Enter your phone number"
54+
placeholder="+33"
5055
class="
51-
border
5256
rounded-lg
5357
px-3
5458
py-2
@@ -59,26 +63,25 @@
5963
focus:outline-none focus:border-primary
6064
text-primary
6165
font-sans
62-
bg-gray1
66+
bg-gray2
6367
"
6468
/>
6569
<div class="w-full flex justify-end">
6670
<BrandedButton :text="`Send Code`" :action="sendOTP" />
6771
</div>
68-
<p class="text-gray7 text-sm mt-5">
72+
<p class="text-gray7 text-sm mt-10 text-center">
6973
Already have a funded wallet? <button class="text-primary font-bold">Connect to NEAR</button>
7074
</p>
7175
</div>
7276
<div v-else>
7377
<!-- Enter SMS code to complete verify -->
74-
<label for="id" class="font-semibold text-sm text-gray-600 pb-1 block">One-time Password</label>
78+
<label for="id" class="font-semibold text-sm text-gray5 pb-1 block">One-time Password</label>
7579
<input
7680
id="phoneNumber"
7781
v-model="otp"
7882
type="text"
7983
placeholder=""
8084
class="
81-
border
8285
rounded-lg
8386
px-3
8487
py-2
@@ -89,21 +92,21 @@
8992
focus:outline-none focus:border-primary
9093
text-primary
9194
font-sans
95+
bg-gray2
9296
"
9397
/>
9498
<BrandedButton :text="`Verify`" class="w-full" :action="validateOTP" />
9599
</div>
96100
</article>
97101
<article v-else>
98102
<!-- Step 3: Choose an ID -->
99-
<label for="id" class="font-semibold text-sm text-gray-600 pb-1 block">ID</label>
103+
<label for="id" class="font-semibold text-sm text-gray5 pb-1 block">ID</label>
100104
<input
101105
id="id"
102106
v-model="id"
103107
type="text"
104108
placeholder=""
105109
class="
106-
border
107110
rounded-lg
108111
px-3
109112
py-2
@@ -114,6 +117,7 @@
114117
focus:outline-none focus:border-primary
115118
text-primary
116119
font-sans
120+
bg-gray2
117121
"
118122
/>
119123
<BrandedButton :text="`Sign Up`" :action="verify" class="w-full" />
@@ -130,10 +134,11 @@
130134
</div>
131135
</article>
132136
<article v-show="isLoading" class="w-3/4 flex justify-center">
133-
<div class="loader m-5 p-10 rounded-lg"></div>
137+
<div class="loader m-5 rounded-lg"></div>
134138
</article>
135139
</div>
136140
</section>
141+
<p class="px-4 text-gray5 text-sm pl-10">© 2021 Capsule.Social</p>
137142
</main>
138143
</template>
139144

@@ -230,8 +235,8 @@ export default Vue.extend({
230235
this.isLoading = false
231236
},
232237
async torusLogin(type: TorusVerifiers) {
238+
this.isLoading = true
233239
try {
234-
this.isLoading = true
235240
this.userInfo = await this.torus.triggerLogin(torusVerifiers[type])
236241
237242
this.accountId = getAccountIdFromPrivateKey(this.userInfo.privateKey)
@@ -310,7 +315,7 @@ export default Vue.extend({
310315
this.changeAvatar(account.avatar)
311316
this.changeBio(account.bio)
312317
this.changeLocation(account.location)
313-
this.$router.push(`/settings`)
318+
this.$router.push(`/home`)
314319
} catch (err: any) {
315320
alert(err.message)
316321
}

0 commit comments

Comments
 (0)