Merge pull request #10 from nimbus-gui/rd.explore-theming-

Explore theming

src/App.tsx

@@ -1,4 +1,4 @@
-import { TamaguiProvider } from 'tamagui'
+import { TamaguiProvider, Theme } from 'tamagui'
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 import { Provider as StatusProvider } from '@status-im/components'
 import './App.css'
@@ -8,9 +8,9 @@ import DeviceHealthCheck from './pages/DeviceHealthCheck/DeviceHealthCheck'
 import ConnectDevicePage from './pages/ConnectDevicePage/ConnectDevicePage'
 import DeviceSyncStatus from './pages/DeviceSyncStatus/DeviceSyncStatus'
 import PairDevice from './pages/PairDevice/PairDevice'
-import { Provider as ReduxProvider } from 'react-redux'
+import { useSelector } from 'react-redux'
 import PinnedNotification from './components/General/PinnedNottification'
-import store from './redux/store'
+import { RootState } from './redux/store'
 import CreateLocalNodePage from './pages/CreateLocalNodePage/CreateLocalNodePage'
 
 const router = createBrowserRouter([
@@ -38,15 +38,17 @@ const router = createBrowserRouter([
 ])
 
 function App() {
+  const theme = useSelector((state: RootState) => state.theme)
+
   return (
-    <ReduxProvider store={store}>
-      <TamaguiProvider config={config}>
-        <StatusProvider>
+    <TamaguiProvider config={config}>
+      <StatusProvider>
+        <Theme name={theme}>
           <PinnedNotification />
           <RouterProvider router={router} />
-        </StatusProvider>
-      </TamaguiProvider>
-    </ReduxProvider>
+        </Theme>
+      </StatusProvider>
+    </TamaguiProvider>
   )
 }
 

src/components/PageWrappers/PageWrapperShadow.tsx

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react'
 import './layout.css'
 import NimbusLogoMark from '../Logos/NimbusLogoMark'
+import { useTheme } from 'tamagui'
 
 type PageWrapperShadowProps = {
   breadcrumbBar?: ReactNode
@@ -15,8 +16,10 @@ const PageWrapperShadow = ({
   rightImageLogo,
   children,
 }: PageWrapperShadowProps) => {
+  const theme = useTheme()
+
   return (
-    <div className="layout">
+    <div className="layout" style={{ backgroundColor: theme.background.val }}>
       <section className="layout-left">
         {breadcrumbBar}
         <div className="container">

src/main.tsx

@@ -1,10 +1,14 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import { Provider as ReduxProvider } from 'react-redux'
 import App from './App.tsx'
 import './index.css'
+import store from './redux/store.tsx'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
-  </React.StrictMode>
+    <ReduxProvider store={store}>
+      <App />
+    </ReduxProvider>
+  </React.StrictMode>,
 )

src/pages/LandingPage/LandingPage.tsx

@@ -8,7 +8,7 @@ import { Button as StatusButton, Text } from '@status-im/components'
 import QuickStartBar from '../../components/General/QuickStartBar/QuickStartBar'
 import { useNavigate } from 'react-router'
 
-function LandingPage() {
+const LandingPage = () => {
   const navigate = useNavigate()
 
   const getStartedHanlder = () => {
@@ -22,10 +22,11 @@ function LandingPage() {
           <XStack pt={'70px'}>
             <NimbusLogo />
           </XStack>
-
           <YStack style={{ width: '100%', margin: '30vh 0 4vh' }}>
-            <Title>Light and performant clients, for all Ethereum validators.</Title>
-            <Text size={15} weight="regular">
+            <Title color="$textPrimary">
+              Light and performant clients, for all Ethereum validators.
+            </Title>
+            <Text size={15} weight="regular" color="$textPrimary">
               <strong>Nimbus Nodes</strong> allows you to take control and ownership of the services
               you wish to run in a completely trustless and decentralized manner.
             </Text>

src/redux/store.tsx

@@ -1,11 +1,13 @@
 import { configureStore } from '@reduxjs/toolkit'
 import deviceHealthReducer from './deviceHealthCheck/slice'
 import pinnedMessageReducer from './PinnedMessage/slice'
+import themeReducer from './theme/slice'
 
 const store = configureStore({
   reducer: {
     deviceHealth: deviceHealthReducer,
     pinnedMessage: pinnedMessageReducer,
+    theme: themeReducer,
   },
 })
 

src/redux/theme/slice.ts

@@ -0,0 +1,17 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+const initialState: 'light' | 'dark' = 'light'
+
+const themeSlice = createSlice({
+  name: 'theme',
+  initialState,
+  reducers: {
+    setTheme: (_, action) => {
+      return action.payload
+    },
+  },
+})
+
+export const { setTheme } = themeSlice.actions
+
+export default themeSlice.reducer