feat: login screen minor changes (#1799)

# Motivation

Requested login screen changes.

# Requested changes

- remove copyright
- remove about
- add link to dashboard
- add link to internetcomputer.org
- update "Total Value Locked" to "Total ICP Value Locked"

# Changes

- as requested
- use extra large breakpoints instead of large to avoid ugly layout
- bump gix cmp to use such constant

frontend/src/lib/components/login/LoginFooter.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
   import { i18n } from "$lib/stores/i18n";
-  import { BREAKPOINT_LARGE, IconGitHub } from "@dfinity/gix-components";
+  import {
+    BREAKPOINT_EXTRA_LARGE,
+    IconGitHub,
+    IconNorthEast,
+  } from "@dfinity/gix-components";
   import MenuMetrics from "$lib/components/common/MenuMetrics.svelte";
 
   export let presentation: "footer" | "menu" = "footer";
@@ -10,7 +14,9 @@
 
   // See comment in <LoginHeader />
   $: displayTvl =
-    innerWidth > 0 && innerWidth <= BREAKPOINT_LARGE && presentation === "menu";
+    innerWidth > 0 &&
+    innerWidth <= BREAKPOINT_EXTRA_LARGE &&
+    presentation === "menu";
 </script>
 
 <svelte:window bind:innerWidth />
@@ -25,7 +31,14 @@
     </div>
   {/if}
 
-  <span class="copyright">{$i18n.auth.copyright}</span>
+  <a
+    class="ic"
+    href="https://internetcomputer.org"
+    rel="noopener noreferrer"
+    target="_blank"
+    alt={$i18n.auth.internetcomputer_dot_org_link}
+    ><span>internetcomputer.org</span> <IconNorthEast /></a
+  >
 
   <a
     class="github"
@@ -54,7 +67,18 @@
 
     :global(svg) {
       vertical-align: bottom;
-      margin-right: var(--padding);
+    }
+
+    &.ic {
+      :global(svg) {
+        margin-left: var(--padding);
+      }
+    }
+
+    &.github {
+      :global(svg) {
+        margin-right: var(--padding);
+      }
     }
 
     &:active,
@@ -67,7 +91,7 @@
   .footer {
     display: none;
 
-    @include media.min-width(large) {
+    @include media.min-width(xlarge) {
       display: flex;
       justify-content: space-between;
 
@@ -85,9 +109,9 @@
     position: relative;
 
     display: flex;
-    flex-direction: column-reverse;
+    flex-direction: column;
 
-    .copyright {
+    .github {
       padding: var(--padding) var(--padding-3x);
       font-size: var(--font-size-small);
       @include text.truncate;

frontend/src/lib/components/login/LoginHeader.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import {
-    BREAKPOINT_LARGE,
+    BREAKPOINT_EXTRA_LARGE,
     ExternalLink,
     MenuButton,
     ThemeToggle,
@@ -15,7 +15,7 @@
 
   // We have to use JS to activate the TVL metrics in the header or menu to avoid to make calls twice
   // Easier than introducing stores and logic at this point since this can only happen on the login screen.
-  $: displayTvl = innerWidth > BREAKPOINT_LARGE && ENABLE_TVL;
+  $: displayTvl = innerWidth > BREAKPOINT_EXTRA_LARGE && ENABLE_TVL;
 </script>
 
 <svelte:window bind:innerWidth />
@@ -38,8 +38,8 @@
   />
 
   <div class="end">
-    <ExternalLink href="https://internetcomputer.org/nns"
-      >{$i18n.auth.about}</ExternalLink
+    <ExternalLink href="https://dashboard.internetcomputer.org/"
+      >{$i18n.auth.dashboard}</ExternalLink
     >
     <ExternalLink href="https://dashboard.internetcomputer.org/governance"
       >{$i18n.auth.voting_rewards}</ExternalLink
@@ -67,7 +67,7 @@
 
     padding: 0 var(--padding-2x);
 
-    @include media.min-width(large) {
+    @include media.min-width(xlarge) {
       padding: 0 var(--padding-8x);
     }
 
@@ -108,7 +108,7 @@
   .logo-nns {
     height: var(--padding-6x);
 
-    @include media.min-width(large) {
+    @include media.min-width(xlarge) {
       padding-top: var(--padding);
     }
 
@@ -131,7 +131,7 @@
       display: none;
     }
 
-    @include media.min-width(large) {
+    @include media.min-width(xlarge) {
       :global(a) {
         display: inline-block;
 

frontend/src/lib/components/login/LoginMenuItems.svelte

@@ -10,11 +10,11 @@
 
 <div class="menu-items">
   <MenuItem
-    href="https://internetcomputer.org/nns"
+    href="https://dashboard.internetcomputer.org/"
     rel="noopener noreferrer"
     target="_blank"
   >
-    <span>{$i18n.auth.about} <IconNorthEast /></span>
+    <span>{$i18n.auth.dashboard} <IconNorthEast /></span>
   </MenuItem>
 
   <MenuItem

frontend/src/lib/i18n/en.json

@@ -133,12 +133,12 @@
     "earn": "Vote & earn rewards",
     "launchpad": "SNS Launch Pad",
     "ic_logo": "Internet Computer logo",
-    "about": "About",
+    "dashboard": "Dashboard",
     "voting_rewards": "Voting rewards",
     "logo": "Network Nervous System logo",
-    "copyright": "© 2023 Internet Computer",
     "github_link": "Link to NNS-dapp repo on GitHub",
-    "background": "An abstract image for design and presentation purpose only"
+    "background": "An abstract image for design and presentation purpose only",
+    "internetcomputer_dot_org_link": "Link to internetcomputer.org"
   },
   "accounts": {
     "main": "Main",
@@ -765,7 +765,7 @@
     "5": "The proposal was adopted, but execution failed."
   },
   "metrics": {
-    "tvl": "Total Value Locked"
+    "tvl": "Total ICP Value Locked"
   },
   "ckbtc": {
     "title": "ckBTC",

frontend/src/lib/types/i18n.d.ts

@@ -141,12 +141,12 @@ interface I18nAuth {
   earn: string;
   launchpad: string;
   ic_logo: string;
-  about: string;
+  dashboard: string;
   voting_rewards: string;
   logo: string;
-  copyright: string;
   github_link: string;
   background: string;
+  internetcomputer_dot_org_link: string;
 }
 
 interface I18nAccounts {

frontend/src/routes/(login)/+layout.svelte

@@ -74,7 +74,7 @@
 
     padding: 0;
 
-    @include media.min-width(large) {
+    @include media.min-width(xlarge) {
       padding: 0 0 var(--login-footer-offset);
     }
   }