feat(explorer): Add new rebranding colours.

Co-authored-by: nevendiulgerov <neven.diulgerov@gmail.com>
Co-authored-by: dandhee.damarrama <dandhee.damarrama@gmail.com>

apps/staking/.env.test

@@ -0,0 +1,3 @@
+# Env vars to be injected by turborepo when running test related tasks.
+NEXT_PUBLIC_PROJECT_ID=PROJECT_ID
+NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=WC_PROJECT_ID

apps/staking/.storybook/ColorMode.tsx

@@ -9,10 +9,10 @@
 // WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
 // PARTICULAR PURPOSE. See the GNU General Public License for more details.
 
-import { useEffect } from 'react';
 import { useColorMode } from '@chakra-ui/react';
+import { useEffect } from 'react';
 
-export default ({ globals: { theme = 'light' } }) => {
+export default ({ globals: { theme = 'dark' } }) => {
     const { colorMode, setColorMode } = useColorMode();
     useEffect(() => {
         if (colorMode !== theme) setColorMode(theme);

apps/staking/.storybook/preview.tsx

@@ -11,16 +11,17 @@
 
 import { MockedProvider } from '@apollo/client/testing';
 import { ChakraProvider } from '@chakra-ui/react';
-import { Fonts, SelectedChain } from '@explorer/ui';
+import { Fonts, SelectedChain, theme } from '@explorer/ui';
 import '@fontsource/rubik';
 import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { StoryContext } from '@storybook/react';
 import { RouterContext } from 'next/dist/shared/lib/router-context';
 import { withPerformance } from 'storybook-addon-performance';
 import Web3Container from '../src/components/Web3Container';
-import theme from '../src/styles/theme';
-import withFeatureFlags from './withFeatureFlags';
+
+import React from 'react';
 import ColorMode from './ColorMode';
+import withFeatureFlags from './withFeatureFlags';
 
 export const parameters = {
     actions: { argTypesRegex: '^on[A-Z].*' },
@@ -45,23 +46,25 @@ export const globalTypes = {
     theme: {
         name: 'Theme',
         description: 'Global theme for components',
-        defaultValue: 'light',
+        defaultValue: 'dark',
         toolbar: {
             icon: 'circlehollow',
             items: ['light', 'dark'],
         },
     },
 };
 
-const withChakra = (Story: Function, context: StoryContext) => (
-    <ChakraProvider resetCSS theme={theme}>
-        <ColorMode globals={context.globals} />
-        <Fonts />
-        <Web3Container>
-            <SelectedChain />
-            <Story />
-        </Web3Container>
-    </ChakraProvider>
-);
+const withChakra = (Story: Function, context: StoryContext) => {
+    return (
+        <ChakraProvider resetCSS theme={theme}>
+            <ColorMode globals={context.globals} />
+            <Fonts />
+            <Web3Container>
+                <SelectedChain />
+                <Story />
+            </Web3Container>
+        </ChakraProvider>
+    );
+};
 
 export const decorators = [withChakra, withPerformance, withFeatureFlags];

apps/staking/.storybook/withFeatureFlags.tsx

@@ -1,6 +1,5 @@
 import { StoryContext } from '@storybook/react';
 import FlagProvider from '@unleash/proxy-client-react';
-import React from 'react';
 import { config } from '../src/utils/featureFlags';
 
 export default (Story: Function, _context: StoryContext) => (

apps/staking/__tests__/components/Layout.test.tsx

@@ -9,9 +9,14 @@
 // WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
 // PARTICULAR PURPOSE. See the GNU General Public License for more details.
 
+import { PoS, StakingImpl } from '@cartesi/pos';
+import { StakingPoolFactoryImpl } from '@cartesi/staking-pool';
+import { CartesiToken, SimpleFaucet } from '@cartesi/token';
+import { WorkerManagerAuthManagerImpl } from '@cartesi/util';
 import { render, screen } from '@testing-library/react';
-import { StakingImpl, PoS } from '@cartesi/pos';
-import Layout, { headerLinks, footerLinks } from '../../src/components/Layout';
+import { NextRouter, useRouter } from 'next/router';
+import Layout, { footerLinks, headerLinks } from '../../src/components/Layout';
+import useMeta from '../../src/graphql/hooks/useMeta';
 import {
     useCartesiTokenContract,
     usePoSContract,
@@ -20,11 +25,7 @@ import {
     useStakingPoolFactoryContract,
     useWorkerManagerContract,
 } from '../../src/services/contracts';
-import useMeta from '../../src/graphql/hooks/useMeta';
 import { withChakraTheme } from '../test-utilities';
-import { CartesiToken, SimpleFaucet } from '@cartesi/token';
-import { StakingPoolFactoryImpl } from '@cartesi/staking-pool';
-import { WorkerManagerAuthManagerImpl } from '@cartesi/util';
 
 jest.mock('../../src/services/contracts', () => {
     const original = jest.requireActual('../../src/services/contracts');
@@ -41,6 +42,14 @@ jest.mock('../../src/services/contracts', () => {
 });
 
 jest.mock('../../src/graphql/hooks/useMeta');
+jest.mock('next/router', () => {
+    const originalModule = jest.requireActual('next/router');
+    return {
+        __esModule: true,
+        ...originalModule,
+        useRouter: jest.fn(),
+    };
+});
 
 const address = '0x2942aa4356783892c624125acfbbb80d29629a9d';
 const mockedUseCartesiTokenContract =
@@ -66,7 +75,7 @@ const mockedUseWorkerManagerContract =
         typeof useWorkerManagerContract
     >;
 const mockedUseMeta = useMeta as jest.MockedFunction<typeof useMeta>;
-
+const mockUseRouter = useRouter as jest.MockedFunction<typeof useRouter>;
 const Component = withChakraTheme(Layout);
 
 describe('Layout component', () => {
@@ -90,6 +99,9 @@ describe('Layout component', () => {
             address,
         } as unknown as WorkerManagerAuthManagerImpl);
         mockedUseMeta.mockReturnValue(undefined);
+        mockUseRouter.mockReturnValue({
+            asPath: 'stake',
+        } as unknown as NextRouter);
     });
 
     afterEach(() => {

apps/staking/__tests__/containers/node-runners/NodeRunnerContainer.test.tsx

@@ -189,7 +189,7 @@ describe('NodeRunners container (Landing Page)', () => {
             fireEvent.click(tooltipIcon);
 
             expect(
-                await screen.findByText('Main responsabilities:')
+                await screen.findByText('Main responsibilities:')
             ).toBeInTheDocument();
             expect(
                 await screen.findByText(
@@ -213,7 +213,7 @@ describe('NodeRunners container (Landing Page)', () => {
             fireEvent.click(tooltipIcon);
 
             expect(
-                await screen.findByText('Main responsabilities:')
+                await screen.findByText('Main responsibilities:')
             ).toBeInTheDocument();
             expect(
                 await screen.findByText(

apps/staking/__tests__/test-utilities.tsx

@@ -11,7 +11,7 @@
 
 import { ChakraProvider } from '@chakra-ui/react';
 import { FunctionComponent } from 'react';
-import theme from '../src/styles/theme';
+import { theme } from '@explorer/ui';
 
 /**
  * A HOC for tests where the component uses any of our custom theme properties e.g. color grey.support

apps/staking/src/components/BlocksChart.tsx

@@ -24,7 +24,7 @@ import {
 } from 'recharts';
 import { QueryResult } from '@apollo/client';
 import { BlocksData, BlocksVars } from '../graphql/models';
-import { useColorModeValue } from '@chakra-ui/react';
+import { useColorMode, useColorModeValue } from '@chakra-ui/react';
 
 export interface BlocksChartProps {
     result: QueryResult<BlocksData, BlocksVars>;
@@ -45,6 +45,8 @@ const colors = [
 
 const BlocksChart = (props: BlocksChartProps) => {
     const blocks = props.result.data?.blocks || [];
+    const { colorMode } = useColorMode();
+    const defaultColor = colorMode === 'light' ? '#008DA5' : '#00f6ff';
 
     // group blocks per chain
     const blocksPerChain = _.groupBy(
@@ -88,7 +90,7 @@ const BlocksChart = (props: BlocksChartProps) => {
 
         // follow tinygraphs color pattern
         const id = chain.number;
-        const color = id >= 0 && id < colors.length ? colors[id] : colors[0];
+        const color = id > 0 && id < colors.length ? colors[id] : defaultColor;
 
         // create scatter plot
         return (
@@ -122,7 +124,7 @@ const BlocksChart = (props: BlocksChartProps) => {
         return value;
     };
 
-    const bg = useColorModeValue('white', '#2D3748'); // gray.700 = #2D3748
+    const bg = useColorModeValue('white', '#161618'); // dark.gray.primary = #161618
     return (
         <ResponsiveContainer height={300}>
             <ScatterChart>

apps/staking/src/components/Layout.tsx

@@ -20,10 +20,11 @@ import {
     useWorkerManagerContract,
 } from '../services/contracts';
 import SyncStatus from './SyncStatus';
+import { FlexProps } from '@chakra-ui/react';
 
-export { PageHeader, PagePanel, PageBody };
+export { PageBody, PageHeader, PagePanel };
 
-interface ComponentProps {
+interface ComponentProps extends FlexProps {
     children: React.ReactNode;
 }
 
@@ -51,25 +52,51 @@ export const headerLinks = [
 ];
 
 export const footerLinks = [
-    {
-        label: 'Audit Report',
-        href: 'https://github.com/cartesi/pos-dlib/raw/develop/Smart%20Contract%20Security%20Audit%20Report%20-%20Staking.pdf',
-    },
     {
         label: 'CTSI Reserve Mining',
         href: 'https://cartesi.io/en/mine/',
     },
+    {
+        label: 'Audit Report',
+        href: 'https://github.com/cartesi/pos-dlib/raw/develop/Smart%20Contract%20Security%20Audit%20Report%20-%20Staking.pdf',
+    },
     {
         label: 'How to Run a Node',
         href: 'https://medium.com/cartesi/running-a-node-and-staking-42523863970e',
     },
+];
+
+export const footerSupport = [
+    {
+        label: `What's New`,
+        href: 'https://cartesi.io/blog/',
+    },
+    {
+        label: 'Support on Discord',
+        href: 'https://discord.com/invite/pfXMwXDDfW',
+    },
     {
         label: 'FAQ',
         href: 'https://github.com/cartesi/noether/wiki/FAQ',
     },
+    {
+        label: 'Governance',
+        href: 'https://governance.cartesi.io/',
+    },
+];
+
+export const footerGeneral = [
+    {
+        label: 'About Us',
+        href: 'https://cartesi.io/about/',
+    },
+    {
+        label: 'Docs',
+        href: 'https://docs.cartesi.io/',
+    },
 ];
 
-const PageLayout: FC<ComponentProps> = ({ children }) => {
+const PageLayout: FC<ComponentProps> = ({ children, ...restProps }) => {
     const pos = usePoSContract();
     const token = useCartesiTokenContract();
     const faucet = useSimpleFaucetContract();
@@ -108,7 +135,10 @@ const PageLayout: FC<ComponentProps> = ({ children }) => {
         <Layout
             headerLinks={headerLinks}
             footerContracts={contracts}
+            footerSupport={footerSupport}
+            footerGeneral={footerGeneral}
             footerLinks={footerLinks}
+            {...restProps}
         >
             <>
                 <SyncStatus />

apps/staking/src/components/PageHeader.tsx

@@ -18,13 +18,14 @@ export interface PageHeaderProps extends StackProps {
 
 const PageHeader: FunctionComponent<PageHeaderProps> = (props) => {
     const { title, children, ...rest } = props;
+
     return (
         <HStack
             w="100%"
             px="6vw"
             py="5"
             color="white"
-            bg="gray.900"
+            bg="dark.gray.tertiary"
             justify="space-between"
             {...rest}
         >

apps/staking/src/components/PerPageSelect.tsx

@@ -10,30 +10,44 @@
 // PARTICULAR PURPOSE. See the GNU General Public License for more details.
 
 import React, { FC } from 'react';
-import { Select, SelectProps, Text, HStack } from '@chakra-ui/react';
+import {
+    Select,
+    SelectProps,
+    Text,
+    HStack,
+    useColorModeValue,
+} from '@chakra-ui/react';
+import { TriangleDownIcon } from '@chakra-ui/icons';
 
 export interface PerPageSelectProps extends SelectProps {
     options: number[];
     onChange: (event: React.ChangeEvent) => void;
 }
 
+const SelectIcon = () => <TriangleDownIcon ml={5} width={4} height={4} />;
+
 const PerPageSelect: FC<PerPageSelectProps> = (props) => {
     const { value, options, onChange, ...restProps } = props;
+    const borderWidth = useColorModeValue('0 0 1px 0', 0);
 
     return (
-        <HStack mr={{ base: 0, md: 12 }} mb={{ base: 4, md: 0 }}>
+        <HStack
+            alignItems="center"
+            mr={{ base: 0, md: 10 }}
+            mb={{ base: 4, md: 0 }}
+        >
             <Text fontSize={{ base: 'xs', sm: 'sm', md: 'md' }}>
                 Rows per page
             </Text>
 
             <Select
                 value={value}
                 width="4.625rem"
-                borderLeft="none"
-                borderTop="none"
-                borderRight="none"
+                borderWidth={borderWidth}
+                borderColor="gray.900"
                 borderRadius={0}
                 fontSize={{ base: 'xs', sm: 'sm', md: 'md' }}
+                icon={<SelectIcon />}
                 onChange={onChange}
                 {...restProps}
             >

apps/staking/src/components/SearchInput.tsx

@@ -15,6 +15,7 @@ import {
     Input,
     InputGroup,
     InputLeftElement,
+    useColorModeValue,
 } from '@chakra-ui/react';
 import { SearchIcon } from '@chakra-ui/icons';
 
@@ -25,13 +26,28 @@ export interface SearchInputProps extends InputGroupProps {
 
 const SearchInput: FunctionComponent<SearchInputProps> = (props) => {
     const { placeholder = 'Search', onSearchChange, ...rest } = props;
+    const placeholderColor = useColorModeValue('gray.500', 'white');
+    const searchBackgroundColor = useColorModeValue(
+        'white',
+        'dark.gray.tertiary'
+    );
+    const iconColor = useColorModeValue('gray.900', 'white');
+
     return (
         <InputGroup {...rest}>
             <InputLeftElement pointerEvents="none">
-                <SearchIcon />
+                <SearchIcon color={iconColor} />
             </InputLeftElement>
 
-            <Input placeholder={placeholder} onChange={onSearchChange} />
+            <Input
+                _placeholder={{
+                    color: placeholderColor,
+                }}
+                borderRadius="3px"
+                placeholder={placeholder}
+                backgroundColor={searchBackgroundColor}
+                onChange={onSearchChange}
+            />
         </InputGroup>
     );
 };