From dde63b619fc9904b80a8aec40d6bd9f79b491a9b Mon Sep 17 00:00:00 2001
From: Sabe Jones <sabrecat@gmail.com>
Date: Fri, 22 Sep 2017 22:27:00 -0500
Subject: [PATCH] Redesign: Fixes 09/21 (#9062)

* fix(notifications): click to clear

* fix(chat): no italic/gray typing in Tavern

* fix(tutorial): tighter Justin modal

* fix(modal): revert changes to avatar editing

* fix(avatar): let edit modal be big
---
 website/client/components/creatorIntro.vue    | 167 ++++++++++--------
 website/client/components/groups/tavern.vue   |   7 +-
 .../components/snackbars/notification.vue     |   2 +-
 3 files changed, 101 insertions(+), 75 deletions(-)

diff --git a/website/client/components/creatorIntro.vue b/website/client/components/creatorIntro.vue
index e69de56667..ba99817619 100644
--- a/website/client/components/creatorIntro.vue
+++ b/website/client/components/creatorIntro.vue
@@ -1,16 +1,16 @@
 <template lang="pug">
-b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='true', :class='{"page-2": modalPage > 1 && !editing}')
+b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true', :hide-footer='true', :class='{"page-2": modalPage > 1 && !editing}')
   .section.row.welcome-section(v-if='modalPage === 1 && !editing')
     .col-6.offset-3.text-center
       h3(v-once) {{$t('welcomeTo')}}
       .svg-icon.logo(v-html='icons.logoPurple')
 
-  .section.avatar-section.row(:class='{"page-2": modalPage === 2}')
+  .avatar-section.row(:class='{"page-2": modalPage === 2}')
     .col-6.offset-3
       .user-creation-bg(v-if='!editing')
-      avatar(:member='user', :avatarOnly='!editing')
+      avatar(:member='user', :avatarOnly='!editing', :class='{"edit-avatar": editing}')
 
-  .section(v-if='modalPage === 2')
+  .section(v-if='modalPage === 2', :class='{"edit-modal": editing}')
     // @TODO Implement in V2 .section.row
       .col-12.text-center
         button.btn.btn-secondary(v-once) {{$t('randomize')}}
@@ -19,7 +19,7 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
         div(:class='{"col-3": !editing, "col-2 offset-1": editing}')
           .menu-item(@click='changeTopPage("body", "size")')
             .svg-icon(v-html='icons.bodyIcon')
-          strong(v-once) {{$t('body')}}
+          strong(v-once) {{$t('bodyBody')}}
         div(:class='{"col-3": !editing, "col-2": editing}')
           .menu-item(@click='changeTopPage("skin", "color")')
             .svg-icon(v-html='icons.skinIcon')
@@ -37,11 +37,11 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
             .svg-icon(v-html='icons.backgroundsIcon')
           strong(v-once) {{$t('backgrounds')}}
     #body.section.customize-section(v-if='activeTopPage === "body"')
-      .row.sub-menu.col-6.offset-3.text-center
-          .col-2.offset-4.sub-menu-item(@click='changeSubPage("size")', :class='{active: activeSubPage === "size"}')
-            strong(v-once) {{$t('size')}}
-          .col-2.sub-menu-item(@click='changeSubPage("shirt")', :class='{active: activeSubPage === "shirt"}')
-            strong(v-once) {{$t('shirt')}}
+      .row.sub-menu.text-center
+        .col-3.offset-3.sub-menu-item(@click='changeSubPage("size")', :class='{active: activeSubPage === "size"}')
+          strong(v-once) {{$t('size')}}
+        .col-3.sub-menu-item(@click='changeSubPage("shirt")', :class='{active: activeSubPage === "shirt"}')
+          strong(v-once) {{$t('shirt')}}
       .row(v-if='activeSubPage === "size"')
         .col-12.customize-options.size-options
           .option(v-for='option in ["slim", "broad"]', :class='{active: user.preferences.size === option}')
