add dark theme support and some basic styles

src/s2-homeworks/hw07/common/c5-SuperSelect/SuperSelect.module.css

@@ -1,38 +1,37 @@
 .select {
-    width: 100px;
-    padding: 5px;
-    padding-right: 30px;
-
-    cursor: pointer;
-    appearance: none;
-    background-color: #003300; /*---------------------------------------------------------------------------------------------------------------------------------------------------fill---------99ff99*/
-    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2399FF99%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
-    background-repeat: no-repeat, repeat;
-    background-position: right .7em top 50%, 0 0;
-    background-size: .65em auto, 100%;
-
-    border: 2px inset rgb(118, 118, 118);
-    color: #99ff99;
+   width: 100px;
+   padding: 5px;
+   cursor: pointer;
+   appearance: none;
+   background-color: var(--primary);
+   background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
+      linear-gradient(135deg, currentColor 50%, transparent 50%);
+   background-position: calc(100% - 20px) calc(1px + 50%),
+      calc(100% - 16px) calc(1px + 50%);
+   background-size: 4px 4px, 4px 4px;
+   background-repeat: no-repeat;
+   border-radius: 2px;
+   border: 2px solid var(--primary);
+   color: var(--primary-content);
 }
 
 .select:focus {
-    outline: none;
-    border: #99ff99 solid 2px;
+   outline: none;
 }
 
 .option {
-    /*padding: 30px;*/
-    color: #003300;
-    background: #99ff99;
+   /*padding: 30px;*/
+   color: var(--primary-content);
+   background: var(--primary);
 }
 
 .option:checked {
-    background: #003300;
-    color: #99ff99;
+   color: var(--secondary-content);
+   background: var(--primary);
 }
 
-.option:hover{
-    box-shadow: 0 0 10px 100px #FED20F inset;
-    transition: all .2s ease-in-out;
-    background: red;
-}
+.option:hover {
+   box-shadow: 0 0 10px 100px #fed20f inset;
+   transition: all 0.2s ease-in-out;
+   background: red;
+}

src/s2-homeworks/hw12/HW12.tsx

@@ -2,43 +2,48 @@ import React from 'react'
 import s from './HW12.module.css'
 import s2 from '../../s1-main/App.module.css'
 import SuperSelect from '../hw07/common/c5-SuperSelect/SuperSelect'
-import {useDispatch, useSelector} from 'react-redux'
-import {changeThemeId} from './bll/themeReducer'
+import { useDispatch, useSelector } from 'react-redux'
+import { changeThemeId } from './bll/themeReducer'
 
 const themes = [
-    {id: 1, value: 'dark'},
-    {id: 2, value: 'red'},
-    {id: 3, value: 'some'},
+   { id: 1, value: 'light' },
+   { id: 2, value: 'dark' },
+   { id: 3, value: 'retro' },
 ]
 
 const HW12 = () => {
-    const themeId = useSelector((state: any) => state.theme.themeId)
-    const theme = themes.find(t => t.id === themeId)!.value
+   const themeId = useSelector((state: any) => state.theme.themeId)
+   const theme = themes.find((t) => t.id === themeId)!.value
 
-    const dispatch = useDispatch()
-    const change = (id: number) => {
-        dispatch(changeThemeId(id))
-    }
+   const dispatch = useDispatch()
+   const change = (id: number) => {
+      dispatch(changeThemeId(id))
+   }
 
-    return (
-        <div id={'hw12'} className={s2.hw + ' ' + s[theme]}>
-            <hr/>
-            {/*можно убрать этот тег*/}
+   return (
+      <div id={'hw12'} className={s2.hw + ' ' + s[theme]}>
+         <hr />
+         {/*можно убрать этот тег*/}
 
-            <div id={'hw12-text'} className={s2.hwTitle + ' ' + s[theme + '-text']}>homeworks 12</div>
-            <SuperSelect
-                id={'hw12-select-theme'}
-                value={themeId}
-                options={themes}
-                onChangeOption={change}
-            />
+         <div
+            id={'hw12-text'}
+            className={s2.hwTitle + ' ' + s[theme + '-text']}
+         >
+            homeworks 12
+         </div>
+         <SuperSelect
+            id={'hw12-select-theme'}
+            value={themeId}
+            options={themes}
+            onChangeOption={change}
+         />
 
-            <hr/>
-            {/*можно убрать этот тег*/}
-            <hr/>
-            {/*можно убрать этот тег*/}
-        </div>
-    )
+         <hr />
+         {/*можно убрать этот тег*/}
+         <hr />
+         {/*можно убрать этот тег*/}
+      </div>
+   )
 }
 
 export default HW12