New footer (#2988)

* Update footer to new design * Update footer with changelog and security notice * Move mastodon icon * Make full-width instead of card * Intl extract, lint
2025-02-19 22:01:29 -08:00
parent df33ff7f60
commit db09ded836
10 changed files with 399 additions and 274 deletions
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -472,97 +472,88 @@
      <OrganizationCreateModal ref="modal_organization_creation" />
      <slot id="main" />
    </main>
-    <footer>
-      <div class="logo-info" role="region" aria-label="Modrinth information">
-        <BrandTextLogo
-          aria-hidden="true"
-          class="text-logo button-base mx-auto mb-4 lg:mx-0"
-          @click="developerModeIncrement()"
-        />
-        <p class="mb-4">
-          <IntlFormatted :message-id="footerMessages.openSource">
-            <template #github-link="{ children }">
-              <a
-                :target="$external()"
-                href="https://github.com/modrinth"
-                class="text-link"
-                rel="noopener"
-              >
-                <component :is="() => children" />
-              </a>
-            </template>
-          </IntlFormatted>
-        </p>
-        <p class="mb-4">
-          {{ config.public.branch }}@<a
-            :target="$external()"
-            :href="
-              'https://github.com/' +
-              config.public.owner +
-              '/' +
-              config.public.slug +
-              '/tree/' +
-              config.public.hash
-            "
-            class="text-link"
-            rel="noopener"
-            >{{ config.public.hash.substring(0, 7) }}</a
-          >
-        </p>
-        <p>© Rinth, Inc.</p>
-      </div>
-      <div class="links links-1" role="region" aria-label="Legal">
-        <h4 aria-hidden="true">{{ formatMessage(footerMessages.companyTitle) }}</h4>
-        <nuxt-link to="/legal/terms"> {{ formatMessage(footerMessages.terms) }}</nuxt-link>
-        <nuxt-link to="/legal/privacy"> {{ formatMessage(footerMessages.privacy) }}</nuxt-link>
-        <nuxt-link to="/legal/rules"> {{ formatMessage(footerMessages.rules) }}</nuxt-link>
-        <a :target="$external()" href="https://careers.modrinth.com">
-          {{ formatMessage(footerMessages.careers) }}
-          <span v-if="false" class="count-bubble">0</span>
-        </a>
-      </div>
-      <div class="links links-2" role="region" aria-label="Resources">
-        <h4 aria-hidden="true">{{ formatMessage(footerMessages.resourcesTitle) }}</h4>
-        <a :target="$external()" href="https://support.modrinth.com">
-          {{ formatMessage(footerMessages.support) }}
-        </a>
-        <a :target="$external()" href="https://blog.modrinth.com">
-          {{ formatMessage(footerMessages.blog) }}
-        </a>
-        <a :target="$external()" href="https://docs.modrinth.com">
-          {{ formatMessage(footerMessages.docs) }}
-        </a>
-        <a :target="$external()" href="https://status.modrinth.com">
-          {{ formatMessage(footerMessages.status) }}
-        </a>
-      </div>
-      <div class="links links-3" role="region" aria-label="Interact">
-        <h4 aria-hidden="true">{{ formatMessage(footerMessages.interactTitle) }}</h4>
-        <a rel="noopener" :target="$external()" href="https://discord.modrinth.com"> Discord </a>
-        <a rel="noopener" :target="$external()" href="https://x.com/modrinth"> X (Twitter) </a>
-        <a rel="noopener" :target="$external()" href="https://floss.social/@modrinth"> Mastodon </a>
-        <a rel="noopener" :target="$external()" href="https://crowdin.com/project/modrinth">
-          Crowdin
-        </a>
-      </div>
-      <div class="buttons">
-        <nuxt-link class="btn btn-outline btn-primary" to="/app">
-          <DownloadIcon aria-hidden="true" />
-          {{ formatMessage(messages.getModrinthApp) }}
-        </nuxt-link>
-        <button class="iconified-button raised-button" @click="changeTheme">
-          <MoonIcon v-if="$theme.active === 'light'" aria-hidden="true" />
-          <SunIcon v-else aria-hidden="true" />
-          {{ formatMessage(messages.changeTheme) }}
-        </button>
-        <nuxt-link class="iconified-button raised-button" to="/settings">
-          <SettingsIcon aria-hidden="true" />
-          {{ formatMessage(commonMessages.settingsLabel) }}
-        </nuxt-link>
-      </div>
-      <div class="not-affiliated-notice">
+    <footer class="experimental-styles-within">
+      <div class="flex justify-center p-6 text-center text-sm font-medium">
        {{ formatMessage(footerMessages.legalDisclaimer) }}
      </div>
+      <div class="footer-brand-background border-0 border-t-[1px] border-solid">
+        <div
+          class="mx-auto grid max-w-screen-xl grid-cols-1 flex-col gap-4 p-7 pb-24 text-primary sm:px-12 md:grid-cols-[1fr_2fr] md:py-12 lg:grid-cols-[auto_auto_auto_auto_auto]"
+        >
+          <div
+            class="flex flex-col items-center gap-3 md:items-start"
+            role="region"
+            aria-label="Modrinth information"
+          >
+            <BrandTextLogo
+              aria-hidden="true"
+              class="text-logo button-base h-6 w-auto text-contrast lg:h-8"
+              @click="developerModeIncrement()"
+            />
+            <div class="flex flex-wrap justify-center gap-px sm:-mx-2">
+              <ButtonStyled
+                v-for="(social, index) in socialLinks"
+                :key="`footer-social-${index}`"
+                circular
+                type="transparent"
+              >
+                <a
+                  v-tooltip="social.label"
+                  :href="social.href"
+                  target="_blank"
+                  :rel="`noopener${social.rel ? ` ${social.rel}` : ''}`"
+                >
+                  <component :is="social.icon" class="h-5 w-5" />
+                </a>
+              </ButtonStyled>
+            </div>
+            <div class="mt-auto flex flex-wrap justify-center gap-3 md:flex-col">
+              <p class="m-0">
+                <IntlFormatted :message-id="footerMessages.openSource">
+                  <template #github-link="{ children }">
+                    <a
+                      href="https://github.com/modrinth/code"
+                      class="text-brand hover:underline"
+                      target="_blank"
+                      rel="noopener"
+                    >
+                      <component :is="() => children" />
+                    </a>
+                  </template>
+                </IntlFormatted>
+              </p>
+              <p class="m-0">© 2024 Rinth, Inc.</p>
+            </div>
+          </div>
+          <div class="mt-4 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:contents">
+            <div
+              v-for="group in footerLinks"
+              :key="group.label"
+              class="flex flex-col items-center gap-3 sm:items-start"
+            >
+              <h3 class="m-0 text-base text-contrast">{{ group.label }}</h3>
+              <template v-for="item in group.links" :key="item.label">
+                <nuxt-link
+                  v-if="item.href.startsWith('/')"
+                  :to="item.href"
+                  class="w-fit hover:underline"
+                >
+                  {{ item.label }}
+                </nuxt-link>
+                <a
+                  v-else
+                  :href="item.href"
+                  class="w-fit hover:underline"
+                  target="_blank"
+                  rel="noopener"
+                >
+                  {{ item.label }}
+                </a>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
    </footer>
  </div>
 </template>
@@ -599,6 +590,12 @@ import {
  GlassesIcon,
  PaintBrushIcon,
  PackageOpenIcon,
+  DiscordIcon,
+  BlueskyIcon,
+  TumblrIcon,
+  TwitterIcon,
+  MastodonIcon,
+  GitHubIcon,
  XIcon as CrossIcon,
  ScaleIcon as ModerationIcon,
  BellIcon as NotificationIcon,
@@ -708,50 +705,6 @@ const footerMessages = defineMessages({
    id: "layout.footer.open-source",
    defaultMessage: "Modrinth is <github-link>open source</github-link>.",
  },
-  companyTitle: {
-    id: "layout.footer.company.title",
-    defaultMessage: "Company",
-  },
-  terms: {
-    id: "layout.footer.company.terms",
-    defaultMessage: "Terms",
-  },
-  privacy: {
-    id: "layout.footer.company.privacy",
-    defaultMessage: "Privacy",
-  },
-  rules: {
-    id: "layout.footer.company.rules",
-    defaultMessage: "Rules",
-  },
-  careers: {
-    id: "layout.footer.company.careers",
-    defaultMessage: "Careers",
-  },
-  resourcesTitle: {
-    id: "layout.footer.resources.title",
-    defaultMessage: "Resources",
-  },
-  support: {
-    id: "layout.footer.resources.support",
-    defaultMessage: "Support",
-  },
-  blog: {
-    id: "layout.footer.resources.blog",
-    defaultMessage: "Blog",
-  },
-  docs: {
-    id: "layout.footer.resources.docs",
-    defaultMessage: "Docs",
-  },
-  status: {
-    id: "layout.footer.resources.status",
-    defaultMessage: "Status",
-  },
-  interactTitle: {
-    id: "layout.footer.interact.title",
-    defaultMessage: "Interact",
-  },
  legalDisclaimer: {
    id: "layout.footer.legal-disclaimer",
    defaultMessage:
@@ -1023,6 +976,188 @@ const { cycle: changeTheme } = useTheme();
 function hideStagingBanner() {
  cosmetics.value.hideStagingBanner = true;
 }
+
+const socialLinks = [
+  {
+    label: formatMessage(
+      defineMessage({ id: "layout.footer.social.discord", defaultMessage: "Discord" }),
+    ),
+    href: "https://discord.modrinth.com",
+    icon: DiscordIcon,
+  },
+  {
+    label: formatMessage(
+      defineMessage({ id: "layout.footer.social.bluesky", defaultMessage: "Bluesky" }),
+    ),
+    href: "https://bsky.app/profile/modrinth.com",
+    icon: BlueskyIcon,
+  },
+  {
+    label: formatMessage(
+      defineMessage({ id: "layout.footer.social.mastodon", defaultMessage: "Mastodon" }),
+    ),
+    href: "https://floss.social/@modrinth",
+    icon: MastodonIcon,
+    rel: "me",
+  },
+  {
+    label: formatMessage(
+      defineMessage({ id: "layout.footer.social.tumblr", defaultMessage: "Tumblr" }),
+    ),
+    href: "https://tumblr.com/modrinth",
+    icon: TumblrIcon,
+  },
+  {
+    label: formatMessage(defineMessage({ id: "layout.footer.social.x", defaultMessage: "X" })),
+    href: "https://x.com/modrinth",
+    icon: TwitterIcon,
+  },
+  {
+    label: formatMessage(
+      defineMessage({ id: "layout.footer.social.github", defaultMessage: "GitHub" }),
+    ),
+    href: "https://github.com/modrinth",
+    icon: GitHubIcon,
+  },
+];
+
+const footerLinks = [
+  {
+    label: formatMessage(defineMessage({ id: "layout.footer.about", defaultMessage: "About" })),
+    links: [
+      {
+        href: "https://blog.modrinth.com",
+        label: formatMessage(
+          defineMessage({ id: "layout.footer.about.blog", defaultMessage: "Blog" }),
+        ),
+      },
+      {
+        href: "/news/changelog",
+        label: formatMessage(
+          defineMessage({ id: "layout.footer.about.changelog", defaultMessage: "Changelog" }),
+        ),
+      },
+      {
+        href: "https://status.modrinth.com",
+        label: formatMessage(
+          defineMessage({ id: "layout.footer.about.status", defaultMessage: "Status" }),
+        ),
+      },
+      {
+        href: "/legal/cmp-info",
+        label: formatMessage(
+          defineMessage({
+            id: "layout.footer.about.rewards-program",
+            defaultMessage: "Rewards Program",
+          }),
+        ),
+      },
+    ],
+  },
+  {
+    label: formatMessage(
+      defineMessage({ id: "layout.footer.products", defaultMessage: "Products" }),
+    ),
+    links: [
+      {
+        href: "/plus",
+        label: formatMessage(
+          defineMessage({ id: "layout.footer.products.plus", defaultMessage: "Modrinth+" }),
+        ),
+      },
+      {
+        href: "/app",
+        label: formatMessage(
+          defineMessage({ id: "layout.footer.products.app", defaultMessage: "Modrinth App" }),
+        ),
+      },
+      {
+        href: "/servers",
+        label: formatMessage(
+          defineMessage({
+            id: "layout.footer.products.servers",
+            defaultMessage: "Modrinth Servers",
+          }),
+        ),
+      },
+    ],
+  },
+  {
+    label: formatMessage(
+      defineMessage({ id: "layout.footer.resources", defaultMessage: "Resources" }),
+    ),
+    links: [
+      {
+        href: "https://support.modrinth.com",
+        label: formatMessage(
+          defineMessage({
+            id: "layout.footer.resources.help-center",
+            defaultMessage: "Help Center",
+          }),
+        ),
+      },
+      {
+        href: "https://crowdin.com/project/modrinth",
+        label: formatMessage(
+          defineMessage({ id: "layout.footer.resources.translate", defaultMessage: "Translate" }),
+        ),
+      },
+      {
+        href: "https://github.com/modrinth/code/issues",
+        label: formatMessage(
+          defineMessage({
+            id: "layout.footer.resources.report-issues",
+            defaultMessage: "Report issues",
+          }),
+        ),
+      },
+      {
+        href: "https://docs.modrinth.com/api/",
+        label: formatMessage(
+          defineMessage({
+            id: "layout.footer.resources.api-docs",
+            defaultMessage: "API documentation",
+          }),
+        ),
+      },
+    ],
+  },
+  {
+    label: formatMessage(defineMessage({ id: "layout.footer.legal", defaultMessage: "Legal" })),
+    links: [
+      {
+        href: "/legal/rules",
+        label: formatMessage(
+          defineMessage({ id: "layout.footer.legal.rules", defaultMessage: "Content Rules" }),
+        ),
+      },
+      {
+        href: "/legal/terms",
+        label: formatMessage(
+          defineMessage({ id: "layout.footer.legal.terms-of-use", defaultMessage: "Terms of Use" }),
+        ),
+      },
+      {
+        href: "/legal/privacy",
+        label: formatMessage(
+          defineMessage({
+            id: "layout.footer.legal.privacy-policy",
+            defaultMessage: "Privacy Policy",
+          }),
+        ),
+      },
+      {
+        href: "/legal/security",
+        label: formatMessage(
+          defineMessage({
+            id: "layout.footer.legal.security-notice",
+            defaultMessage: "Security Notice",
+          }),
+        ),
+      },
+    ],
+  },
+];
 </script>

 <style lang="scss">
@@ -1037,127 +1172,9 @@ function hideStagingBanner() {
    min-height: calc(100vh - var(--spacing-card-bg));
  }

-  @media screen and (max-width: 750px) {
-    margin-bottom: calc(var(--size-mobile-navbar-height) + 2rem);
-  }
-
  main {
    grid-area: main;
  }
-
-  footer {
-    margin: 6rem 0 2rem 0;
-    text-align: center;
-    display: grid;
-    grid-template:
-      "logo-info  logo-info  logo-info" auto
-      "links-1    links-2    links-3" auto
-      "buttons    buttons    buttons" auto
-      "notice     notice     notice" auto
-      / 1fr 1fr 1fr;
-    max-width: 1280px;
-
-    .logo-info {
-      margin-left: auto;
-      margin-right: auto;
-      max-width: 15rem;
-      margin-bottom: 1rem;
-      grid-area: logo-info;
-
-      .text-logo {
-        width: 10rem;
-        height: auto;
-      }
-    }
-
-    .links {
-      display: flex;
-      flex-direction: column;
-      margin-bottom: 1rem;
-
-      h4 {
-        color: var(--color-text-dark);
-        margin: 0 0 1rem 0;
-      }
-
-      a {
-        margin: 0 0 1rem 0;
-      }
-
-      &.links-1 {
-        grid-area: links-1;
-      }
-
-      &.links-2 {
-        grid-area: links-2;
-      }
-
-      &.links-3 {
-        grid-area: links-3;
-      }
-
-      .count-bubble {
-        font-size: 1rem;
-        border-radius: 5rem;
-        background: var(--color-brand);
-        color: var(--color-text-inverted);
-        padding: 0 0.35rem;
-        margin-left: 0.25rem;
-      }
-    }
-
-    .buttons {
-      margin-left: auto;
-      margin-right: auto;
-      grid-area: buttons;
-
-      button,
-      a {
-        margin-bottom: 0.5rem;
-        margin-left: auto;
-        margin-right: auto;
-      }
-    }
-
-    .not-affiliated-notice {
-      grid-area: notice;
-      font-size: var(--font-size-xs);
-      text-align: center;
-      font-weight: 500;
-      margin-top: var(--spacing-card-md);
-    }
-
-    @media screen and (min-width: 1024px) {
-      display: grid;
-      margin-inline: auto;
-      grid-template:
-        "logo-info  links-1 links-2 links-3 buttons" auto
-        "notice     notice  notice  notice  notice" auto;
-      text-align: unset;
-
-      .logo-info {
-        margin-right: 4rem;
-      }
-
-      .links {
-        margin-right: 4rem;
-      }
-
-      .buttons {
-        width: unset;
-        margin-left: 0;
-
-        button,
-        a {
-          margin-right: unset;
-        }
-      }
-
-      .not-affiliated-notice {
-        margin-top: 0;
-      }
-    }
-  }
 }

@media (min-width: 1024px) {
@@ -1445,5 +1462,10 @@ function hideStagingBanner() {
    display: flex;
  }
 }
+
+.footer-brand-background {
+  background: var(--brand-gradient-strong-bg);
+  border-color: var(--brand-gradient-border);
+}
 </style>
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -287,45 +287,87 @@
  "layout.banner.verify-email.title": {
    "message": "For security purposes, please verify your email address on Modrinth."
  },
-  "layout.footer.company.careers": {
-    "message": "Careers"
+  "layout.footer.about": {
+    "message": "About"
  },
-  "layout.footer.company.privacy": {
-    "message": "Privacy"
+  "layout.footer.about.blog": {
+    "message": "Blog"
  },
-  "layout.footer.company.rules": {
-    "message": "Rules"
+  "layout.footer.about.changelog": {
+    "message": "Changelog"
  },
-  "layout.footer.company.terms": {
-    "message": "Terms"
+  "layout.footer.about.rewards-program": {
+    "message": "Rewards Program"
  },
-  "layout.footer.company.title": {
-    "message": "Company"
+  "layout.footer.about.status": {
+    "message": "Status"
  },
-  "layout.footer.interact.title": {
-    "message": "Interact"
+  "layout.footer.legal": {
+    "message": "Legal"
  },
  "layout.footer.legal-disclaimer": {
    "message": "NOT AN OFFICIAL MINECRAFT SERVICE. NOT APPROVED BY OR ASSOCIATED WITH MOJANG OR MICROSOFT."
  },
+  "layout.footer.legal.privacy-policy": {
+    "message": "Privacy Policy"
+  },
+  "layout.footer.legal.rules": {
+    "message": "Content Rules"
+  },
+  "layout.footer.legal.security-notice": {
+    "message": "Security Notice"
+  },
+  "layout.footer.legal.terms-of-use": {
+    "message": "Terms of Use"
+  },
  "layout.footer.open-source": {
    "message": "Modrinth is <github-link>open source</github-link>."
  },
-  "layout.footer.resources.blog": {
-    "message": "Blog"
+  "layout.footer.products": {
+    "message": "Products"
  },
-  "layout.footer.resources.docs": {
-    "message": "Docs"
+  "layout.footer.products.app": {
+    "message": "Modrinth App"
  },
-  "layout.footer.resources.status": {
-    "message": "Status"
+  "layout.footer.products.plus": {
+    "message": "Modrinth+"
  },
-  "layout.footer.resources.support": {
-    "message": "Support"
+  "layout.footer.products.servers": {
+    "message": "Modrinth Servers"
  },
-  "layout.footer.resources.title": {
+  "layout.footer.resources": {
    "message": "Resources"
  },
+  "layout.footer.resources.api-docs": {
+    "message": "API documentation"
+  },
+  "layout.footer.resources.help-center": {
+    "message": "Help Center"
+  },
+  "layout.footer.resources.report-issues": {
+    "message": "Report issues"
+  },
+  "layout.footer.resources.translate": {
+    "message": "Translate"
+  },
+  "layout.footer.social.bluesky": {
+    "message": "Bluesky"
+  },
+  "layout.footer.social.discord": {
+    "message": "Discord"
+  },
+  "layout.footer.social.github": {
+    "message": "GitHub"
+  },
+  "layout.footer.social.mastodon": {
+    "message": "Mastodon"
+  },
+  "layout.footer.social.tumblr": {
+    "message": "Tumblr"
+  },
+  "layout.footer.social.x": {
+    "message": "X"
+  },
  "layout.menu-toggle.action": {
    "message": "Toggle menu"
  },
--- a/packages/assets/external/bluesky.svg
+++ b/packages/assets/external/bluesky.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.20232 2.85649C7.95386 4.92218 10.9135 9.11052 12.0001 11.3582C13.0868 9.11069 16.0462 4.92213 18.7978 2.85649C20.7832 1.36598 24 0.2127 24 3.88249C24 4.61539 23.5798 10.0393 23.3333 10.9198C22.4767 13.9812 19.355 14.762 16.5782 14.2894C21.432 15.1155 22.6667 17.8519 20.0001 20.5882C14.9357 25.785 12.7211 19.2843 12.1534 17.6186C12.0494 17.3132 12.0007 17.1703 12 17.2918C11.9993 17.1703 11.9506 17.3132 11.8466 17.6186C11.2791 19.2843 9.06454 25.7851 3.99987 20.5882C1.33323 17.8519 2.56794 15.1154 7.42179 14.2894C4.64492 14.762 1.5232 13.9812 0.666658 10.9198C0.420196 10.0392 0 4.61531 0 3.88249C0 0.2127 3.21689 1.36598 5.20218 2.85649H5.20232Z" fill="currentColor"/>
+</svg>
--- a/packages/assets/external/github.svg
+++ b/packages/assets/external/github.svg
@@ -0,0 +1,15 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3972_7229)">
+<g clip-path="url(#clip1_3972_7229)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0358 0C18.6517 0 24 5.5 24 12.3042C24 17.7432 20.5731 22.3472 15.8192 23.9767C15.2248 24.0992 15.0071 23.712 15.0071 23.3862C15.0071 23.101 15.0267 22.1232 15.0267 21.1045C18.3549 21.838 19.0479 19.6378 19.0479 19.6378C19.5828 18.2118 20.3753 17.8452 20.3753 17.8452C21.4646 17.0915 20.2959 17.0915 20.2959 17.0915C19.0876 17.173 18.4536 18.3545 18.4536 18.3545C17.3841 20.2285 15.6607 19.699 14.9674 19.373C14.8685 18.5785 14.5513 18.0285 14.2146 17.723C16.8691 17.4377 19.6619 16.3785 19.6619 11.6523C19.6619 10.3078 19.1868 9.20775 18.434 8.35225C18.5527 8.04675 18.9688 6.7835 18.3149 5.09275C18.3149 5.09275 17.3047 4.76675 15.0269 6.35575C14.0517 6.08642 13.046 5.9494 12.0358 5.94825C11.0256 5.94825 9.99575 6.091 9.04482 6.35575C6.76677 4.76675 5.75657 5.09275 5.75657 5.09275C5.10269 6.7835 5.51902 8.04675 5.6378 8.35225C4.86514 9.20775 4.40963 10.3078 4.40963 11.6523C4.40963 16.3785 7.20245 17.4172 9.87674 17.723C9.44082 18.11 9.06465 18.8432 9.06465 20.0045C9.06465 21.6545 9.08425 22.9787 9.08425 23.386C9.08425 23.712 8.86629 24.0992 8.27216 23.977C3.5182 22.347 0.091347 17.7432 0.091347 12.3042C0.0717551 5.5 5.43967 0 12.0358 0Z" fill="currentColor"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_3972_7229">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+<clipPath id="clip1_3972_7229">
+<rect width="24" height="24" fill="white" transform="matrix(-1 0 0 1 24 0)"/>
+</clipPath>
+</defs>
+</svg>
--- a/packages/assets/external/mastodon.svg
+++ b/packages/assets/external/mastodon.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M480,173.59c0-104.13-68.26-134.65-68.26-134.65C377.3,23.15,318.2,16.5,256.8,16h-1.51c-61.4.5-120.46,7.15-154.88,22.94,0,0-68.27,30.52-68.27,134.65,0,23.85-.46,52.35.29,82.59C34.91,358,51.11,458.37,145.32,483.29c43.43,11.49,80.73,13.89,110.76,12.24,54.47-3,85-19.42,85-19.42l-1.79-39.5s-38.93,12.27-82.64,10.77c-43.31-1.48-89-4.67-96-57.81a108.44,108.44,0,0,1-1-14.9,558.91,558.91,0,0,0,96.39,12.85c32.95,1.51,63.84-1.93,95.22-5.67,60.18-7.18,112.58-44.24,119.16-78.09C480.84,250.42,480,173.59,480,173.59ZM399.46,307.75h-50V185.38c0-25.8-10.86-38.89-32.58-38.89-24,0-36.06,15.53-36.06,46.24v67H231.16v-67c0-30.71-12-46.24-36.06-46.24-21.72,0-32.58,13.09-32.58,38.89V307.75h-50V181.67q0-38.65,19.75-61.39c13.6-15.15,31.4-22.92,53.51-22.92,25.58,0,44.95,9.82,57.75,29.48L256,147.69l12.45-20.85c12.81-19.66,32.17-29.48,57.75-29.48,22.11,0,39.91,7.77,53.51,22.92Q399.5,143,399.46,181.67Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M480,173.59c0-104.13-68.26-134.65-68.26-134.65C377.3,23.15,318.2,16.5,256.8,16h-1.51c-61.4.5-120.46,7.15-154.88,22.94,0,0-68.27,30.52-68.27,134.65,0,23.85-.46,52.35.29,82.59C34.91,358,51.11,458.37,145.32,483.29c43.43,11.49,80.73,13.89,110.76,12.24,54.47-3,85-19.42,85-19.42l-1.79-39.5s-38.93,12.27-82.64,10.77c-43.31-1.48-89-4.67-96-57.81a108.44,108.44,0,0,1-1-14.9,558.91,558.91,0,0,0,96.39,12.85c32.95,1.51,63.84-1.93,95.22-5.67,60.18-7.18,112.58-44.24,119.16-78.09C480.84,250.42,480,173.59,480,173.59ZM399.46,307.75h-50V185.38c0-25.8-10.86-38.89-32.58-38.89-24,0-36.06,15.53-36.06,46.24v67H231.16v-67c0-30.71-12-46.24-36.06-46.24-21.72,0-32.58,13.09-32.58,38.89V307.75h-50V181.67q0-38.65,19.75-61.39c13.6-15.15,31.4-22.92,53.51-22.92,25.58,0,44.95,9.82,57.75,29.48L256,147.69l12.45-20.85c12.81-19.66,32.17-29.48,57.75-29.48,22.11,0,39.91,7.77,53.51,22.92Q399.5,143,399.46,181.67Z" fill="currentColor"/></svg>
--- a/packages/assets/external/tumblr.svg
+++ b/packages/assets/external/tumblr.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3466_5793)">
+<path d="M18.7939 24H14.7856C11.1765 24 8.48678 22.1429 8.48678 17.7012V10.5855H5.20605V6.73219C8.81512 5.79709 10.3255 2.68972 10.4988 0H14.2471V6.10966H18.6205V10.5882H14.2471V16.7845C14.2471 18.6416 15.1848 19.2825 16.6768 19.2825H18.7939V24.0026V24Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_3466_5793">
+<rect width="13.5878" height="24" fill="white" transform="translate(5.20605)"/>
+</clipPath>
+</defs>
+</svg>
--- a/packages/assets/external/twitter.svg
+++ b/packages/assets/external/twitter.svg
@@ -1 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3564_5601)">
+<path d="M18.9641 1.3335H22.6441L14.5641 10.3864L24.0041 22.6668H16.5961L10.7961 15.2041L4.15609 22.6668H0.476094L9.03609 12.9842L-0.00390625 1.3335H7.58809L12.8281 8.15072L18.9641 1.3335ZM17.6761 20.5414H19.7161L6.51609 3.38024H4.32409L17.6761 20.5414Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_3564_5601">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/packages/assets/index.ts
+++ b/packages/assets/index.ts
@@ -13,14 +13,17 @@ import _SSOGoogleIcon from './external/sso/google.svg?component'
 import _SSOMicrosoftIcon from './external/sso/microsoft.svg?component'
 import _SSOSteamIcon from './external/sso/steam.svg?component'
 import _AppleIcon from './external/apple.svg?component'
+import _BlueskyIcon from './external/bluesky.svg?component'
 import _BuyMeACoffeeIcon from './external/bmac.svg?component'
 import _DiscordIcon from './external/discord.svg?component'
+import _GithubIcon from './external/github.svg?component'
 import _KoFiIcon from './external/kofi.svg?component'
 import _MastodonIcon from './external/mastodon.svg?component'
 import _OpenCollectiveIcon from './external/opencollective.svg?component'
 import _PatreonIcon from './external/patreon.svg?component'
 import _PayPalIcon from './external/paypal.svg?component'
 import _RedditIcon from './external/reddit.svg?component'
+import _TumblrIcon from './external/tumblr.svg?component'
 import _TwitterIcon from './external/twitter.svg?component'
 import _WindowsIcon from './external/windows.svg?component'
 import _YouTubeIcon from './external/youtube.svg?component'
@@ -209,7 +212,9 @@ export const SSOGoogleIcon = _SSOGoogleIcon
 export const SSOMicrosoftIcon = _SSOMicrosoftIcon
 export const SSOSteamIcon = _SSOSteamIcon
 export const AppleIcon = _AppleIcon
+export const BlueskyIcon = _BlueskyIcon
 export const BuyMeACoffeeIcon = _BuyMeACoffeeIcon
+export const GithubIcon = _GithubIcon
 export const DiscordIcon = _DiscordIcon
 export const KoFiIcon = _KoFiIcon
 export const MastodonIcon = _MastodonIcon
@@ -218,6 +223,7 @@ export const PatreonIcon = _PatreonIcon
 export const PayPalIcon = _PayPalIcon
 export const PyroIcon = _PyroIcon
 export const RedditIcon = _RedditIcon
+export const TumblrIcon = _TumblrIcon
 export const TwitterIcon = _TwitterIcon
 export const WindowsIcon = _WindowsIcon
 export const YouTubeIcon = _YouTubeIcon
--- a/packages/assets/styles/variables.scss
+++ b/packages/assets/styles/variables.scss
@@ -56,6 +56,11 @@
    rgba(68, 182, 138, 0.175) 0%,
    rgba(58, 250, 112, 0.125) 100%
  );
+  --brand-gradient-strong-bg: linear-gradient(
+    270deg,
+    rgba(68, 182, 138, 0.175) 0%,
+    rgba(36, 225, 91, 0.12) 100%
+  );
  --brand-gradient-button: rgba(255, 255, 255, 0.5);
  --brand-gradient-border: rgba(32, 64, 32, 0.15);
  --brand-gradient-fade-out-color: linear-gradient(to bottom, rgba(213, 235, 224, 0), #d0ece0 70%);
@@ -167,6 +172,7 @@ html {
  --shadow-card: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;

  --brand-gradient-bg: linear-gradient(0deg, rgba(14, 35, 19, 0.2) 0%, rgba(55, 137, 73, 0.1) 100%);
+  --brand-gradient-strong-bg: linear-gradient(270deg, #09110d 10%, #131f17 100%);
  --brand-gradient-button: rgba(255, 255, 255, 0.08);
  --brand-gradient-border: rgba(155, 255, 160, 0.08);
  --brand-gradient-fade-out-color: linear-gradient(to bottom, rgba(24, 30, 31, 0), #171d1e 80%);
@@ -205,6 +211,15 @@ html {
    rgba(22, 66, 51, 0.15) 0%,
    rgba(55, 137, 73, 0.1) 100%
  );
+  --brand-gradient-strong-bg: linear-gradient(
+    270deg,
+    rgba(9, 18, 14, 0.6) 10%,
+    rgba(19, 31, 23, 0.5) 100%
+  );
+}
+
+.retro-mode {
+  --brand-gradient-strong-bg: #3a3b38;
 }

 .experimental-styles-within {
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -32,6 +32,9 @@
  "button.upload-image": {
    "defaultMessage": "Upload image"
  },
+  "changelog.justNow": {
+    "defaultMessage": "Just now"
+  },
  "changelog.product.api": {
    "defaultMessage": "API"
  },