diff --git a/public/index.html b/public/index.html index aa069f2..bc15ee7 100644 --- a/public/index.html +++ b/public/index.html @@ -1,21 +1,21 @@ - - - - - - - - - - - - React App - - - -
- - + diff --git a/src/index.css b/src/index.css index ec2585e..fc9b88f 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1,67 @@ body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', + 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', + 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} + +[data-theme='1']{ + --primary: #0066CC; + --primary-content: #ffffff; + --secondary: #f000b8, + --secondary-content: #ffffff; + --accent: #37cdbe; + --accent-content: #163835; + --neutral: #3d4451; + --neutral-content: #ffffff; + --base-100: #ffffff; + --base-200: #F2F2F2; + --base-300: #E5E6E6; + --base-content: #1f2937; +} + +[data-theme='2'] { + --primary: #661AE6; + --primary-content: #ffffff; + --secondary: #D926AA; + --secondary-content: #ffffff; + --accent: #1FB2A5; + --accent-content: #ffffff; + --neutral: #191D24; + --neutral-focus: #111318; + --neutral-content: #A6ADBB; + --base-100: #2A303C; + --base-200: #242933; + --base-300: #20252E; + --base-content: #A6ADBB; +} +[data-theme='3'] { + --primary : #ef9995; + --primary-content: #282425; + --secondary : #a4cbb4; + --secondary-content: #282425; + --accent : #ebdc99; + --accent-content: #282425; + --neutral : #7d7259; + --neutral-content: #e4d8b4; + --base-100: #e4d8b4; + --base-200: #d2c59d; + --base-300: #c6b386; + --base-content: #282425; + --info: #2563eb; + --success: #16a34a; + --warning: #d97706; + --error: #dc2626; + +} +html { + background-color: var(--base-100); + color: var(--base-content); } diff --git a/src/s1-main/App.tsx b/src/s1-main/App.tsx index 44b2223..b1079ae 100644 --- a/src/s1-main/App.tsx +++ b/src/s1-main/App.tsx @@ -5,20 +5,26 @@ import HW1 from '../s2-homeworks/hw01/HW1' // import HW3 from '../s2-homeworks/hw03/HW3' // import HW4 from '../s2-homeworks/hw04/HW4' import HW5 from '../s2-homeworks/hw05/HW5' +import { useSelector } from 'react-redux' +import { useEffect } from 'react' const App = () => { - return ( -
-
react homeworks:
+ const themeId = useSelector((state: any) => state.theme.themeId) + useEffect(() => { + document.documentElement.dataset.theme = themeId + }, [themeId]) + return ( +
+
react homeworks:
- {/**/} - {/**/} - {/**/} - {/**/} + {/**/} + {/**/} + {/**/} + {/**/} - -
- ) + +
+ ) } -export default App \ No newline at end of file +export default App diff --git a/src/s2-homeworks/hw07/common/c5-SuperSelect/SuperSelect.module.css b/src/s2-homeworks/hw07/common/c5-SuperSelect/SuperSelect.module.css index 0ab2ad1..c7efa76 100644 --- a/src/s2-homeworks/hw07/common/c5-SuperSelect/SuperSelect.module.css +++ b/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; -} \ No newline at end of file +.option:hover { + box-shadow: 0 0 10px 100px #fed20f inset; + transition: all 0.2s ease-in-out; + background: red; +} diff --git a/src/s2-homeworks/hw12/HW12.tsx b/src/s2-homeworks/hw12/HW12.tsx index f521236..7848705 100644 --- a/src/s2-homeworks/hw12/HW12.tsx +++ b/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 ( -
-
- {/*можно убрать этот тег*/} + return ( +
+
+ {/*можно убрать этот тег*/} -
homeworks 12
- +
+ homeworks 12 +
+ -
- {/*можно убрать этот тег*/} -
- {/*можно убрать этот тег*/} -
- ) +
+ {/*можно убрать этот тег*/} +
+ {/*можно убрать этот тег*/} +
+ ) } export default HW12