Merge to prod

components/Marathon/Mentors.jsx

@@ -3,7 +3,7 @@ import { CiCircleChevRight, CiCircleChevLeft } from "react-icons/ci";
 import { IoClose } from "react-icons/io5";
 import { FaLinkedin, FaMedium, FaResearchgate, FaSquareFacebook, FaSquareThreads } from "react-icons/fa6";
 import { IconButton } from '@mui/material';
-
+import EastIcon from '@mui/icons-material/East';
 import Image from '@/shared/components/Image';
 import Modal from '@/shared/components/Modal';
 import { cn } from '@/utils/cn';
@@ -303,11 +303,11 @@ const Mentors = () => {
             <MentorCard
               key={mentor.name}
               mentor={mentor}
-              className="cursor-pointer"
+              className="cursor-pointer group"
               onClick={() => handleOpenModal(mentor.name)}
             >
-              <div className="absolute bottom-0 left-0 right-0 p-4">
-                <div className="flex gap-2">
+              <div className="absolute bottom-0 left-0 right-0 pt-4">
+                <div className="flex gap-2 px-3">
                   {mentor.tags.slice(0, 1).map((tag, index) => (
                     <Tag
                       key={tag}
@@ -316,7 +316,8 @@ const Mentors = () => {
                     />
                   ))}
                 </div>
-                <div className="heading-md text-white text-start mt-2">{mentor.title} | {mentor.name}</div>
+                <div className="heading-md text-white text-start mt-2 px-3 pb-3">{mentor.title} | {mentor.name}</div>
+                <div className="bg-white flex justify-end items-center text-gray-400 px-3 py-2 gap-1 group-hover:text-primary-base">more <EastIcon className="!text-[16px]" /></div>
               </div>
             </MentorCard>
           ))}

components/Marathon/SignUp/Edit.styled.jsx

@@ -80,6 +80,9 @@ export const StyledSection = styled(Box)`
   border-radius: 16px;
   border: 1px solid #DBDBDB;
 
+  &.error {
+    border-color: #EF5364;
+  }
 
   @media (max-width: 767px) {
     padding: 32px 16px;
@@ -187,6 +190,12 @@ export const StyledInputBase = styled(InputBase)`
     border-width: 1px;
     padding: 12px 16px;
   }
+
+  &.error {
+    border-color: #EF5364;
+    outline-color: #EF5364;
+    position: relative;
+  }
 `;
 export const StyledTextareaAutosize = styled(TextareaAutosize)`
   width: 100%;
@@ -200,10 +209,20 @@ export const StyledTextareaAutosize = styled(TextareaAutosize)`
     border: 2px solid #16B9B3;
     padding: 11px 15px;
     outline-color: #16B9B3;
+
+    &.error {
+      border-color: #EF5364;
+      outline-color: #EF5364;
+    }
   }
 
   .MuiInputBase-input {
     padding: 0;
     line-height: 140%;
   }
+
+  &.error {
+    border-color: #EF5364;
+    outline-color: #16B9B3;
+  }
 `;

components/Marathon/SignUp/EditSubMilestone.jsx

@@ -3,7 +3,6 @@ import styled from "@emotion/styled";
 import {
   Typography,
   Box,
-  Grid,
   IconButton,
   MenuItem,
   Select,
@@ -33,13 +32,32 @@ const FixedLabel = styled(Typography)`
   width: 20px;
   flex-shrink: 0;
 `;
+
 const StyledContainer = styled(Box)`
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
   gap: 10px;
   width: 100%;
+  backgroundColor: #FFF;
+  padding: 12px 16px;
+  border-radius: 8px;
+  border: 1px solid #DBDBDB;
+
+  @media (max-width: 767px) {
+    display: grid;
+    grid-template-areas:
+      "content buttons"
+      "date date";
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto;
+  }
+
+  &:focus-within {
+    border: 1px solid #16B9B3;
+    padding: 12px 16px;
+  }
 
   .content {
     flex-grow: 1;
@@ -48,6 +66,11 @@ const StyledContainer = styled(Box)`
     align-items: center;
     justify-content: flex-start;
     gap: 10px;
+    grid-area: content;
+  }
+  .weekdaySelector {
+    grid-area: date;
+
   }
 
   .buttons {
@@ -56,29 +79,7 @@ const StyledContainer = styled(Box)`
     align-items: center;
     justify-content: center;
     gap: 10px;
-  }
-`;
-
-const StyledButtonGroup = styled(Box)`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-`;
-const StyledGridItem = styled(Grid)`
-  background-color: #FFF;
-  display: flex;
-  padding: 12px 16px;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  align-self: stretch;
-  border-radius: 8px;
-
-  &:focus-within {
-    border: 1px solid #16B9B3;
-    padding: 11px 15px;
+    grid-area: buttons;
   }
 
   .title {
@@ -88,16 +89,30 @@ const StyledGridItem = styled(Grid)`
     width: 100%;
     justify-content: space-between;
     flex-wrap: nowrap;
-
+    grid-area: title;
+    gap: 4px;
+    span {
+      margin-right: 4px;
+      flex-shrink: 0;
+    }
     p {
       color: #293A3D;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
       line-height: 140%;
     }
-  }
+  }  
 `;
+
+const StyledButtonGroup = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+`;
+
 const StyledWeekdaySelector = styled(Select)`
     font-size: 12px;
     font-style: normal;
@@ -109,7 +124,6 @@ const StyledWeekdaySelector = styled(Select)`
     justify-content: flex-start;
     width: 100%;
     max-width: 150px;
