Skip to content

Commit 97fd608

Browse files
supalarrysupalarry
committed
visuals done need cleaning up and hooking with backend
1 parent deb8df3 commit 97fd608

File tree

6 files changed

+50
-22
lines changed

6 files changed

+50
-22
lines changed

‎frontend/src/assets/css/tailwind.css‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -243,10 +243,10 @@
243243
.onboarding-sub-container-content-button-outline-light {
244244
@apply bg-white-matcha;
245245
@apply text-purple-matcha;
246-
@apply font-normal;
246+
@apply font-bold;
247247
@apply w-full;
248248
@apply max-w-xs;
249-
@apply border;
249+
@apply border-2;
250250
@apply border-purple-matcha;
251251
@apply rounded-md;
252252
@apply py-2;
@@ -261,6 +261,11 @@
261261
outline: none;
262262
}
263263

264+
.onboarding-sub-container-slide-button:active,
265+
.onboarding-sub-container-slide-button:focus {
266+
outline: none;
267+
}
268+
264269
.auth-sub-container-content-button:active, .auth-sub-container-content-button:focus,
265270
.onboarding-sub-container-content-button:active, .onboarding-sub-container-content-button:focus{
266271
outline: none;
@@ -317,6 +322,12 @@
317322
@apply text-center;
318323
}
319324

