WIP(groups): style and HTML corrections

Also workflows for static and non-upgrade logged-in scenarios

website/client/src/components/static/groupPlans.vue

@@ -12,7 +12,8 @@
  class="party"
  src="../../assets/images/group-plans-static/[email protected]"
  >
- <h1 class="mt-5">{{ $t('groupPlanTitle') }}</h1>
+ <h1 class="mt-5" v-if="upgradingGroup._id">{{ $t('upgradeYourCrew') }}</h1>
+ <h1 class="mt-5" v-else>{{ $t('groupPlanTitle') }}</h1>
  <p class="mb-0">{{ $t('groupPlanDesc') }}</p>
  <div class="pricing mt-5">
  <span>Just</span>
@@ -34,23 +35,25 @@
  <div class="top-right"></div>
  <div class="d-flex justify-content-between align-items-middle w-100 gap-72 mb-100">
  <div class="ml-auto my-auto w-448 text-left">
- <h2>{{ $t('teamBasedTasksList') }}</h2>
+ <h2 class="mt-0">{{ $t('teamBasedTasksList') }}</h2>
  <small>{{ $t('teamBasedTasksListDesc') }}</small>
  </div>
  <div class="mr-auto my-auto">
- <div
+ <img
  class="team-based"
- ></div>
+ src="../../assets/images/group-plans-static/[email protected]"
+ >
  </div>
  </div>
  <div class="d-flex justify-content-between align-items-middle w-100 gap-72 mb-100">
  <div class="ml-auto my-auto">
- <div
+ <img
  class="group-management"
- ></div>
+ src="../../assets/images/group-plans-static/[email protected]"
+ >
  </div>
  <div class="mr-auto my-auto w-448 text-left">
- <h2>{{ $t('groupManagementControls') }}</h2>
+ <h2 class="mt-0">{{ $t('groupManagementControls') }}</h2>
  <small>{{ $t('groupManagementControlsDesc') }}</small>
  </div>
  </div>
@@ -65,8 +68,11 @@
  <div class="text-center mb-128">
  <div class="bot-left"></div>
  <div class="col-6 offset-3">
- <h2 class="purple mb-4">
- {{ $t('inspireYourParty') }}
+ <h2 class="purple mt-0 mb-4" v-if="upgradingGroup._id">
+ {{ $t('readyToUpgrade') }}
+ </h2>
+ <h2 v-else class="purple mt-0 mb-4">
+ {{ $t('createGroupToday') }}
  </h2>
  <div class="pricing mb-4">
  <span>Just</span>
@@ -94,7 +100,7 @@
  :hide-footer="true"
  :hide-header="true"
  >
- <div v-if="isStaticPage">
+ <div v-if="isStaticPage && !user">
  <h2>{{ $t('letsMakeAccount') }}</h2>
  <auth-form @authenticate="authenticate()" />
  </div>
@@ -143,6 +149,10 @@
  &.static {
  padding-top: 16px;
  }
+
+ &:not(.static) {
+ margin-left: -12px;
+ }
  }
 
  .gap-72 {
@@ -172,17 +182,11 @@
  }
 
  .team-based {
- background-image: url('../../assets/images/group-plans-static/[email protected]');
- background-size: contain;
- background-repeat: no-repeat;
  height: 252px;
  width: 448px;
  }
 
  .group-management {
- background-image: url('../../assets/images/group-plans-static/[email protected]');
- background-size: contain;
- background-repeat: no-repeat;
  height: 272px;
  width: 448px;
  }
@@ -271,6 +275,10 @@
  box-shadow: inset 0 -4px 0 0 rgba(52, 49, 58, 0.4);
  font-size: 20px;
  line-height: 28px;
+
+ &.btn-primary:hover {
+ background-color: $purple-400;
+ }
  }
 
  .pricing {
@@ -324,6 +332,12 @@ export default {
  isStaticPage () {
  return this.$route.meta.requiresLogin === false;
  },
+ upgradingGroup () {
+ return this.$store.state.upgradingGroup;
+ },
+ user () {
+ return this.$store.state.user?.data;
+ },
  },
  mounted () {
  this.$nextTick(() => {

website/client/src/pages/user-main.vue

@@ -24,7 +24,7 @@
  <app-menu />
  <div
  class="container-fluid"
- :class="{'no-margin': noMargin}"
+ :class="{'no-margin': noMargin, 'groups-background': $route.fullPath === '/group-plans' }"
  >
  <app-header />
  <buyModal
@@ -67,6 +67,12 @@
 
  .container-fluid {
  flex: 1 0 auto;
+
+ &.groups-background {
+ background-color: white;
+ background-image: url('../assets/images/group-plans-static/top.svg');
+ background-repeat: no-repeat;
+ }
  }
 
  .no-margin {

website/client/src/router/index.js

@@ -41,7 +41,7 @@ const StablePage = () => import(/* webpackChunkName: "inventory" */'@/components
 
 // Guilds & Parties
 const GroupPage = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/group');
-const GroupPlansAppPage = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/groupPlan');
+const GroupPlansAppPage = () => import(/* webpackChunkName: "guilds" */ '@/components/static/groupPlans');
 const LookingForParty = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/lookingForParty');
 
 // Group Plans

website/common/locales/en/groups.json

@@ -339,7 +339,8 @@
  "worldBossBullet3": "You can continue with normal Quest Bosses, damage will apply to both",
  "worldBossBullet4": "Check the Tavern regularly to see World Boss progress and Rage attacks",
  "worldBoss": "World Boss",
- "groupPlanTitle": "Need more for your crew?",
+ "groupPlanTitle": "Need More for Your Crew?",
+ "upgradeYourCrew": "Ready to Upgrade Your Crew?",
  "groupPlanDesc": "Organizing the household chores or managing a small class project? Habitica’s Group Plans provide a shared task experience and dedicated chat space to help you and your group stay motivated.",
  "billedMonthly": "*billed as a monthly subscription",
  "teamBasedTasksList": "Shared Task Board",
@@ -348,7 +349,8 @@
  "groupManagementControlsDesc": "Share responsibilities by assigning tasks to any number of members, or leave tasks open as a challenge to see who can complete it first. Group members can stay up-to-date on each other's progress by viewing the task status.",
  "inGameBenefits": "All the Benefits!",
  "inGameBenefitsDesc": "Group members get an exclusive Jackalope Mount, as well as full subscription benefits, including special monthly Equipment sets and the ability to buy Gems with Gold.",
- "inspireYourParty": "Create your Group Today!",
+ "createGroupToday": "Create Your Group Today!",
+ "readyToUpgrade": "Ready to Upgrade?",
  "letsMakeAccount": "First, let’s make you an account",
  "nameYourGroup": "Next, Name Your Group",
  "exampleGroupName": "Example: Avengers Academy",