UI/onboarding (#280)

* polish onboarding

* update Capsule logo

* update onboarding prompts

* fix detail comments

* hide emotions stats if no comments

Co-authored-by: ldmweb <[email protected]>

Author: jackdishman

src/components/Header.vue

@@ -44,7 +44,7 @@ import Vue from 'vue'
 import { mapMutations } from 'vuex'
 import { keyStores } from 'near-api-js'
 
-import CapsuleIcon from '@/components/icons/Capsule.vue'
+import CapsuleIcon from '@/components/icons/CapsuleNew.vue'
 import Avatar from '@/components/Avatar.vue'
 import BrandedButton from '@/components/BrandedButton.vue'
 import ProfileIcon from '@/components/icons/Profile.vue'

src/components/Nodes.vue

@@ -3,7 +3,7 @@
 	<div class="flex items-center bg-gray1 px-3 rounded-lg">
 		<span class="text-sm mr-1 text-gray5">{{ nodes }} peered nodes</span>
 		<CapsuleIcon :shrink="true" />
-		<span class="flex h-3 w-3">
+		<span class="flex h-3 w-3 ml-1">
 			<span
 				class="animate-ping absolute inline-flex h-3 w-3 rounded-full opacity-75"
 				:class="nodes > 5 ? `bg-connectGreen` : `bg-connectOrange`"
@@ -18,7 +18,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import CapsuleIcon from '@/components/icons/Capsule.vue'
+import CapsuleIcon from '@/components/icons/CapsuleNew.vue'
 import ipfs from '@/backend/utilities/ipfs'
 
 export interface IData {

src/components/OnboardingWizard.vue

@@ -3,52 +3,81 @@
 		class="popup fixed w-full h-screen bg-primary top-0 bottom-0 left-0 right-0 z-30 flex justify-center items-start bg-opacity-50"
 	>
 		<div
-			class="popup shadow-lg rounded-lg bg-gradient-to-r from-lightBGStart to-lightBGStop backdrop-filter backdrop-blur-lg p-5 mt-12"
-			style="width: 750px"
+			class="popup shadow-lg rounded-lg bg-gradient-to-r from-lightBGStart to-lightBGStop backdrop-filter backdrop-blur-lg p-6 pt-4 mt-12"
+			style="width: 650px; backdrop-filter: blur(10px)"
 		>
 			<!-- Header and close icon -->
-			<div class="flex justify-between items-center pb-10">
-				<h1 class="text-3xl text-primary font-semibold">Welcome!</h1>
+			<div class="flex justify-between items-center pb-6">
+				<h1 class="text-4xl text-primary font-semibold">Welcome!</h1>
 				<button class="p-1 bg-gray1 rounded-full focus:outline-none" @click="closeWizard"><CloseIcon /></button>
 			</div>
 			<!-- Slide 1 -->
-			<article class="text-center">
-				<img v-show="step === 0" :src="require(`@/assets/images/onboarding/slide1.gif`)" class="rounded-lg mb-10" />
-				<img v-show="step === 1" :src="require(`@/assets/images/onboarding/slide2.gif`)" class="rounded-lg mb-10" />
-				<img v-show="step === 2" :src="require(`@/assets/images/onboarding/slide3.gif`)" class="rounded-lg mb-10" />
-				<img v-show="step === 3" :src="require(`@/assets/images/onboarding/slide4.gif`)" class="rounded-lg mb-10" />
-				<img v-show="step === 4" :src="require(`@/assets/images/onboarding/slide5.gif`)" class="rounded-lg mb-10" />
-				<h6 class="text-xl mb-5 font-semibold">{{ getTitle() }}</h6>
-				<p class="text-gray7 mb-10">
-					Welcome to your Capsule, customize it as you want it to be. With quick access to your favorite decentralized
-					content!
+			<article class="text-center flex flex-col items-center">
+				<img
+					v-show="step === 0"
+					:src="require(`@/assets/images/onboarding/slide1.gif`)"
+					class="rounded-lg mb-10 w-5/6 shadow-lg"
+				/>
+				<img
+					v-show="step === 1"
+					:src="require(`@/assets/images/onboarding/slide2.gif`)"
+					class="rounded-lg mb-10 w-5/6 shadow-lg"
+				/>
+				<img
+					v-show="step === 2"
+					:src="require(`@/assets/images/onboarding/slide3.gif`)"
+					class="rounded-lg mb-10 w-5/6 shadow-lg"
+				/>
+				<img
+					v-show="step === 3"
+					:src="require(`@/assets/images/onboarding/slide4.gif`)"
+					class="rounded-lg mb-10 w-5/6 shadow-lg"
+				/>
+				<img
+					v-show="step === 4"
+					:src="require(`@/assets/images/onboarding/slide5.gif`)"
+					class="rounded-lg mb-10 w-5/6 shadow-lg"
+				/>
+				<h6 class="text-xl mb-5 font-bold">{{ getTitle() }}</h6>
+				<p class="text-gray5 mb-10 px-10">
+					{{ getText() }}
 				</p>
 				<!-- progress circles -->
 				<div class="self-center mb-10">
-					<button class="p-1 bg-primary rounded-full focus:outline-none" @click="setStep(0)"></button>
+					<button class="p-1 mx-1 bg-primary rounded-full focus:outline-none" @click="setStep(0)"></button>
 					<button
 						:class="step > 0 ? `bg-primary` : `bg-gray1`"
-						class="p-1 rounded-full focus:outline-none"
+						class="p-1 mx-1 rounded-full focus:outline-none"
 						@click="setStep(1)"
 					></button>
 					<button
 						:class="step > 1 ? `bg-primary` : `bg-gray1`"
-						class="p-1 rounded-full focus:outline-none"
+						class="p-1 mx-1 rounded-full focus:outline-none"
 						@click="setStep(2)"
 					></button>
 					<button
 						:class="step > 2 ? `bg-primary` : `bg-gray1`"
-						class="p-1 rounded-full focus:outline-none"
+						class="p-1 mx-1 rounded-full focus:outline-none"
 						@click="setStep(3)"
 					></button>
 					<button
 						:class="step > 3 ? `bg-primary` : `bg-gray1`"
-						class="p-1 rounded-full focus:outline-none"
+						class="p-1 mx-1 rounded-full focus:outline-none"
 						@click="setStep(4)"
 					></button>
 				</div>
 				<!-- Next button -->
-				<div>
+				<div v-if="step === 4" class="mb-2">
+					<BrandedButton
+						:action="
+							() => {
+								setStep(step + 1)
+							}
+						"
+						:text="`Let's start! 🚀`"
+					/>
+				</div>
+				<div v-else class="mb-2">
 					<BrandedButton
 						:action="
 							() => {
@@ -97,29 +126,29 @@ export default Vue.extend({
 				case 0:
 					return `Customize your homepage`
 				case 1:
-					return `Browse Capsule`
+					return `Discover great content`
 				case 2:
-					return `Bookmarks`
+					return `Save and share bookmarks`
 				case 3:
-					return `Create content`
+					return `Create content easily `
 				case 4:
-					return `React easily`
+					return `Join the conversation `
 				default:
 					return `out of scope`
 			}
 		},
 		getText(): string {
 			switch (this.step) {
 				case 0:
-					return `Welcome to your Capsule, customize it as you want it to be. With quick access to your favorite decentralized content!`
+					return `As your daily entry point to Blogchain, this screen is important. Make it truly your own by picking whichever options you prefer for displaying content, editing tools, widgets, and more.`
 				case 1:
-					return `Browse new content on the Discover page with categories search, featured tags and trending topics`
+					return `On this page, we make it easy for you to find posts by writers who suit your interests well. Browse categories, featured tags, or trending topics to get started.`
 				case 2:
-					return `Bookmark your favorite content to read them later and share them to your Capsule network`
+					return `Sometimes a post or headline catches your attention, but there’s no time to read it now. That’s why Blogchain makes it easy to highlight such content for later and then share with friends if you want.`
 				case 3:
-					return `Use the super simple Capsule editor to create new post and share your though on the decentralized network`
+					return `Have an idea you’d like to share with the world? Blogchain’s simple editing tool will make it easy for you to craft and publish your post.`
 				case 4:
-					return `Share your thoughts with advanced reactions in comments to really give you opinion that matter`
+					return `Agree or disagree with something you’ve read on Blogchain? Use our comment features to talk about it with other readers. You can even include one of our custom reaction illustrations to make your point artfully.`
 				default:
 					return `out of scope`
 			}

src/components/icons/Bin.vue

@@ -4,4 +4,4 @@
 			d="M440 64H336l-33.6-44.8A48 48 0 0 0 264 0h-80a48 48 0 0 0-38.4 19.2L112 64H8a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h18.9l33.2 372.3a48 48 0 0 0 47.8 43.7h232.2a48 48 0 0 0 47.8-43.7L421.1 96H440a8 8 0 0 0 8-8V72a8 8 0 0 0-8-8zM171.2 38.4A16.1 16.1 0 0 1 184 32h80a16.1 16.1 0 0 1 12.8 6.4L296 64H152zm184.8 427a15.91 15.91 0 0 1-15.9 14.6H107.9A15.91 15.91 0 0 1 92 465.4L59 96h330z"
 		/>
 	</svg>
-</template>
+</template>

src/components/icons/CapsuleNew.vue

@@ -0,0 +1,30 @@
+<template>
+	<div>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="36"
+			height="36"
+			viewBox="0 0 612 612"
+			fill="#2E556A"
+			:style="shrink ? `transform: scale(0.7)` : `transform: scale(1)`"
+		>
+			<path
+				d="M621.67,504.54c-1.13,16.64-6.6,30.69-16.84,40.93-41.37,41.37-144.83,5-231.07-81.25s-122.62-189.7-81.25-231.07c10.06-10.06,23.8-15.52,40.07-16.78a1,1,0,0,0,0-2c-54.52-6.54-106.37,8.61-147.88,50.13-83.83,83.82-64.77,238.8,42.58,346.15s262.32,126.41,346.15,42.58c41.79-41.78,57-93.91,50.19-148.75A1,1,0,0,0,621.67,504.54Zm45.06-112.75c-12.36,5.19-30.54,3.47-52.6-5.2-30.58-12-64.27-35.45-94.89-66.06s-54.18-64.43-66.33-95.16c-8.85-22.41-10.66-40.86-5.44-53.37a.72.72,0,0,0-1.13-.81,27.11,27.11,0,0,0-7.58,9.49c-6.6,14.6-5,32.16.37,48.54-39.46-17.34-74-18.88-92.36-.47C319.4,256.12,336.11,319,383.3,381a1,1,0,0,0,1.7-1c-8.12-17.72-9-33.32-.81-41.55,14.48-14.48,51.79-.64,83.34,30.91s45.39,68.86,30.91,83.34c-8.47,8.47-24.75,7.25-43.13-1.54a1,1,0,0,0-1.05,1.69c63.12,49.38,128,67.32,156,39.41,18.41-18.41,16.87-52.91-.47-92.37,16.39,5.33,34,7,48.55.38a27.24,27.24,0,0,0,9.25-7.29A.72.72,0,0,0,666.73,391.79Zm47.13-169.62c-6.09-26.81-18.6-49.8-40.64-66.9-29.52-22.9-63.94-30.9-100.37-32.59h-27a262.42,262.42,0,0,0-47.27,5.49c-17.26,3.5-26.16,7.53-31.79,17.44-3.42,6-4.17,14.61-4,21.89.39,19.8,7,37.89,15.57,55.3,24.22,49.43,60.12,88.84,104.72,120.62,15.22,10.84,31.09,20.62,48.43,27.79,18.41,7.61,43.49,10.38,56.51,3.63,11.21-5.81,15.92-18.76,18-25.31,7.72-24.66,10.95-44.94,11.93-70.81v-26A152.53,152.53,0,0,0,713.86,222.17Z"
+				transform="translate(-132.48 -122.68)"
+			/>
+		</svg>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+	props: {
+		shrink: {
+			type: Boolean,
+			default: false,
+		},
+	},
+})
+</script>

src/components/post/Actions.vue

@@ -76,7 +76,7 @@
 				</div>
 			</div>
 			<!-- Comment Emoitons -->
-			<div class="pt-5 border-b pb-2">
+			<div v-if="getCommentCount(`total`) !== 0" class="pt-5 border-b pb-2">
 				<h6 class="text-sm pb-4 w-full text-center font-semibold">Comment Emotions</h6>
 				<!-- Row of faces -->
 				<div class="flex">

src/components/post/Card.vue

@@ -94,7 +94,7 @@
 								<BookmarkButton :postID="postCID" :hasBookmark="isBookmarked" @clicked="getBookmarkStatus" />
 								<button
 									v-if="post.authorID === $store.state.session.id"
-									class="focus:outline-none ml-2"
+									class="focus:outline-none ml-2 text-gray5"
 									@click.stop="toggleDropdownDelete"
 								>
 									<More />
@@ -113,12 +113,12 @@
 											? 'bg-lightBG text-lightPrimaryText border-lightBorder'
 											: 'bg-darkBG text-darkPrimaryText border-darkBorder'
 									"
-									class="absolute flex flex-col rounded-lg w-40 shadow-lg z-10 p-1"
+									class="absolute flex flex-col rounded-lg w-32 shadow-lg z-10 p-1"
 									style="top: 70px; right: 10px"
 								>
 									<!-- Delete -->
 									<button class="flex focus:outline-none text-negative" @click="deletePost">
-										<XIcon class="p-1" />
+										<BinIcon class="p-1" />
 										<span class="text-xs self-center text-negative">Delete this post</span>
 									</button>
 								</div>
@@ -218,6 +218,7 @@ import XIcon from '@/components/icons/X.vue'
 import FriendButton from '@/components/FriendButton.vue'
 import RepostIcon from '@/components/icons/Repost.vue'
 import StatsIcon from '@/components/icons/Stats.vue'
+import BinIcon from '@/components/icons/Bin.vue'
 import BrandedButton from '@/components/BrandedButton.vue'
 
 import { RetrievedPost, getRegularPost } from '@/backend/post'
@@ -263,6 +264,7 @@ export default Vue.extend({
 		TagPill,
 		More,
 		XIcon,
+		BinIcon,
 		StatsIcon,
 		FriendButton,
 		RepostIcon,

src/layouts/editor.vue

@@ -22,8 +22,10 @@
 							class="fixed overflow-y-auto rounded-t-lg shadow-lg mr-5 p-8 z-10 bg-gradient-to-r from-lightBGStart to-lightBGStop border-lightBorder"
 							@update="updateWordCount"
 						/>
-						<div class="fixed bottom-0 z-10 m-5">
-							Resume writing? <button class="text-primary" @click="showDraftsPopup">Show drafts</button>
+						<div
+							class="fixed bottom-0 z-10 m-4 px-5 py-3 bg-gradient-to-r from-lightBGStart to-lightBGStop border-lightBorder rounded-lg shadow-lg test-xs text-gray5"
+						>
+							Resume writing? <button class="text-primary ml-2" @click="showDraftsPopup">Show drafts</button>
 						</div>
 						<!-- Widgets -->
 						<aside

src/pages/_id/comments.vue

@@ -16,8 +16,8 @@
 		<article v-for="comment in comments" :key="comment._id">
 			<div class="pb-5">
 				<Comment :authorID="profile.id" :cid="comment._id" :timestamp="comment.timestamp" />
-				<p class="text-right">
-					<nuxt-link :to="`/post/` + comment.parentCID" class="text-primary">View Post</nuxt-link>
+				<p class="text-right mt-1">
+					<nuxt-link :to="`/post/` + comment.parentCID" class="text-gray5 text-xs">View Post</nuxt-link>
 				</p>
 			</div>
 		</article>

src/pages/home/index.vue

@@ -20,7 +20,7 @@
 						class="h-full focus:outline-none w-full pb-3"
 						@click="sortFeed('NEW')"
 					>
-						New Posts
+						New
 					</button>
 				</div>
 				<div class="flex items-center">