Directory and Post Modal with design changes #54
Conversation
There was a problem hiding this comment.
Let's move the components folder outside of apps. so it'll be src/components
|
|
||
| /* Button hover effect */ | ||
| .modal-actions button:hover { | ||
| background-color: #f0f0f0; |
There was a problem hiding this comment.
don't think this is the correct color hover color
Let's check with the designers the hover color of the cancel button
Cancel button is missing a boarder
| border-radius: 4px; | ||
| cursor: pointer; | ||
| font-size: 16px; /* Set size for buttons */ | ||
| color: #333; /* Set color for buttons */ |
There was a problem hiding this comment.
Double check the colors with design #333 doesn't seem to be one of the colors the designers used
ALso leveraged the color variables defined in global.css instead of using the colors directly when possible
| message: errorMessages.message?._errors[0], | ||
| }); | ||
| return; | ||
| } |
There was a problem hiding this comment.
https://react-hook-form.com/get-started
Can we use react-hook-form?
It'll work with zod to do the error checking so you don't have to do this. most of this
We don't want to be disabling linter errors these ones are avoidable
| <button type="button" onClick={onClose}> | ||
| Cancel | ||
| </button> | ||
| <button type="submit">Submit</button> |
There was a problem hiding this comment.
Thus button has the wrong hover color
There was a problem hiding this comment.
Same thing, we shouldn't be disabeling the linter here
react-hook-form should help with the errors
| type="text" | ||
| value={website} | ||
| onChange={(e) => { | ||
| setInstitution(e.target.value); |
| onChange={(e) => { | ||
| setInstitution(e.target.value); | ||
| }} | ||
| placeholder="Phone" |
| onChange={handleCountryChange} | ||
| className={country ? "country-selected" : ""} | ||
| > | ||
| <option value="" disabled> |
There was a problem hiding this comment.
active /selected country text color is wrong
| <button | ||
| type="button" | ||
| className="save-button" | ||
| onClick={() => { |
There was a problem hiding this comment.
save button doesn't trigger the console.log nor the form submit.
you need type='submit' for the submission
|
Somehow keep getting dependency incompatibilities with postcss and tailwind, probably just an issue on my end |
There was a problem hiding this comment.
missing react-hook-form
need to npm install react-hook-form in the frontend folder
There was a problem hiding this comment.
Also missing @hookform/resolvers package
| } | ||
|
|
||
| h2 { | ||
| @apply text-mainHeading; |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | ||
| } | ||
|
|
||
| .close-button { |
There was a problem hiding this comment.
the close button is outside of the modal
you are likely missing a position rule on this element or its parent element
take a look at how Kiruthika wrote hers yours. The same css rules should apply to ours. (position absolute on the close and position relative on the container of the close button) (line 29 and 35)
| label { | ||
| display: block; | ||
| margin-bottom: 3px; | ||
| color: #333; |
| width: 100%; | ||
| padding: 10px; | ||
| font-size: 1rem; | ||
| border: 1px solid #ccc; |
There was a problem hiding this comment.
I don't think ccc is the right color code for the border i think its #b4b4b4`
| <div className="modal-overlay"> | ||
| <div className="modal-container"> | ||
| <h2>Create New Post</h2> | ||
| <form onSubmit={handleSubmit(submitForm)}> |
There was a problem hiding this comment.
change the on submit to
(e) => { e.preventDefault(); void handleSubmit(onSubmit)(e); }
which should take care of one of the linter errors.
But the code above in a function name it then pass it to the form to make it more readable use a useCallback on it too
|
|
||
| if (!isOpen) return null; | ||
|
|
||
| const submitForm = (data: PostFormData) => { |
| <div className="form-group"> | ||
| <label htmlFor="post-message">Message</label> | ||
| <textarea id="post-message" {...register("message")} placeholder="Message" /> | ||
| {errors.message && <p className="error-message">{errors.message.message}</p>} |
There was a problem hiding this comment.
error mesage mising error styling color use
There was a problem hiding this comment.
same as the directory modal change the way the
tag is there so its always there thus leaving space for the error message so the screen/rendering doesn't move as much when the message shows
| <button className="close-button" onClick={onClose}> | ||
| × | ||
| </button> | ||
| <h2>Edit Directory Info</h2> |
There was a problem hiding this comment.
| <h2>Edit Directory Info</h2> | |
| <h2>Edit Personal Info</h2> |
lets match the design text
There was a problem hiding this comment.
text color should be black when you type something in
Tracking Info
Resolves #21 #23
Changes
Testing
Confirmation of Change