styles3

AnWhiteM · Jun 20, 2024 · d321624 · d321624
1 parent 9e7b448
commit d321624
Show file tree

Hide file tree

Showing 14 changed files with 272 additions and 84 deletions.
diff --git a/src/components/CreateCardModal/CreateCardModal.jsx b/src/components/CreateCardModal/CreateCardModal.jsx
@@ -103,25 +103,43 @@ export const CreateCard = ({ isOpen, isClose, column }) => {
           validationSchema={columnModalValidation}
           onSubmit={handleSubmit}
         >
+          {({ errors, touched }) => (
           <Form autoComplete="off" className={css.createCardModalForm}>
+          <label htmlFor="title" />
+          <div className={css.errorContainer1}>
+                <ErrorMessage
+                  name="title"
+                  component="span"
+                  className={css.error}
+                />
+              </div>
             <Field
               type="text"
               name="title"
-              className={css.createCardModalInput1}
+              className={`${css.createCardModalInput1} ${
+                errors.title && touched.title ? css.inputError : ""
+              }`}
               placeholder="Title"
             />
-            <ErrorMessage className={css.error} component="span" name="title" />
+
+
+            <label htmlFor="description" />
+            <div className={css.errorContainer2}>
+                <ErrorMessage
+                  name="description"
+                  component="span"
+                  className={css.error}
+                />
+              </div>
             <Field
               as="textarea"
               name="description"
-              className={css.createCardModalInput2}
+              className={`${css.createCardModalInput2} ${
+                errors.description && touched.description ? css.inputError : ""
+              }`}
               placeholder="Description"
             />
-            <ErrorMessage
-              className={css.error}
-              component="span"
-              name="description"
-            />
+
             <label className={css.createCardModalLabel}>
               Label color
               <ul className={css.createCardModalRadioList}>
@@ -177,6 +195,7 @@ export const CreateCard = ({ isOpen, isClose, column }) => {
               Add
             </button>
           </Form>
+          )}
         </Formik>
       </div>
     </Modal>

diff --git a/src/components/CreateCardModal/CreateCardModal.module.css b/src/components/CreateCardModal/CreateCardModal.module.css
@@ -75,7 +75,7 @@ input[type="radio"]:checked {
   color: red;
   font-size: 12px;
   text-align: left;
-  margin-bottom: 20px;
+  margin-bottom: 5px;
 }
 
 .wrapper {
@@ -87,17 +87,18 @@ input[type="radio"]:checked {
   height: 20px;
   font-size: 14px;
   border: none;
-  color: #bedbb0;
+  color: var(--calendar-input);
   position: relative;
   background-color: transparent;
   padding-left: 0px;
   outline: none;
   margin-top: 4px;
+  cursor: pointer;
 }
 
 .dateIcon.calendarIcon.Icon {
   position: absolute;
-  stroke: #bedbb0;
+  stroke: var(--calendar-input);
   width: 20px;
   height: 20px;
   padding: 0px;
@@ -106,8 +107,7 @@ input[type="radio"]:checked {
 }
 
 .calendarModal.calendarContainer {
-  color: #ffffff;
-  background-color: #000000;
+  background-color: transparent;
   border: none;
   font-family: inherit;
 }
@@ -177,6 +177,16 @@ input[type="radio"]:checked {
   flex-direction: column;
 }
 
+.errorContainer1 {
+  position: absolute;
+  top: 60px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+
 .createCardModalInput1 {
   background: var(--modal-bg);
   border: 1px solid var(--modal-border);
@@ -188,6 +198,16 @@ input[type="radio"]:checked {
   outline: none;
   opacity: 40%;
   color: var(--modal-text);
+
+  transition: border var(--animation);
+}
+.errorContainer2 {
+  position: absolute;
+  top: 135px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 
 .createCardModalInput2 {
@@ -205,6 +225,12 @@ input[type="radio"]:checked {
   box-sizing: border-box;
   vertical-align: top;
   word-wrap: break-word;
+
+  transition: border var(--animation);
+}
+
+.inputError {
+  border: 1px solid red;
 }
 
 .createCardModalInput1:hover,

diff --git a/src/components/CreateCardModal/react-date-picker.css b/src/components/CreateCardModal/react-date-picker.css
@@ -1,5 +1,8 @@
 .react-datepicker__month-container {
   padding: 18px;
+  background-color: var(--calendar-bg);
+  border-radius: 12px;
+  border: 1px solid var(--modal-border);
 }
 
 .react-datepicker__header {
@@ -14,9 +17,8 @@ h2.react-datepicker__current-month {
   font-size: 16px;
   font-weight: 500;
   letter-spacing: -0.02em;
-  border-bottom: 1px solid;
-  border-color: #ffffff;
-  color: #ffffff;
+  border-bottom: 1px solid var(--calendar-day);
+  color: var(--modal-text);
 }
 
 .react-datepicker__navigation {
@@ -26,9 +28,10 @@ h2.react-datepicker__current-month {
 .react-datepicker__day-name {
   font-size: 14px;
   letter-spacing: -0.02em;
-  color: #ffffff;
+  color: var(--filter-sa);
 }
 
+
 .react-datepicker__day {
   gap: 11px;
   display: flex;
@@ -40,21 +43,21 @@ h2.react-datepicker__current-month {
   height: 23px;
   line-height: 1.28;
   letter-spacing: -0.02em;
-  color: #ffffff;
+  color: var(--btn-inactive);
 }
 
 .react-datepicker__day:hover,
 .react-datepicker__day--selected {
   border-radius: 50%;
-  background-color: #bedbb0;
-  color: #000000;
+  background-color: var(--calendar-hover-box);
+  color: var(--calendar-hover-text);
 }
 
 .react-datepicker__day--disabled {
-  color: #000000;
+  color: var(--btn-inactive);
 }
 .react-datepicker__day--disabled:hover {
-  background-color: #000000;
+  background-color: var(--btn-color);
 }
 
 .react-datepicker__day--keyboard-selected,
@@ -72,5 +75,5 @@ h2.react-datepicker__current-month {
 }
 
 .react-datepicker__day--outside-month {
-  visibility: hidden;
+  color: var(--calendar-day);
 }
diff --git a/src/components/CreateColumnModal/CreateColumnModal.jsx b/src/components/CreateColumnModal/CreateColumnModal.jsx
@@ -57,19 +57,24 @@ export const CreateColumn = ({ isOpen, isClose, board }) => {
             validationSchema={columnModalValidation}
             onSubmit={handleSubmit}
           >
+            {({ errors, touched }) => (
             <Form autoComplete="off" className={css.createColumnModalForm}>
+              <div className={css.errorContainer}>
+            <ErrorMessage
+                className={css.error}
+                component="span"
+                name="title"
+              />
+              </div>
               <Field
                 type="text"
                 name="title"
-                className={css.createColumnModalInput}
+                className={`${css.createColumnModalInput} ${
+                  errors.title && touched.title ? css.inputError : ""
+                }`}
                 placeholder="Title"
                 required
               />
-              <ErrorMessage
-                className={css.error}
-                component="span"
-                name="title"
-              />
               <button type="submit" className={css.createColumnModalSubmit}>
                 <span className={css.createColumnModalSpan}>
                   <svg
@@ -83,6 +88,7 @@ export const CreateColumn = ({ isOpen, isClose, board }) => {
                 Add
               </button>
             </Form>
+            )}
           </Formik>
         </div>
       </Modal>

diff --git a/src/components/CreateColumnModal/CreateColumnModal.module.css b/src/components/CreateColumnModal/CreateColumnModal.module.css
@@ -23,7 +23,7 @@
   background: var(--modal-bg);
   color: var(--modal-text);
   border: 1px solid var(--modal-border);
-  border-radius: 20px;
+  border-radius: 10px;
 }
 
 .createColumnModalOverlay {
@@ -58,6 +58,8 @@
   outline: none;
   opacity: 40%;
   color: var(--modal-text);
+
+  transition: border var(--animation);
 }
 
 .createColumnModalInput:hover,
@@ -70,6 +72,7 @@
   font-weight: 500;
   line-height: 27px;
   letter-spacing: -0.02em;
+  margin-bottom: 25px;
   text-align: left;
   font-family: "Poppins", sans-serif;
   margin-bottom: 24px;
@@ -80,7 +83,18 @@
   color: red;
   font-size: 12px;
   text-align: left;
-  margin-bottom: 20px;
+  margin-bottom: 5px;
+}
+.inputError {
+  border: 1px solid red;
+}
+.errorContainer{
+  position: absolute;
+  top: 60px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 
 .createColumnModalSubmit {

diff --git a/src/components/EditCardModal/EditCardModal.jsx b/src/components/EditCardModal/EditCardModal.jsx
@@ -80,29 +80,42 @@ export const EditCard = ({ isOpen, isClose, task }) => {
             validationSchema={taskModalValidation}
             onSubmit={handleSubmit}
           >
+            {({ errors, touched }) => (
             <Form autoComplete="off" className={css.editCardModalForm}>
+              <label htmlFor="cardtitle" />
+              <div className={css.errorContainer1}>
+                <ErrorMessage
+                  name="cardtitle"
+                  component="span"
+                  className={css.error}
+                />
+              </div>
               <Field
                 type="text"
                 name="cardtitle"
-                className={css.editCardModalInput1}
+                className={`${css.editCardModalInput1} ${
+                  errors.cardtitle && touched.cardtitle ? css.inputError : ""
+                }`}
                 placeholder="Title"
               />
-              <ErrorMessage
-                className={css.error}
-                component="span"
-                name="cardtitle"
-              />
+
+              <label htmlFor="carddescription" />
+              <div className={css.errorContainer2}>
+                <ErrorMessage
+                  name="carddescription"
+                  component="span"
+                  className={css.error}
+                />
+              </div>
               <Field
                 as="textarea"
                 name="carddescription"
-                className={css.editCardModalInput2}
+                className={`${css.editCardModalInput2} ${
+                  errors.carddescription && touched.carddescription ? css.inputError : ""
+                }`}
                 placeholder="Description"
               />
-              <ErrorMessage
-                className={css.error}
-                component="span"
-                name="carddescription"
-              />
+
               <label className={css.editCardModalLabel}>
                 Label color
                 <div className={css.editCardModalRadioContainer}>
@@ -185,6 +198,7 @@ export const EditCard = ({ isOpen, isClose, task }) => {
                 Edit
               </button>
             </Form>
+            )}
           </Formik>
         </div>
       </Modal>