Merge pull request #12 from verdigado/feature/title-icon-and-font

Update Title, Icon and add Font

apps/web/public/static/termite.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 288">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #000;
+        stroke-width: 0px;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M252,69.95v-15.95c0-9.94-8.06-18-18-18H54c-9.94,0-18,8.06-18,18v16.12c-8.71,6.61-13.66,17.77-11.52,29.53l11.52,53.34v63.43c0,19.64,15.92,35.57,35.57,35.57h144.28c19.97,0,36.15-16.19,36.15-36.15v-62.85l11.58-53.67c2.13-11.73-2.85-22.86-11.58-29.39ZM245.91,95.88l-8.44,39.12h-22.25c-1.85-5.24-6.84-9-12.72-9s-10.86,3.76-12.72,9h-91.57c-1.85-5.24-6.84-9-12.72-9s-10.86,3.76-12.72,9h-22.26l-8.38-38.79c-.78-4.78,1.34-8.19,2.69-9.81,1.37-1.64,4.42-4.4,9.4-4.4h179.85c4.87,0,7.85,2.69,9.19,4.3,1.32,1.58,3.39,4.91,2.63,9.58ZM234,215.85c0,10.01-8.14,18.15-18.15,18.15H71.57c-9.69,0-17.57-7.88-17.57-17.57v-63.43h18.78c1.85,5.24,6.84,9,12.72,9s10.86-3.76,12.72-9h91.57c1.85,5.24,6.84,9,12.72,9s10.86-3.76,12.72-9h18.78v62.85Z"/>
+</svg>

apps/web/src/app/[locale]/(admin)/layout.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import { MobileNavigation } from "@/app/[locale]/(admin)/mobile-navigation";
 import { ProBadge } from "@/app/[locale]/(admin)/pro-badge";
 import { Sidebar } from "@/app/[locale]/(admin)/sidebar";
-import { LogoLink } from "@/app/components/logo-link";
+import { LogoLinkTermite } from "@/app/components/logo-link-termite";
 
 export default async function Layout({
   children,
@@ -18,8 +18,10 @@ export default async function Layout({
           "fixed inset-y-0 z-50 hidden w-72 shrink-0 flex-col gap-y-4 overflow-y-auto p-6 py-5 md:flex",
         )}
       >
-        <div className="flex w-full items-center justify-between gap-4">
-          <LogoLink />
+        <div className="flex w-full items-center justify-start gap-4">
+          <LogoLinkTermite />
+          <h1 className="gruene-type text-3xl">TERMITE</h1>
+          <div className="flex-grow" />
           <ProBadge />
         </div>
         <Sidebar />

apps/web/src/app/components/logo-link-termite.tsx

@@ -0,0 +1,14 @@
+import Link from "next/link";
+
+export function LogoLinkTermite() {
+  return (
+    <Link
+      className="inline-block transition-transform active:translate-y-1"
+      href="/"
+    >
+      <svg className="h-[40px]" id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 288">
+        <path style={{fill: '#000', strokeWidth: '0px'}} d="M252,69.95v-15.95c0-9.94-8.06-18-18-18H54c-9.94,0-18,8.06-18,18v16.12c-8.71,6.61-13.66,17.77-11.52,29.53l11.52,53.34v63.43c0,19.64,15.92,35.57,35.57,35.57h144.28c19.97,0,36.15-16.19,36.15-36.15v-62.85l11.58-53.67c2.13-11.73-2.85-22.86-11.58-29.39ZM245.91,95.88l-8.44,39.12h-22.25c-1.85-5.24-6.84-9-12.72-9s-10.86,3.76-12.72,9h-91.57c-1.85-5.24-6.84-9-12.72-9s-10.86,3.76-12.72,9h-22.26l-8.38-38.79c-.78-4.78,1.34-8.19,2.69-9.81,1.37-1.64,4.42-4.4,9.4-4.4h179.85c4.87,0,7.85,2.69,9.19,4.3,1.32,1.58,3.39,4.91,2.63,9.58ZM234,215.85c0,10.01-8.14,18.15-18.15,18.15H71.57c-9.69,0-17.57-7.88-17.57-17.57v-63.43h18.78c1.85,5.24,6.84,9,12.72,9s10.86-3.76,12.72-9h91.57c1.85,5.24,6.84,9,12.72,9s10.86-3.76,12.72-9h18.78v62.85Z"/>
+      </svg>
+    </Link>
+  );
+}

apps/web/src/verdigado-styles.css

@@ -1,3 +1,23 @@
+/* FONTS */
+@font-face {
+    font-family: 'GrueneType';
+    src: url('/fonts/GrueneType/GrueneType.eot');
+    src:
+      url('/static/fonts/GrueneType/GrueneType.eot?#iefix') format('embedded-opentype'),
+      url('/static/fonts/GrueneType/GrueneType.woff2') format('woff2'),
+      url('/static/fonts/GrueneType/GrueneType.woff') format('woff'),
+      url('/static/fonts/GrueneType/GrueneType.ttf') format('truetype'),
+      url('/static/fonts/GrueneType/GrueneType.svg#GrueneType-BlackCondensedItalic') format('svg');
+    font-weight: 900;
+    font-style: italic;
+    font-display: swap;
+}
+
+.gruene-type {
+    font-family: "GrueneType", sans-serif;
+    font-style: italic;
+}
+
 /* GENERIC STYLES */
 body {
     color: #003221;
@@ -183,3 +203,4 @@ body > div > div.sticky svg {
     fill: white !important;
     stroke: white !important;
 }
+