From 137dc586b603f10d2e1a02dbc237e23f36a1ebd2 Mon Sep 17 00:00:00 2001 From: bogutskii <sl9site@gmail.com> Date: Fri, 31 May 2024 10:49:26 -0700 Subject: [PATCH] refactor --- src/App.js | 2 +- src/components/{ => Auth}/AuthContext.js | 0 src/components/{ => Auth}/Login.js | 0 src/components/{ => Auth}/LoginModal.js | 0 src/components/{ => Auth}/Register.js | 0 src/components/{ => Auth}/RegisterModal.js | 0 src/components/{ => Field}/Field.css | 0 src/components/{ => Field}/Field.js | 12 +++---- src/components/{ => Field}/FieldSize.js | 0 src/components/Header.js | 6 ++-- src/components/{ => Tools}/Brush.js | 6 ++-- src/components/{ => Tools}/ColorChanger.js | 4 +-- src/components/{ => Tools}/ColorHistory.js | 2 +- src/components/{ => Tools}/CurrentColor.js | 0 src/index.js | 2 +- src/styles.css | 37 +++++----------------- 16 files changed, 25 insertions(+), 46 deletions(-) rename src/components/{ => Auth}/AuthContext.js (100%) rename src/components/{ => Auth}/Login.js (100%) rename src/components/{ => Auth}/LoginModal.js (100%) rename src/components/{ => Auth}/Register.js (100%) rename src/components/{ => Auth}/RegisterModal.js (100%) rename src/components/{ => Field}/Field.css (100%) rename src/components/{ => Field}/Field.js (92%) rename src/components/{ => Field}/FieldSize.js (100%) rename src/components/{ => Tools}/Brush.js (91%) rename src/components/{ => Tools}/ColorChanger.js (85%) rename src/components/{ => Tools}/ColorHistory.js (95%) rename src/components/{ => Tools}/CurrentColor.js (100%) diff --git a/src/App.js b/src/App.js index ae4a7808..95e1f086 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,5 @@ import './styles.css'; -import Field from './components/Field.js'; +import Field from './components/Field/Field.js'; import { connect } from 'react-redux'; import { Header } from './components/Header'; diff --git a/src/components/AuthContext.js b/src/components/Auth/AuthContext.js similarity index 100% rename from src/components/AuthContext.js rename to src/components/Auth/AuthContext.js diff --git a/src/components/Login.js b/src/components/Auth/Login.js similarity index 100% rename from src/components/Login.js rename to src/components/Auth/Login.js diff --git a/src/components/LoginModal.js b/src/components/Auth/LoginModal.js similarity index 100% rename from src/components/LoginModal.js rename to src/components/Auth/LoginModal.js diff --git a/src/components/Register.js b/src/components/Auth/Register.js similarity index 100% rename from src/components/Register.js rename to src/components/Auth/Register.js diff --git a/src/components/RegisterModal.js b/src/components/Auth/RegisterModal.js similarity index 100% rename from src/components/RegisterModal.js rename to src/components/Auth/RegisterModal.js diff --git a/src/components/Field.css b/src/components/Field/Field.css similarity index 100% rename from src/components/Field.css rename to src/components/Field/Field.css diff --git a/src/components/Field.js b/src/components/Field/Field.js similarity index 92% rename from src/components/Field.js rename to src/components/Field/Field.js index ea90b075..c26d6a99 100644 --- a/src/components/Field.js +++ b/src/components/Field/Field.js @@ -1,20 +1,20 @@ import React, { useState } from 'react'; import { connect } from 'react-redux'; import './Field.css'; -import Brush from './Brush'; -import ColorHistory from './ColorHistory'; +import Brush from '../Tools/Brush'; +import ColorHistory from '../Tools/ColorHistory'; import FieldSize from './FieldSize'; -import DrawHistory from './DrawHistory'; +import DrawHistory from '../DrawHistory'; import domtoimage from 'dom-to-image'; -import ColorChanger from './ColorChanger'; -import CurrentColor from './CurrentColor'; +import ColorChanger from '../Tools/ColorChanger'; +import CurrentColor from '../Tools/CurrentColor'; const Field = (props) => { const [continueToDraw, setContinueToDraw] = useState(false); const [gridMap, setGridMap] = useState(true); const [fieldSize, setFieldSize] = useState('800'); - const { field, currentColor, changeColor, changePixelColor, clearField, pixelSize } = props; + const { field, changePixelColor, clearField, pixelSize } = props; const onKeyPressed = (e) => { if (e.code === 'Space' || e.type === 'mousedown') { diff --git a/src/components/FieldSize.js b/src/components/Field/FieldSize.js similarity index 100% rename from src/components/FieldSize.js rename to src/components/Field/FieldSize.js diff --git a/src/components/Header.js b/src/components/Header.js index 09b36977..f8fbc466 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,8 +1,8 @@ // Header.js import React, { useState } from 'react'; -import { useAuth } from './AuthContext'; -import LoginModal from './LoginModal'; -import RegisterModal from './RegisterModal'; +import { useAuth } from './Auth/AuthContext'; +import LoginModal from './Auth/LoginModal'; +import RegisterModal from './Auth/RegisterModal'; export const Header = () => { const { user, logout } = useAuth(); diff --git a/src/components/Brush.js b/src/components/Tools/Brush.js similarity index 91% rename from src/components/Brush.js rename to src/components/Tools/Brush.js index 0841fbe1..2782a1c4 100644 --- a/src/components/Brush.js +++ b/src/components/Tools/Brush.js @@ -1,9 +1,9 @@ import React from 'react'; import { connect } from 'react-redux'; import classnames from 'classnames'; -import fill from './icons/fill.png'; -import random from './icons/random.jpeg'; -import colorpicker from './icons/colorpicker.png'; +import fill from '../icons/fill.png'; +import random from '../icons/random.jpeg'; +import colorpicker from '../icons/colorpicker.png'; const Brush = ({ changeBrush, fieldRandomBrush, brush }) => { const brushTypes = [ diff --git a/src/components/ColorChanger.js b/src/components/Tools/ColorChanger.js similarity index 85% rename from src/components/ColorChanger.js rename to src/components/Tools/ColorChanger.js index 1e805495..4f8f1895 100644 --- a/src/components/ColorChanger.js +++ b/src/components/Tools/ColorChanger.js @@ -1,7 +1,7 @@ -import React, { useState } from 'react'; +import React from 'react'; import { connect } from 'react-redux'; -const ColorChanger = (props) => { +const ColorChanger = () => { return ( <div className="mg-10"> <br /> diff --git a/src/components/ColorHistory.js b/src/components/Tools/ColorHistory.js similarity index 95% rename from src/components/ColorHistory.js rename to src/components/Tools/ColorHistory.js index 5b034071..464c3f36 100644 --- a/src/components/ColorHistory.js +++ b/src/components/Tools/ColorHistory.js @@ -1,6 +1,6 @@ import React from 'react'; import { connect } from 'react-redux'; -import history_del from './icons/history_del.png'; +import history_del from '../icons/history_del.png'; const HistoryColor = ({ historyColor, changeColor, deleteColorHistory }) => { return ( diff --git a/src/components/CurrentColor.js b/src/components/Tools/CurrentColor.js similarity index 100% rename from src/components/CurrentColor.js rename to src/components/Tools/CurrentColor.js diff --git a/src/index.js b/src/index.js index cd5757ee..adb085db 100644 --- a/src/index.js +++ b/src/index.js @@ -3,7 +3,7 @@ import ReactDOM from 'react-dom'; import App from './App'; import { Provider } from 'react-redux'; import store from './components/redux/store'; -import { AuthProvider } from './components/AuthContext' +import { AuthProvider } from './components/Auth/AuthContext' ReactDOM.render( <React.StrictMode> diff --git a/src/styles.css b/src/styles.css index 848eed96..ff3f836e 100644 --- a/src/styles.css +++ b/src/styles.css @@ -2,7 +2,6 @@ font-family: sans-serif; text-align: center; } -/* checkbox square slider start */ .switch { position: relative; display: inline-block; @@ -47,8 +46,6 @@ input:checked + .slider:before { -ms-transform: translateX(26px); transform: translateX(26px); } -/* checkbox square slider end */ -/*list history */ .drawHistory { margin-left: 10px; width: 56%; @@ -107,7 +104,7 @@ input:checked + .slider:before { vertical-align: middle; } .btn-reg { - box-shadow: inset 0px 1px 0px 0px #dcecfb; + box-shadow: inset 0 1px 0 0 #dcecfb; background: linear-gradient(to bottom, #ddf2fc 5%, rgba(179, 214, 255, 0.65) 100%); background-color: #d5eaff; border-radius: 6px; @@ -167,7 +164,6 @@ input:checked + .slider:before { top: 50%; margin: auto; } -/* HEADER */ @import url(https://fonts.googleapis.com/css?family=Baumans); html { background: #ecf0f1; @@ -184,7 +180,6 @@ input { text-transform: uppercase; cursor: pointer; } -/* ----------- */ header { position: relative; height: 50px; @@ -198,7 +193,6 @@ h1 { font-family: 'Arial', sans-serif; text-align: center; } - /* Switch button styling */ .switch { position: relative; display: inline-block; @@ -239,7 +233,6 @@ h1 { input:checked + .slider:before { transform: translateX(26px); } - /* Styling for list items */ .list-li { background: #f1fdff; border: 1px solid #abcdbd; @@ -258,7 +251,6 @@ h1 { background: #e6f8ff; border: 1px solid #06acd5; } - /* General button styling */ .btn { color: #000; background-color: rgba(239, 115, 115, .87); @@ -274,7 +266,6 @@ h1 { .btn:active { background-color: rgba(195, 75, 75, .95); } - /* Input styling */ .input-save { width: 100%; padding: 5px; @@ -284,7 +275,6 @@ h1 { color: black; border-radius: 5px; } - /* Header styling */ .header { background-color: #2c3e50; color: white; @@ -325,7 +315,7 @@ header input:focus { header input[type='submit'] { font-weight: bold; } -input[type="text"]:focus::placeholder,input[type="password"]:focus::placeholder,input[type="email"]:focus::placeholder { +input[type="text"]:focus::placeholder, input[type="password"]:focus::placeholder, input[type="email"]:focus::placeholder { color: #b2f8f2; opacity: 1; } @@ -334,12 +324,10 @@ input[type="text"]:focus::placeholder,input[type="password"]:focus::placeholder, display: none; } } -/* ------END HEADER----- */ .draw-history-wrap { display: flex; width: 450px; } -/* input type color */ input[type='color'] { -webkit-appearance: none; border: none; @@ -352,11 +340,9 @@ input[type='color']::-webkit-color-swatch-wrapper { input[type='color']::-webkit-color-swatch { border: none; } -/*range field size*/ .range-field-size { width: 300px; } -/*preloader*/ :root { --fg: #17181c; --c1: #f42f25; @@ -368,11 +354,11 @@ input[type='color']::-webkit-color-swatch { .pl3 { justify-content: space-between; } -.pl3__a,.pl3__b,.pl3__c,.pl3__d { +.pl3__a, .pl3__b, .pl3__c, .pl3__d { width: 0.75em; height: 0.75em; } -.pl3__a,.pl3__b,.pl3__c,.pl3__d { +.pl3__a, .pl3__b, .pl3__c, .pl3__d { animation: bounce3 2s ease-in-out infinite; transform-origin: 50% 0; } @@ -397,35 +383,32 @@ input[type='color']::-webkit-color-swatch { background: var(--c4); animation-delay: 0.3s; } -/* Animations */ @keyframes bounce3 { - from,5%,95%,to { + from, 5%, 95%, to { transform: translateY(0) scaleY(1); } 16.7% { transform: translateY(0) scaleY(8); } - 28.3%,38.3% { + 28.3%, 38.3% { transform: translateY(5.25em) scaleY(1); } 50% { transform: translateY(2.625em) scaleY(4.5); } - 61.7%,71.7% { + 61.7%, 71.7% { transform: translateY(2.625em) scaleY(1); } 83.3% { transform: translateY(0) scaleY(4.5); } } -/*color picker*/ -/* Custom poiners */ .custom-pointers .react-colorful__saturation-pointer { width: 16px; height: 16px; border-radius: 3px; } -.custom-pointers .react-colorful__hue-pointer,.custom-pointers .react-colorful__alpha-pointer { +.custom-pointers .react-colorful__hue-pointer, .custom-pointers .react-colorful__alpha-pointer { width: 16px; border-radius: 3px; } @@ -490,7 +473,6 @@ input[type='color']::-webkit-color-swatch { max-width: 500px; width: 100%; } - .header { background-color: #2c3e50; color: white; @@ -637,7 +619,6 @@ input[type="text"], input[type="password"], input[type="email"] { max-width: 500px; width: 100%; } - html, body { background: #ecf0f1; font-family: 'Arial', sans-serif; @@ -707,7 +688,6 @@ input[type="text"], input[type="password"], input[type="email"] { max-width: 500px; width: 100%; } - html, body { background: #ecf0f1; font-family: 'Arial', sans-serif; @@ -778,7 +758,6 @@ input[type="text"], input[type="password"], input[type="email"] { max-width: 400px; width: 100%; } - .register-form { flex-direction: column; align-items: center;