@@ -62,8 +62,8 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
             button.btn.btn-secondary.purchase-all(v-if='!userOwnsSet("shirt", specialShirtKeys)', @click='unlock(`shirt.${specialShirtKeys.join(",shirt.")}`)') {{ $t('purchaseAll') }}
     #skin.section.customize-section(v-if='activeTopPage === "skin"')
       .row.sub-menu.col-6.offset-3.text-center
-          .col-6.offset-3.text-center.sub-menu-item(:class='{active: activeSubPage === "color"}')
-            strong(v-once) {{$t('color')}}
+        .col-6.offset-3.text-center.sub-menu-item(:class='{active: activeSubPage === "color"}')
+          strong(v-once) {{$t('color')}}
       .row
         .col-12.customize-options
           .option(v-for='option in ["ddc994", "f5a76e", "ea8349", "c06534", "98461a", "915533", "c3e1dc", "6bd049"]',
@@ -81,23 +81,23 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
         .col-12.text-center
           button.btn.btn-secondary.purchase-all(v-if='!hideSet(set) && !userOwnsSet("skin", set.keys)', @click='unlock(`skin.${set.keys.join(",skin.")}`)') {{ $t('purchaseAll') }}
     #hair.section.customize-section(v-if='activeTopPage === "hair"')
-      .row.sub-menu.col-6.offset-3.text-center
-          .col-2.offset-1.text-center.sub-menu-item(@click='changeSubPage("color")', :class='{active: activeSubPage === "color"}')
-            strong(v-once) {{$t('color')}}
-          .col-2.text-center.sub-menu-item(@click='changeSubPage("style")', :class='{active: activeSubPage === "style"}', v-if='editing')
-            strong(v-once) {{$t('style')}}
-          .col-2.text-center.sub-menu-item(@click='changeSubPage("bangs")', :class='{active: activeSubPage === "bangs"}')
-            strong(v-once) {{$t('bangs')}}
-          .col-3.text-center.sub-menu-item(@click='changeSubPage("ponytail")', :class='{active: activeSubPage === "ponytail"}')
-            strong(v-once) {{$t('ponytail')}}
-          .col-2.text-center.sub-menu-item(@click='changeSubPage("facialhair")', :class='{active: activeSubPage === "facialhair"}', v-if='editing')
+      .row.sub-menu.text-center
+        .col-3.offset-1.text-center.sub-menu-item(@click='changeSubPage("color")', :class='{active: activeSubPage === "color"}')
+          strong(v-once) {{$t('color')}}
+        .col-4.text-center.sub-menu-item(@click='changeSubPage("bangs")', :class='{active: activeSubPage === "bangs"}')
+          strong(v-once) {{$t('bangs')}}
+        .col-3.text-center.sub-menu-item(@click='changeSubPage("ponytail")', :class='{active: activeSubPage === "ponytail"}')
+          strong(v-once) {{$t('ponytail')}}
+      .row.sub-menu.text-center
+        .col-3.offset-3.text-center.sub-menu-item(@click='changeSubPage("style")', :class='{active: activeSubPage === "style"}', v-if='editing')
+          strong(v-once) {{$t('style')}}
+        .col-3.text-center.sub-menu-item(@click='changeSubPage("facialhair")', :class='{active: activeSubPage === "facialhair"}', v-if='editing')
             strong(v-once) {{$t('facialhair')}}
-      #hair-color.section.customize-section(v-if='activeSubPage === "color"')
-        .row
-          .col-12.customize-options
-            .option(v-for='option in ["white", "brown", "blond", "red", "black"]',
-              :class='{active: user.preferences.hair.color === option}')
-              .color-bangs.sprite.customize-option(:class="`hair_bangs_1_${option}`", @click='set({"preferences.hair.color": option})')
+      #hair-color.row(v-if='activeSubPage === "color"')
+        .col-12.customize-options
+          .option(v-for='option in ["white", "brown", "blond", "red", "black"]',
+            :class='{active: user.preferences.hair.color === option}')
+            .color-bangs.sprite.customize-option(:class="`hair_bangs_1_${option}`", @click='set({"preferences.hair.color": option})')
         //.row(v-if='editing')
           .col-12.customize-options(v-if='editing')
             .option(v-for='option in premiumHairColors',
@@ -180,18 +180,22 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
           .col-12.text-center
             button.btn.btn-secondary.purchase-all(v-if='!userOwnsSet("hair", baseHair6Keys, "mustache")', @click='unlock(`hair.mustache.${baseHair6Keys.join(",hair.mustache.")}`)') {{ $t('purchaseAll') }}
     #extra.section.container.customize-section(v-if='activeTopPage === "extra"')
-      .row.sub-menu.col-6.offset-3.text-center
-          .col-4.text-center.sub-menu-item(@click='changeSubPage("glasses")', :class='{active: activeSubPage === "glasses"}')
-            strong(v-once) {{$t('glasses')}}
-          .col-4.text-center.sub-menu-item(@click='changeSubPage("wheelchair")', :class='{active: activeSubPage === "wheelchair"}')
-            strong(v-once) {{$t('wheelchair')}}
-          .col-4.text-center.sub-menu-item(@click='changeSubPage("flower")', :class='{active: activeSubPage === "flower"}')
-            strong(v-once) {{$t('flower')}}
+      .row.sub-menu
+        .col-3.offset-1.text-center.sub-menu-item(@click='changeSubPage("glasses")', :class='{active: activeSubPage === "glasses"}')
+          strong(v-once) {{$t('glasses')}}
+        .col-4.text-center.sub-menu-item(@click='changeSubPage("wheelchair")', :class='{active: activeSubPage === "wheelchair"}')
+          strong(v-once) {{$t('wheelchair')}}
+        .col-3.text-center.sub-menu-item(@click='changeSubPage("flower")', :class='{active: activeSubPage === "flower"}')
+          strong(v-once) {{$t('flower')}}
+      .row.sub-menu(v-if='editing')
+        .col-4.offset-4.text-center.sub-menu-item(@click='changeSubPage("ears")' :class='{active: activeSubPage === "ears"}')
+          strong(v-once) {{$t('animalEars')}}
       .row(v-if='activeSubPage === "glasses"')
         .col-12.customize-options
           .option(v-for='option in eyewear', :class='{active: option.active}')
             .sprite.customize-option(:class="`eyewear_special_${option.key}`", @click='option.click')
-        #animal-ears.col-12.customize-options(v-if='editing')
+      #animal-ears.row(v-if='activeSubPage === "ears"')
+        .section.col-12.customize-options
           .option(v-for='option in animalEars',
             :class='{active: option.active, locked: option.locked}')
             .sprite.customize-option(:class="`headAccessory_special_${option.key}`", @click='option.click')
@@ -201,7 +205,7 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
           .col-12.text-center
             button.btn.btn-secondary.purchase-all(v-if='!animalEarsOwned', @click='unlock(animalEarsUnlockString)') {{ $t('purchaseAll') }}
       #wheelchairs.row(v-if='activeSubPage === "wheelchair"')
-        .col-12.customize-options.weelchairs
+        .col-12.customize-options
           .option(@click='set({"preferences.chair": "none"})', :class='{active: user.preferences.chair === "none"}')
             | None
           .option(v-for='option in ["black", "blue", "green", "pink", "red", "yellow"]',
@@ -221,28 +225,28 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
             popover-placement='right', popover-append-to-body='true',
             ng-click='user.items.gear.owned[item.key] ? equip(item.key) : purchase(item.type,item)')
     #backgrounds.section.container.customize-section(v-if='activeTopPage === "backgrounds"')
-      .row.col-12.text-center.set-title
+      .row.text-center.set-title
         strong {{backgroundShopSets[0].text}}
       .row.incentive-background-row
         .col-2(v-for='bg in backgroundShopSets[0].items',
-            @click='buy("background." + bg.key)',
-            :popover-title='bg.text',
-            :popover='bg.notes',
-            popover-trigger='mouseenter')
-            .incentive-background(:class='[`background_${bg.key}`]')
-              .small-rectangle
-      .row.sub-menu.col-6.offset-3
-          .col-3.text-center.sub-menu-item(@click='changeSubPage("2017")', :class='{active: activeSubPage === "2017"}')
-            strong(v-once) 2017
-          .col-3.text-center.sub-menu-item(@click='changeSubPage("2016")', :class='{active: activeSubPage === "2016"}')
-            strong(v-once) 2016
-          .col-3.text-center.sub-menu-item(@click='changeSubPage("2015")', :class='{active: activeSubPage === "2015"}')
-            strong(v-once) 2015
-          .col-3.text-center.sub-menu-item(@click='changeSubPage("2014")', :class='{active: activeSubPage === "2014"}')
-            strong(v-once) 2014
+          @click='buy("background." + bg.key)',
+          :popover-title='bg.text',
+          :popover='bg.notes',
+          popover-trigger='mouseenter')
+          .incentive-background(:class='[`background_${bg.key}`]')
+            .small-rectangle
+      .row.sub-menu.col-10.offset-1
+        .col-3.text-center.sub-menu-item(@click='changeSubPage("2017")', :class='{active: activeSubPage === "2017"}')
+          strong(v-once) 2017
+        .col-3.text-center.sub-menu-item(@click='changeSubPage("2016")', :class='{active: activeSubPage === "2016"}')
+          strong(v-once) 2016
+        .col-3.text-center.sub-menu-item(@click='changeSubPage("2015")', :class='{active: activeSubPage === "2015"}')
+          strong(v-once) 2015
+        .col-3.text-center.sub-menu-item(@click='changeSubPage("2014")', :class='{active: activeSubPage === "2014"}')
+          strong(v-once) 2014
       .row.customize-menu(v-for='(sets, key) in backgroundShopSetsByYear')
-        .col-12.row(v-for='set in sets', v-if='activeSubPage === key')
-          .col-6.offset-3.text-center.set-title
+        .row(v-for='set in sets', v-if='activeSubPage === key')
+          .col-8.offset-2.text-center.set-title
             strong {{set.text}}
           .col-12(v-if='showPlainBackgroundBlurb(set.identifier, set.items)') {{ $t('incentiveBackgroundsUnlockedWithCheckins') }}
           .col-4.text-center.customize-option.background-button(v-for='bg in set.items',
@@ -273,7 +277,7 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
       .col-12.text-center
         h2 I want to work on:
     .section.row
-      .col-4.offset-2
+      .col-6
         .task-option
           label.custom-control.custom-checkbox
             input.custom-control-input(type="checkbox", value='work', v-model='taskCategories')
@@ -294,7 +298,7 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
             input.custom-control-input(type="checkbox", value='school', v-model='taskCategories')
             span.custom-control-indicator
             span.custom-control-description(v-once) {{ $t('school') }}
-      .col-4
+      .col-6
         .task-option
           label.custom-control.custom-checkbox
             input.custom-control-input(type="checkbox", value='chores', v-model='taskCategories')
@@ -313,7 +317,7 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
 
   .section.row.justin-message-section(:class='{top: modalPage > 1}', v-if='!editing')
     .col-12
-      .justin-message
+      .justin-message.d-flex.flex-column.justify-content-center
         .featured-label
           span.rectangle
           span.text Justin
@@ -347,7 +351,7 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
 
 <style>
   .page-2 #avatar-modal__BV_body_ {
-    margin-top: 8em;
+    margin-top: 9em;
   }
 
   .page-2 .modal-content {
@@ -385,13 +389,17 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
     margin-top: 2em;
   }
 
-  .avatar-section.page-2 {
-    min-height: 150px;
+  .edit-modal {
+    margin-top: 10em;
+  }
+
+  .row.sub-menu + .row.sub-menu {
+    margin-top: 0.5em;
   }
 
   .welcome-section {
-    margin-top: 5em;
-    margin-bottom: 5em;
+    margin-top: 2.5em;
+    margin-bottom: 2.5em;
   }
 
   .logo {
@@ -408,7 +416,11 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
 
   .avatar {
     position: absolute;
-    top: -23px;
+    top: -22px;
+    left: 4em;
+  }
+
+  .edit-avatar {
     left: 9.2em;
   }
 
@@ -438,17 +450,25 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
       height: 52px;
       background-image: url('~client/assets/images/justin_textbox.png');
     }
+
+    p {
+      margin: auto;
+    }
+
+    p + p {
+      margin-top: 1em;
+    }
   }
 
   .justin-message-section {
-    margin-top: 6em;
-    margin-bottom: 6em;
+    margin-top: 4em;
+    margin-bottom: 2em;
   }
 
   .justin-message-section.top {
     position: absolute;
     top: -16em;
-    left: 13em;
+    left: 3.5em;
   }
 
   .circles {
@@ -490,6 +510,7 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
 
   .sub-menu-item {
     text-align: center;
+    border-bottom: 2px solid #f9f9f9;
   }
 
   .sub-menu .sub-menu-item:hover, .sub-menu .sub-menu-item.active {
@@ -516,8 +537,8 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
     display: inline-block;
     vertical-align: bottom;
     padding: .5em;
-    height: 100px;
-    width: 100px;
+    height: 90px;
+    width: 90px;
     margin-bottom: .5em;
     margin-right: .5em;
 
@@ -556,11 +577,11 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
   .customize-section {
     background-color: #f9f9f9;
     padding-top: 1em;
-    min-height: 250px;
+    min-height: 280px;
   }
 
   .interests-section {
-    margin-top: 7em;
+    margin-top: 3em;
 
     .task-option {
       margin: 0 auto;
@@ -570,7 +591,7 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
 
   #backgrounds {
     .set-title {
-      margin-top: 3em;
+      margin-top: 1em;
       margin-bottom: 1em;
     }
 
@@ -665,7 +686,7 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
     }
 
     .gem-amount {
-      margin-top: 2em;
+      margin-top: 1em;
       margin-bottom: 1em;
 
       .gem {
diff --git a/website/client/components/groups/tavern.vue b/website/client/components/groups/tavern.vue
index 4365c9706b..ee35aa5470 100644
--- a/website/client/components/groups/tavern.vue
+++ b/website/client/components/groups/tavern.vue
@@ -10,7 +10,7 @@
         h3(v-once) {{ $t('tavernChat') }}
 
         .row
-          textarea(:placeholder="$t('tavernCommunityGuidelinesPlaceholder')", v-model='newMessage', @keydown='updateCarretPosition')
+          textarea(:placeholder="$t('tavernCommunityGuidelinesPlaceholder')", v-model='newMessage', :class='{"user-entry": newMessage}', @keydown='updateCarretPosition')
           autocomplete(:text='newMessage', v-on:select="selectedAutocomplete", :coords='coords', :chat='group.chat')
           button.btn.btn-secondary.send-chat.float-right(v-once, @click='sendMessage()') {{ $t('send') }}
           button.btn.btn-secondary.float-left(v-once, @click='fetchRecentMessages()') {{ $t('fetchRecentMessages') }}
@@ -167,6 +167,11 @@
       padding: .5em;
     }
 
+    .user-entry {
+      font-style: normal;
+      color: $black;
+    }
+
     .hr {
       width: 100%;
       height: 20px;
diff --git a/website/client/components/snackbars/notification.vue b/website/client/components/snackbars/notification.vue
index 891eccd0d9..d35017194b 100644
--- a/website/client/components/snackbars/notification.vue
+++ b/website/client/components/snackbars/notification.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 transition(name="fade")
-  .notification.callout.animated(:class="classes", v-if='show')
+  .notification.callout.animated(:class="classes", v-if='show', @click='show = false')
     .row(v-if='notification.type === "error"')
       .text.col-12
         div(v-html='notification.text')