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/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.",