refactor: replace old input field with new one

public-convenience-ltd · Sep 22, 2023 · 2be14f3 · 2be14f3
1 parent b0313f9
commit 2be14f3
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 20 deletions.
diff --git a/src/components/EntryForm.tsx b/src/components/EntryForm.tsx
@@ -18,6 +18,7 @@ import pick from 'lodash/pick';
 import zipObject from 'lodash/zipObject';
 import { ErrorMessage } from '@hookform/error-message';
 import Container from '../components/Container';
+import InputField from '../design-system/components/InputField';
 import Notification from '../components/Notification';
 import Box from '../components/Box';
 import Text from '../components/Text';
@@ -46,15 +47,6 @@ const openingTimesFields = WEEKDAYS.flatMap((day): OpeningDayStates[] => {
   ];
 });
 
-const Input = styled.input`
-  display: block;
-  width: 100%;
-  margin-top: ${(props) => props.theme.space[1]}px;
-  padding: ${(props) => props.theme.space[2]}px;
-  color: ${(props) => props.theme.colors.primary};
-  border: 1px solid ${(props) => props.theme.colors.primary};
-`;
-
 const Textarea = styled.textarea`
   display: block;
   height: 10rem;
@@ -484,15 +476,15 @@ const EntryForm = ({ title, loo, children, ...props }) => {
             <span>with where you believe the toilet to be</span>
             <VisuallyHidden>
               <label htmlFor="geometry.coordinates.0">Latitude </label>
-              <Input
+              <InputField
                 type="text"
                 name="geometry.coordinates.0"
                 readOnly
                 {...register('geometry.coordinates.0')}
               />
 
               <label htmlFor="geometry.coordinates.1">Longitude</label>
-              <Input
+              <InputField
                 type="text"
                 name="geometry.coordinates.1"
                 readOnly
@@ -525,15 +517,12 @@ const EntryForm = ({ title, loo, children, ...props }) => {
             />
           </span>
 
-          <Input
+          <InputField
             name="name"
             type="text"
             defaultValue={loo.name || ''}
             placeholder="e.g. Sainsburys or street name"
             data-testid="toilet-name"
-            css={{
-              maxWidth: '400px',
-            }}
             {...register('name', {
               required: 'Please specify a toilet name',
             })}
@@ -630,15 +619,12 @@ const EntryForm = ({ title, loo, children, ...props }) => {
             {noPayment === false && (
               <>
                 <label htmlFor="paymentDetails">Payment Details</label>
-                <Input
+                <InputField
                   name="paymentDetails"
                   type="text"
                   defaultValue={loo.paymentDetails || ''}
                   placeholder="The amount e.g. 20p"
                   data-testid="paymentDetails"
-                  css={{
-                    maxWidth: '200px',
-                  }}
                   {...register('paymentDetails', {
                     required: 'Please specify the toilet payment details.',
                   })}

diff --git a/src/design-system/components/InputField/InputField.css b/src/design-system/components/InputField/InputField.css
@@ -1,4 +1,4 @@
-.input-field {
+.input {
   display: block;
   width: 100%;
   margin-top: var(--space-3xs);