diff --git a/src/components/common/avatar/Avatar.styled.ts b/src/components/common/avatar/Avatar.styled.ts index 8065fee9..b730cfcf 100644 --- a/src/components/common/avatar/Avatar.styled.ts +++ b/src/components/common/avatar/Avatar.styled.ts @@ -1,15 +1,21 @@ import styled from 'styled-components'; import { AvatarProps } from './Avatar'; -export const AvatarContainer = styled.div>` +interface AvatarContainerProps extends Omit { + $isMainLogo?: boolean; +} + +export const AvatarContainer = styled.div` width: ${({ size }) => size}; height: ${({ size }) => size}; - border: 1px solid ${({ theme }) => theme.color.border}; - border-radius: 50%; + border-radius: ${({ $isMainLogo }) => ($isMainLogo ? '0' : '50%')}; + border: ${({ $isMainLogo, theme }) => + $isMainLogo ? 'none' : `1px solid ${theme.color.border}`}; + .avatar { width: 100%; height: 100%; - border-radius: 50%; + border-radius: ${({ $isMainLogo }) => ($isMainLogo ? '0' : '50%')}; } @media screen and ${({ theme }) => theme.mediaQuery.tablet} { diff --git a/src/components/common/avatar/Avatar.tsx b/src/components/common/avatar/Avatar.tsx index 1ecaa38b..3935ffa4 100644 --- a/src/components/common/avatar/Avatar.tsx +++ b/src/components/common/avatar/Avatar.tsx @@ -1,6 +1,7 @@ import { ReactNode } from 'react'; import * as S from './Avatar.styled'; import defaultImg from '../../../assets/defaultImg.png'; +import MainLogo from '../../../assets/mainlogo.svg'; export interface AvatarProps { size: string; @@ -8,10 +9,11 @@ export interface AvatarProps { } function Avatar({ size, image }: AvatarProps) { + const isMainLogo = image === MainLogo; const releasedImg = typeof image === 'string' && image.trim() ? image : defaultImg; return ( - + {typeof image === 'string' || !image ? ( Avatar ) : ( diff --git a/src/components/common/sidebar/Sidebar.styled.ts b/src/components/common/sidebar/Sidebar.styled.ts index ab31d072..8fa769f3 100644 --- a/src/components/common/sidebar/Sidebar.styled.ts +++ b/src/components/common/sidebar/Sidebar.styled.ts @@ -46,7 +46,7 @@ export const MenuItem = styled.div<{ $isActive: boolean }>` $isActive ? '#f9f9f9' : 'transparent'}; @media ${({ theme }) => theme.mediaQuery.tablet} { - font-size: 0.7rem; + font-size: 0.9rem; } &:hover { diff --git a/src/components/manageProjects/CardList.styled.ts b/src/components/manageProjects/CardList.styled.ts index f968346f..16ddc17c 100644 --- a/src/components/manageProjects/CardList.styled.ts +++ b/src/components/manageProjects/CardList.styled.ts @@ -3,7 +3,7 @@ import styled from 'styled-components'; export const CardListWrapper = styled.div` display: flex; flex-wrap: wrap; - justify-content: start; + justify-content: center; align-items: center; gap: 20px; `; diff --git a/src/components/manageProjects/applicantInfo/ApplicantInfo.styled.ts b/src/components/manageProjects/applicantInfo/ApplicantInfo.styled.ts index 0edd696d..d125250f 100644 --- a/src/components/manageProjects/applicantInfo/ApplicantInfo.styled.ts +++ b/src/components/manageProjects/applicantInfo/ApplicantInfo.styled.ts @@ -33,7 +33,7 @@ export const Title = styled.h2` `; export const Label = styled.p` - font-size: ${({ theme }) => theme.heading.medium.fontSize}; + font-size: ${({ theme }) => theme.heading.semiSmall.fontSize}; font-weight: 700; color: ${({ theme }) => theme.color.deepGrey}; diff --git a/src/components/manageProjects/applicantInfo/LabelWithContent.styled.ts b/src/components/manageProjects/applicantInfo/LabelWithContent.styled.ts index 6d9c0b6a..efe7f8d9 100644 --- a/src/components/manageProjects/applicantInfo/LabelWithContent.styled.ts +++ b/src/components/manageProjects/applicantInfo/LabelWithContent.styled.ts @@ -1,7 +1,7 @@ import styled from 'styled-components'; export const Label = styled.p` - font-size: ${({ theme }) => theme.heading.medium.fontSize}; + font-size: ${({ theme }) => theme.heading.semiSmall.fontSize}; font-weight: 700; color: ${({ theme }) => theme.color.deepGrey}; diff --git a/src/components/manageProjects/applicantList/ApplicantItem.styled.ts b/src/components/manageProjects/applicantList/ApplicantItem.styled.ts index 258f71db..1341df61 100644 --- a/src/components/manageProjects/applicantList/ApplicantItem.styled.ts +++ b/src/components/manageProjects/applicantList/ApplicantItem.styled.ts @@ -30,11 +30,13 @@ export const Button = styled.button` border: 1px solid ${({ $passStatus, theme }) => getBorderColor($passStatus, theme)}; border-radius: ${({ theme }) => theme.borderRadius.primary}; + transition: all 0.2s ease; &:hover { background-color: ${({ theme }) => theme.buttonScheme.primary.bg}; color: ${({ theme }) => theme.buttonScheme.primary.color}; border: none; + transition: all 0.2s ease-out; } @media ${({ theme }) => theme.mediaQuery.tablet} { diff --git a/src/components/manageProjects/passNonPassList/PassNonPassItem.styled.ts b/src/components/manageProjects/passNonPassList/PassNonPassItem.styled.ts index fc0a486d..7bf35a03 100644 --- a/src/components/manageProjects/passNonPassList/PassNonPassItem.styled.ts +++ b/src/components/manageProjects/passNonPassList/PassNonPassItem.styled.ts @@ -8,9 +8,12 @@ export const ItemWrapper = styled.li` padding: 1rem; border: 1px solid ${({ theme }) => theme.color.grey}; border-radius: ${({ theme }) => theme.borderRadius.primary}; + transition: all 0.2s ease; + &:hover { background-color: ${({ theme }) => theme.color.navy}; color: ${({ theme }) => theme.color.white}; + transition: all 0.2s ease; } @media ${({ theme }) => theme.mediaQuery.tablet} { diff --git a/src/pages/manage/myProjectList/MyProjectList.styled.ts b/src/pages/manage/myProjectList/MyProjectList.styled.ts index e372c4e0..f47df17d 100644 --- a/src/pages/manage/myProjectList/MyProjectList.styled.ts +++ b/src/pages/manage/myProjectList/MyProjectList.styled.ts @@ -11,6 +11,5 @@ export const ManageProjectsContainer = styled.div` `; export const TitleWrapper = styled.header` - margin-left: 2rem; margin-bottom: 2rem; `;