Merge pull request #30 from 001elijah/create-edit-forms

Create edit forms

src/components/BoardModalWindow/BoardModalWindow.jsx

@@ -1,50 +1,70 @@
 import PropTypes from 'prop-types';
 import { useState } from 'react';
-import { ReusableColumnModalWindow } from 'components/ReusableColumnModalWindow/ReusableColumnModalWindow';
+import { useSelector } from 'react-redux';
+import { selectorTheme } from 'redux/Auth/authSelectors';
 import { BoxRadioIconGroup } from 'components/BoxRadioIconGroup/BoxRadioIconGroup';
 import { BoxRadioBackgroundGroup } from 'components/BoxRadioBackgroundGroup/BoxRadioBackgroundGroup';
+import sprite from '../../assets/icons/sprite.svg';
+import { Modal } from 'components/Modal/Modal';
+import s from './BoardModalWindow.module.scss';
 
 export const BoardModalWindow = ({
   inputTitle,
   modalTitle,
   titleModalButton,
-  onClick,
+  onSubmit,
   handleToggleModal,
 }) => {
+  const theme = useSelector(selectorTheme);
+  const [title, setTitle] = useState('');
   const [background, setBackground] = useState('dark');
   const [icon, setIcon] = useState('');
 
-  const handleAddBoard = value => {
+  const handleSubmit = e => {
+    e.preventDefault();
     const newCard = {
-      value,
+      title: title,
       icon,
       background,
     };
     console.log(newCard);
-    // onclick(dispatch(addNewCard());
+    onSubmit(newCard);
+    handleToggleModal();
   };
 
   return (
-    <ReusableColumnModalWindow
-      inputTitle={inputTitle}
-      modalTitle={modalTitle}
-      titleModalButton={titleModalButton}
-      onSubmit={handleAddBoard}
-      handleToggleModal={handleToggleModal}
-      onClick={onClick}
-      icon={icon}
-      background={background}
-    >
-      <BoxRadioIconGroup valueChange={setIcon} />
-      <BoxRadioBackgroundGroup valueChange={setBackground} />
-    </ReusableColumnModalWindow>
+    <Modal title={modalTitle} onClose={handleToggleModal}>
+      <form onSubmit={handleSubmit}>
+        <input
+          className={`${s.inputModal} ${s[theme]}`}
+          value={title}
+          placeholder={inputTitle}
+          onChange={e => setTitle(e.target.value)}
+        />
+        <BoxRadioIconGroup valueChange={setIcon} />
+        <BoxRadioBackgroundGroup valueChange={setBackground} />
+        <button className={`${s.buttonModal} ${s[theme]}`} type="submit">
+          <span className={`${s.iconButtonModalWrapper} ${s[theme]}`}>
+            <svg
+              className={`${s.iconButtonModal} ${s[theme]}`}
+              width="14"
+              height="14"
+            >
+              <use href={sprite + '#icon-plus'}></use>
+            </svg>
+          </span>
+          {titleModalButton}
+        </button>
+      </form>
+    </Modal>
   );
 };
 
 BoardModalWindow.propTypes = {
   modalTitle: PropTypes.string.isRequired,
   inputTitle: PropTypes.string.isRequired,
   titleModalButton: PropTypes.string.isRequired,
-  onClick: PropTypes.func,
+  onSubmit: PropTypes.func,
   handleToggleModal: PropTypes.func,
+  id: PropTypes.func,
 };

src/components/BoardModalWindow/BoardModalWindow.module.scss

@@ -0,0 +1,164 @@
+@import '../../assets/styles/vars';
+@import '../../assets/styles/mixins';
+
+.inputModal {
+  width: 287px;
+  height: 49px;
+  padding-left: 18px;
+
+  border: 1px solid #bedbb0;
+  border-radius: 8px;
+  margin-bottom: 24px;
+
+  font-family: 'Poppins-Regular';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: calc(21 / 14);
+
+  letter-spacing: -0.02em;
+
+  &.colorful {
+    border: 1px solid rgba(82, 85, 188, 1);
+    color: #161616;
+    background-color: inherit;
+    opacity: 0.4;
+    &::placeholder {
+      color: rgba(22, 22, 22, 0.5);
+    }
+
+    &:focus {
+      border: 1px solid #5255bc;
+      outline: none;
+      filter: drop-shadow(0px 4px 16px rgba(22, 22, 22, 0.08));
+      opacity: initial;
+    }
+  }
+
+  &.dark {
+    color: rgba(255, 255, 255, 1);
+    background: #1f1f1f;
+    border: 1px solid #bedbb0;
+    box-shadow: 0px 4px 16px rgba(22, 22, 22, 0.08);
+    opacity: 0.4;
+
+    &::placeholder {
+      color: rgba(255, 255, 255, 1);
+    }
+
+    &:focus {
+      border: 1px solid #bedbb0;
+      filter: drop-shadow(0px 4px 16px rgba(22, 22, 22, 0.08));
+      outline: none;
+      opacity: initial;
+    }
+  }
+
+  &.light {
+    color: $black-text-color;
+    opacity: 0.4;
+
+    &::placeholder {
+      color: rgba(22, 22, 22, 1);
+    }
+
+    &:focus {
+      border: 1px solid #bedbb0;
+      filter: drop-shadow(0px 4px 16px rgba(22, 22, 22, 0.08));
+      background-color: #fcfcfc;
+      color: #161616;
+      opacity: initial;
+      outline: none;
+    }
+  }
+
+  @include tablet {
+    max-width: 302px;
+    width: 100%;
+  }
+
+  @include desktop {
+    max-width: 302px;
+    width: 100%;
+  }
+}
+
+.buttonModal {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  max-width: 287px;
+  height: 49px;
+  cursor: pointer;
+
+  background: #bedbb0;
+  border-radius: 8px;
+  border: none;
+
+  font-family: 'Poppins-Regular';
+  font-weight: 500;
+  font-size: 14px;
+  line-height: calc(21 / 14);
+
+  letter-spacing: -0.02em;
+
+  color: #161616;
+
+  padding: 10px;
+
+  &.colorful {
+    background: rgba(82, 85, 188, 1);
+    color: white;
+  }
+
+  &.dark {
+    color: rgba(22, 22, 22, 1);
+  }
+
+  &.light {
+    color: rgba(22, 22, 22, 1);
+  }
+
+  @include tablet {
+    max-width: 302px;
+  }
+
+  @include desktop {
+    max-width: 302px;
+  }
+}
+
+.iconButtonModal {
+  &.colorful {
+    stroke: rgba(22, 22, 22, 1);
+  }
+
+  &.dark,
+  &.light {
+    stroke: rgba(255, 255, 255, 1);
+  }
+}
+
+.iconButtonModalWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  margin-right: 8px;
+  background-color: rgba(22, 22, 22, 1);
+  border-radius: 6px;
+
+  &.colorful {
+    background-color: rgba(255, 255, 255, 1);
+  }
+
+  &.dark {
+    color: rgba(255, 255, 255, 1);
+  }
+
+  &.light {
+    color: rgba(22, 22, 22, 1);
+  }
+}

src/components/BoxRadioBackgroundGroup/BoxRadioBackgroundGroup.jsx

@@ -1,8 +1,12 @@
 import { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { selectorTheme } from 'redux/Auth/authSelectors';
 import PropTypes from 'prop-types';
 import s from './BoxRadioBackgroundGroup.module.scss';
 
 export const BoxRadioBackgroundGroup = ({ valueChange }) => {
+  const theme = useSelector(selectorTheme);
+
   const [background, setBackground] = useState('one');
   // const handleChange = e => {
   //   setColor(e.target.value);
@@ -20,7 +24,7 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => {
 
   return (
     <div className={s.backgroundGroupWrapper}>
-      <h1 className={s.label}>Background</h1>
+      <h1 className={`${s.label} ${s[theme]}`}>Background</h1>
       <div className={s.radioWrapper}>
         <div className={s.radioContainer}>
           <input
@@ -32,7 +36,10 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => {
             id="one"
             checked={background === 'one'}
           />
-          <label htmlFor="one" className={s.radioLabel1}></label>
+          <label
+            htmlFor="one"
+            className={`${s.radioLabel1} ${s[theme]}`}
+          ></label>
         </div>
 
         <div className={s.radioContainer}>