From b28251dc9eb2271c2470a496ca8020507549349f Mon Sep 17 00:00:00 2001
From: Sabe Jones <sabe@habitica.com>
Date: Wed, 8 May 2024 20:27:27 -0500
Subject: [PATCH] WIP(shops): more layouts and fixes

---
 website/client/src/assets/scss/icon.scss      |   2 +-
 website/client/src/assets/scss/item.scss      |  12 +-
 .../client/src/assets/scss/typography.scss    |   3 +-
 .../avatarModal/customize-banner.vue          |   4 +-
 .../avatarModal/customize-options.vue         | 101 +--------------
 .../client/src/components/creatorIntro.vue    | 115 +++++++++---------
 .../components/shops/timeTravelers/index.vue  |  11 +-
 website/client/src/components/ui/closeX.vue   |   3 +-
 .../client/src/mixins/avatarEditUtilities.js  |   4 +-
 .../common/script/content/appearance/sets.js  |   1 +
 .../common/script/content/appearance/shirt.js |   2 +-
 11 files changed, 88 insertions(+), 170 deletions(-)

diff --git a/website/client/src/assets/scss/icon.scss b/website/client/src/assets/scss/icon.scss
index 3ab036333a..ad57951ac6 100644
--- a/website/client/src/assets/scss/icon.scss
+++ b/website/client/src/assets/scss/icon.scss
@@ -12,7 +12,7 @@
   }
 
   &.color {
-    svg path {
+    svg path, svg polygon {
       fill: currentColor;
     }
   }
diff --git a/website/client/src/assets/scss/item.scss b/website/client/src/assets/scss/item.scss
index c1752d019e..c674db0554 100644
--- a/website/client/src/assets/scss/item.scss
+++ b/website/client/src/assets/scss/item.scss
@@ -80,9 +80,15 @@
   }
 }
 
