ershisan99/home-works
1
0
Fork 0
mirror of https://github.com/IgnatZakalinsky/home-works.git synced 2025-12-16 12:31:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

add dark theme support and some basic styles

Browse Source
This commit is contained in:
Andres
2022-06-21 12:10:49 +02:00
parent 2f0c8e8bc8
commit e1642e5f26
5 changed files with 158 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
public/index.html
View File

@@ -1,21 +1,21 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" data-theme="1">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
name="description" name="description"
content="Web site created using create-react-app" content="Web site created using create-react-app"
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- <!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build. It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML. Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +24,12 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>React App</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<!-- <!--
This HTML file is a template. This HTML file is a template.
If you open it directly in the browser, you will see an empty page. If you open it directly in the browser, you will see an empty page.
@@ -39,5 +39,5 @@
To begin the development, run `npm start` or `yarn start`. To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`. To create a production bundle, use `npm run build` or `yarn build`.
--> -->
</body> </body>
</html> </html>

70
src/index.css
View File

@@ -1,13 +1,67 @@
body { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
sans-serif; 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
code { code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace; 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);
} }

28
src/s1-main/App.tsx
View File

@@ -5,20 +5,26 @@ import HW1 from '../s2-homeworks/hw01/HW1'
// import HW3 from '../s2-homeworks/hw03/HW3' // import HW3 from '../s2-homeworks/hw03/HW3'
// import HW4 from '../s2-homeworks/hw04/HW4' // import HW4 from '../s2-homeworks/hw04/HW4'
import HW5 from '../s2-homeworks/hw05/HW5' import HW5 from '../s2-homeworks/hw05/HW5'
import { useSelector } from 'react-redux'
import { useEffect } from 'react'
const App = () => { const App = () => {
return ( const themeId = useSelector((state: any) => state.theme.themeId)
<div className={s.App}> useEffect(() => {
<div>react homeworks:</div> document.documentElement.dataset.theme = themeId
}, [themeId])
return (
<div className={s.App} data-theme={themeId}>
<div>react homeworks:</div>
{/*<HW1/>*/} {/*<HW1/>*/}
{/*<HW2/>*/} {/*<HW2/>*/}
{/*<HW3/>*/} {/*<HW3/>*/}
{/*<HW4/>*/} {/*<HW4/>*/}
<HW5/> <HW5 />
</div> </div>
) )
} }
export default App export default App

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

@@ -1,38 +1,37 @@
.select { .select {
width: 100px; width: 100px;
padding: 5px; padding: 5px;
padding-right: 30px; cursor: pointer;
appearance: none;
cursor: pointer; background-color: var(--primary);
appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
background-color: #003300; /*---------------------------------------------------------------------------------------------------------------------------------------------------fill---------99ff99*/ linear-gradient(135deg, currentColor 50%, transparent 50%);
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-position: calc(100% - 20px) calc(1px + 50%),
background-repeat: no-repeat, repeat; calc(100% - 16px) calc(1px + 50%);
background-position: right .7em top 50%, 0 0; background-size: 4px 4px, 4px 4px;
background-size: .65em auto, 100%; background-repeat: no-repeat;
border-radius: 2px;
border: 2px inset rgb(118, 118, 118); border: 2px solid var(--primary);
color: #99ff99; color: var(--primary-content);
} }
.select:focus { .select:focus {
outline: none; outline: none;
border: #99ff99 solid 2px;
} }
.option { .option {
/*padding: 30px;*/ /*padding: 30px;*/
color: #003300; color: var(--primary-content);
background: #99ff99; background: var(--primary);
} }
.option:checked { .option:checked {
background: #003300; color: var(--secondary-content);
color: #99ff99; background: var(--primary);
} }
.option:hover{ .option:hover {
box-shadow: 0 0 10px 100px #FED20F inset; box-shadow: 0 0 10px 100px #fed20f inset;
transition: all .2s ease-in-out; transition: all 0.2s ease-in-out;
background: red; background: red;
} }

61
src/s2-homeworks/hw12/HW12.tsx
View File

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