Site Footer Update (#14134)

* first pass

* second pass

* third pass

* fourth pass, not a lot of progress

* fifth pass, slowly gettin there

* breakpoint nonsense

* flexbox and breakpoint nonsense

* svg updates, css updates

* whitespace

* chore: merge upstream/develop

* style(breakpoints): added responsive breakpoints, social column alignment tweaks

* style(breakpoints): add xs-specific selectors and classes

* style: mobile footer

* style: mobile footer

* style: static landing page footer

* style: small tweaks to social layout

* fix(translations): update website/common/locales/de/gear.json to develop

* update(style): small updates

* update(style): cleaning up code

* update(style): cleaning up code

* update(style): mobile footer updates

* update(style): complete mobile footer & clean up code

* update(style): add tablet breakpoint and remove rogue terms link

website/client/src/assets/svg/facebook.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="8" height="16" viewBox="0 0 8 16">
+<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path fill-rule="evenodd" d="M7.145 8.006H4.903V16H1.58V8.006H0V5.182h1.58V3.354C1.58 2.045 2.202 0 4.933 0l2.461.01v2.742H5.608c-.291 0-.705.145-.705.77v1.66h2.533l-.291 2.824z"/>
+    <path d="M20,0H4C1.79,0,0,1.79,0,4V20c0,2.21,1.79,4,4,4H20c2.21,0,4-1.79,4-4V4c0-2.21-1.79-4-4-4Zm-3.72,6.66h-1.26c-1.24,0-1.63,.77-1.63,1.56v1.88h2.78l-.44,2.9h-2.33v7h-3.13v-7h-2.54v-2.9h2.54v-2.21c0-2.51,1.5-3.9,3.78-3.9,1.1,0,2.24,.2,2.24,.2v2.47Z" fill-rule="evenodd"/>
 </svg>

website/client/src/assets/svg/instagram.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path fill-rule="evenodd" d="M8 0c2.173 0 2.445.01 3.298.048.852.04 1.433.174 1.942.372.526.205.973.478 1.418.922.444.445.717.892.922 1.418.198.509.333 1.09.372 1.942C15.99 5.555 16 5.827 16 8s-.01 2.445-.048 3.298c-.04.852-.174 1.433-.372 1.942a3.924 3.924 0 0 1-.922 1.418 3.924 3.924 0 0 1-1.418.922c-.509.198-1.09.333-1.942.372-.853.04-1.125.048-3.298.048s-2.445-.009-3.298-.048c-.852-.04-1.433-.174-1.942-.372a3.924 3.924 0 0 1-1.418-.922A3.924 3.924 0 0 1 .42 13.24c-.198-.509-.333-1.09-.372-1.942C.01 10.445 0 10.173 0 8s.01-2.445.048-3.298C.088 3.85.222 3.269.42 2.76c.205-.526.478-.973.922-1.418A3.924 3.924 0 0 1 2.76.42C3.269.222 3.85.087 4.702.048 5.555.01 5.827 0 8 0zm0 3.892a4.108 4.108 0 1 0 0 8.216 4.108 4.108 0 0 0 0-8.216zm5.23-.162a.96.96 0 1 0-1.92 0 .96.96 0 0 0 1.92 0zM8 10.667a2.666 2.666 0 1 1 0-5.333 2.666 2.666 0 0 1 0 5.333z"/>
+  <path d="M14.67,12A2.67,2.67,0,1,1,12,9.33,2.67,2.67,0,0,1,14.67,12Zm3.89,0c0,1.16.1,3.66-.32,4.71a2.7,2.7,0,0,1-1.52,1.52c-1.06.42-3.55.33-4.72.33s-3.66.09-4.71-.33a2.65,2.65,0,0,1-1.52-1.52c-.42-1.05-.33-3.55-.33-4.71s-.09-3.67.33-4.72A2.65,2.65,0,0,1,7.29,5.76c1-.42,3.55-.32,4.71-.32a18,18,0,0,1,4.72.32,2.7,2.7,0,0,1,1.52,1.52C18.66,8.34,18.56,10.83,18.56,12ZM16.1,12A4.1,4.1,0,1,0,12,16.1,4.09,4.09,0,0,0,16.1,12Zm1.13-4.27a1,1,0,1,0-1,1A1,1,0,0,0,17.23,7.73ZM24,4V20a4,4,0,0,1-4,4H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H20A4,4,0,0,1,24,4ZM19.94,8.7a4.71,4.71,0,0,0-1.29-3.35A4.71,4.71,0,0,0,15.3,4.06C14,4,10,4,8.7,4.06A4.76,4.76,0,0,0,5.35,5.34,4.75,4.75,0,0,0,4.06,8.7C4,10,4,14,4.06,15.3a4.73,4.73,0,0,0,1.29,3.35A4.77,4.77,0,0,0,8.7,19.94c1.32.08,5.28.08,6.6,0a4.71,4.71,0,0,0,3.35-1.29,4.73,4.73,0,0,0,1.29-3.35C20,14,20,10,19.94,8.7Z" />
 </svg>

website/client/src/assets/svg/tumblr.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M20,0H4A4,4,0,0,0,0,4V20a4,4,0,0,0,4,4H20a4,4,0,0,0,4-4V4A4,4,0,0,0,20,0ZM16.68,19a4.47,4.47,0,0,1-3,1C9.86,20,9,17.22,9,15.61v-4.5H7.56a.31.31,0,0,1-.31-.32V8.67a.52.52,0,0,1,.35-.5,4,4,0,0,0,2.63-3.66c0-.34.21-.51.51-.51H13a.31.31,0,0,1,.32.31v3.6h2.59a.31.31,0,0,1,.31.31v2.55a.31.31,0,0,1-.31.32H13.25v4.16c0,1.07.74,1.67,2.13,1.12a.67.67,0,0,1,.4-.07.36.36,0,0,1,.23.25l.68,2C16.75,18.71,16.8,18.89,16.68,19Z" fill-rule="evenodd"/>
+</svg>

website/client/src/assets/svg/twitter.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="13" viewBox="0 0 16 13">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path fill-rule="evenodd" d="M14.362 3.238c.007.141.01.281.01.424 0 4.338-3.302 9.34-9.34 9.34A9.284 9.284 0 0 1 0 11.527c.257.029.518.045.783.045a6.576 6.576 0 0 0 4.076-1.404 3.288 3.288 0 0 1-3.065-2.28 3.312 3.312 0 0 0 1.481-.056A3.288 3.288 0 0 1 .642 4.613v-.041c.444.246.949.393 1.488.41A3.28 3.28 0 0 1 .67 2.25c0-.602.162-1.166.444-1.651a9.315 9.315 0 0 0 6.766 3.43A3.28 3.28 0 0 1 11.078 0c.943 0 1.797.398 2.395 1.035a6.565 6.565 0 0 0 2.085-.797 3.289 3.289 0 0 1-1.443 1.816A6.543 6.543 0 0 0 16 1.539a6.665 6.665 0 0 1-1.638 1.699"/>
+  <path d="M20,0H4A4,4,0,0,0,0,4V20a4,4,0,0,0,4,4H20a4,4,0,0,0,4-4V4A4,4,0,0,0,20,0ZM18.36,8.74c0,.14,0,.29,0,.43A9.34,9.34,0,0,1,4,17a6.85,6.85,0,0,0,.79,0,6.57,6.57,0,0,0,4.07-1.4A3.29,3.29,0,0,1,5.8,13.39a4.1,4.1,0,0,0,.62,0,3.49,3.49,0,0,0,.86-.11,3.28,3.28,0,0,1-2.63-3.22v0a3.35,3.35,0,0,0,1.48.42A3.29,3.29,0,0,1,4.67,7.76,3.22,3.22,0,0,1,5.12,6.1a9.3,9.3,0,0,0,6.76,3.43,3.67,3.67,0,0,1-.08-.75,3.28,3.28,0,0,1,5.67-2.24,6.54,6.54,0,0,0,2.08-.79,3.22,3.22,0,0,1-1.44,1.8A6.67,6.67,0,0,0,20,7.05,7.31,7.31,0,0,1,18.36,8.74Z" fill-rule="evenodd"/>
 </svg>

website/client/src/components/appFooter.vue

@@ -1,88 +1,105 @@
 <template>
-  <div class="row footer-row">
+  <div>
     <buy-gems-modal v-if="user" />
     <!--modify-inventory(v-if="isUserLoaded")-->
-    <footer class="col-12 expanded">
+    <footer>
-      <div class="row">
+      <!-- Product -->
-        <div class="col-12 col-md-2">
+      <div class="product">
-          <h3>
+        <h3>{{ $t('footerProduct') }}</h3>
+        <ul>
+          <li>
             <a
               href="https://itunes.apple.com/us/app/habitica/id994882113?ls=1&mt=8"
               target="_blank"
-            >{{ $t('mobileIOS') }}</a>
+            >{{ $t('mobileIOS') }}
-          </h3>
+            </a>
-          <h3>
+          </li>
+          <li>
             <a
               href="https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica"
               target="_blank"
-            >{{ $t('mobileAndroid') }}</a>
+            >{{ $t('mobileAndroid') }}
-          </h3>
+            </a>
-        </div>
+          </li>
-        <div class="col-12 col-md-2">
+          <li>
-          <h3>{{ $t('footerCompany') }}</h3>
+            <router-link to="/group-plans">
-          <ul>
+              {{ $t('groupPlans') }}
+            </router-link>
+          </li>
           <li>
             <router-link to="/static/features">
               {{ $t('companyAbout') }}
             </router-link>
           </li>
+        </ul>
+      </div>
+      <!-- Company -->
+      <div class="company">
+        <h3>{{ $t('footerCompany') }}</h3>
+        <ul>
           <li>
-              <a
+            <router-link to="/static/contact">
-                href="https://habitica.wordpress.com/"
+              {{ $t('contactUs') }}
-                target="_blank"
-              >{{ $t('companyBlog') }}</a>
-            </li>
-            <li>
-              <a
-                href="https://blog.habitrpg.com/"
-                target="_blank"
-              >{{ $t('tumblr') }}</a>
-            </li>
-            <li>
-              <router-link to="/static/faq">
-                {{ $t('FAQ') }}
             </router-link>
           </li>
-            <li>
-              <a
-                href="https://habitica.fandom.com/wiki/Whats_New"
-                target="_blank"
-              >{{ $t('oldNews') }}</a>
-            </li>
-            <!-- Commenting out merch page see https://github.com/HabitRPG/habitica/issues/12039
-            <li>
-              <router-link to="/static/merch">
-                {{ $t('merch') }}
-              </router-link>
-            </li>
-            -->
           <li>
             <router-link to="/static/press-kit">
               {{ $t('presskit') }}
             </router-link>
           </li>
           <li>
-              <router-link to="/static/contact">
+            <a
-                {{ $t('contactUs') }}
+              href="https://habitica.wordpress.com/"
-              </router-link>
+              target="_blank"
+            >{{ $t('companyBlog') }}
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://habitica.fandom.com/wiki/Whats_New"
+              target="_blank"
+            >{{ $t('oldNews') }}
+            </a>
           </li>
         </ul>
       </div>
-        <div class="col-12 col-md-2">
+      <!-- Community -->
+      <div class="community">
         <h3>{{ $t('footerCommunity') }}</h3>
         <ul>
           <li>
             <a
               target="_blank"
               href="/static/community-guidelines"
-              >{{ $t('communityGuidelines') }}</a>
+            >{{ $t('communityGuidelines') }}
+            </a>
           </li>
           <li>
             <router-link to="/hall/contributors">
               {{ $t('hall') }}
             </router-link>
           </li>
-            <li v-if="user">
+          <li>
+            <a
+              href="https://habitica.fandom.com/wiki/Contributing_to_Habitica"
+              target="_blank"
+            >{{ $t('companyContribute') }}
+            </a>
+          </li>
+        </ul>
+      </div>
+      <!-- Support -->
+      <div class="support">
+        <h3>{{ $t ('support') }}</h3>
+        <ul>
+          <li>
+            <router-link to="/static/faq">
+              {{ $t('FAQ') }}
+            </router-link>
+          </li>
+          <li
+            v-if="user"
+          >
             <a
               target="_blank"
               @click.prevent="openBugReportModal()"
@@ -90,7 +107,9 @@
               {{ $t('reportBug') }}
             </a>
           </li>
-            <li v-else>
+          <li
+            v-else
+          >
             <a
               href="mailto:admin@habitica.com?subject=Habitica Web Bug Report"
               target="_blank"
@@ -102,61 +121,78 @@
             <a
               href="https://docs.google.com/forms/d/e/1FAIpQLScPhrwq_7P1C6PTrI3lbvTsvqGyTNnGzp1ugi1Ml0PFee_p5g/viewform?usp=sf_link"
               target="_blank"
-              >{{ $t('requestFeature') }}</a>
+            >{{ $t('requestFeature') }}
-            </li>
+            </a>
-            <li v-html="$t('communityExtensions')"></li>
-            <li>
-              <a
-                href="https://www.facebook.com/Habitica"
-                target="_blank"
-              >{{ $t('communityFacebook') }}</a>
           </li>
           <li>
             <a
-                href="https://www.instagram.com/habitica"
+              href="https://habitica.fandom.com/"
               target="_blank"
-              >{{ $t('communityInstagram') }}</a>
+            >{{ $t('wiki') }}
+            </a>
           </li>
         </ul>
       </div>
-        <div class="col-12 col-md-6">
+      <!-- Developers -->
-          <div class="row">
+      <div class="developers">
-            <div class="col-6">
         <h3>{{ $t('footerDevs') }}</h3>
         <ul>
           <li>
             <a
               href="/apidoc"
               target="_blank"
-                  >{{ $t('APIv3') }}</a>
+            >{{ $t('APIv3') }}
+            </a>
           </li>
           <li>
             <a
               :href="getDataDisplayToolUrl"
               target="_blank"
-                  >{{ $t('dataDisplayTool') }}</a>
+            >{{ $t('dataDisplayTool') }}
+            </a>
           </li>
           <li>
             <a
               href="https://habitica.fandom.com/wiki/Guidance_for_Blacksmiths"
               target="_blank"
-                  >{{ $t('guidanceForBlacksmiths') }}</a>
+            >{{ $t('guidanceForBlacksmiths') }}
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://habitica.fandom.com/wiki/Extensions,_Add-Ons,_and_Customizations"
+              target="_blank"
+            >{{ $t('communityExtensions') }}
+            </a>
           </li>
         </ul>
       </div>
-            <div class="col-6 social">
+
+      <!-- Help Support Habitica -->
+      <div class="donate">
+        <div>
+          <h3>{{ $t('helpSupportHabitica') }}</h3>
+          <p class="donate-text">
+            {{ $t('donateText3') }}
+          </p>
+        </div>
+      </div>
+      <div class="donate-button">
+        <button
+          class="button btn-contribute"
+          @click="donate()"
+        >
+          <div class="text">
+            💜 {{ $t('companyDonate') }}
+          </div>
+        </button>
+      </div>
+
+      <!-- Social - Desktop/Tablet -->
+      <div class="social">
+        <div>
           <h3>{{ $t('footerSocial') }}</h3>
           <div class="icons">
-                <a
-                  class="social-circle"
-                  href="https://twitter.com/habitica"
-                  target="_blank"
-                >
-                  <div
-                    class="social-icon svg-icon"
-                    v-html="icons.twitter"
-                  ></div>
-                </a>
             <a
               class="social-circle"
               href="https://www.instagram.com/habitica/"
@@ -167,6 +203,16 @@
                 v-html="icons.instagram"
               ></div>
             </a>
+            <a
+              class="social-circle"
+              href="https://twitter.com/habitica"
+              target="_blank"
+            >
+              <div
+                class="social-icon svg-icon twitter"
+                v-html="icons.twitter"
+              ></div>
+            </a>
             <a
               class="social-circle"
               href="https://www.facebook.com/Habitica"
@@ -176,73 +222,85 @@
                 class="social-icon facebook svg-icon"
                 v-html="icons.facebook"
               ></div>
-                </a>
+            </a><a
-              </div>
+              class="social-circle"
-            </div>
+              href="https://www.tumblr.com/Habitica"
-          </div>
-          <div class="row">
-            <div class="col-12 col-md-8">
-              {{ $t('donateText3') }}
-            </div>
-            <div class="col-12 col-md-4">
-              <button
-                v-if="user"
-                class="btn btn-contribute btn-front btn-flat"
-                @click="donate()"
-              >
-                <div
-                  class="svg-icon heart"
-                  v-html="icons.heart"
-                ></div>
-                <div class="text">
-                  {{ $t('companyDonate') }}
-                </div>
-              </button>
-              <div
-                v-else
-                class="btn btn-contribute btn-front btn-flat"
-              >
-                <a
-                  href="https://habitica.fandom.com/wiki/Contributing_to_Habitica"
               target="_blank"
             >
               <div
-                    class="svg-icon heart"
+                class="social-icon tumblr svg-icon"
-                    v-html="icons.heart"
+                v-html="icons.tumblr"
               ></div>
-                  <div class="text">{{ $t('companyContribute') }}</div>
             </a>
           </div>
         </div>
       </div>
-        </div>
+
-      </div>
+      <div class="hr">
-      <div class="row">
+        <div>
-        <div class="col-12">
           <hr>
         </div>
       </div>
-      <div class="row">
+      <!-- Colophon -->
-        <div class="col-12 col-md-5 text-center text-md-left">
+      <div class=" copyright">
+        <div>
           © {{ currentYear }} Habitica. All rights reserved.
+        </div>
+      </div>
+      <div class="melior">
+        <div
+          class="logo svg-icon"
+          v-html="icons.gryphon"
+        ></div>
+      </div>
+      <!-- DESKTOP PRIVACY & TERMS -->
+      <div class="privacy-terms">
+        <span class="privacy-policy">
+          <a
+            target="_blank"
+            href="/static/privacy"
+          >{{ $t('privacy') }}</a>
+        </span>
+        <span class="terms">
+          <a
+            target="_blank"
+            href="/static/terms"
+          >{{ $t('terms') }}</a>
+        </span>
+      </div>
+      <!-- MOBILE PRIVACY & TERMS -->
+      <div class="privacy-policy mobile desktop">
+        <a
+          target="_blank"
+          href="/static/privacy"
+        >{{ $t('privacy') }}</a>
+      </div>
+      <div class="mobile-terms mobile desktop">
+        <a
+          target="_blank"
+          href="/static/terms"
+        >{{ $t('terms') }}</a>
+      </div>
+
       <div
         v-if="!IS_PRODUCTION && isUserLoaded"
-            class="debug float-left"
+        class="debug-toggle"
       >
         <button
-              class="btn btn-primary"
+          class="debug btn-primary"
           @click="debugMenuShown = !debugMenuShown"
         >
           Toggle Debug Menu
         </button>
         <div
           v-if="debugMenuShown"
-              class="debug-group"
+          class="debug-toggle debug-group"
         >
+          <div class="debug-pop">
             <a
               class="btn btn-secondary"
               @click="setHealthLow()"
-              >Health = 1</a>
+            >Reduce Health to 1</a>
             <a
               class="btn btn-secondary"
               @click="addMissedDay(1)"
@@ -300,188 +358,435 @@
               class="btn btn-secondary"
               @click="makeAdmin()"
             >Make Admin</a>
-              <a
-                class="btn btn-secondary"
-                @click="openModifyInventoryModal()"
-              >Modify Inventory</a>
           </div>
         </div>
       </div>
-        <div class="col-12 col-md-2 text-center">
-          <div
-            class="logo svg-icon"
-            v-html="icons.gryphon"
-          ></div>
-        </div>
-        <div class="col-12 col-md-5 text-center text-md-right my-1">
-          <span class="ml-4">
-            <a
-              target="_blank"
-              href="/static/privacy"
-            >{{ $t('privacy') }}</a>
-          </span>
-          <span class="ml-4">
-            <a
-              target="_blank"
-              href="/static/terms"
-            >{{ $t('terms') }}</a>
-          </span>
-        </div>
-      </div>
     </footer>
   </div>
 </template>
 
 <style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
 .footer-row {
   margin: 0;
   flex: 0 1 auto;
   z-index: 10;
 }
-footer {
+
-  color: #c3c0c7;
+button {
-  padding-bottom: 3em;
+  border: none;
-  a {
+  border-radius: 4px;
-    color: #2995cd;
+  text-align: center;
-  }
+  line-height: 1.71;
-}
+  font-weight: 700;
-h3 {
+  font-size: .875rem;
-  color: #878190;
+  margin-bottom: 1rem;
+  padding: .5rem 1rem;
+  box-shadow: 0 1px 3px 0 rgb(26 24 29 / 12%), 0 1px 2px 0 rgb(26 24 29 / 24%);
 }
+
 ul {
-  padding-left: 0;
+  list-style: none;
-  list-style-type: none;
+  margin: 0;
+  padding: 0;
 }
+
 li {
-  margin-bottom: 0.5em;
+  margin: 0 0 .5rem 0;
+  padding: 0;
 }
-.social {
+
-  h3 {
+.product { grid-area: product; }
-    text-align: right;
+.company { grid-area: company; }
-  }
+.community { grid-area: community; }
-}
+.support { grid-area: support; }
-.icons {
+.developers { grid-area: developers; }
+
+// row 2
+.donate {
+  align-items: flex-end;
+  display: flex;
+  justify-content: start;
+  grid-area: donate;
+  padding-top: 12px;
+}
+.donate-text {
+  grid-area: donate-text;
+  font-size: 0.75rem;
+  font-color: $gray-100;
+  line-height: 1.33;
   display: flex;
-  justify-content: flex-end;
   flex-shrink: 1;
 }
-// smaller than desktop
+.donate-button {
-@media only screen and (max-width: 992px) {
+  grid-area: donate-button;
-  .social-circle {
+  padding-top: 44px;
-    height: 32px !important;
-    width: 32px !important;
-    margin-left: 0.75em !important;
  }
-}
+.social {
-//mobile view
+  align-items: flex-start;
-@media screen and (max-width: 770px) {
-  .footer-main {
   display: flex;
-    flex-direction: column;
+  justify-content: start;
+  grid-area: social;
+  padding-top: 12px;
 }
-  .logo-container {
+
-    order: 1;
+// row 3
+.hr {
+  color: $gray-400;
+  grid-area: hr;
 }
+
+// row 4
+.copyright {
+  grid-area: copyright;
+  line-height: 1.71;
 }
-.social-circle {
+.melior { grid-area: melior; }
-  width: 40px;
+.privacy-terms {
-  height: 40px;
+  grid-area: privacy-terms;
-  border-radius: 50%;
-  background-color: #c3c0c7;
   display: flex;
-  margin-left: 1em;
+  justify-content: end;
+  line-height: 1.71;
+}
+.terms {
+  padding-left: 16px;
+  }
+  .mobile {
+    display: none;
+  }
+
+// row 5
+.debug-toggle { grid-area: debug-toggle;}
+.debog-pop {
+  grid-area: debug-pop;
+   }
+
+footer {
+  background-color: $gray-500;
+  color: $gray-50;
+  padding: 32px 142px 40px;
+  a {
+    color: $gray-50;
+  }
+  a:hover {
+    color: $purple-300;
+    text-decoration: underline;
+  }
+  a:not([href]):not([class]):hover { // needed to make "report a bug"'s hover state correct
+    color: $purple-300;
+    text-decoration: underline;
+  }
+
+  column-gap: 1.5rem;
+  display: grid;
+  grid-template-areas:
+    "product company community support developers"
+    "donate donate donate donate-button social"
+    "donate-text donate-text donate-text donate-button social"
+    "hr hr hr hr hr"
+    "copyright copyright melior privacy-terms privacy-terms"
+    "debug-toggle debug-toggle debug-toggle blank blank";
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: auto;
+
+}
+
+h3 {
+  font-weight: bold;
+}
+
+.icons {
+  display: flex;
+  height: 24px;
+  padding-top: 4px;
+}
+
+.social-circle {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  background-color: $gray-50;
+  display: flex;
+  margin: 0 8px 0 8px;
   &:first-child {
     margin-left: 0;
   }
-  &:hover {
+  &:last-child {
-    background-color: #a5a1ac;
+    margin-right: 0;
-  }
-  .social-icon {
-    color: #e1e0e3;
-    width: 16px;
-    margin: auto;
   }
 }
+
 .logo {
   width: 24px;
   height: 24px;
-  margin: 0 auto;
+  margin: 0px auto 5px;
-  color: #e1e0e3;
+  color: $gray-200;
 }
+
+.terms {
+  padding-left: 16px;
+  display:flex;
+  justify-content: end;
+}
+
+.desktop {
+  display: none;
+}
+
+.debug {
+  margin-top: 16px;
+  display: flex;
+  justify-content: center;
+}
+
 .debug-group {
-  position: absolute;
-  background: #fff;
-  top: -300px;
-  border-radius: 2px;
-  padding: 2em;
-}
-.btn-contribute {
-  background: #c3c0c7;
-  box-shadow: none;
   border-radius: 4px;
-  font-family: Roboto Condensed, sans-serif;
+  padding: 16px;
+  box-shadow: 0 1px 3px 0 rgba(26, 24, 29, 0.12), 0 1px 2px 0 rgba(26, 24, 29, 0.24);
+  font-weight: 700;
+  background-color: $gray-600;
+
+ .btn {
+  margin: 2px;
+  }
+}
+
+.btn-contribute {
+  background: $white;
+  border-radius: 2px;
+  width: 175px;
+  height: 32px;
+  color: $gray-50;
+  text-align: center;
+  vertical-align: middle;
+  padding: 0;
+  margin: 0;
     &:hover {
-    background: #a5a1ac;
+      color:$purple-300;
-    .text {
+      box-shadow: 0 3px 6px 0 rgba(26, 24, 29, 0.16), 0 3px 6px 0 rgba(26, 24, 29, 0.24);
-      color: white;
+    &:active:not(:disabled) {
+      color:$purple-300;
+      border: 1px solid $purple-400;
+      box-shadow: 0 3px 6px 0 rgba(26, 24, 29, 0.16), 0 3px 6px 0 rgba(26, 24, 29, 0.24);
     }
   }
+
   a {
     display: flex;
   }
-  .heart {
+
-    max-height: 25px;
+  .text{
-    width: 18px;
-    margin-right: 0.5em;
-    margin-bottom: 0.2em;
-  }
-  .text,
-  .heart {
     display: inline-block;
     vertical-align: bottom;
   }
 }
+
+// media breakpoints
+
+// Small devices (landscape phones, 576px and under)
+@media (max-width: 767.99px) {
+
+  // row 1
+  .product {
+    grid-area: product;
+    padding-top: 12px;
+     }
+  .company {
+    grid-area: company;
+    padding-top: 12px;
+  }
+
+  //row 2
+  .community {
+    grid-area: community;
+    padding-top: 12px;
+  }
+  .support {
+    grid-area: support;
+    padding-top: 12px;
+  }
+
+  //row 3
+  .developers {
+    grid-area: developers;
+    padding-top: 12px;
+  }
+  .social {
+    grid-area: social;
+    padding-top: 12px;
+  }
+
+  // row 4
+  .donate {
+    grid-area: donate;
+  }
+  // row 5
+  .donate-text {
+    grid-area: donate-text;
+  }
+  //row 6
+  .donate-button {
+    grid-area: donate-button;
+    padding-top: 0px;
+   }
+
+  // row 7
+  .hr {
+    grid-area: hr;
+    padding-top: 8px;
+  }
+
+  // row 8
+  .copyright {
+    grid-area: copyright;
+    display: flex;
+    justify-content: center;
+  }
+  // row 9
+  .privacy-terms {
+    display: none;
+  }
+  .desktop {
+    display: none;
+  }
+  .privacy-policy {
+    grid-area: privacy-policy;
+    display: grid;
+    justify-content: center;
+    line-height: 1.71;
+    padding-top: 10px;
+  }
+  //row 10
+  .mobile-terms {
+    grid-area: mobile-terms;
+    display:grid;
+    justify-content: center;
+    padding: 8px 0px 16px 0px;
+  }
+  // row 11
+  .melior { grid-area: melior; }
+
+  // row 12
+  .debug-toggle {
+    grid-area: debug-toggle;
+    width: 100%;
+  }
+
+  footer {
+    padding: 24px 16px;
+    a:not([href]):not([class]):hover { // needed to make "report a bug"'s hover state correct
+      color: $purple-300;
+      text-decoration: underline;
+    }
+
+    column-gap: 1.5rem;
+    display: grid;
+    grid-template-areas:
+      "product company"
+      "community support"
+      "developers social"
+      "donate donate"
+      "donate-text donate-text"
+      "donate-button donate-button"
+      "hr hr"
+      "copyright copyright"
+      "privacy-policy privacy-policy"
+      "mobile-terms mobile-terms"
+      "melior melior"
+      "debug-toggle debug-toggle";
+    grid-template-columns: repeat(2, 2fr);
+    grid-template-rows: auto;
+    }
+  .btn-contribute {
+    width: 100%;
+  }
+  .debug {
+    width: 100%;
+  }
+  .social-circle {
+    margin: 0 6px 0 6px;
+      &:first-child {
+    margin-left: 0;
+    }
+      &:last-child {
+    margin-right: 0;
+    }
+  }
+}
+
+// Medium devices (tablets, 768px and under)
+@media (max-width: 1024px) and (min-width: 768px) {
+  footer {
+    padding: 24px 24px;
+    a:not([href]):not([class]):hover { // needed to make "report a bug"'s hover state correct
+      color: $purple-300;
+      text-decoration: underline;
+    }
+  }
+
+  .desktop {
+   display: none;
+  }
+ }
 </style>
 
 <style lang="scss">
-.heart svg {
+.instagram svg {
-  margin-top: 0.1em;
+  background-color: #e1e0e3;
+  fill: #878190;
+  height: 24px;
+  width: 24px;
+    &:hover {
+    fill: #6133B4;
   }
+}
+
+.twitter svg {
+  background-color: #e1e0e3;
+  fill: #878190;
+  height: 24px;
+  width: 24px;
+    &:hover {
+    fill: #6133B4;
+  }
+}
+
 .facebook svg {
-  width: 10px;
+  background-color: #e1e0e3;
-  margin: 0 auto;
+  fill: #878190;
+  height: 24px;
+  width: 24px;
+    &:hover {
+    fill: #6133B4;
   }
-footer {
-  &.expanded {
-    padding-left: 6em;
-    padding-right: 6em;
-    padding-top: 3em;
-    background: #e1e0e3;
-    color: #878190;
-    min-height: 408px;
-    a {
-      color: #878190;
-    }
-    .logo {
-      color: #c3c0c7;
-    }
-    @media screen and (max-width: 770px) {
-      padding-left: 1em;
-      padding-right: 1em;
 }
+
+.tumblr svg {
+  background-color: #e1e0e3;
+  fill: #878190;
+  height: 24px;
+  width: 24px;
+      &:hover {
+    fill: #6133B4;
   }
 }
 </style>
 
 <script>
+// modules
 import axios from 'axios';
 import moment from 'moment';
-import { mapState } from '@/libs/store';
+
+// images
 import gryphon from '@/assets/svg/gryphon.svg';
 import twitter from '@/assets/svg/twitter.svg';
 import facebook from '@/assets/svg/facebook.svg';
 import instagram from '@/assets/svg/instagram.svg';
+import tumblr from '@/assets/svg/tumblr.svg';
 import heart from '@/assets/svg/heart.svg';
+
+// components & modals
+import { mapState } from '@/libs/store';
 import buyGemsModal from './payments/buyGemsModal.vue';
 import reportBug from '@/mixins/reportBug.js';
 
@@ -498,6 +803,7 @@ export default {
         twitter,
         facebook,
         instagram,
+        tumblr,
         heart,
       }),
       debugMenuShown: false,
@@ -592,9 +898,6 @@ export default {
       // Reload the website then go to Help > Admin Panel to set contributor level, etc.');
       // @TODO: sync()
     },
-    openModifyInventoryModal () {
-      this.$root.$emit('bv::show::modal', 'modify-inventory');
-    },
     donate () {
       this.$root.$emit('bv::show::modal', 'buy-gems', { alreadyTracked: true });
     },

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

@@ -33,7 +33,7 @@
   @import '~@/assets/scss/colors.scss';
 
   .home-header {
-    background: #6133b4 !important;
+    background: $purple-300 !important;
     position: static;
     box-shadow: none !important;
     height: 100px !important;
@@ -46,13 +46,13 @@
 
     .nav-item a {
       font-size: 14px !important;
-      color: #d5c8ff !important;
+      color: $purple-600 !important;
       padding-top: 2.8em !important;
     }
 
     .nav-item a:hover {
       background: transparent !important;
-      color: #fff !important;
+      color: $white !important;
     }
 
     .nav-item .nav-link {
@@ -73,20 +73,20 @@
   }
 
   .white-header {
-    background: #fff !important;
+    background: $white !important;
-    background-color: #fff !important;
+    background-color: $white !important;
 
     a {
-      color: #271b3d !important;
+      color: $header-dark-background !important;
     }
 
     a:hover {
-      color: #fff !important;
+      color: $white !important;
     }
   }
 
   #purple-footer {
-    background-color: #271b3d;
+    background-color: $header-dark-background;
 
     .row {
       margin: 0;
@@ -94,19 +94,91 @@
 
     footer, footer a {
       background: transparent;
-      color: #d5c8ff;
+      color: $purple-500;
+      &:hover {
+        color: $white;
+      }
+    }
+
+    h3 {
+      color: $purple-400;
+    }
+
+    hr {
+      border-top-color: $purple-100;
+    }
+
+    .donate-text {
+      color: $purple-500;
     }
 
     .logo {
-      color: #bda8ff;
+      color: $purple-300;
     }
 
-    .social-circle, .btn-contribute {
+    .colophon {
-      background: #36205d;
+      color: $purple-500;
-      color: #bda8ff;
+    }
 
-      .svg-icon {
+    .social-circle {
-        color: #bda8ff;
+      background: $purple-50;
+      color: $purple-500;
+
+      .instagram svg {
+        background-color: $purple-50;
+        fill: $purple-500;
+        &:hover {
+          fill: $white;
+        }
+      }
+
+      .twitter svg {
+        background-color: $purple-50;
+        fill: $purple-500;
+        &:hover {
+          fill: $white;
+        }
+      }
+
+      .facebook svg {
+        background-color: $purple-50;
+        fill: $purple-500;
+        &:hover {
+          fill: $white;
+        }
+      }
+
+      .tumblr svg {
+        background-color: $purple-50;
+        fill: $purple-500;
+        &:hover {
+          fill: $white;
+        }
+      }
+    }
+    .btn-contribute {
+      background: $white;
+      box-shadow: none;
+      border-radius: 2px;
+      width: 175px;
+      height: 32px;
+      color: $gray-50;
+      text-align: center;
+      line-height: 1.71;
+      font-weight: bold;
+      font-size: 0.875rem;
+      vertical-align: middle;
+      padding: 0;
+      margin: 32px 0 32px 24px;
+      box-shadow: 0 1px 3px 0 rgba(26, 24, 29, 0.12), 0 1px 2px 0 rgba(26, 24, 29, 0.24);
+
+      a {
+        display: flex;
+      }
+
+      .text{
+        display: inline-block;
+        vertical-align: bottom;
       }
     }
   }
@@ -142,7 +214,7 @@
 
 <style lang="scss" scoped>
   #bottom-wrap.purple-4 {
-    background-color: #271b3d;
+    background-color: #271B3D;
   }
 
   #bottom-wrap {

website/common/locales/en/front.json

@@ -3,13 +3,13 @@
   "termsAndAgreement": "By clicking the button below, you are indicating that you have read and agree to the <a href='/static/terms'>Terms of Service</a> and <a href='/static/privacy'>Privacy Policy</a>.",
   "chores": "Chores",
   "clearBrowserData": "Clear Browser Data",
-  "communityExtensions": "<a href='https://habitica.fandom.com/wiki/Extensions,_Add-Ons,_and_Customizations' target='_blank'>Add-ons & Extensions</a>",
+  "communityExtensions": "Add-ons & Extensions",
   "communityFacebook": "Facebook",
   "communityInstagram": "Instagram",
   "companyAbout": "How It Works",
   "companyBlog": "Blog",
-  "companyContribute": "Contribute",
+  "companyContribute": "Contributing to Habitica",
-  "companyDonate": "Donate",
+  "companyDonate": "Donate to Habitica",
   "forgotPassword": "Forgot Password?",
   "emailNewPass": "Email a Password Reset Link",
   "forgotPasswordSteps": "Enter your username or the email address you used to register your Habitica account.",
@@ -18,6 +18,7 @@
   "footerCommunity": "Community",
   "footerCompany": "Company",
   "footerMobile": "Mobile",
+  "footerProduct": "Product",
   "footerSocial": "Social",
   "free": "Join for free",
   "guidanceForBlacksmiths": "Guidance for Blacksmiths",
@@ -51,8 +52,8 @@
   "marketing4Lead3-1": "Want to gamify your life?",
   "marketing4Lead3-2": "Interested in running a group in education, wellness, and more?",
   "marketing4Lead3Title": "Gamify Everything",
-  "mobileAndroid": "Android",
+  "mobileAndroid": "Android App",
-  "mobileIOS": "iOS",
+  "mobileIOS": "iOS App",
   "oldNews": "News",
   "newsArchive": "News archive on Wikia (multilingual)",
   "setNewPass": "Set New Password",

website/common/locales/en/npc.json

@@ -85,7 +85,8 @@
   "newBaileyUpdate": "New Bailey Update!",
   "tellMeLater": "Tell Me Later",
   "dismissAlert": "Dismiss This Alert",
-  "donateText3": "Habitica is an open source project that depends on our users for support. The money you spend on gems helps us keep the servers running, maintain a small staff, develop new features, and provide incentives for our volunteer programmers. Thank you for your generosity!",
+  "donateText3": "Habitica is an open source project that depends on our users for support. The money you spend on gems helps us keep the servers running, maintain a small staff, develop new features, and provide incentives for our volunteers",
+  "helpSupportHabitica": "Help Support Habitica",
   "card": "Credit Card",
   "paymentMethods": "Purchase using",
   "paymentSuccessful": "Your payment was successful!",

website/common/locales/en/subscriber.json

@@ -172,7 +172,7 @@
     "couponCodeRequired": "The coupon code is required.",
     "subCanceledTitle": "Subscription Canceled",
     "choosePaymentMethod": "Choose your payment method",
-    "support": "SUPPORT",
+    "support": "Support",
     "supportHabitica": "Support Habitica",
     "gemBenefitLeadin": "What can you buy with Gems?",
     "gemBenefit1": "Unique and fashionable costumes for your avatar.",