-.flat .item {
-  box-shadow: none;
-  border: none;
+.flat {
+  .item {
+    box-shadow: none;
+    border: none;
+  }
+
+  .item-wrapper:hover {
+    box-shadow: none;
+  }
 }
 
 .bordered-item .item {
diff --git a/website/client/src/assets/scss/typography.scss b/website/client/src/assets/scss/typography.scss
index 970fd41737..b80ce6da3b 100644
--- a/website/client/src/assets/scss/typography.scss
+++ b/website/client/src/assets/scss/typography.scss
@@ -60,8 +60,9 @@ h1 {
 
 h2 {
   font-size: 20px;
-  line-height: 1.4;
+  line-height: 28px;
   margin-bottom: 16px;
+  color: $purple-300;
 }
 
 h3, h4 {
diff --git a/website/client/src/components/avatarModal/customize-banner.vue b/website/client/src/components/avatarModal/customize-banner.vue
index c74bb7cbae..a0bb5e26df 100644
--- a/website/client/src/components/avatarModal/customize-banner.vue
+++ b/website/client/src/components/avatarModal/customize-banner.vue
@@ -31,8 +31,8 @@
 
   .bottom-banner {
     background: linear-gradient(114.26deg, $purple-300 0%, $purple-200 100%);
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
     color: $white;
     height: 80px;
     line-height: 24px;
diff --git a/website/client/src/components/avatarModal/customize-options.vue b/website/client/src/components/avatarModal/customize-options.vue
index 0e56c1b08d..aa2741f92c 100644
--- a/website/client/src/components/avatarModal/customize-options.vue
+++ b/website/client/src/components/avatarModal/customize-options.vue
@@ -7,7 +7,6 @@
       :key="option.key"
       class="outer-option-background"
       :class="{
-        locked: option.gemLocked || option.goldLocked,
         premium: Boolean(option.gem),
         active: option.active || currentValue === option.key,
         none: option.none,
@@ -117,7 +116,7 @@ export default {
 
     &:not(.locked):not(.active) {
       .option:hover {
-        background-color: rgba(213, 200, 255, .32);
+        background-color: rgba($purple-300, .25);
       }
     }
 
@@ -183,9 +182,6 @@ export default {
       margin-top: 0;
       margin-left: 0;
 
-      &.color-bangs {
-        margin-top: 3px;
-      }
       &.skin {
         margin-top: -4px;
         margin-left: -4px;
@@ -204,14 +200,14 @@ export default {
           margin-top: -5px;
         }
       }
-      &.color, &.bangs {
-          margin-top: 4px;
-          margin-left: -3px;
+      &.color, &.bangs, &.beard {
+        background-position-x: -5px;
+        background-position-y: -12px;
       }
 
       &.hair.base {
-          margin-top: 0px;
-          margin-left: -5px;
+        background-position-x: -6px;
+        background-position-y: -4px;
       }
 
       &.headAccessory {
@@ -225,89 +221,4 @@ export default {
       }
     }
   }
-
-  .text-center {
-    .gem-lock, .gold-lock {
-      display: inline-block;
-      margin: 0 auto 8px;
-      vertical-align: bottom;
-    }
-  }
-
-  .gem-lock, .gold-lock {
-    .svg-icon {
-      width: 16px;
-    }
-
-    span {
-      font-weight: bold;
-      margin-left: .5em;
-    }
-
-    .svg-icon, span {
-      display: inline-block;
-      vertical-align: bottom;
-    }
-  }
-
-  .gem-lock span {
-    color: $green-10
-  }
-
-  .purchase-set {
-    background: #fff;
-    padding: 0.5em;
-    border-radius: 0 0 2px 2px;
-    box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
-    cursor: pointer;
-
-    span {
-      font-weight: bold;
-      font-size: 12px;
-    }
-
-    span.price {
-      color: #24cc8f;
-    }
-
-    .gem, .coin {
-      width: 16px;
-    }
-
-    &.single {
-      width: 141px;
-    }
-
-    width: 100%;
-
-    span {
-      font-size: 14px;
-    }
-
-    .gem, .coin {
-      width: 20px;
-      margin: 0 .5em;
-      display: inline-block;
-      vertical-align: bottom;
-    }
-  }
-
-  .background-set {
-    background-color: #edecee;
-    border-radius: 2px;
-
-    padding-top: 12px;
-    margin-left: 12px;
-    margin-right: 12px;
-    margin-bottom: 12px;
-
-    width: calc(100% - 24px);
-
-    padding-left: 0;
-    padding-right: 0;
-
-    max-width: unset; // disable col12 styling
-    flex: unset;
-  }
-
 </style>
diff --git a/website/client/src/components/creatorIntro.vue b/website/client/src/components/creatorIntro.vue
index 365bce4f36..9520f0f275 100644
--- a/website/client/src/components/creatorIntro.vue
+++ b/website/client/src/components/creatorIntro.vue
@@ -9,12 +9,10 @@
     :no-close-on-esc="!editing"
     :no-close-on-backdrop="!editing"
   >
-    <span
+    <close-x
       v-if="editing"
-      class="close-icon svg-icon inline icon-10"
-      @click="close()"
-      v-html="icons.close"
-    ></span>
+      @close="close()"
+    />
     <div
       v-if="modalPage === 1 && !editing"
       class="section row welcome-section"
@@ -29,39 +27,47 @@
         ></div>
       </div>
     </div>
+    <h2
+      class="text-center pt-2 mt-4 mb-4"
+      v-if="editing"
+    >
+      {{ $t('editAvatar')}}
+    </h2>
     <div
       v-if="modalPage > 1"
-      class="avatar-section row"
+      class="avatar-section d-flex justify-content-center"
       :class="{'page-2': modalPage === 2}"
     >
-      <div class="col-6 offset-3">
+      <div>
         <div
           v-if="!editing"
-          class="user-creation-bg"
-        ></div>
+          class="user-creation-bg mt-5"
+        >
+          <avatar
+            class="new-user"
+            :member="user"
+            :avatar-only="true"
+          />
+        </div>
         <avatar
+          v-else
           :member="user"
-          :avatar-only="!editing"
-          :class="{'edit-avatar': editing}"
+          :avatar-only="false"
         />
       </div>
     </div>
     <div
       v-if="modalPage === 2"
       class="section"
-      :class="{'edit-modal': editing}"
     >
       <div
         id="options-nav"
-        class="container section text-center customize-menu"
+        class="container section text-center customize-menu px-5"
       >
-        <div class="row">
+        <div class="row justify-content-around">
           <div
             class="menu-container"
-            :class="{
-              'col-3': !editing,
-              'col-2 offset-1': editing,
-              active: activeTopPage === 'body'}"
+            :class="{active: activeTopPage === 'body'}"
             @click="changeTopPage('body', 'size')"
           >
             <div class="menu-item">
@@ -75,7 +81,7 @@
           </div>
           <div
             class="menu-container"
-            :class="{'col-3': !editing, 'col-2': editing, active: activeTopPage === 'skin'}"
+            :class="{active: activeTopPage === 'skin'}"
             @click="changeTopPage('skin', 'color')"
           >
             <div class="menu-item">
@@ -89,7 +95,7 @@
           </div>
           <div
             class="menu-container"
-            :class="{'col-3': !editing, 'col-2': editing, active: activeTopPage === 'hair'}"
+            :class="{active: activeTopPage === 'hair'}"
             @click="changeTopPage('hair', 'color')"
           >
             <div class="menu-item">
@@ -103,7 +109,7 @@
           </div>
           <div
             class="menu-container"
-            :class="{'col-3': !editing, 'col-2': editing, active: activeTopPage === 'extra'}"
+            :class="{active: activeTopPage === 'extra'}"
             @click="changeTopPage('extra', 'glasses')"
           >
             <div class="menu-item">
@@ -117,7 +123,7 @@
           </div>
           <div
             v-if="editing"
-            class="menu-container col-2"
+            class="menu-container"
             :class="{active: activeTopPage === 'backgrounds'}"
             @click="changeTopPage('backgrounds')"
           >
@@ -558,18 +564,7 @@
   $dialogMarginTop: 56px;
   $userCreationBgHeight:  105px;
 
-  /* @TODO do not rely on avatar-modal___BV_modal_body_,
-     it already changed once when bootstrap-vue reached version 1 */
-
-  #avatar-modal___BV_modal_body_, #avatar-modal___BV_modal_body_ {
-    padding: 0;
-  }
-
   .page-2 {
-    #avatar-modal___BV_modal_body_ {
-      margin-top: $dialogMarginTop;
-    }
-
     &#avatar-modal {
       .modal-dialog.modal-md {
         margin-top: 186px;
@@ -578,6 +573,26 @@
   }
 
   #avatar-modal {
+    .avatar {
+      cursor: auto;
+
+      &:not(.new-user) {
+        box-shadow: 0px 1px 3px 0px rgba(26, 24, 29, 0.12), 0px 1px 2px 0px rgba(26, 24, 29, 0.24);
+      }
+
+      &.new-user {
+        padding-top: 0px;
+        padding-left: 30px;
+      }
+    }
+
+    .modal-body {
+      padding: 0px;
+    }
+
+    .modal-content {
+      border-radius: 12px;
+    }
 
     .first-page-footer {
       margin-bottom: 32px;
@@ -617,14 +632,6 @@
       padding-top: 1px;
     }
 
-    .purchase-all {
-      margin-bottom: 1em;
-    }
-
-    .edit-modal {
-      margin-top: 10em;
-    }
-
     .row.sub-menu + .row.sub-menu {
       margin-top: 0.5em;
     }
@@ -646,12 +653,6 @@
       margin: 0 auto;
     }
 
-    .avatar {
-      position: absolute !important; // was overwritten in production build
-      top: -22px;
-      left: 4em;
-    }
-
     .top {
       position: absolute;
       top: -($dialogMarginTop + $userCreationBgHeight - 16px);
@@ -667,10 +668,6 @@
       margin-bottom: 30px;
     }
 
-    .edit-avatar {
-      left: 9.2em;
-    }
-
     .justin-section {
       position: relative;
     }
@@ -742,14 +739,18 @@
     }
 
     .customize-menu {
-      .menu-item .svg-icon {
-        width: 32px;
-        height: 32px;
-        margin: 0 auto;
+      .menu-item {
+        width: 83px;
+
+        .svg-icon {
+          width: 32px;
+          height: 32px;
+          margin: 0 auto;
+        }
       }
 
       .menu-container {
-        color: #a5a1ac;
+        color: $gray-100;
       }
 
       .menu-container:hover, .menu-container.active {
@@ -970,6 +971,7 @@ import bodySettings from './avatarModal/body-settings';
 import skinSettings from './avatarModal/skin-settings';
 import hairSettings from './avatarModal/hair-settings';
 import extraSettings from './avatarModal/extra-settings';
+import closeX from './ui/closeX';
 
 import logoPurple from '@/assets/svg/logo-purple.svg';
 import bodyIcon from '@/assets/svg/body.svg';
@@ -988,6 +990,7 @@ import { avatarEditorUtilities } from '../mixins/avatarEditUtilities';
 export default {
   components: {
     avatar,
+    closeX,
     customizeBanner,
     bodySettings,
     extraSettings,
diff --git a/website/client/src/components/shops/timeTravelers/index.vue b/website/client/src/components/shops/timeTravelers/index.vue
index 926602ba82..9f8fa418cc 100644
--- a/website/client/src/components/shops/timeTravelers/index.vue
+++ b/website/client/src/components/shops/timeTravelers/index.vue
@@ -69,7 +69,6 @@
           </div>
         </div>
       </div><div
-        v-if="!closed"
         class="clearfix"
       >
         <div class="float-right">
@@ -87,7 +86,7 @@
       <!-- eslint-disable vue/no-use-v-if-with-v-for -->
       <div
         v-for="category in categories"
-        v-if="!closed && (!anyFilterSelected || viewOptions[category.identifier].selected)"
+        v-if="!anyFilterSelected || viewOptions[category.identifier].selected"
         :key="category.identifier"
         :class="category.identifier"
       >
@@ -99,6 +98,7 @@
           :item-width="94"
           :item-margin="24"
           :type="category.identifier"
+          :foldButton="false"
         >
           <template
             slot="item"
@@ -229,10 +229,7 @@
         justify-content: center;
         align-items: center;
       }
-      .background-open {
-        height: 188px;
-      }
-      .background-closed {
+      .background-open, .background-closed {
         height: 216px;
       }
 
@@ -257,7 +254,7 @@
           position: absolute;
           bottom: -14px;
           margin: 0;
-          left: 40px;
+          left: 78px;
         }
       }
     }
diff --git a/website/client/src/components/ui/closeX.vue b/website/client/src/components/ui/closeX.vue
index 147189c5c8..bd70075393 100644
--- a/website/client/src/components/ui/closeX.vue
+++ b/website/client/src/components/ui/closeX.vue
@@ -15,16 +15,15 @@
 @import '~@/assets/scss/colors.scss';
 
   .modal-close {
-    color: $black;
     position: absolute;
     right: 16px;
     top: 16px;
     cursor: pointer;
 
     .svg-close {
+      color: $gray-50;
       width: 18px;
       height: 18px;
-      vertical-align: middle;
       opacity: 0.5;
 
       &:hover {
diff --git a/website/client/src/mixins/avatarEditUtilities.js b/website/client/src/mixins/avatarEditUtilities.js
index 374fa7c657..19e4606bbd 100644
--- a/website/client/src/mixins/avatarEditUtilities.js
+++ b/website/client/src/mixins/avatarEditUtilities.js
@@ -70,9 +70,9 @@ export const avatarEditorUtilities = { // eslint-disable-line import/prefer-defa
         }
         case 'hair': {
           if (subType === 'color') {
-            str += `hair_bangs_${this.user.preferences.hair.bangs || 1}_${key}`; // todo get current hair-bang setting
+            str += `icon_hair_bangs_${this.user.preferences.hair.bangs || 1}_${key}`;
           } else {
-            str += `hair_${subType}_${key}_${this.user.preferences.hair.color}`;
+            str += `icon_hair_${subType}_${key}_${this.user.preferences.hair.color}`;
           }
           break;
         }
diff --git a/website/common/script/content/appearance/sets.js b/website/common/script/content/appearance/sets.js
index 4fb7ceddd2..bcb9dc6144 100644
--- a/website/common/script/content/appearance/sets.js
+++ b/website/common/script/content/appearance/sets.js
@@ -7,6 +7,7 @@ export default prefill({
   baseHair3: { setPrice: 5, text: t('hairSet3') },
   facialHair: { setPrice: 5, text: t('titleFacialHair') },
   specialShirts: { setPrice: 5, text: t('specialShirts') },
+  legacyShirts: { },
   winterHairColors: { setPrice: 5 },
   pastelHairColors: { setPrice: 5 },
   rainbowHairColors: { setPrice: 5, text: t('rainbowColors') },
diff --git a/website/common/script/content/appearance/shirt.js b/website/common/script/content/appearance/shirt.js
index 22f09a103d..da1488d1e7 100644
--- a/website/common/script/content/appearance/shirt.js
+++ b/website/common/script/content/appearance/shirt.js
@@ -10,7 +10,7 @@ export default prefill({
   yellow: {},
 
   convict: { price: 2, set: sets.specialShirts },
-  cross: { price: 2, set: sets.specialShirts },
+  cross: { price: 2, set: sets.legacyShirts },
   fire: { price: 2, set: sets.specialShirts },
   horizon: { price: 2, set: sets.specialShirts },
   ocean: { price: 2, set: sets.specialShirts },