fix styling

hackforla · Nov 6, 2024 · 8a500c1 · 8a500c1
1 parent f3d77a1
commit 8a500c1
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 26 deletions.
diff --git a/client/src/components/presentational/newUserForm.jsx b/client/src/components/presentational/newUserForm.jsx
@@ -154,25 +154,29 @@ const NewUserForm = (props) => {
                           <label htmlFor={question.htmlName}>
                             {question.questionText}
                           </label>
-                          <FormControl
-                            sx={{
-                              margin: '1rem 0',
-                            }}
-                          >
-                            <DatePicker
-                              views={['year', 'month']}
-                              label="Month and Year"
-                              minDate={minDate}
-                              maxDate={maxDate}
-                              value={selectedDate}
-                              onChange={handleDateChange}
-                              inputFormat="MMM yyyy"
+                          <div className="datepicker-container">
+                            <FormControl
+                              sx={{
+                                margin: '1rem 0',
+                                width: '100%',
+                              }}
                             >
-                              {(params) => (
-                                <TextField {...params} variant="standard" />
-                              )}
-                            </DatePicker>
-                          </FormControl>
+                              <DatePicker
+                                views={['year', 'month']}
+                                label="Month and Year"
+                                minDate={minDate}
+                                maxDate={maxDate}
+                                value={selectedDate}
+                                onChange={handleDateChange}
+                                inputFormat="MMM yyyy"
+                                sx={{ width: '100%' }}
+                              >
+                                {(params) => (
+                                  <TextField {...params} variant="outlined" />
+                                )}
+                              </DatePicker>
+                            </FormControl>
+                          </div>
                         </div>
                       </div>
                     )

diff --git a/client/src/sass/CheckIn.scss b/client/src/sass/CheckIn.scss
@@ -200,13 +200,15 @@ select {
   pointer-events: none;
   opacity: 0.4;
 }
-.date-picker-container {
-  display: flex;
-  justify-content: space-around;
-  gap: 10px;
-  margin-top: 20px;
+.datepicker-container {
+  width: 100%;
+  max-width: 300px;
 }
-
-.MuiPickersCalendarHeader-labelContainer {
-  display: none !important;
+.datepicker-container input[type='text'] {
+  height: 40px;
+  width: 100%;
+  border-bottom: none;
+  padding-left: 0.5rem;
+  color: red;
+  font-weight: semi-bold;
 }