added optional breadcrumbs; page layout refactoring; other chages

src/components/Button/index.tsx

@@ -1,16 +1,20 @@
 import './styles.css'
+
 import Link from 'next/link'
+import cx from 'classnames'
 
 export type ButtonProps = {
     style?: React.CSSProperties
     href?: string
+    theme?: 'default' | 'ghost'
+    size?: 'default' | 'small'
 }
 
-export const Button: React.FC<ButtonProps> = props => {
+export const Button: React.FC<ButtonProps> = ({ size='default', theme = 'default', ...props }) => {
     if (props.href) {
         return (
             <Link href={props.href}>
-                <a className={'button invisible'} style={props.style}>
+                <a className={cx('button', theme, size)} style={props.style}>
                     {props.children}
                 </a>
             </Link>
@@ -22,4 +26,5 @@ export const Button: React.FC<ButtonProps> = props => {
             {props.children}
         </button>
     )
-}
+}
+

src/components/Button/styles.css

@@ -1,18 +1,14 @@
 .button {
-    border: none;
     font-size: var(--font-size-default);
 
     text-align: center;
     margin-top: var(--size-m);
     margin-bottom: var(--size-m);
-    margin-left: 1px;
-    margin-right: 1px;
 
-    padding: var(--size-s) var(--size-m);
     border-radius: 100px;
+    border: 1px solid var(--color-shadow);
 
     background-color: var(--color-back);
-    box-shadow: 0 0 0 1px var(--color-shadow);
 
     transition: box-shadow 150ms;
 
@@ -21,5 +17,27 @@
 }
 
 .button:hover {
+    margin-left: 1px;
+    margin-right: 1px;
+
+    border: none;
     box-shadow: var(--shadow-active);
 }
+
+/* THEME */
+
+.button.ghost {
+    border-color: rgba(0, 0, 0, 0);
+}
+
+/* SIZE */
+
+.button.default {
+    padding: var(--size-s) var(--size-m);
+}
+
+.button.small {
+    padding: var(--size-xs) var(--size-s);
+    font-size: var(--font-size-second);
+}
+