diff --git a/src/pages/Account/AccountCancel/styles.tsx b/src/pages/Account/AccountCancel/styles.tsx index e528432a..cb515c44 100644 --- a/src/pages/Account/AccountCancel/styles.tsx +++ b/src/pages/Account/AccountCancel/styles.tsx @@ -16,30 +16,30 @@ export const SubTitle = styled.h3` margin-bottom: 0.625rem; text-align: center; text-align: left; - margin-top: 10px; + margin-top: 0.625rem; padding: 1.25rem; `; export const Text = styled.p` font-size: 0.875rem; - margin-bottom: 5px; + margin-bottom: 0.3125rem; text-align: left; - margin-top: 10px; + margin-top: 0.625rem; padding: 0rem 1.25rem; `; export const InfoBox = styled.div` background: ${({ theme }) => theme.colors.background.secondary}; - padding: 70px; - margin-top: 10px; - border-radius: 10px; - margin: 10px 20px 1.25rem 20px; + padding: 4.375rem; + margin-top: 0.625rem; + border-radius: 0.625rem; + margin: 0.625rem 1.25rem 1.25rem 1.25rem; `; export const InfoItem = styled.p` font-size: 0.875rem; margin-bottom: 0.625rem; - padding: 2px 10px; + padding: 0.125rem 0.625rem; display: flex; justify-content: center; align-items: center; @@ -51,7 +51,7 @@ export const CheckboxWrapper = styled.div` display: flex; align-items: center; margin-bottom: 1.25rem; - padding: 0rem 15px; + padding: 0rem 0.9375rem; input[type='checkbox'] { margin-right: 0.625rem; diff --git a/src/pages/Account/AccountEdit/styles.tsx b/src/pages/Account/AccountEdit/styles.tsx index 65eb681d..743e12cd 100644 --- a/src/pages/Account/AccountEdit/styles.tsx +++ b/src/pages/Account/AccountEdit/styles.tsx @@ -1,7 +1,7 @@ import { styled } from 'styled-components'; export const ProfileEditContainer = styled.div` - max-width: 512px; + max-width: 32rem; display: flex; flex-direction: column; position: relative; @@ -11,7 +11,7 @@ export const Section = styled.div` margin-top: 1.875rem; margin-bottom: 1.875rem; width: 100%; - padding: 0px 30px; + padding: 0rem 1.875rem; `; export const SectionTitle = styled.div` @@ -62,7 +62,7 @@ export const SnsConnection = styled.div` export const MemberInfo = styled.div` display: flex; flex-direction: column; - margin-top: 35px; + margin-top: 2.1875rem; width: 100%; `; @@ -71,7 +71,7 @@ export const MemberInfoRow = styled.div` align-items: center; justify-content: flex-start; margin-bottom: 0.625rem; - margin-top: 10px; + margin-top: 0.625rem; `; export const Label = styled.div` diff --git a/src/pages/Account/AccountSetting/styles.tsx b/src/pages/Account/AccountSetting/styles.tsx index 5b1ce005..ef19ecf5 100644 --- a/src/pages/Account/AccountSetting/styles.tsx +++ b/src/pages/Account/AccountSetting/styles.tsx @@ -14,7 +14,7 @@ export const ProfilePicWrapper = styled.div` flex-direction: column; align-items: center; margin-bottom: 1.25rem; - margin-top: 24px; + margin-top: 1.5rem; `; export const ProfilePic = styled.div` @@ -42,7 +42,7 @@ export const Row = styled.div` justify-content: center; align-items: center; width: 100%; - margin-bottom: 10px; + margin-bottom: 0.625rem; ${Label} { width: auto; @@ -59,15 +59,15 @@ export const List = styled.ul` padding: 0; margin: 0; list-style: none; - border-top: 0px solid ${({ theme }) => theme.colors.background.divider}; + border-top: 0rem solid ${({ theme }) => theme.colors.background.divider}; position: absolute; - bottom: 20px; + bottom: 1.25rem; `; export const ListItem = styled.li` display: flex; align-items: center; - padding: 15px 1.25rem; + padding: 0.9375rem 1.25rem; border-bottom: 0px solid ${({ theme }) => theme.colors.background.divider}; cursor: pointer; diff --git a/src/pages/Profile/ButtonSecondary/styles.tsx b/src/pages/Profile/ButtonSecondary/styles.tsx index af4a1820..14b7e3f7 100644 --- a/src/pages/Profile/ButtonSecondary/styles.tsx +++ b/src/pages/Profile/ButtonSecondary/styles.tsx @@ -1,14 +1,15 @@ import { styled } from 'styled-components'; export const Button = styled.button` - width: 100%; - margin: 16px auto; + width: 90%; + margin: 1rem auto; height: 3.1rem; text-align: center; color: ${({ theme }) => theme.colors.brand.primary}; cursor: pointer; box-sizing: border-box; - border: 1px solid; - border-radius: 10px; - padding: 10px; + border: 0.0625rem solid; + border-radius: 0.625rem; + padding: 0.625rem; + padding-inline: 1rem; `; diff --git a/src/pages/Profile/NavbarProfile/styles.tsx b/src/pages/Profile/NavbarProfile/styles.tsx index ac142d87..2726d440 100644 --- a/src/pages/Profile/NavbarProfile/styles.tsx +++ b/src/pages/Profile/NavbarProfile/styles.tsx @@ -4,7 +4,7 @@ export const Nav = styled.nav` display: flex; justify-content: space-between; align-items: center; - padding: 8px 20px; + padding: 0.5rem 1.25rem; position: fixed; top: 0; left: 0; @@ -17,7 +17,7 @@ export const Nav = styled.nav` export const IconContainer = styled.div` display: flex; align-items: center; - margin-right: 18px; + margin-right: 5px; a { display: flex; diff --git a/src/pages/Profile/ProfileEdit/styles.tsx b/src/pages/Profile/ProfileEdit/styles.tsx index 014fd396..5c94df97 100644 --- a/src/pages/Profile/ProfileEdit/styles.tsx +++ b/src/pages/Profile/ProfileEdit/styles.tsx @@ -14,7 +14,7 @@ export const ProfilePicWrapper = styled.div` display: flex; flex-direction: column; align-items: center; - margin-bottom: 10px; + margin-bottom: 0.625rem; position: relative; `; @@ -25,19 +25,19 @@ export const Label = styled.label` export const Input = styled.input` width: 100%; - padding: 25px; - margin: 10px 0; - border: 0px; + padding: 1.5625rem; + margin: 0.625rem 0; + border: 0rem; box-sizing: border-box; - border-radius: 10px; + border-radius: 0.625rem; background-color: ${({ theme }) => theme.colors.background.secondary}; text-align: left; `; export const Button = styled.button` position: absolute; - bottom: 10px; - right: 10px; + bottom: 0.625rem; + right: 0.625rem; z-index: 1; width: 1.7rem; height: 1.7rem; @@ -50,18 +50,22 @@ export const Button = styled.button` `; export const ProfilePic = styled.div` - width: 7.25rem; - height: 7.25rem; + width: 7.5rem; + height: 7.5rem; flex-shrink: 0; border-radius: 50%; overflow: hidden; - margin-top: 2.125rem; - margin-bottom: 15px; + margin-top: 2rem; + margin-bottom: 0.9375rem; img { width: 100%; height: 100%; object-fit: cover; + box-shadow: + 0px 2px 8px 0px rgba(0, 0, 0, 0.12), + 0px 1px 4px 0px rgba(0, 0, 0, 0.08), + 0px 0px 1px 0px rgba(0, 0, 0, 0.08); } `; @@ -72,8 +76,8 @@ export const Row = styled.div` flex-direction: column; align-items: stretch; width: 100%; - margin-top: 0px; - padding: 0px 20px; + margin-top: 0rem; + padding: 0rem 1.25rem; ${Label} { width: 6.25rem; @@ -81,12 +85,12 @@ export const Row = styled.div` `; export const EmailInput = styled.input` - margin-bottom: 120px; + margin-bottom: 7.5rem; width: 100%; - padding: 25px; + padding: 1.5625rem; border: 0px; box-sizing: border-box; - border-radius: 10px; + border-radius: 0.625rem; background-color: ${({ theme }) => theme.colors.background.secondary}; text-align: left; `; @@ -100,9 +104,9 @@ export const UserInfo = styled.div``; export const Username = styled.button` color: ${({ theme }) => theme.colors.text.primary}; font-family: Pretendard; - font-size: 22px; + font-size: 1.375rem; font-style: normal; font-weight: 700; line-height: 136.4%; - letter-spacing: -0.427px; + letter-spacing: -0.0267rem; `; diff --git a/src/pages/Profile/UserProfile/style.tsx b/src/pages/Profile/UserProfile/style.tsx index 4d2d07aa..b7fe4712 100644 --- a/src/pages/Profile/UserProfile/style.tsx +++ b/src/pages/Profile/UserProfile/style.tsx @@ -11,6 +11,10 @@ export const UserImg = styled.img` height: 4.5rem; object-fit: cover; border-radius: 50%; + box-shadow: + 0px 2px 8px 0px rgba(0, 0, 0, 0.12), + 0px 1px 4px 0px rgba(0, 0, 0, 0.08), + 0px 0px 1px 0px rgba(0, 0, 0, 0.08); `; export const UserDetailsContainer = styled.section` diff --git a/src/pages/Profile/styles.tsx b/src/pages/Profile/styles.tsx index 7db238d6..50c6463f 100644 --- a/src/pages/Profile/styles.tsx +++ b/src/pages/Profile/styles.tsx @@ -13,7 +13,7 @@ export const ProfileContainer = styled.div` `; export const Header = styled.div` - margin: 8px 20px; + margin: 0.5rem 1.25rem; display: flex; align-items: center; padding: 0rem; @@ -57,9 +57,9 @@ export const PostsContainer = styled.div` display: flex; flex-wrap: wrap; justify-content: space-between; - gap: 15px; + gap: 0.9375rem; margin-bottom: 100px; - padding: 20px; + padding: 1.25rem; `; export const AddButton = styled.button` @@ -79,7 +79,7 @@ export const NoPostWrapper = styled.div` display: flex; justify-content: center; align-items: center; - margin-top: 80px; + margin-top: 5rem; `; export const Button = styled.button` @@ -90,7 +90,7 @@ export const Button = styled.button` color: ${({ theme }) => theme.colors.text.contrast}; cursor: pointer; box-sizing: border-box; - border-radius: 10px; - padding: 10px; + border-radius: 0.625rem; + padding: 0.625rem; background: ${({ theme }) => theme.colors.brand.gradient}; `;