[TG] update Ten's visual identity (#1796)

* update Ten logo

* - add new fonts, favicon and update global styles

tools/walletextension/frontend/next.config.js

@@ -4,6 +4,9 @@ const nextConfig = {
   output: "export",
   // distDir should be "../api/static" in production but .next in development
   distDir: process.env.NODE_ENV === "development" ? ".next" : "../api/static",
+  images: {
+    unoptimized: true,
+  },
 };
 
 module.exports = nextConfig;

tools/walletextension/frontend/src/components/layouts/header.tsx

@@ -6,13 +6,27 @@ import { HamburgerMenuIcon } from "@radix-ui/react-icons";
 import { useState } from "react";
 import { Button } from "../ui/button";
 import HealthIndicator from "../health-indicator";
+import Image from "next/image";
 
 export default function Header() {
   return (
     <div className="border-b">
       <div className="flex h-16 justify-between items-center px-4">
         <Link href="/">
-          <h1 className="text-40">TEN.</h1>
+          <Image
+            src="/assets/images/black_logotype.png"
+            alt="Logo"
+            width={150}
+            height={40}
+            className="cursor-pointer dark:hidden"
+          />
+          <Image
+            src="/assets/images/white_logotype.png"
+            alt="Logo"
+            width={150}
+            height={40}
+            className="cursor-pointer hidden dark:block"
+          />
         </Link>
         <div className="hidden md:flex items-center space-x-4">
           <MainNav className="mx-6" />

tools/walletextension/frontend/src/styles/fonts/DMSans/stylesheet.css

@@ -0,0 +1,47 @@
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-BlackItalic.ttf") format("truetype");
+  font-weight: 900;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-Bold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-Light.ttf") format("truetype");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-Regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-SemiBold.ttf") format("truetype");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}

tools/walletextension/frontend/src/styles/fonts/Quicksand/stylesheet.css

@@ -0,0 +1,39 @@
+@font-face {
+  font-family: "Quicksand";
+  src: url("Quicksand-Bold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Quicksand";
+  src: url("Quicksand-Light.ttf") format("truetype");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Quicksand";
+  src: url("Quicksand-Regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Quicksand";
+  src: url("Quicksand-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Quicksand";
+  src: url("Quicksand-SemiBold.ttf") format("truetype");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}

tools/walletextension/frontend/src/styles/globals.css

@@ -2,27 +2,22 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
-  @font-face {
-    font-family: "CloudSoft";
-    font-weight: 400;
-    src: url("./fonts/CloudSoft-Light_300.otf") format("opentype");
-  }
+@import "./fonts/DMSans/stylesheet.css";
+@import "./fonts/Quicksand/stylesheet.css";
 
-  @font-face {
-    font-family: "CloudSoft";
-    font-weight: 500;
-    src: url("./fonts/CloudSoft-Bold_700.otf") format("opentype");
+@layer base {
+  * {
+    @apply border-border;
   }
 
-  @font-face {
-    font-family: "CloudSoft";
-    font-weight: 700;
-    src: url("./fonts/CloudSoft-Bold_700.otf") format("opentype");
+  html {
+    font-family: "DMSans", sans-serif;
   }
 
-  html {
-    font-family: "CloudSoft", sans-serif;
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+    font-family: "DMSans", sans-serif;
   }
 
   h1,
@@ -32,6 +27,7 @@
   h5,
   h6 {
     font-weight: 500;
+    font-family: "Quicksand", sans-serif;
   }
 
   :root {
@@ -120,23 +116,6 @@
 }
 
 @layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-    font-feature-settings: "rlig" 1, "calt" 1;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-weight: 500;
-  }
-
   /* styles for docs */
   .prose ul {
     list-style: disc;