update

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>
                 )}
             >

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}>

src/components/Footer/footer.module.css

@@ -7,4 +7,3 @@
     border-top-left-radius: var(--radius);
     border-top-right-radius: var(--radius);
 }
-

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>
 )
 

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;
+    }
+}

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)

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>
     )

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;
+}

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)
+}