From edc5e6cc07c092bbfeea59d9209353ff801f6211 Mon Sep 17 00:00:00 2001
From: verbiricha <bandarra+gith@protonmail.com>
Date: Mon, 18 Dec 2023 19:16:10 +0100
Subject: [PATCH] apps/relay: customize theme

---
 apps/relays/app/components/layout.tsx         |  2 ++
 apps/relays/app/theme.ts                      | 31 +++++++++++++++++++
 .../src/components/RecommendedAppMenu.tsx     |  2 +-
 3 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 apps/relays/app/theme.ts

diff --git a/apps/relays/app/components/layout.tsx b/apps/relays/app/components/layout.tsx
index 82b3b2c..46739f1 100644
--- a/apps/relays/app/components/layout.tsx
+++ b/apps/relays/app/components/layout.tsx
@@ -11,6 +11,7 @@ import Container from "./container";
 import Main from "./main";
 import Header from "./header";
 import Footer from "./footer";
+import { theme } from "../theme";
 
 const cacheAdapter = new NDKCacheAdapterDexie({ dbName: "relays" });
 const ndk = new NDK({
@@ -27,6 +28,7 @@ export default function Layout({ children }: { children: ReactNode }) {
 
   return (
     <NgineProvider
+      theme={theme}
       ndk={ndk}
       links={{
         component: Link,
diff --git a/apps/relays/app/theme.ts b/apps/relays/app/theme.ts
new file mode 100644
index 0000000..22ab31d
--- /dev/null
+++ b/apps/relays/app/theme.ts
@@ -0,0 +1,31 @@
+import { extendTheme } from "@chakra-ui/react";
+import { theme as baseTheme } from "@ngine/core";
+
+export const theme = extendTheme(
+  {
+    semanticTokens: {
+      colors: {
+        "chakra-body-bg": { _light: "#F8F7F4", _dark: "#111111" },
+        "chakra-placeholder-color": {
+          _light: "gray.500",
+          _dark: "whiteAlpha.500",
+        },
+      },
+    },
+    colors: {
+      brand: {
+        50: "#ffe8df",
+        100: "#ffc0b1",
+        200: "#fe9881",
+        300: "#fc6f50",
+        400: "#fa471f",
+        500: "#e02d05",
+        600: "#af2203",
+        700: "#7d1701",
+        800: "#4e0b00",
+        900: "#200100",
+      },
+    },
+  },
+  baseTheme,
+);
diff --git a/packages/core/src/components/RecommendedAppMenu.tsx b/packages/core/src/components/RecommendedAppMenu.tsx
index ca7ed17..a31cdae 100644
--- a/packages/core/src/components/RecommendedAppMenu.tsx
+++ b/packages/core/src/components/RecommendedAppMenu.tsx
@@ -176,7 +176,7 @@ function AppMenuItem({
           {isPreferredApp ? (
             <HStack>
               <Text>{app.display_name || app.name}</Text>
-              <Icon as={Star} boxSize={3} color="brand.500" />
+              <Icon as={Star} boxSize={3} color="chakra-subtle-text" />
             </HStack>
           ) : (
             <Text>{app.display_name || app.name}</Text>