diff --git a/src/s2-homeworks/hw01/Message.module.css b/src/s2-homeworks/hw01/Message.module.css index cac937a..81ba25e 100644 --- a/src/s2-homeworks/hw01/Message.module.css +++ b/src/s2-homeworks/hw01/Message.module.css @@ -64,7 +64,7 @@ height: 100%; background-color: #06c; box-shadow: 0 5px 20px rgba(29, 33, 38, 0.03), - 0 1px 2px rgba(29, 33, 38, 0.1); + 0 1px 2px rgba(29, 33, 38, 0.1); display: flex; flex-direction: column; margin-right: 20px; @@ -123,7 +123,7 @@ box-sizing: border-box; background: #f5f7fb; box-shadow: 0 5px 20px rgba(29, 33, 38, 0.03), - 0 1px 2px rgba(29, 33, 38, 0.1); + 0 1px 2px rgba(29, 33, 38, 0.1); border-radius: 20px; width: 100%; border: none; @@ -162,7 +162,7 @@ text-align: center; } -img { +.imageAndMessage img { border-radius: 50%; width: 48px; height: 48px; diff --git a/src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.module.css b/src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.module.css index d3f57a3..7113dcd 100644 --- a/src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.module.css +++ b/src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.module.css @@ -7,13 +7,6 @@ } } -.default { - background: #06c; -} - -.red { - background: #cc1439; -} .disabled { background: #004d99; @@ -21,6 +14,7 @@ color: #002e5c; } + .button { overflow: hidden; cursor: pointer; @@ -34,6 +28,21 @@ line-height: 20px; } +.secondary { + background: transparent; + border: 1px solid #0066CC; + border-radius: 3px; + color: #0066CC; +} + +.default { + background: #06c; +} + +.red { + background: #cc1439; +} + .button::after { display: block; content: ''; @@ -60,13 +69,19 @@ background: #ff1a47; } -.button:focus { +.secondary:hover { + background: #E5F0FA; } + .default:active { background: #0059b3; } +.secondary:active { + background: #C9E5FF; +} + .red:active { background: #b31232; } diff --git a/src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.tsx b/src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.tsx index 696fbaf..ccea9d8 100644 --- a/src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.tsx +++ b/src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.tsx @@ -18,7 +18,13 @@ const SuperButton: React.FC = ({ ...restProps // все остальные пропсы попадут в объект restProps, там же будет children }) => { const finalClassName = `${s.button} ${ - disabled ? s.disabled : xType === 'red' ? s.red : s.default + disabled + ? s.disabled + : xType === 'red' + ? s.red + : xType === 'secondary' + ? s.secondary + : s.default } ${className}` // задачка на смешивание классов return ( diff --git a/src/s2-homeworks/hw06/HW6.module.css b/src/s2-homeworks/hw06/HW6.module.css new file mode 100644 index 0000000..d25b829 --- /dev/null +++ b/src/s2-homeworks/hw06/HW6.module.css @@ -0,0 +1,4 @@ +.buttonsContainer { + display: flex; + gap: 24px; +} \ No newline at end of file diff --git a/src/s2-homeworks/hw06/HW6.tsx b/src/s2-homeworks/hw06/HW6.tsx index 77695da..01ccef1 100644 --- a/src/s2-homeworks/hw06/HW6.tsx +++ b/src/s2-homeworks/hw06/HW6.tsx @@ -3,6 +3,7 @@ import SuperEditableSpan from './common/c4-SuperEditableSpan/SuperEditableSpan' import { restoreState, saveState } from './localStorage/localStorage' import s2 from '../../s1-main/App.module.css' import SuperButton from '../hw04/common/c2-SuperButton/SuperButton' +import s from './HW6.module.css' const HW6 = () => { const [value, setValue] = useState('') @@ -16,34 +17,40 @@ const HW6 = () => { } return ( -
+
{/*
*/} {/*можно убрать этот тег*/} - -
Homeworks #6
+
Homework #6
{/*should work (должно работать)*/} -
- +
+
+ +
+
+ + save to ls + + + get from ls + +
- - save to ls - - - get from ls - - -
+ {/*
*/} {/*можно убрать этот тег*/} -
+ {/*
*/} {/*можно убрать этот тег*/}
) diff --git a/src/s2-homeworks/hw06/common/c4-SuperEditableSpan/SuperEditableSpan.module.css b/src/s2-homeworks/hw06/common/c4-SuperEditableSpan/SuperEditableSpan.module.css index 947245d..91f6051 100644 --- a/src/s2-homeworks/hw06/common/c4-SuperEditableSpan/SuperEditableSpan.module.css +++ b/src/s2-homeworks/hw06/common/c4-SuperEditableSpan/SuperEditableSpan.module.css @@ -1,9 +1,13 @@ .span { - display: inline-block; - - height: 31px; - padding-top: 10px; + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 24px; cursor: pointer; - color: #77aaff; + font-family: 'Montserrat', sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 20px; + color: #0080FF; } diff --git a/src/s2-homeworks/hw06/common/c4-SuperEditableSpan/SuperEditableSpan.tsx b/src/s2-homeworks/hw06/common/c4-SuperEditableSpan/SuperEditableSpan.tsx index 8c2c261..af7933c 100644 --- a/src/s2-homeworks/hw06/common/c4-SuperEditableSpan/SuperEditableSpan.tsx +++ b/src/s2-homeworks/hw06/common/c4-SuperEditableSpan/SuperEditableSpan.tsx @@ -6,7 +6,7 @@ import React, { } from 'react' import s from './SuperEditableSpan.module.css' import SuperInputText from '../../../hw04/common/c1-SuperInputText/SuperInputText' - +import editIcon from './editIcon.svg' // тип пропсов обычного инпута type DefaultInputPropsType = DetailedHTMLProps< InputHTMLAttributes, @@ -77,7 +77,13 @@ const SuperEditableSpan: React.FC = ({ {...restSpanProps} > {/*если нет захардкодженного текста для спана, то значение инпута*/} - ✎ {children || restProps.value} + {'edit'}{' '} + {children || restProps.value} )} diff --git a/src/s2-homeworks/hw06/common/c4-SuperEditableSpan/editIcon.svg b/src/s2-homeworks/hw06/common/c4-SuperEditableSpan/editIcon.svg new file mode 100644 index 0000000..ac94c10 --- /dev/null +++ b/src/s2-homeworks/hw06/common/c4-SuperEditableSpan/editIcon.svg @@ -0,0 +1,4 @@ + + + +