From 9ea4b9ef13d7c77d6000a6e286d936858dad8784 Mon Sep 17 00:00:00 2001
From: "mirlan.maksitaliev" <mirlan.maksitaliev@instatsport.com>
Date: Thu, 4 Jun 2020 18:28:17 +0600
Subject: [PATCH] feat(ott-36): added app theming

---
 src/features/App/index.tsx       |  6 +++--
 src/features/Theme/config.tsx    | 40 ++++++++++++++++++++++++++++++++
 src/features/Theme/index.tsx     | 39 +++++++++++++++++++++++++++++++
 src/types/styled-components.d.ts |  5 ++++
 4 files changed, 88 insertions(+), 2 deletions(-)
 create mode 100644 src/features/Theme/config.tsx
 create mode 100644 src/features/Theme/index.tsx
 create mode 100644 src/types/styled-components.d.ts

diff --git a/src/features/App/index.tsx b/src/features/App/index.tsx
index 9eded704..f9857eb4 100644
--- a/src/features/App/index.tsx
+++ b/src/features/App/index.tsx
@@ -1,7 +1,9 @@
 import React from 'react'
 
+import { Theme } from 'features/Theme'
+
 export const App = () => (
-  <div>
+  <Theme>
     Instat TV
-  </div>
+  </Theme>
 )
diff --git a/src/features/Theme/config.tsx b/src/features/Theme/config.tsx
new file mode 100644
index 00000000..d5c52872
--- /dev/null
+++ b/src/features/Theme/config.tsx
@@ -0,0 +1,40 @@
+export const lightTheme = {
+  colors: {
+    background: '',
+    primary: '',
+    secondary: '',
+    text: '',
+  },
+  name: 'light' as TName,
+  switchTheme: () => {},
+}
+
+export const darkTheme = {
+  colors: {
+    background: `
+      radial-gradient(
+        49.07% 49.07% at 50% 29.54%,
+        rgba(255, 255, 255, 0.14) 0%,
+        rgba(255, 255, 255, 0) 100%
+      ),
+      rgba(0, 0, 0, 0.95)
+    `,
+    primary: `
+      linear-gradient(
+        180deg,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(255, 255, 255, 0.1) 0.01%,
+        rgba(0, 0, 0, 0.1) 99.99%
+      ),
+      #0033CC
+    `,
+    secondary: '#999999',
+    text: '#fff',
+  },
+  name: 'dark' as TName,
+  switchTheme: () => {},
+}
+
+type TName = 'light' | 'dark'
+
+export type TCustomTheme = typeof lightTheme
diff --git a/src/features/Theme/index.tsx b/src/features/Theme/index.tsx
new file mode 100644
index 00000000..ff3afce0
--- /dev/null
+++ b/src/features/Theme/index.tsx
@@ -0,0 +1,39 @@
+import React, {
+  useState,
+  ReactNode,
+  useCallback,
+  useMemo,
+} from 'react'
+import { ThemeProvider } from 'styled-components'
+
+import {
+  TCustomTheme,
+  lightTheme,
+  darkTheme,
+} from './config'
+
+type TThemeProps = {
+  children: ReactNode,
+}
+
+export const Theme = ({ children }: TThemeProps) => {
+  const [theme, setTheme] = useState<TCustomTheme>(darkTheme)
+
+  const switchTheme = useCallback(
+    () => {
+      setTheme(theme.name === 'light' ? darkTheme : lightTheme)
+    },
+    [theme],
+  )
+
+  const memoTheme = useMemo(() => ({
+    ...theme,
+    switchTheme,
+  }), [theme, switchTheme])
+
+  return (
+    <ThemeProvider theme={memoTheme}>
+      {children}
+    </ThemeProvider>
+  )
+}
diff --git a/src/types/styled-components.d.ts b/src/types/styled-components.d.ts
new file mode 100644
index 00000000..19b1878f
--- /dev/null
+++ b/src/types/styled-components.d.ts
@@ -0,0 +1,5 @@
+import { TCustomTheme } from '../features/Theme/config'
+
+declare module 'styled-components' {
+  export interface DefaultTheme extends TCustomTheme {}
+}