-    min-width: 56px;
     gap: 8px;
     padding: 0 0 0 0;
     height: 100%;
@@ -128,6 +142,16 @@ const StyledWeekdaySelector = styled(Select)`
       height: 16px;
       fill: #92989A;
     }
+    .MuiInputBase-input {
+      padding-right: 0 !important;
+      text-align: right;
+    }
+    @media (max-width: 767px) {
+      .MuiInputBase-input {
+        text-align: left;
+        max-width: 100%;
+      }
+    }
 `;
 const StyledInputBase = styled(InputBase)`
   width: 100%;
@@ -247,8 +271,8 @@ export default function EditSubMilestone({
   };
 
   return (
-    <StyledGridItem item xs={12}>
-      <StyledContainer>
+    <StyledContainer>
+      <Box className="content">
         <FixedLabel component="span">{`${index + 1}.`}</FixedLabel>
         <StyledInputBase
           placeholder="任務名稱"
@@ -257,81 +281,82 @@ export default function EditSubMilestone({
           value={newMilestone.name || ''}
           notched="false"
         />
-
-        <StyledButtonGroup>
-          <StyledWeekdaySelector
-            multiple
-            placeholder="自訂"
-            displayEmpty
-            value={newMilestone.dates}
-            onChange={handleChangeWeekdays}
-            input={(
-              <InputBase placeholder="自訂" startAdornment={(<CalendarTodayOutlinedIcon />)} />
-            )}
-            renderValue={
-              (selected) =>
-                selected?.length ? selected
-                  .map((ISODate) => ISOToWeekday(ISODate))
-                  .filter(Boolean)
-                  .join(", ") : '自訂'
-            }
-            sx={{
-              '.MuiSelect-icon': {
-                display: 'none',
+      </Box>
+      <Box className="weekdaySelector">
+        <StyledWeekdaySelector
+          multiple
+          placeholder="自訂"
+          displayEmpty
+          value={newMilestone.dates}
+          onChange={handleChangeWeekdays}
+          input={(
+            <InputBase placeholder="自訂" startAdornment={(<CalendarTodayOutlinedIcon />)} />
+          )}
+          renderValue={
+            (selected) =>
+              selected?.length ? selected
+                .map((ISODate) => ISOToWeekday(ISODate))
+                .filter(Boolean)
+                .join(", ") : '自訂'
+          }
+          sx={{
+            '.MuiSelect-icon': {
+              display: 'none',
+            },
+          }}
+          MenuProps={{
+            PaperProps: {
+              style: {
+                padding: '12px',
+                maxHeight: 150,
+                overflowY: 'auto',
+                scrollbarWidth: 'thin',
+                maxWidth: '140px'
               },
-            }}
-            MenuProps={{
-              PaperProps: {
-                style: {
-                  padding: '12px',
-                  maxHeight: 150,
-                  overflowY: 'auto',
-                  scrollbarWidth: 'thin',
-                  maxWidth: '140px'
-                },
-              },
-              MenuListProps: {
-                style: {
-                  padding: '0'
-                }
+            },
+            MenuListProps: {
+              style: {
+                padding: '0'
               }
-            }}
-          >
-            {ZH_WEEK_DAY_MAP.map((zhDay) => {
-              const isSelected = newMilestone.dates.includes(weekdayToISO(zhDay));
-              return (
-                <StyledMenuItem
-                  key={zhDay}
-                  value={weekdayToISO(zhDay)}
-                  style={{
-                    backgroundColor: isSelected ? '#DEF5F5' : 'transparent',
-                    margin: '0 0 4px',
-                    color: '#293A3D',
-                  }}
-                >
-                  {zhDay}
-                </StyledMenuItem>
-              );
-            })}
-          </StyledWeekdaySelector>
+            }
+          }}
+        >
+          {ZH_WEEK_DAY_MAP.map((zhDay) => {
+            const isSelected = newMilestone.dates.includes(weekdayToISO(zhDay));
+            return (
+              <StyledMenuItem
+                key={zhDay}
+                value={weekdayToISO(zhDay)}
+                style={{
+                  backgroundColor: isSelected ? '#DEF5F5' : 'transparent',
+                  margin: '0 0 4px',
+                  color: '#293A3D',
+                }}
+              >
+                {zhDay}
+              </StyledMenuItem>
+            );
+          })}
+        </StyledWeekdaySelector>
+      </Box>
 
-          <StyledCancelButton
-            onClick={handleCloseEditPanel}
-            className="cancel"
-            aria-label="cancel"
-          >
-            <ClearIcon />
-          </StyledCancelButton>
+      <StyledButtonGroup className="buttons">
+        <StyledCancelButton
+          onClick={handleCloseEditPanel}
+          className="cancel"
+          aria-label="cancel"
+        >
+          <ClearIcon />
+        </StyledCancelButton>
 
-          <StyledSubmitButton
-            onClick={handleClickSendButton}
-            className="submit"
-            aria-label="submit"
-          >
-            <SendIcon />
-          </StyledSubmitButton>
-        </StyledButtonGroup>
-      </StyledContainer>
-    </StyledGridItem>
+        <StyledSubmitButton
+          onClick={handleClickSendButton}
+          className="submit"
+          aria-label="submit"
+        >
+          <SendIcon />
+        </StyledSubmitButton>
+      </StyledButtonGroup>
+    </StyledContainer>
   );
 }