325+
.onboarding-sub-container-slide-button {
326+
@apply text-purple-matcha;
327+
@apply font-bold;
328+
@apply mt-0;
329+
}
330+
320331
@screen sm {
321332
.onboarding-container {
322333
@apply px-0;

‎frontend/src/components/app/onboarding/SlideFive.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
<h1 class="onboarding-sub-container-content-heading leading-none">Bio</h1>
66
<p class="mt-2">{{textareaLength}} / {{maxTextareaLength}}</p>
77
<div class="h-64 flex flex-col items-center justify-center w-full">
8-
<textarea v-model="textareaValue" style="resize: none;" class="focus:outline-none active:outline-none w-full h-full border border-gray-matcha py-2 px-4 my-8 rounded-md text-gray-matcha" placeholder="I am best described as ..."></textarea>
8+
<textarea maxlength="200" v-model="textareaValue" style="resize: none;" class="focus:outline-none active:outline-none w-full h-full border border-gray-matcha py-2 px-4 my-8 rounded-md text-gray-matcha" placeholder="I am best described as ..."></textarea>
99
</div>
10-
<button class="onboarding-sub-container-content-button-outline-light mt-0" v-on:click="saveInput()">{{slide.buttonText}}</button>
10+
<button v-bind:disabled="textareaValue.length < 40" v-bind:class="{'onboarding-sub-container-slide-button': true, 'opacity-25': textareaValue.length < 40, 'cursor-default': textareaValue.length < 40}" v-on:click="saveInput()">{{slide.buttonText}}</button>
1111
</section>
1212
</template>
1313

‎frontend/src/components/app/onboarding/SlideFour.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
v-on:imageUploaded="imageUploaded"
3939
v-on:imageDeleted="imageDeleted">
4040
</ImageUpload>
41-
<button class="onboarding-sub-container-content-button-outline-light mt-0"
41+
<button class="onboarding-sub-container-slide-button"
4242
v-on:click="saveInput()">{{buttonText}}</button>
4343
</section>
4444
</template>

‎frontend/src/components/app/onboarding/SlideOne.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<template>
22
<!-- eslint-disable max-len -->
33
<section class="onboarding-sub-container">
4-
<h1>{{slide.current}} / {{slide.count}}</h1>
4+
<h1 class="text-gray-matcha">{{slide.current}} / {{slide.count}}</h1>
55
<h1 class="onboarding-sub-container-content-heading leading-none">I am</h1>
66
<div class="h-64 flex flex-col items-center justify-center w-full">
77
<SelectionButton v-bind:val="'Male'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
88
<SelectionButton v-bind:val="'Female'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
99
<SelectionButton v-bind:val="'Other'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
1010
</div>
11-
<button v-bind:disabled="!optionSelected" v-bind:class="{'onboarding-sub-container-content-button-outline-light': true, 'mt-0': true, 'opacity-25': !optionSelected, 'cursor-default': !optionSelected}" v-on:click="saveInput()">{{slide.buttonText}}</button>
11+
<button v-bind:disabled="!optionSelected" v-bind:class="{'onboarding-sub-container-slide-button': true, 'opacity-25': !optionSelected, 'cursor-default': !optionSelected}" v-on:click="saveInput()">{{slide.buttonText}}</button>
1212
</section>
1313
</template>
1414

‎frontend/src/components/app/onboarding/SlideThree.vue‎

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,12 @@
22
<!-- eslint-disable max-len -->
33
<section class="onboarding-sub-container">
44
<h1>{{slide.current}} / {{slide.count}}</h1>
5-
<h1 class="onboarding-sub-container-content-heading leading-none">I like</h1>
6-
<div class="h-64 pb-4 my-8 border-b-2 max-w-xs border-purple-matcha flex flex-col items-center w-full overflow-scroll">
7-
<SelectionButton v-bind:val="'coffee'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
8-
<SelectionButton v-bind:val="'coffee'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
9-
<SelectionButton v-bind:val="'coffee'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
10-
<SelectionButton v-bind:val="'coffee'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
11-
<SelectionButton v-bind:val="'coffee'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
12-
<SelectionButton v-bind:val="'coffee'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
13-
<SelectionButton v-bind:val="'coffee'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
14-
<SelectionButton v-bind:val="'coffee'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
15-
<SelectionButton v-bind:val="'coffee'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
16-
<SelectionButton v-bind:val="'coffee'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
17-
<SelectionButton v-bind:val="'coffee'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
5+
<h1 class="onboarding-sub-container-content-heading leading-none">Interests</h1>
6+
<p class="mt-2">{{interestsSelected}} / {{maxInterests}}</p>
7+
<div class="h-64 pb-1 my-8 border-b-2 max-w-xs border-purple-matcha flex flex-col items-center w-full overflow-scroll">
8+
<SelectionButton v-for="interest in interests" :key="interest._id" v-bind:val="interest" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
189
</div>
19-
<button v-bind:disabled="!optionSelected.length" v-bind:class="{'onboarding-sub-container-content-button-outline-light': true, 'mt-0': true, 'opacity-25': !optionSelected.length, 'cursor-default': !optionSelected.length}" v-on:click="saveInput()">{{slide.buttonText}}</button>
10+
<button v-bind:disabled="!optionSelected.length" v-bind:class="{'onboarding-sub-container-slide-button': true, 'opacity-25': !optionSelected.length, 'cursor-default': !optionSelected.length}" v-on:click="saveInput()">{{slide.buttonText}}</button>
2011
</section>
2112
</template>
2213

@@ -30,6 +21,27 @@ export default {
3021
},
3122
props: ['slide'],
3223
data: () => ({
24+
interests: [
25+
'Swimming', 'Wine', 'Reading', 'Foodie',
26+
'Netflix', 'Music', 'Yoga', 'Golf',
27+
'Photography', 'Baking', 'Shopping',
28+
'Outdoors', 'Art', 'Travel', 'Hiking',
29+
'Running', 'Volunteering', 'Cycling',
30+
'Climbing', 'Tea', 'Fishing', 'Soccer',
31+
'Museum', 'Dancing', 'Surfing',
32+
'Karaoke', 'Grab a drink', 'DIY',
33+
'Walking', 'Cat lover', 'Movies',
34+
'Gardening', 'Trivia', 'Working out',
35+
'Cooking', 'Gamer', 'Brunch',
36+
'Blogging', 'Picknicking', 'Athlete',
37+
'Dog lover', 'Politics', 'Environmentalism',
38+
'Instagram', 'Spirituality',
39+
'Language exchange', 'Sports', 'Comdey',
40+
'Fashion', 'Disney', 'Vlogging',
41+
'Astrology', 'Board Games', 'Craft Beer',
42+
'Coffee', 'Writer',
43+
],
44+
maxInterests: 10,
3345
optionSelected: [],
3446
bus: new Vue(),
3547
}),
@@ -45,5 +57,10 @@ export default {
4557
this.optionSelected = this.optionSelected.filter((e) => e !== val);
4658
},
4759
},
60+
computed: {
61+
interestsSelected() {
62+
return this.optionSelected.length;
63+
},
64+
},
4865
};
4966
</script>

‎frontend/src/components/app/onboarding/SlideTwo.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<SelectionButton v-bind:val="'Bi-sexual'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
1010
<SelectionButton v-bind:val="'Other'" v-bind:bus="bus" v-on:select="select" v-on:deselect="deselect"></SelectionButton>
1111
</div>
12-
<button v-bind:disabled="!optionSelected" v-bind:class="{'onboarding-sub-container-content-button-outline-light': true, 'mt-0': true, 'opacity-25': !optionSelected, 'cursor-default': !optionSelected}" v-on:click="saveInput()">{{slide.buttonText}}</button>
12+
<button v-bind:disabled="!optionSelected" v-bind:class="{'onboarding-sub-container-slide-button': true, 'opacity-25': !optionSelected, 'cursor-default': !optionSelected}" v-on:click="saveInput()">{{slide.buttonText}}</button>
1313
</section>
1414
</template>
1515

0 commit comments

Comments
 (0)