From 3fa99b28de5626a0719604eda635f764a1a26020 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Wed, 12 Oct 2022 13:30:39 +0600
Subject: [PATCH 01/10] add initial contrast theme

---
 pages/_app.tsx                        |  5 ++-
 src/components/App/index.tsx          | 10 ++++++
 src/components/Card/styles.module.css |  9 +++---
 src/components/Footer/index.tsx       | 17 +++++++---
 src/components/Menu/styles.module.css |  8 ++++-
 src/components/Navigation/index.tsx   |  2 ++
 src/components/Wrapper/index.tsx      | 23 ++++++++------
 src/style/style.css                   | 45 +++++++++++++++++++++++++++
 src/ui/Box/index.tsx                  |  4 ++-
 src/ui/Panel/index.tsx                | 19 +++++++++++
 src/ui/Panel/panel.module.css         |  8 +++++
 src/ui/theme/Theme.tsx                | 17 ++++++++++
 src/ui/theme/ThemeContext.ts          |  4 +++
 src/ui/theme/types.ts                 |  2 ++
 src/ui/theme/useTheme.ts              | 15 +++++++++
 15 files changed, 168 insertions(+), 20 deletions(-)
 create mode 100644 src/ui/Panel/index.tsx
 create mode 100644 src/ui/Panel/panel.module.css
 create mode 100644 src/ui/theme/Theme.tsx
 create mode 100644 src/ui/theme/ThemeContext.ts
 create mode 100644 src/ui/theme/types.ts
 create mode 100644 src/ui/theme/useTheme.ts

diff --git a/pages/_app.tsx b/pages/_app.tsx
index b69aeb2e..dbd8ca21 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -8,6 +8,7 @@ import App from "next/app"
 import Head from "next/head"
 import { YMetrika } from "src/components/YMetrika"
 import { GAnalytics } from "src/components/GAnalytics"
+import { Theme } from "@/ui/theme/Theme"
 
 export default class MyApp extends App {
     render() {
@@ -41,7 +42,9 @@ export default class MyApp extends App {
                     <YMetrika account={24027460} />
                     <GAnalytics account={"UA-60209057-1"} />
                 </Head>
-                <Component {...pageProps} />
+                <Theme>
+                    <Component {...pageProps} />
+                </Theme>
             </>
         )
     }
diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
index 47ff5366..4e0a1cd5 100644
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@@ -10,6 +10,9 @@ import { useMobile } from "src/hooks/useMobile"
 import { Gosuslugi } from "../Gosuslugi"
 import { Navigation } from "@/components/Navigation"
 import { Box } from "@/ui/Box"
+import { Button } from "@/ui/Button"
+import { EyeOpenIcon } from "@radix-ui/react-icons"
+import { useTheme } from "@/ui/theme/useTheme"
 
 export type AppProps = {
     showAuthor?: boolean
@@ -25,6 +28,7 @@ export const App: React.FC<AppProps> = ({ showAuthor = false, menu, ...props })
     const blockStyle = {
         justifyContent: "center",
     }
+    const { theme, setTheme } = useTheme()
 
     return (
         <ConfigContext.Provider value={{
@@ -61,6 +65,12 @@ export const App: React.FC<AppProps> = ({ showAuthor = false, menu, ...props })
                         }}>
                             <Gosuslugi />
                         </div>
+
+                        <Button theme="icon" size="default" onClick={() => {
+                            setTheme(theme === "default" ? "contrast" : "default")
+                        }}>
+                            <EyeOpenIcon width={24} height={24} />
+                        </Button>
                     </Footer>
                 )}
             >
diff --git a/src/components/Card/styles.module.css b/src/components/Card/styles.module.css
index 1ed4a9c5..1a7dd3fa 100644
--- a/src/components/Card/styles.module.css
+++ b/src/components/Card/styles.module.css
@@ -5,6 +5,8 @@
     box-shadow: var(--shadow);
     overflow: hidden;
     transition: box-shadow 150ms;
+
+    border: var(--border);
 }
 
 .card:hover {
@@ -52,8 +54,8 @@
 
     border-radius: var(--radius) var(--radius) 0 0;
     width: 100%;
-    height: var(--radius);
-    top: calc(var(--radius) * -1);
+    height: var(--size-m);
+    top: calc(var(--size-m) * -1);
     left: 0;
 }
 
