Update project structure

components/MDXButton/index.tsx

@@ -1,5 +1,5 @@
 import { FC, useContext } from 'react';
-import { DarkModeContext } from '../../components/DarkMode';
+import { ThemeContext } from '../../styles/theme';
 import { Props } from './types';
 import { Btn } from './styles';
 import Link from 'next/link';
@@ -13,7 +13,7 @@ const MDXButton: FC<Props & { className?: string }> = ({
 	disabled,
 	className
 }) => {
-	const { dark } = useContext(DarkModeContext);
+	const { mode } = useContext(ThemeContext);
 
 	return link ? (
 		<Link href={link} passHref>
@@ -22,7 +22,7 @@ const MDXButton: FC<Props & { className?: string }> = ({
 				target={target}
 				variant={variant}
 				type={type}
-				dark={dark}
+				mode={mode}
 				disabled={disabled}
 				className={className}
 			>
@@ -30,7 +30,7 @@ const MDXButton: FC<Props & { className?: string }> = ({
 			</Btn>
 		</Link>
 	) : (
-		<Btn variant={variant} type={type} dark={dark} disabled={disabled} className={className}>
+		<Btn variant={variant} type={type} mode={mode} disabled={disabled} className={className}>
 			{children}
 		</Btn>
 	);

components/MDXButton/styles.tsx

@@ -7,10 +7,11 @@ export const Btn = styled.button<Props>`
 		['action', 'outline'].includes(variant as string) ? 'block' : 'inline'};
 	width: ${({ variant }) => (['action', 'outline'].includes(variant as string) ? '100%' : 'auto')};
 	/* TODO: fix theme blue color problem */
-	background: ${({ variant, theme }) => (variant === 'action' ? '#1573CA' : 'none')};
-	color: ${({ variant, dark }) => (variant === 'action' ? 'white' : dark ? 'white' : 'black')};
-	border: ${({ variant, dark }) =>
-		variant === 'outline' ? `2px solid ${dark ? 'white' : 'black'}` : 'none'};
+	background: ${({ variant }) => (variant === 'action' ? '#1573CA' : 'none')};
+	color: ${({ variant, mode }) =>
+		variant === 'action' ? 'white' : mode === 'dark' ? 'white' : 'black'};
+	border: ${({ variant, mode }) =>
+		variant === 'outline' ? `2px solid ${mode === 'dark' ? 'white' : 'black'}` : 'none'};
 	font-weight: bold;
 	font-size: ${({ variant }) =>
 		['action', 'outline'].includes(variant as string) ? '1.05rem' : 'inherit'};

components/MDXButton/types.ts

@@ -3,6 +3,6 @@ export type Props = {
 	type?: 'button' | 'submit';
 	link?: string;
 	target?: HTMLAnchorElement['target'];
-	dark?: boolean;
+	mode?: string;
 	disabled?: boolean;
 };