From 6072d3d6861c84bf96631f91c1772c066ffc5f04 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 23 Aug 2023 12:46:12 +0300
Subject: [PATCH 1/7] feat: set up Theme component for theming

---
 src/App.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 79aced95..2c638d7b 100644
--- a/src/App.tsx
+++ b/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'
@@ -42,8 +42,10 @@ function App() {
     <ReduxProvider store={store}>
       <TamaguiProvider config={config}>
         <StatusProvider>
-          <PinnedNotification />
-          <RouterProvider router={router} />
+          <Theme name={'light'}>
+            <PinnedNotification />
+            <RouterProvider router={router} />
+          </Theme>
         </StatusProvider>
       </TamaguiProvider>
     </ReduxProvider>

From 9f4473bc221c6c33d48fec464ea9094657f13bb0 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 23 Aug 2023 12:46:40 +0300
Subject: [PATCH 2/7] fix: rewrite Landing page to be func expression

---
 src/pages/LandingPage/LandingPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx
index c3833354..16024327 100644
--- a/src/pages/LandingPage/LandingPage.tsx
+++ b/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 = () => {

From 35e0fabc69c706869c8e392261f5acdaf045fe98 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 23 Aug 2023 13:12:25 +0300
Subject: [PATCH 3/7] feat: create theme slice

---
 src/redux/theme/slice.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 src/redux/theme/slice.ts

diff --git a/src/redux/theme/slice.ts b/src/redux/theme/slice.ts
new file mode 100644
index 00000000..88a02b91
--- /dev/null
+++ b/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

From 894d7aa575939a290204861c8e72e3a2bf3ba7b6 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 23 Aug 2023 13:12:38 +0300
Subject: [PATCH 4/7] feat: add slice to the store

---
 src/redux/store.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/redux/store.tsx b/src/redux/store.tsx
index 70d352db..ca829205 100644
--- a/src/redux/store.tsx
+++ b/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,
   },
 })
 

From 6fee0c376c64f5f908d57979ef405a23d8bd3ae5 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 23 Aug 2023 13:26:55 +0300
Subject: [PATCH 5/7] fix: providers order

---
 src/App.tsx  | 24 ++++++++++++------------
 src/main.tsx |  8 ++++++--
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 2c638d7b..1d5d8bcd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -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,17 +38,17 @@ const router = createBrowserRouter([
 ])
 
 function App() {
+  const theme = useSelector((state: RootState) => state.theme)
+
   return (
-    <ReduxProvider store={store}>
-      <TamaguiProvider config={config}>
-        <StatusProvider>
-          <Theme name={'light'}>
-            <PinnedNotification />
-            <RouterProvider router={router} />
-          </Theme>
-        </StatusProvider>
-      </TamaguiProvider>
-    </ReduxProvider>
+    <TamaguiProvider config={config}>
+      <StatusProvider>
+        <Theme name={theme}>
+          <PinnedNotification />
+          <RouterProvider router={router} />
+        </Theme>
+      </StatusProvider>
+    </TamaguiProvider>
   )
 }
 
diff --git a/src/main.tsx b/src/main.tsx
index c4fc9bba..0634b7c8 100644
--- a/src/main.tsx
+++ b/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>,
 )

From a495af050d359dc160a87a085bef02430d04f8fa Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 23 Aug 2023 13:52:24 +0300
Subject: [PATCH 6/7] feat: add theme color for texts at landing page

---
 src/pages/LandingPage/LandingPage.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx
index 16024327..bc91fd84 100644
--- a/src/pages/LandingPage/LandingPage.tsx
+++ b/src/pages/LandingPage/LandingPage.tsx
@@ -22,10 +22,11 @@ const 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>

From a7f287f8663a56cda3af5bd46dcd30d8d7e164b6 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 23 Aug 2023 14:26:44 +0300
Subject: [PATCH 7/7] feat: add theme background for page wrapper shadow

---
 src/components/PageWrappers/PageWrapperShadow.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/PageWrappers/PageWrapperShadow.tsx b/src/components/PageWrappers/PageWrapperShadow.tsx
index c0e0f2b3..b28d2b63 100644
--- a/src/components/PageWrappers/PageWrapperShadow.tsx
+++ b/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">