@@ -68,10 +70,9 @@
     position: absolute;
 
     --offset: var(--size-m);
-    --r: var(--size-s);
     left: var(--offset);
     right: var(--offset);
     bottom: var(--offset);
 
-    border-radius: var(--radius) var(--radius) var(--r) var(--r);
+    border-radius: var(--radius-small);
 }
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index 8a15b505..8147077c 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -6,6 +6,7 @@ import { Author } from "./Author"
 import { Spacer } from "../Spacer"
 import { Contacts } from "../Contacts"
 import { Box } from "@/ui/Box"
+import { Panel } from "@/ui/Panel"
 
 export type FooterProps = {
     showAuthor: boolean
@@ -14,10 +15,18 @@ export type FooterProps = {
 
 export const Footer: React.FC<FooterProps> = ({ showAuthor, children }) => (
     <footer className={cx(s.footer, "opposite")}>
-        <Box vertical align={false} style={{
-            marginBottom: "var(--size-l)",
-        }}>
-            <Contacts />
+        <Box>
+            <Box vertical align={false} style={{
+                marginBottom: "var(--size-l)",
+            }}>
+                <Contacts />
+            </Box>
+
+            <Panel style={{
+                marginBottom: "var(--size-l)",
+            }}>
+                <Contacts />
+            </Panel>
         </Box>
 
         {children}
diff --git a/src/components/Menu/styles.module.css b/src/components/Menu/styles.module.css
index e60ccf20..448076a1 100644
--- a/src/components/Menu/styles.module.css
+++ b/src/components/Menu/styles.module.css
@@ -21,7 +21,7 @@
 .menuItem {
     user-select: none;
     background-color: var(--color-back-main);
-    border-radius: var(--size-s);
+    border-radius: var(--radius-small);
     transition: box-shadow 200ms ease-in, background-color 200ms ease-in;
     padding: var(--size-s) var(--size-s);
 }
@@ -32,6 +32,12 @@
 
 .menuItem.active:hover {
     box-shadow: var(--shadow);
+    color: var(--color-hover);
+    background-color: var(--color-hover-back);
+}
+
+.menuItem.active:hover a {
+    color: var(--color-hover);
 }
 
 .menuItem.current {
diff --git a/src/components/Navigation/index.tsx b/src/components/Navigation/index.tsx
index d5be333c..a7b3a2df 100644
--- a/src/components/Navigation/index.tsx
+++ b/src/components/Navigation/index.tsx
@@ -7,6 +7,8 @@ import { ConfigContext } from "src/context/ConfigContext"
 import { Box } from "@/ui/Box"
 import { Spacer } from "../Spacer"
 import { useToggle } from "react-use"
+import { Button } from "@/ui/Button"
+import { EyeOpenIcon } from "@radix-ui/react-icons"
 
 export type NavigationProps = {
     style?: React.CSSProperties
diff --git a/src/components/Wrapper/index.tsx b/src/components/Wrapper/index.tsx
index cc5c99bb..753ac961 100644
--- a/src/components/Wrapper/index.tsx
+++ b/src/components/Wrapper/index.tsx
@@ -1,6 +1,7 @@
 import s from "./wrapper.module.css"
 
 import cx from "classnames"
+import { useTheme } from "@/ui/theme/useTheme"
 
 export type WrapperProps = {
     header: React.ReactNode
@@ -10,14 +11,18 @@ export type WrapperProps = {
     children?: React.ReactNode
 }
 
-export const Wrapper: React.FC<WrapperProps> = props => (
-    <div className={cx(s.container, "theme-default")} style={props.style}>
-        {props.header}
+export const Wrapper: React.FC<WrapperProps> = props => {
+    const { theme } = useTheme()
 
-        <main className={s.main} style={props.mainStyle}>
-            {props.children}
-        </main>
+    return (
+        <div className={cx(s.container, `theme-${theme}`)} style={props.style}>
+            {props.header}
 
-        {props.footer}
-    </div>
-)
+            <main className={s.main} style={props.mainStyle}>
+                {props.children}
+            </main>
+
+            {props.footer}
+        </div>
+    )
+}
diff --git a/src/style/style.css b/src/style/style.css
index 12a2a369..d38ba486 100644
--- a/src/style/style.css
+++ b/src/style/style.css
@@ -34,6 +34,7 @@
     --color-back-opposite: hsl(0, 0%, 15%);
 
     --color-shadow: rgba(27, 51, 88, 0.25);
+    --color-hover: none;
 
     /* SIZE */
     --size-xs: 0.35rem;
@@ -44,6 +45,7 @@
 
     /* EFFECTS */
     --radius: 16px;
+    --radius-small: 12px;
     --shadow:
         0 2px 4px rgba(27, 51, 88, 0.2),
         0 4px 8px -8px rgba(0, 0, 0, 0.2),
@@ -51,6 +53,7 @@
     --shadow-active:
         0 12px 24px -8px rgba(27, 51, 88, 0.25),
         0 8px 16px -8px rgba(0, 0, 0, 0.3);
+    --border: none;
 
     /* SPECIAL */
     --article-line-height: 1.5em;
@@ -191,3 +194,45 @@ h3 {
         --shadow-active: none;
     }
 }
+
+/* CONTRAST THEME */
+.theme-contrast {
+    /* FONTS */
+    --title-font: 'Roboto', Helvetica, sans-serif;
+    --text-font: 'Roboto', Helvetica, sans-serif;
+
+    /* TEXT COLOR */
+    --color-text: black;
+    --color-text-second: black;
+    --color-text-opposite: white;
+
+    --color-back-main: white;
+    --color-back: white;
+    --color-back-active: hsl(240, 10%, 20%);
+    /* --color-back-opposite: hsl(240, 10%, 80%); */
+    --color-back-opposite: black;
+    --color-link: hsl(240, 10%, 40%);
+    --color-link-opposite: hsl(240, 10%, 60%);
+
+    --color-hover: white;
+    --color-hover-back: black;
+
+    /* EFFECTS */
+    /* --radius: 0px; */
+    --shadow: none;
+    --shadow-active: none;
+
+    /* FONTS */
+    --font-size-default: 14pt;
+    --font-size-accent: 24pt;
+    --font-size-second: 12pt;
+
+    --font-size-h1: 5rem;
+    --font-size-h2: 3rem;
+    --font-size-h3: 1.5rem;
+
+    /* OTHER */
+    --radius: 0;
+    --radius-small: 0;
+    --border: 5px solid var(--color-back-opposite);
+}
diff --git a/src/ui/Box/index.tsx b/src/ui/Box/index.tsx
index 2243fdb5..752c85fa 100644
--- a/src/ui/Box/index.tsx
+++ b/src/ui/Box/index.tsx
@@ -8,6 +8,7 @@ const cx = classnames.bind(s)
 export type BoxProps = {
     as?: keyof HTMLElementTagNameMap
     children?: React.ReactNode
+    className?: string
     style?: React.CSSProperties
     wrap?: boolean
     align?: boolean
@@ -22,10 +23,11 @@ export const Box: React.FC<BoxProps> = ({
     center = false,
     align = true,
     style,
+    className,
     ...props
 }) => {
     const newProps = {
-        className: cx(s.box, { vertical, align, center, wrap }),
+        className: cx(s.box, className, { vertical, align, center, wrap }),
         style,
     }
 
diff --git a/src/ui/Panel/index.tsx b/src/ui/Panel/index.tsx
new file mode 100644
index 00000000..e7bff785
--- /dev/null
+++ b/src/ui/Panel/index.tsx
@@ -0,0 +1,19 @@
+import s from "./panel.module.css"
+
+import { Box } from "../Box"
+
+export type PanelProps = {
+    children?: React.ReactNode
+    style?: React.CSSProperties
+}
+
+export const Panel: React.FC<PanelProps> = ({
+    style,
+    children,
+}) => {
+    return (
+        <Box vertical align={false} className={`${s.panel} ${s.default}`} style={style}>
+            {children}
+        </Box>
+    )
+}
diff --git a/src/ui/Panel/panel.module.css b/src/ui/Panel/panel.module.css
new file mode 100644
index 00000000..4d94a63a
--- /dev/null
+++ b/src/ui/Panel/panel.module.css
@@ -0,0 +1,8 @@
+.panel {
+    padding: var(--size-m);
+    border-radius: var(--radius);
+}
+
+.default {
+    background-color: white;
+}
diff --git a/src/ui/theme/Theme.tsx b/src/ui/theme/Theme.tsx
new file mode 100644
index 00000000..8c398993
--- /dev/null
+++ b/src/ui/theme/Theme.tsx
@@ -0,0 +1,17 @@
+import { useState } from "react"
+import { ThemeContext } from "./ThemeContext"
+import { ThemeType } from "./types"
+
+export type ThemeProps = {
+    children?: React.ReactNode
+}
+
+export const Theme: React.FC<ThemeProps> = ({ children }) => {
+    const [theme, setTheme] = useState<ThemeType>("default")
+
+    return (
+        <ThemeContext.Provider value={[theme, setTheme]}>
+            {children}
+        </ThemeContext.Provider>
+    )
+}
diff --git a/src/ui/theme/ThemeContext.ts b/src/ui/theme/ThemeContext.ts
new file mode 100644
index 00000000..fc68fc1e
--- /dev/null
+++ b/src/ui/theme/ThemeContext.ts
@@ -0,0 +1,4 @@
+import { createContext } from "react"
+import { SetTheme, ThemeType } from "./types"
+
+export const ThemeContext = createContext<[ThemeType, SetTheme]>("default")
diff --git a/src/ui/theme/types.ts b/src/ui/theme/types.ts
new file mode 100644
index 00000000..8baed57c
--- /dev/null
+++ b/src/ui/theme/types.ts
@@ -0,0 +1,2 @@
+export type ThemeType = "default" | "contrast"
+export type SetTheme = (theme: ThemeType) => void
diff --git a/src/ui/theme/useTheme.ts b/src/ui/theme/useTheme.ts
new file mode 100644
index 00000000..b3fb9232
--- /dev/null
+++ b/src/ui/theme/useTheme.ts
@@ -0,0 +1,15 @@
+import { useContext } from "react"
+import { ThemeContext } from "./ThemeContext"
+import { SetTheme, ThemeType } from "./types"
+
+export type UseThemeResult = {
+    theme: ThemeType
+    setTheme: SetTheme
+    // toggleTheme:
+}
+
+export function useTheme(): UseThemeResult {
+    const [theme, setTheme] = useContext(ThemeContext)
+
+    return { theme, setTheme }
+}

From dd2dc744a2f3a3c532e0799c5386acdc8f9f1741 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Wed, 12 Oct 2022 13:32:10 +0600
Subject: [PATCH 02/10] fix theme context initial value

---
 src/ui/theme/ThemeContext.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/theme/ThemeContext.ts b/src/ui/theme/ThemeContext.ts
index fc68fc1e..2dcb4d68 100644
--- a/src/ui/theme/ThemeContext.ts
+++ b/src/ui/theme/ThemeContext.ts
@@ -1,4 +1,4 @@
 import { createContext } from "react"
 import { SetTheme, ThemeType } from "./types"
 
-export const ThemeContext = createContext<[ThemeType, SetTheme]>("default")
+export const ThemeContext = createContext<[ThemeType, SetTheme]>(["default", () => {}])

From f899f757800bf9d9c216919c457d4327169f2102 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Wed, 12 Oct 2022 13:43:24 +0600
Subject: [PATCH 03/10] google font tag updated

---
 pages/_document.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/pages/_document.tsx b/pages/_document.tsx
index 3adeef60..a9f85883 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -7,8 +7,7 @@ export default function Document() {
                 {/* Google Fonts */}
                 <link
                     href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;900&display=swap"
-                    rel="preload"
-                    as="style"
+                    rel="stylesheet"
                 />
 
             </Head>

From 73566d3aca0ae341eb7ec751f9307361d32cd418 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Wed, 12 Oct 2022 15:52:27 +0600
Subject: [PATCH 04/10] update

---
 src/components/App/index.tsx                  | 47 +++++++++++++++----
 .../{Footer/Author.tsx => Author/index.tsx}   |  0
 src/components/Contacts/index.tsx             |  3 +-
 src/components/Footer/footer.module.css       |  1 -
 src/components/Footer/index.tsx               | 40 ++--------------
 src/style/style.css                           | 21 +++++++++
 src/ui/Box/index.tsx                          |  7 ++-
 src/ui/Panel/index.tsx                        |  6 ++-
 src/ui/Panel/panel.module.css                 |  6 ++-
 src/ui/Title/index.tsx                        | 12 +++++
 10 files changed, 92 insertions(+), 51 deletions(-)
 rename src/components/{Footer/Author.tsx => Author/index.tsx} (100%)
 create mode 100644 src/ui/Title/index.tsx

diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
index 4e0a1cd5..175c8c07 100644
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@@ -13,6 +13,12 @@ import { Box } from "@/ui/Box"
 import { Button } from "@/ui/Button"
 import { EyeOpenIcon } from "@radix-ui/react-icons"
 import { useTheme } from "@/ui/theme/useTheme"
+import { Copyright } from "../Copyright"
+import { Spacer } from "../Spacer"
+import { Author } from "../Author"
+import { Title } from "@/ui/Title"
+import { Panel } from "@/ui/Panel"
+import { Contacts } from "../Contacts"
 
 export type AppProps = {
     showAuthor?: boolean
@@ -54,23 +60,46 @@ export const App: React.FC<AppProps> = ({ showAuthor = false, menu, ...props })
                     </header>
                 )}
                 footer={(
-                    <Footer
-                        showAuthor={showAuthor}
-                    >
+                    <Footer>
+                        <Box gap={40} align={false} style={{
+                            marginBottom: "var(--size-l)",
+                        }}>
+                            <Panel ghost>
+                                <Contacts />
+                            </Panel>
+
+                            <Panel ghost>
+                                <Title level={3}>
+                                    Версия для слабовидящих
+                                </Title>
+                                <Button theme="icon" size="default" onClick={() => {
+                                    setTheme(theme === "default" ? "contrast" : "default")
+                                }}>
+                                    <EyeOpenIcon width={24} height={24} />
+                                </Button>
+                            </Panel>
+                        </Box>
+
                         <div style={{
                             backgroundColor: "white",
                             padding: 10,
                             borderRadius: 10,
                             marginBottom: 30,
                         }}>
-                            <Gosuslugi />
+                            {/* <Gosuslugi /> */}
                         </div>
 
-                        <Button theme="icon" size="default" onClick={() => {
-                            setTheme(theme === "default" ? "contrast" : "default")
-                        }}>
-                            <EyeOpenIcon width={24} height={24} />
-                        </Button>
+
+                        <Box>
+                            <Copyright />
+
+                            {!showAuthor ? null : (
+                                <>
+                                    <Spacer as={"span"} />
+                                    <Author />
+                                </>
+                            )}
+                        </Box>
                     </Footer>
                 )}
             >
diff --git a/src/components/Footer/Author.tsx b/src/components/Author/index.tsx
similarity index 100%
rename from src/components/Footer/Author.tsx
rename to src/components/Author/index.tsx
diff --git a/src/components/Contacts/index.tsx b/src/components/Contacts/index.tsx
index 8f6592d3..6740062a 100644
--- a/src/components/Contacts/index.tsx
+++ b/src/components/Contacts/index.tsx
@@ -3,13 +3,14 @@ import s from "./contacts.module.css"
 import { useContext } from "react"
 import { ConfigContext } from "src/context/ConfigContext"
 import Link from "next/link"
+import { Title } from "@/ui/Title"
 
 export const Contacts: React.FC = props => {
     const { contacts } = useContext(ConfigContext)
 
     return (
         <>
-            <strong className={s.strong}>Контактная информация</strong>
+            <Title level={3}>Контактная информация</Title>
 
             {contacts.map((x, i) => (
                 <p key={i} className={s.link}>
diff --git a/src/components/Footer/footer.module.css b/src/components/Footer/footer.module.css
index 5f1c5f66..c584ce15 100644
--- a/src/components/Footer/footer.module.css
+++ b/src/components/Footer/footer.module.css
@@ -7,4 +7,3 @@
     border-top-left-radius: var(--radius);
     border-top-right-radius: var(--radius);
 }
-
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index 8147077c..48dee25c 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -1,46 +1,12 @@
 import s from "./footer.module.css"
 
-import cx from "classnames"
-import { Copyright } from "../Copyright"
-import { Author } from "./Author"
-import { Spacer } from "../Spacer"
-import { Contacts } from "../Contacts"
-import { Box } from "@/ui/Box"
-import { Panel } from "@/ui/Panel"
-
 export type FooterProps = {
-    showAuthor: boolean
     children?: React.ReactNode
 }
 
-export const Footer: React.FC<FooterProps> = ({ showAuthor, children }) => (
-    <footer className={cx(s.footer, "opposite")}>
-        <Box>
-            <Box vertical align={false} style={{
-                marginBottom: "var(--size-l)",
-            }}>
-                <Contacts />
-            </Box>
-
-            <Panel style={{
-                marginBottom: "var(--size-l)",
-            }}>
-                <Contacts />
-            </Panel>
-        </Box>
-
+export const Footer: React.FC<FooterProps> = ({ children }) => (
+    <footer className={`${s.footer} opposite`}>
         {children}
-
-        <Box>
-            <Copyright />
-
-            {!showAuthor ? null : (
-                <>
-                    <Spacer as={"span"} />
-                    <Author />
-                </>
-            )}
-        </Box>
-    </footer >
+    </footer>
 )
 
diff --git a/src/style/style.css b/src/style/style.css
index d38ba486..fb4b7e3e 100644
--- a/src/style/style.css
+++ b/src/style/style.css
@@ -236,3 +236,24 @@ h3 {
     --radius-small: 0;
     --border: 5px solid var(--color-back-opposite);
 }
+
+/* CONTRAST + DARK THEME */
+@media (prefers-color-scheme: dark) {
+    .theme-contrast {
+        /* TEXT COLOR */
+        --color-text: white;
+        --color-text-second: white;
+        --color-text-opposite: black;
+
+        --color-back-main: black;
+        --color-back: black;
+        --color-back-opposite: white;
+
+        /* --color-back-active: hsl(240, 10%, 20%); */
+        /* --color-link: hsl(240, 10%, 40%); */
+        /* --color-link-opposite: hsl(240, 10%, 60%); */
+
+        --color-hover: white;
+        --color-hover-back: white;
+    }
+}
\ No newline at end of file
diff --git a/src/ui/Box/index.tsx b/src/ui/Box/index.tsx
index 752c85fa..49b015a1 100644
--- a/src/ui/Box/index.tsx
+++ b/src/ui/Box/index.tsx
@@ -14,6 +14,7 @@ export type BoxProps = {
     align?: boolean
     vertical?: boolean
     center?: boolean
+    gap?: number
 }
 
 export const Box: React.FC<BoxProps> = ({
@@ -23,12 +24,16 @@ export const Box: React.FC<BoxProps> = ({
     center = false,
     align = true,
     style,
+    gap,
     className,
     ...props
 }) => {
     const newProps = {
         className: cx(s.box, className, { vertical, align, center, wrap }),
-        style,
+        style: {
+            ...style,
+            gap,
+        },
     }
 
     return createElement(as, newProps, props.children)
diff --git a/src/ui/Panel/index.tsx b/src/ui/Panel/index.tsx
index e7bff785..4f4d901b 100644
--- a/src/ui/Panel/index.tsx
+++ b/src/ui/Panel/index.tsx
@@ -5,14 +5,18 @@ import { Box } from "../Box"
 export type PanelProps = {
     children?: React.ReactNode
     style?: React.CSSProperties
+    ghost?: boolean
 }
 
 export const Panel: React.FC<PanelProps> = ({
     style,
     children,
+    ghost = false,
 }) => {
+    const variant = ghost ? s.ghost : s.default
+
     return (
-        <Box vertical align={false} className={`${s.panel} ${s.default}`} style={style}>
+        <Box vertical align={false} className={`${s.panel} ${variant}`} style={style}>
             {children}
         </Box>
     )
diff --git a/src/ui/Panel/panel.module.css b/src/ui/Panel/panel.module.css
index 4d94a63a..ca7fe826 100644
--- a/src/ui/Panel/panel.module.css
+++ b/src/ui/Panel/panel.module.css
@@ -1,8 +1,12 @@
 .panel {
-    padding: var(--size-m);
     border-radius: var(--radius);
 }
 
 .default {
+    padding: var(--size-m);
     background-color: white;
 }
+
+.ghost {
+    background-color: none;
+}
diff --git a/src/ui/Title/index.tsx b/src/ui/Title/index.tsx
new file mode 100644
index 00000000..99191dc9
--- /dev/null
+++ b/src/ui/Title/index.tsx
@@ -0,0 +1,12 @@
+import { createElement } from "react"
+
+export type TitleProps = {
+    level?: 1 | 2 | 3 | 4 | 5 | 6
+    children?: React.ReactNode
+    className?: string
+    style?: React.CSSProperties
+}
+
+export const Title: React.FC<TitleProps> = ({ level = 1, children, ...props }) => {
+    return createElement(`h${level}`, props, children)
+}

From 041193034efd0cd8cdbe581a8d29f3d8b0499b39 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Wed, 12 Oct 2022 16:22:07 +0600
Subject: [PATCH 05/10] title style update

---
 src/style/style.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/style/style.css b/src/style/style.css
index fb4b7e3e..ef3fef39 100644
--- a/src/style/style.css
+++ b/src/style/style.css
@@ -89,6 +89,7 @@ body {
     font-family: var(--text-font);
 }
 
+/* TITLE */
 h1 {
     font-family: var(--title-font);
     text-align: center;
@@ -106,8 +107,7 @@ h2 {
 }
 
 h3 {
-    margin: var(--size-m) 0;
-
+    margin-bottom: var(--size-s);
     font-size: var(--font-size-h3);
 
     hyphens: none;

From 8d67524526312793e6557bcfd17f4b09929d2246 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Wed, 12 Oct 2022 16:27:27 +0600
Subject: [PATCH 06/10] author comopnent fix

---
 src/components/Author/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Author/index.tsx b/src/components/Author/index.tsx
index 208678df..0a84c4a5 100644
--- a/src/components/Author/index.tsx
+++ b/src/components/Author/index.tsx
@@ -1,6 +1,6 @@
 export const Author: React.FC = () => (
     <span>
-        Разработка и поддержка сайта —
+        Разработка и поддержка — {" "}
         <a href="http://tmshv.ru?utm_source=artshburg&utm_medium=developer&utm_campaign=tmshv_ru">
             www.tmshv.ru
         </a>

From 1e80a02a2640ce6d68169d4f6f2419f72bfc5da1 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Wed, 12 Oct 2022 16:27:46 +0600
Subject: [PATCH 07/10] gosuslugi back + dynamic

---
 src/components/App/index.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
index 175c8c07..41156af0 100644
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@@ -7,7 +7,6 @@ import { Breadcrumbs } from "../Breadcrumbs"
 import { IBreadcumbsPart, IMenu } from "src/types"
 import { useRouter } from "next/router"
 import { useMobile } from "src/hooks/useMobile"
-import { Gosuslugi } from "../Gosuslugi"
 import { Navigation } from "@/components/Navigation"
 import { Box } from "@/ui/Box"
 import { Button } from "@/ui/Button"
@@ -19,6 +18,11 @@ import { Author } from "../Author"
 import { Title } from "@/ui/Title"
 import { Panel } from "@/ui/Panel"
 import { Contacts } from "../Contacts"
+import dynamic from "next/dynamic"
+
+const Gosuslugi = dynamic(import("../Gosuslugi").then(module => module.Gosuslugi), {
+    ssr: false,
+})
 
 export type AppProps = {
     showAuthor?: boolean
@@ -86,7 +90,7 @@ export const App: React.FC<AppProps> = ({ showAuthor = false, menu, ...props })
                             borderRadius: 10,
                             marginBottom: 30,
                         }}>
-                            {/* <Gosuslugi /> */}
+                            <Gosuslugi />
                         </div>
 
 

From 09628c8b963a25a8bc003b90f5962d46e142f137 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Wed, 12 Oct 2022 16:27:58 +0600
Subject: [PATCH 08/10] add closed eye

---
 src/components/App/index.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
index 41156af0..fbcd1a23 100644
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@@ -10,7 +10,7 @@ import { useMobile } from "src/hooks/useMobile"
 import { Navigation } from "@/components/Navigation"
 import { Box } from "@/ui/Box"
 import { Button } from "@/ui/Button"
-import { EyeOpenIcon } from "@radix-ui/react-icons"
+import { EyeClosedIcon, EyeOpenIcon } from "@radix-ui/react-icons"
 import { useTheme } from "@/ui/theme/useTheme"
 import { Copyright } from "../Copyright"
 import { Spacer } from "../Spacer"
@@ -79,7 +79,11 @@ export const App: React.FC<AppProps> = ({ showAuthor = false, menu, ...props })
                                 <Button theme="icon" size="default" onClick={() => {
                                     setTheme(theme === "default" ? "contrast" : "default")
                                 }}>
-                                    <EyeOpenIcon width={24} height={24} />
+                                    {theme === "default" ? (
+                                        <EyeOpenIcon width={24} height={24} />
+                                    ) : (
+                                        <EyeClosedIcon width={24} height={24} />
+                                    )}
                                 </Button>
                             </Panel>
                         </Box>

From cb91aa22be2b04ecf1760b0f871413e3b0915794 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Wed, 12 Oct 2022 16:31:36 +0600
Subject: [PATCH 09/10] contrast fonts fize bigger

---
 src/style/style.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/style/style.css b/src/style/style.css
index ef3fef39..9cbd739d 100644
--- a/src/style/style.css
+++ b/src/style/style.css
@@ -223,9 +223,9 @@ h3 {
     --shadow-active: none;
 
     /* FONTS */
-    --font-size-default: 14pt;
+    --font-size-default: 16pt;
     --font-size-accent: 24pt;
-    --font-size-second: 12pt;
+    --font-size-second: 14pt;
 
     --font-size-h1: 5rem;
     --font-size-h2: 3rem;

From 1ef5b8553ecb1a8f129ce90448b08ea631772469 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Wed, 12 Oct 2022 16:36:33 +0600
Subject: [PATCH 10/10] store current theme in local storage

---
 src/ui/theme/Theme.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/ui/theme/Theme.tsx b/src/ui/theme/Theme.tsx
index 8c398993..5cf5bd02 100644
--- a/src/ui/theme/Theme.tsx
+++ b/src/ui/theme/Theme.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react"
+import { useLocalStorage } from "react-use"
 import { ThemeContext } from "./ThemeContext"
 import { ThemeType } from "./types"
 
@@ -7,10 +7,10 @@ export type ThemeProps = {
 }
 
 export const Theme: React.FC<ThemeProps> = ({ children }) => {
-    const [theme, setTheme] = useState<ThemeType>("default")
+    const [theme, setTheme] = useLocalStorage<ThemeType>("hudozka-theme", "default")
 
     return (
-        <ThemeContext.Provider value={[theme, setTheme]}>
+        <ThemeContext.Provider value={[theme ?? "default", setTheme]}>
             {children}
         </ThemeContext.Provider>
     )