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

@@ -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' }} />

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',
   });

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',

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 || {}),
       },

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 (

ui/src/views/explore/list-nfas/index.ts

@@ -0,0 +1 @@
+export * from './list-nfas';