implement zkSync colors/fonts as default

AngleProtocol · Dec 5, 2024 · df26620 · df26620
1 parent cedc54b
commit df26620
Show file tree

Hide file tree

Showing 18 changed files with 108 additions and 45 deletions.
diff --git a/merkl.config.ts b/merkl.config.ts
@@ -46,8 +46,10 @@ export default createConfig({
   themes: {
     merkl: {
       base: createColoring(
-        ["#1F2333", "#B8AAFD", "#131620"],
-        ["#FCF8F5", "#B8AAFD", "white"]
+        // ["#1F2333", "#B8AAFD", "#131620"],
+        // ["#FCF8F5", "#B8AAFD", "white"]
+        ["#1755F4", "#FF7900", "#0D1530"],
+        ["#1755F4", "#FF7900", "#FFFFFF"]
       ),
       info: createColoring(
         ["#2ABDFF", "#2ABDFF", "#131620"],
@@ -91,16 +93,16 @@ export default createConfig({
     //   route: "/protocols",
     //   key: crypto.randomUUID(),
     // },
-    terms: {
-      icon: "RiCompassesLine",
-      route: "/terms",
-      key: crypto.randomUUID(),
-    },
-    privacy: {
-      icon: "RiInformationFill",
-      route: "/privacy",
-      key: crypto.randomUUID(),
-    },
+    // terms: {
+    //   icon: "RiCompassesLine",
+    //   route: "/terms",
+    //   key: crypto.randomUUID(),
+    // },
+    // privacy: {
+    //   icon: "RiInformationFill",
+    //   route: "/privacy",
+    //   key: crypto.randomUUID(),
+    // },
   },
   socials: {
     discord: "",

diff --git a/src/components/composite/Hero.tsx b/src/components/composite/Hero.tsx
@@ -1,23 +1,19 @@
 import type { Opportunity } from "@merkl/api";
-import { useLoaderData, useLocation, useNavigate } from "@remix-run/react";
+import { useLocation } from "@remix-run/react";
 import {
   Container,
   Divider,
-  Dropdown,
   Group,
-  Hash,
   Icon,
   type IconProps,
   Icons,
-  Input,
   Tabs,
   Text,
   Title,
 } from "dappkit";
 import { Button } from "dappkit";
 import config from "merkl.config";
-import { useState, type PropsWithChildren, type ReactNode } from "react";
-import type { loader } from "src/routes/_merkl.users.$address";
+import type { PropsWithChildren, ReactNode } from "react";
 
 export type HeroProps = PropsWithChildren<{
   icons?: IconProps[];
@@ -42,7 +38,7 @@ export default function Hero({
   tabs,
   children,
 }: HeroProps) {
-  console.log(location?.pathname);
+  const location = useLocation();
   return (
     <>
       {/* TODO: Align lines & descriptions on all pages  */}
@@ -66,7 +62,7 @@ export default function Hero({
           <Group className="flex-col h-full py-xl gap-xl lg:gap-xs">
             <Group className="items-center" size="sm">
               {/* TODO: Build dynamic breadcrumbs */}
-              <Button to={navigation?.link} look="soft" size="xs">
+              <Button to={navigation?.link} look="soft" bold size="xs">
                 Home
               </Button>
               {breadcrumbs?.map((breadcrumb) => {
@@ -129,7 +125,7 @@ export default function Hero({
                     <Group key={data.key} className="flex-col">
                       <Text size={3}>{data.data}</Text>
 
-                      <Text size="xl" className="font-bold">
+                      <Text size="xl" className="font-bold not-italic">
                         {data.label}
                       </Text>
                     </Group>

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -1,4 +1,12 @@
-import { Button, Container, Dropdown, Group, Icon, WalletButton, useTheme } from "dappkit";
+import {
+  Button,
+  Container,
+  Dropdown,
+  Group,
+  Icon,
+  WalletButton,
+  useTheme,
+} from "dappkit";
 import { Image } from "dappkit";
 import customerDarkLogo from "src/customer/assets/images/customer-dark-logo.svg";
 import customerLogo from "src/customer/assets/images/customer-logo.svg";
@@ -46,7 +54,7 @@ export default function Header() {
           key: crypto.randomUUID(),
         },
       },
-      rest,
+      rest
     );
   }, [user]);
 
@@ -55,7 +63,8 @@ export default function Header() {
       variants={container}
       initial="hidden"
       whileInView="visible"
-      className="w-full sticky left-0 top-0 z-20 backdrop-blur">
+      className="w-full sticky left-0 top-0 z-20 backdrop-blur"
+    >
       <Container className="py-xl">
         <Group className="justify-between items-center">
           <motion.div variants={item}>
@@ -64,7 +73,8 @@ export default function Header() {
               padding="xs"
               open={open}
               content={<LayerMenu nav={routes} setOpen={setOpen} />}
-              className="lg:hidden flex gap-sm md:gap-lg items-center">
+              className="lg:hidden flex gap-sm md:gap-lg items-center"
+            >
               <Image
                 className="w-[140px] md:w-[200px]"
                 alt={`${config.appName} logo`}
@@ -73,7 +83,12 @@ export default function Header() {
               <Icon className="text-main-12" remix="RiArrowDownSLine" />
             </Dropdown>
 
-            <Button className="hidden lg:flex" size="lg" to={routes.homepage.route} look="soft">
+            <Button
+              className="hidden lg:flex"
+              size="lg"
+              to={routes.homepage.route}
+              look="soft"
+            >
               <Image
                 className="w-[200px]"
                 alt={`${config.appName} logo`}
@@ -86,10 +101,16 @@ export default function Header() {
             <Group className="items-center" size="xl">
               <Group className="hidden lg:flex items-center" size="xl">
                 {Object.entries(routes)
-                  .filter(([key]) => !["homepage", "privacy", "terms"].includes(key))
+                  .filter(([key]) => !["homepage"].includes(key))
                   .map(([key, { route }]) => {
                     return (
-                      <Button className="capitalize" look="soft" size="lg" key={`${key}-link`} to={route}>
+                      <Button
+                        className="capitalize"
+                        look="soft"
+                        size="lg"
+                        key={`${key}-link`}
+                        to={route}
+                      >
                         {key}
                       </Button>
                     );

diff --git a/src/components/layout/LayerMenu.tsx b/src/components/layout/LayerMenu.tsx
@@ -15,20 +15,23 @@ export const LayerMenu: FC<{
       <main className="flex-1 overflow-y-scroll w-full">
         <ul className="min-w-max list-none">
           {Object.entries(nav)
-            .filter(([key]) => !["privacy", "terms"].includes(key))
-            .map(([key, value]) => (
-              <li key={value.key} className="border-b-1 first:pt-0 py-lg border-main-11">
-                <NavLink
-                  onClick={() => setOpen(false)}
-                  to={value.route}
-                  className="flex items-center gap-md capitalize">
-                  <Icon remix={value.icon} className="text-xl text-main-11" />
-                  <Text size="lg" bold className="text-main-12">
-                    {key}
-                  </Text>
-                </NavLink>
-              </li>
-            ))}
+          .map(([key, value]) => (
+            <li
+              key={value.key}
+              className="border-b-1 first:pt-0 py-lg border-main-11"
+            >
+              <NavLink
+                onClick={() => setOpen(false)}
+                to={value.route}
+                className="flex items-center gap-md capitalize"
+              >
+                <Icon remix={value.icon} className="text-xl text-main-11" />
+                <Text size="lg" bold className="text-main-12">
+                  {key}
+                </Text>
+              </NavLink>
+            </li>
+          ))}
         </ul>
       </main>
       <footer className="mt-lg">

diff --git a/src/customer/assets/fonts/Obviously_Bold.otf b/src/customer/assets/fonts/Obviously_Bold.otf
diff --git a/src/customer/assets/fonts/Obviously_Bold.woff b/src/customer/assets/fonts/Obviously_Bold.woff
diff --git a/src/customer/assets/fonts/Obviously_Bold.woff2 b/src/customer/assets/fonts/Obviously_Bold.woff2
diff --git a/src/customer/assets/fonts/Obviously_Bold_Italic.otf b/src/customer/assets/fonts/Obviously_Bold_Italic.otf
diff --git a/src/customer/assets/fonts/Obviously_Bold_Italic.woff b/src/customer/assets/fonts/Obviously_Bold_Italic.woff
diff --git a/src/customer/assets/fonts/Obviously_Bold_Italic.woff2 b/src/customer/assets/fonts/Obviously_Bold_Italic.woff2
diff --git a/src/customer/assets/fonts/Obviously_Semi.otf b/src/customer/assets/fonts/Obviously_Semi.otf
diff --git a/src/customer/assets/fonts/Obviously_Semi.woff b/src/customer/assets/fonts/Obviously_Semi.woff
diff --git a/src/customer/assets/fonts/Obviously_Semi.woff2 b/src/customer/assets/fonts/Obviously_Semi.woff2
diff --git a/src/customer/assets/fonts/Obviously_Semi_Italic.otf b/src/customer/assets/fonts/Obviously_Semi_Italic.otf
diff --git a/src/customer/assets/fonts/Obviously_Semi_Italic.woff b/src/customer/assets/fonts/Obviously_Semi_Italic.woff
diff --git a/src/customer/assets/fonts/Obviously_Semi_Italic.woff2 b/src/customer/assets/fonts/Obviously_Semi_Italic.woff2
diff --git a/src/customer/assets/style/fonts.css b/src/customer/assets/style/fonts.css
@@ -1,2 +1,43 @@
 @import url("https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap");
+/* @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&display=swap"); */
+
+@font-face {
+  font-family: "Obviously";
+  src: url("../fonts/Obviously_Bold_Italic.woff2") format("woff2");
+  src: url("../fonts/Obviously_Bold_Italic.woff") format("woff");
+  src: url("../fonts/Obviously_Bold_Italic.otf") format("opentype");
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Obviously";
+  src: url("../fonts/Obviously_Bold.woff2") format("woff2");
+  src: url("../fonts/Obviously_Bold.woff") format("woff");
+  src: url("../fonts/Obviously_Bold.otf") format("opentype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Obviously";
+  src: url("../fonts/Obviously_Semi_Italic.woff2") format("woff2");
+  src: url("../fonts/Obviously_Semi_Italic.woff") format("woff");
+  src: url("../fonts/Obviously_Semi_Italic.otf") format("opentype");
+  font-weight: 600;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Obviously";
+  src: url("../fonts/Obviously_Semi.woff2") format("woff2");
+  src: url("../fonts/Obviously_Semi.woff") format("woff");
+  src: url("../fonts/Obviously_Semi.otf") format("opentype");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
diff --git a/src/routes/_merkl.users.$address.tsx b/src/routes/_merkl.users.$address.tsx
@@ -84,15 +84,15 @@ export default function Index() {
             <Value format="$0,0.0a" size={2} className="text-main-12">
               {earned}
             </Value>
-            <Text size="xl" bold>
+            <Text size="xl" bold className="not-italic">
               Total earned
             </Text>
           </Group>
           <Group className="flex-col">
             <Value format="$0,0.0a" size={2} className="text-main-12">
               {unclaimed}
             </Value>
-            <Text size={"xl"} bold>
+            <Text size={"xl"} bold className="not-italic">
               Claimable
             </Text>
           </Group>