🧱 Adds reusable Button and Heading components

src/components/Form/Input.tsx

@@ -1,9 +1,8 @@
 import { InputHTMLAttributes } from 'react';
 import styled from 'styled-components';
 import colors from 'styles/colors';
+import { InputSize, applySize } from 'styles/dimensions';
 
-
-type InputSize = 'small' | 'medium' | 'large';
 type Orientation = 'horizontal' | 'vertical';
 
 interface Props {
@@ -22,36 +21,6 @@ interface StyledInputTypes extends InputHTMLAttributes<SupportedElements> {
   orientation?: Orientation;
 };
 
-const applySize = (inputSize?: InputSize) => {
-  const sizeSpecificStyles = {
-    small: `
-      font-size: 1rem;
-      border-radius: 0.25rem;
-      padding: 0.5rem 1rem;
-      margin: 0.5rem;
-    `,
-    medium: `
-      font-size: 1.5rem;
-      border-radius: 0.25rem;
-      padding: 0.75rem 1.5rem;
-      margin: 0.5rem;
-    `,
-    large: `
-      font-size: 2rem;
-      border-radius: 0.25rem;
-      padding: 1rem 1.75rem;
-      margin: 0.5rem;
-    `,
-  };
-  switch (inputSize) {
-    case 'small': return sizeSpecificStyles.small;
-    case 'medium': return sizeSpecificStyles.medium;
-    case 'large': return sizeSpecificStyles.large;
-    default: return sizeSpecificStyles.small;
-  }
-};
-
-
 const InputContainer = styled.div<StyledInputTypes>`
   display: flex;
   ${props => props.orientation === 'vertical' ? 'flex-direction: column;' : ''};
@@ -62,6 +31,8 @@ const StyledInput = styled.input<StyledInputTypes>`
   color: ${colors.textColor};
   border: none;
   border-radius: 0.25rem;
+  font-family: PTMono;
+  box-shadow: 3px 3px 0px ${colors.backgroundDarker};
   &:focus {
     outline: 1px solid ${colors.primary}
   }