Skip to content

Commit

Permalink
Merge pull request #181 from daodaoedu/dev
Browse files Browse the repository at this point in the history 
Merge to prod
  • Loading branch information
@vincentxuu
vincentxuu authored Dec 18, 2024
2 parents 9473b7e + 9553f34 commit 978b336
Show file tree
Hide file tree
Showing 7 changed files with 481 additions and 195 deletions.
11 changes: 6 additions & 5 deletions components/Marathon/Mentors.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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}
Expand All @@ -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>
))}
Expand Down
19 changes: 19 additions & 0 deletions components/Marathon/SignUp/Edit.styled.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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%;
Expand All @@ -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;
}
`;
227 changes: 126 additions & 101 deletions components/Marathon/SignUp/EditSubMilestone.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import styled from "@emotion/styled";
import {
Typography,
Box,
Grid,
IconButton,
MenuItem,
Select,
Expand Down Expand Up @@ -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;
Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -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;
Expand All @@ -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%;
Expand All @@ -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%;
Expand Down Expand Up @@ -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="任務名稱"
Expand All @@ -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>
);
}
Loading

0 comments on commit 978b336

Please sign in to comment.