Skip to content

🎨 design(#217): 닀크λͺ¨λ“œ μˆ˜μ • #218

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wjsdncl merged 3 commits into from
Jul 7, 2024
Merged

🎨 design(#217): 닀크λͺ¨λ“œ μˆ˜μ • #218

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d21a72d
🎨 design(#217): 닀크λͺ¨λ“œ μˆ˜μ •
wjsdncl Jul 7, 2024
910e6b0
🎨 design(#153): 닀크λͺ¨λ“œλ‘œ 바뀐 λ²„νŠΌ λ””μžμΈ 볡귀
un0211 Jul 7, 2024
b65bb44
Merge branch 'develop' into feature/dark-mode-fix
wjsdncl Jul 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/Button/CancelButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default function CancelButton(props: ButtonProps) {

return (
<button
className={`btn-violet-light w-[52px] cursor-pointer rounded-[4px] border-none py-[7px] text-xs text-violet disabled:cursor-default md:w-[84px] md:text-sm dark:bg-dark-200 dark:text-dark-10 dark:hover:bg-dark-100/50 dark:disabled:bg-dark-200/50 ${className}`}
className={`btn-violet-light w-[52px] cursor-pointer rounded-[4px] py-[7px] text-xs text-violet disabled:cursor-default md:w-[84px] md:text-sm dark:border-none dark:bg-dark-200 dark:text-dark-10 dark:hover:bg-dark-100/50 dark:disabled:bg-dark-200/50 ${className}`}
disabled={disabled}
{...buttonProps}
>
Expand Down
6 changes: 3 additions & 3 deletions src/components/Modal/EditCardModal/ColumnsDropDown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,17 @@ export default function ColumnsDropDown({
onSelectColumn: (columnId: number) => void;
}) {
return (
<ul className='absolute top-[110%] z-[9999] w-full rounded-[6px] border border-gray-d9 bg-white px-4 py-2'>
<ul className='absolute top-[110%] z-[9999] w-full rounded-[6px] border border-gray-d9 bg-white px-4 py-2 dark:border-dark-200 dark:bg-dark-300'>
{columns.map((column) => {
return (
<li
className='flex cursor-pointer items-center rounded-[6px] px-[6px] py-[5px] text-[14px] transition-all hover:bg-violet-e8 md:text-[16px]'
className='flex cursor-pointer items-center rounded-[6px] px-[6px] py-[5px] text-[14px] transition-all hover:bg-violet-e8 md:text-[16px] dark:hover:bg-dark-200'
key={`member-${column.id}`}
onClick={() => {
onSelectColumn(column.id);
}}
>
<div className='flex h-[22px] items-center gap-[6px] rounded-[12px] bg-violet-f1 p-[8px] text-[12px] text-violet'>
<div className='flex h-[22px] items-center gap-[6px] rounded-[12px] bg-violet-f1 p-[8px] text-[12px] text-violet dark:bg-dark-purple-hover dark:text-dark-10'>
<p className='text-[10px]'>●</p>
<p className='w-max'>{column.title}</p>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/components/Modal/EditCardModal/MembersDropDown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ export default function MembersDropDown({
onSelectMember: (userId: number) => void;
}) {
return (
<ul className='absolute top-[110%] w-full rounded-[6px] border border-gray-d9 bg-white px-4 py-2'>
<ul className='absolute top-[110%] w-full rounded-[6px] border border-gray-d9 bg-white px-4 py-2 dark:border-dark-200 dark:bg-dark-300'>
{members.map((member) => {
return (
<li
className='flex cursor-pointer items-center rounded-[6px] px-[6px] py-[5px] text-[14px] transition-all hover:bg-violet-light-hover md:text-[16px]'
className='flex cursor-pointer items-center rounded-[6px] px-[6px] py-[5px] text-[14px] transition-all hover:bg-violet-light-hover md:text-[16px] dark:text-dark-10 dark:hover:bg-dark-200'
key={`member-${member.userId}`}
onClick={() => {
onSelectMember(member.userId);
Expand All @@ -27,7 +27,7 @@ export default function MembersDropDown({
);
})}
<li
className='flex cursor-pointer items-center rounded-[6px] px-[6px] py-[5px] text-[14px] text-gray-9f transition-all hover:bg-violet-light-hover md:text-[16px]'
className='flex cursor-pointer items-center rounded-[6px] px-[6px] py-[5px] text-[14px] text-gray-9f transition-all hover:bg-violet-light-hover md:text-[16px] dark:text-dark-10 dark:hover:bg-dark-200'
onClick={() => {
onSelectMember(0);
}}
Expand Down
4 changes: 2 additions & 2 deletions src/components/Modal/EditCardModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,12 +300,12 @@ export default function EditCardModal({ column, isEdit = false, card }: EditCard
ref={columnsToggleRef}
>
{selectedColumns ? (
<div className='flex h-[22px] items-center gap-[6px] rounded-[12px] bg-violet-f1 p-[8px] text-[12px] text-violet'>
<div className='flex h-[22px] items-center gap-[6px] rounded-[12px] bg-violet-f1 p-[8px] text-[12px] text-violet dark:bg-dark-purple-hover dark:text-dark-10'>
<p className='text-[10px]'>●</p>
<p className='w-max'>{selectedColumns.title}</p>
</div>
) : (
<div className='flex h-[22px] items-center gap-[6px] rounded-[12px] bg-violet-f1 p-[8px] text-[12px] text-violet'>
<div className='flex h-[22px] items-center gap-[6px] rounded-[12px] bg-violet-f1 p-[8px] text-[12px] text-violet dark:bg-dark-purple-hover dark:text-dark-10'>
<p className='text-[10px]'>●</p>
<p className='w-max'>{'temp'}</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Modal/TodoCardModal/TodoCardModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export default function TodoCardModal({ card, column, onClick }: TodoCardModalPr
{/* Tags Section */}
<section className='order-2 flex flex-col gap-[16px] md:order-1'>
<div className='flex gap-[10px]'>
<div className='flex h-[22px] items-center gap-[6px] rounded-[12px] bg-violet-f1 p-[8px] text-[12px] text-violet hover:cursor-default'>
<div className='flex h-[22px] items-center gap-[6px] rounded-[12px] bg-violet-f1 p-[8px] text-[12px] text-violet hover:cursor-default dark:bg-dark-purple-hover dark:text-dark-10'>
<p className='text-[10px]'>●</p>
<p className='w-max'>{column.title}</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
}

.modal {
@apply rounded-[8px] bg-white px-5 py-7 text-base text-black-33 md:px-7 md:text-lg dark:bg-dark-bg dark:text-dark-10;
@apply dark:bg-dark-450 rounded-[8px] bg-white px-5 py-7 text-base text-black-33 md:px-7 md:text-lg dark:text-dark-10;
}

.modal-basic {
Expand Down
1 change: 1 addition & 0 deletions tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ const config: Config = {
200: 'hsl(0, 0%, 30%)',
300: 'hsl(0, 0%, 15%)',
400: 'hsl(0, 0%, 10%)',
450: 'hsl(0, 0%, 8%)',
500: 'hsl(0, 0%, 6%)',
purple: {
DEFAULT: '#2C283A',
Expand Down