From 70d1e28cf2efe6883c1d96908f81dd7c80331e2f Mon Sep 17 00:00:00 2001
From: Camila Sosa Morales <camisosa@fleek.xyz>
Date: Wed, 5 Apr 2023 15:56:00 -0300
Subject: [PATCH] feat: UI add base theme black color to replace (#204)

* chore: add black color to stitches theme

* chore: add list-nfa to index

* Update ui/src/components/nfa-card/nfa-card.styles.ts

Co-authored-by: Felipe Mendes <zo.fmendes@gmail.com>

---------

Co-authored-by: Felipe Mendes <zo.fmendes@gmail.com>
---
 ui/src/components/core/color-picker/color-picker.tsx | 5 +----
 ui/src/components/layout/nav-bar/nav-bar.styles.ts   | 2 +-
 ui/src/components/nfa-card/nfa-card.styles.ts        | 2 +-
 ui/src/theme/themes.ts                               | 1 +
 ui/src/views/explore/explore.tsx                     | 2 +-
 ui/src/views/explore/list-nfas/index.ts              | 1 +
 6 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/ui/src/components/core/color-picker/color-picker.tsx b/ui/src/components/core/color-picker/color-picker.tsx
index 3e4cb05..37a6c9a 100644
--- a/ui/src/components/core/color-picker/color-picker.tsx
+++ b/ui/src/components/core/color-picker/color-picker.tsx
@@ -44,10 +44,7 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
           {/* TODO crate color picker component */}
           <Button
             leftIcon={
-              <Icon
-                name="square"
-                css={{ color: `${logoColor || '#000000'}` }}
-              />
+              <Icon name="square" css={{ color: `${logoColor || '$black'}` }} />
             }
             rightIcon={
               <Icon name="chevron-down" css={{ fontSize: '0.625rem' }} />
diff --git a/ui/src/components/layout/nav-bar/nav-bar.styles.ts b/ui/src/components/layout/nav-bar/nav-bar.styles.ts
index 0ccacba..eb0370f 100644
--- a/ui/src/components/layout/nav-bar/nav-bar.styles.ts
+++ b/ui/src/components/layout/nav-bar/nav-bar.styles.ts
@@ -11,7 +11,7 @@ export abstract class NavBarStyles {
     right: 0,
     display: 'flex',
     alignItems: 'center',
-    backgroundColor: 'black',
+    backgroundColor: '$black',
     zIndex: '$sticky',
     height: '$22',
   });
diff --git a/ui/src/components/nfa-card/nfa-card.styles.ts b/ui/src/components/nfa-card/nfa-card.styles.ts
index 9e3ca44..11cca30 100644
--- a/ui/src/components/nfa-card/nfa-card.styles.ts
+++ b/ui/src/components/nfa-card/nfa-card.styles.ts
@@ -34,7 +34,7 @@ export const NFACardStyles = {
     padding: '$3 $4',
     gap: '$2',
     borderTop: '1px solid $slate6',
-    backgroundColor: 'black', // TODO: are we going to add black as theme color?
+    backgroundColor: '$black',
   }),
   Badge: styled('span', {
     height: 'fit-content',
diff --git a/ui/src/theme/themes.ts b/ui/src/theme/themes.ts
index 21a9c49..c42f9c7 100644
--- a/ui/src/theme/themes.ts
+++ b/ui/src/theme/themes.ts
@@ -59,6 +59,7 @@ export const createDripStitches = <
     },
     theme: {
       colors: {
+        black: '#000000',
         ...darkColors, // TODO: replace with light colors once it's done the light mode
         ...(theme?.colors || {}),
       },
diff --git a/ui/src/views/explore/explore.tsx b/ui/src/views/explore/explore.tsx
index 0f6236e..c36872e 100644
--- a/ui/src/views/explore/explore.tsx
+++ b/ui/src/views/explore/explore.tsx
@@ -1,6 +1,6 @@
 import { Explore as ES } from './explore.styles';
 import { Header } from './header';
-import { ListNfas } from './list-nfas/list-nfas';
+import { ListNfas } from './list-nfas';
 
 export const Explore: React.FC = () => {
   return (
diff --git a/ui/src/views/explore/list-nfas/index.ts b/ui/src/views/explore/list-nfas/index.ts
index e69de29..acea138 100644
--- a/ui/src/views/explore/list-nfas/index.ts
+++ b/ui/src/views/explore/list-nfas/index.ts
@@ -0,0 +1 @@
+export * from './list-nfas';