From 829d287b7552bbd0c9b254c9036abc395f2fc3f6 Mon Sep 17 00:00:00 2001 From: Camila Sosa Morales Date: Fri, 5 May 2023 12:58:44 -0300 Subject: [PATCH] feat: set background gradient on nfa detail page --- ui/src/app.context.tsx | 33 +++++++++++++++++++ ui/src/app.tsx | 25 +++++++------- .../layout/nav-bar/nav-bar.styles.ts | 1 - ui/src/components/layout/page/app-page.tsx | 10 +++++- ui/src/utils/color.ts | 3 +- .../explore/explore-list/nfa-search.styles.ts | 2 +- .../indexed-nfa/fragments/aside.fragment.tsx | 4 +-- ui/src/views/indexed-nfa/indexed-nfa.tsx | 12 +++++++ 8 files changed, 72 insertions(+), 18 deletions(-) create mode 100644 ui/src/app.context.tsx diff --git a/ui/src/app.context.tsx b/ui/src/app.context.tsx new file mode 100644 index 0000000..b84f47e --- /dev/null +++ b/ui/src/app.context.tsx @@ -0,0 +1,33 @@ +import { useState } from 'react'; + +import { createContext } from './utils'; + +export type AppContext = { + backgroundColor: string; + setBackgroundColor: (color: string) => void; +}; + +const [AppProvider, useContext] = createContext({ + name: 'App.Context', + hookName: 'App.useContext', + providerName: 'App.Provider', +}); + +export abstract class App { + static readonly useContext = useContext; + static readonly Provider: React.FC = ({ children }) => { + const [backgroundColor, setBackgroundColor] = useState(''); + + return ( + + {children} + + ); + }; +} + +export namespace App { + export type AppProps = { + children: React.ReactNode; + }; +} diff --git a/ui/src/app.tsx b/ui/src/app.tsx index 634b2b2..d5a93cd 100644 --- a/ui/src/app.tsx +++ b/ui/src/app.tsx @@ -2,6 +2,7 @@ import { HashRouter, Navigate, Route, Routes } from 'react-router-dom'; import { themeGlobals } from '@/theme/globals'; +import { App as AppContext } from './app.context'; import { AppPage, ToastProvider } from './components'; import { ComponentsTest, @@ -17,17 +18,19 @@ export const App: React.FC = () => { <> - - - } /> - } /> - } /> - } /> - {/** TODO remove for release */} - } /> - } /> - - + + + + } /> + } /> + } /> + } /> + {/** TODO remove for release */} + } /> + } /> + + + ); 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 aeb838b..08266c3 100644 --- a/ui/src/components/layout/nav-bar/nav-bar.styles.ts +++ b/ui/src/components/layout/nav-bar/nav-bar.styles.ts @@ -19,7 +19,6 @@ export const NavBarStyles = { content: '""', position: 'absolute', inset: 0, - backgroundColor: alphaColor('black', 0.8), backdropFilter: 'blur(4px)', zIndex: -1, }, diff --git a/ui/src/components/layout/page/app-page.tsx b/ui/src/components/layout/page/app-page.tsx index 0b2587a..ad9e81f 100644 --- a/ui/src/components/layout/page/app-page.tsx +++ b/ui/src/components/layout/page/app-page.tsx @@ -1,3 +1,4 @@ +import { App } from '@/app.context'; import { NavBar } from '@/components'; import { PageStyles as PS } from './page.styles'; @@ -7,8 +8,15 @@ export type AppPageProps = { }; export const AppPage: React.FC = ({ children }: AppPageProps) => { + const { backgroundColor } = App.useContext(); + const background = `linear-gradient(180deg, #${backgroundColor}59 0%, #000000 30%)`; + return ( - + {children} diff --git a/ui/src/utils/color.ts b/ui/src/utils/color.ts index 4422f61..a391255 100644 --- a/ui/src/utils/color.ts +++ b/ui/src/utils/color.ts @@ -10,6 +10,5 @@ export const parseColorToNumber = (color: string): number => { * Converts string number to hex color string. */ export const parseNumberToHexColor = (color: number): string => { - const hexColor = color.toString(16); - return hexColor; + return `${`000000${color.toString(16)}`.slice(-6)}`; }; diff --git a/ui/src/views/explore/explore-list/nfa-search.styles.ts b/ui/src/views/explore/explore-list/nfa-search.styles.ts index 9955ee0..95c9b2b 100644 --- a/ui/src/views/explore/explore-list/nfa-search.styles.ts +++ b/ui/src/views/explore/explore-list/nfa-search.styles.ts @@ -1,4 +1,4 @@ -import { Flex, Icon, Input } from '@/components'; +import { Flex, Icon } from '@/components'; import { styled } from '@/theme'; export const NFASearchFragmentStyles = { diff --git a/ui/src/views/indexed-nfa/fragments/aside.fragment.tsx b/ui/src/views/indexed-nfa/fragments/aside.fragment.tsx index 69f07c0..f0db5d4 100644 --- a/ui/src/views/indexed-nfa/fragments/aside.fragment.tsx +++ b/ui/src/views/indexed-nfa/fragments/aside.fragment.tsx @@ -2,6 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'; import { Link } from 'react-router-dom'; import { Button, Flex, Icon, NFAPreview } from '@/components'; +import { parseNumberToHexColor } from '@/utils/color'; import { IndexedNFA } from '../indexed-nfa.context'; import { IndexedNFAStyles as S } from '../indexed-nfa.styles'; @@ -10,8 +11,7 @@ const Preview: React.FC = () => { const { nfa } = IndexedNFA.useContext(); const color = useMemo( - // TODO: replace with util function - () => `#${`000000${nfa.color.toString(16)}`.slice(-6)}`, + () => `#${parseNumberToHexColor(nfa.color ?? '')}`, [nfa] ); diff --git a/ui/src/views/indexed-nfa/indexed-nfa.tsx b/ui/src/views/indexed-nfa/indexed-nfa.tsx index 88cb844..007f000 100644 --- a/ui/src/views/indexed-nfa/indexed-nfa.tsx +++ b/ui/src/views/indexed-nfa/indexed-nfa.tsx @@ -1,10 +1,13 @@ import { useQuery } from '@apollo/client'; import { ethers } from 'ethers'; +import { useEffect } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; +import { App } from '@/app.context'; import { getNFADocument } from '@/graphclient'; import { NFAMock } from '@/mocks'; import { AppLog } from '@/utils'; +import { parseNumberToHexColor } from '@/utils/color'; import { IndexedNFAAsideFragment, @@ -16,8 +19,15 @@ import { IndexedNFAStyles as S } from './indexed-nfa.styles'; export const IndexedNFAView: React.FC = () => { const { id } = useParams<{ id: string }>(); + const { setBackgroundColor } = App.useContext(); const navigate = useNavigate(); + useEffect(() => { + return () => { + setBackgroundColor('000000'); + }; + }, [setBackgroundColor]); + const handleError = (error: unknown): void => { AppLog.errorToast( `It was not possible to find the NFA with id "${id}"`, @@ -33,6 +43,8 @@ export const IndexedNFAView: React.FC = () => { }, onCompleted(data) { if (!data.token) handleError(new Error('Token not found')); + if (data.token?.color) + setBackgroundColor(parseNumberToHexColor(data.token.color)); }, onError(error) { handleError(error);