feat: Updated input with new styles

Still a work in progress--well, always a work in progress

src/components/Builder/Workspace/Slider/index.tsx

@@ -12,8 +12,10 @@ export default (props: SliderProps) => {
       <Input
         name={name}
         value={value}
-        prefix={TitleCase(name)}
-        suffix={book.units}
+        prefix
+        suffix
+        prefixText={TitleCase(name)}
+        suffixText={book.units}
       ></Input>
     </Html>
   );

src/components/Elements/Input/index.tsx

@@ -1,14 +1,29 @@
-import React from 'react';
-import { InputProps } from './interface';
+import React, { HTMLAttributes } from 'react';
+import { BuildInputProps, InputProps } from './interface';
 import { Prefix, StyledInput, Suffix, Wrapper } from './styles';
 
-export default (props: InputProps) => {
-  const { prefix, suffix, name, value } = props;
+const BuildInput = (props: BuildInputProps) => {
+  const { prefix, suffix, prefixText, suffixText, children } = props;
+
+  const input: Array<JSX.Element> = [];
+  if (prefix) input.push(<Prefix>{prefixText}</Prefix>);
+  input.push(children as JSX.Element);
+  if (suffix) input.push(<Suffix>{suffixText}</Suffix>);
+  return <>{input}</>;
+};
+
+export default (props: InputProps & HTMLAttributes<HTMLInputElement>) => {
+  const { prefix, suffix, prefixText, suffixText, name, value } = props;
   return (
     <Wrapper>
-      <Prefix>{prefix}</Prefix>
-      <StyledInput name={name} placeholder={value} />
-      <Suffix>{suffix}</Suffix>
+      <BuildInput
+        prefix={prefix}
+        prefixText={prefixText}
+        suffix={suffix}
+        suffixText={suffixText}
+      >
+        <StyledInput name={name} placeholder={value} />
+      </BuildInput>
     </Wrapper>
   );
 };

src/components/Elements/Input/interface.ts

@@ -1,6 +1,12 @@
-export interface InputProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface BuildInputProps {
+  prefix?: boolean;
+  prefixText?: string;
+  suffix?: boolean;
+  suffixText?: string;
+  children: any;
+}
+
+export interface InputProps extends BuildInputProps {
   name: string;
   value: string;
-  prefix?: string;
-  suffix?: string;
 }

src/components/Elements/Input/styles.ts

@@ -1,64 +1,48 @@
 import styled from 'styled-components';
-export const Wrapper = styled('div')`
-  border-top: 2px;
-  border-bottom: 2px;
-  border-left: 2px;
-  border-right: 2px;
-  border-radius: 5px;
-  border-style: solid;
-  border-color: grey;
-  display: flex;
-  margin-left: 0;
-  padding-left: 0;
-  justify-content: space-around;
-  background-color: white;
-  width: calc(100% + 2rem);
-  box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.25);
-`;
+import Box from '../Box';
+import {
+  background,
+  border,
+  borderRadius,
+  borderThickness,
+  shadows,
+  spacing,
+} from './../../../theme';
 
-export const Prefix = styled('span')`
-  background-color: grey;
-  border: 0;
-  padding-left: 6px;
-  padding-right: 6px;
-  pointer-events: none;
+const ignoreClicks = () => `
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 `;
+
+export const Wrapper = styled(Box)`
+  border-width: ${borderThickness.base};
+  border-radius: ${borderRadius.base};
+  border-color: ${border.color};
+  border-style: solid;
+  justify-content: space-around;
+  width: calc(100% + 2rem);
+  box-shadow: ${shadows.box.soft.small};
+`;
+
+export const Prefix = styled('span')`
+  background-color: ${background.paper};
+  padding: 0 ${spacing.small};
+  ${ignoreClicks}
+`;
+
 export const StyledInput = styled('input')`
-  border: 0;
-  border-right-width: 1px;
-  border-right-color: black;
-  border-right-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: black;
-  border-bottom-style: solid;
-  margin-top: auto;
-  margin-bottom: auto;
+  background-color: ${background.base};
+  padding: ${spacing.tiny} ${spacing.small};
   height: auto;
-  padding-left: 10px;
-  padding-right: 10px;
   width: calc(100% + 2rem);
-  margin: 0;
-  background-color: unset;
-  padding-top: 3px;
-  padding-bottom: 3px;
 `;
+
 export const Suffix = styled('span')`
-  border: 0;
-  background-color: grey;
-  padding-top: 0;
-  margin-top: 0;
-  padding-left: 6px;
-  padding-right: 6px;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+  background-color: ${background.paper};
+  padding: 0 ${spacing.small};
+  ${ignoreClicks}
 `;