Update Registration to use custom read only input

client/src/components/Deposit/Input.tsx

@@ -139,7 +139,7 @@ const StyledInput = styled.input<StyledInputProps>`
   padding: 0;
   color: #FFFFFF;
   background-color: #131A2A;
-  font-size: 28px;
+  font-size: 24px;
 
   &:focus {
     box-shadow: none;

client/src/components/RegistrationForm/ExistingRegistration.tsx

@@ -6,7 +6,7 @@ import { Button } from "../Button";
 import { Col } from "../legacy/Layout";
 import { CustomConnectButton } from "../common/ConnectButton";
 import { NumberedStep } from "../common/NumberedStep";
-import { ReadOnlyInput } from "../common/ReadOnlyInput";
+import { ReadOnlyInput } from "@components/RegistrationForm/ReadOnlyInput";
 import { RowBetween } from '../layouts/Row';
 import { ThemedText } from '../../theme/text';
 import { REGISTRATION_INSTRUCTIONS } from '@helpers/tooltips';
@@ -63,14 +63,22 @@ export const ExistingRegistration: React.FC<ExistingRegistrationProps> = ({
                   { REGISTRATION_INSTRUCTIONS }
                 </NumberedStep>
               </NumberedInputContainer>
-              <ReadOnlyInput
-                label="Registration Status"
-                value={ isRegistered ? "Registered" : "Not Registered" }
-              />
-              {isRegistered && <ReadOnlyInput
-                label="Venmo Profile"
-                value={registrationHash}
-              />}
+
+              <InputsContainer>
+                <ReadOnlyInput
+                  label="Status"
+                  name={`depositAmount`}
+                  value={isRegistered ? "Registered" : "Not Registered"}
+                />
+
+                {
+                  isRegistered && <ReadOnlyInput
+                    label="Venmo Identifier"
+                    name={`venmoProfile`}
+                    value={registrationHash ? registrationHash : ""}
+                  />
+                }
+              </InputsContainer>
             </Body>
           )}
         </Content>
@@ -85,10 +93,10 @@ const Container = styled.div`
 `;
 
 const Column = styled.div`
-  gap: 1rem;
   align-self: flex-start;
-  border-radius: 16px;
   justify-content: center;
+  border-radius: 16px;
+  gap: 1rem;
 `;
 
 const TitleRow = styled(RowBetween)`
@@ -141,13 +149,19 @@ const CheckCircleIcon = styled(CheckCircle)`
 const Body = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+  gap: 1rem;
   padding: 1.5rem;
   background-color: #0D111C;
   border-radius: 16px;
   border: 1px solid rgba(255, 255, 255, 0.2);
 `;
 
+const InputsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+
 const NumberedInputContainer = styled(Col)`
   gap: 1rem;
 `;

client/src/components/RegistrationForm/ReadOnlyInput.tsx

@@ -0,0 +1,152 @@
+import React, { ChangeEvent } from "react";
+import styled from 'styled-components';
+
+import QuestionHelper from '@components/common/QuestionHelper';
+
+
+interface ReadOnlyInputProps {
+  label: string;
+  name: string;
+  value?: string;
+  type?: string;
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  placeholder?: string;
+  inputLabel?: string;
+  accessoryLabel?: string;
+  helperText?: string;
+}
+
+export const ReadOnlyInput: React.FC<ReadOnlyInputProps> = ({
+  label,
+  name,
+  value,
+  onFocus,
+  onKeyDown,
+  placeholder,
+  inputLabel,
+  type = "text",
+  accessoryLabel="",
+  helperText="",
+}: ReadOnlyInputProps) => {
+  ReadOnlyInput.displayName = "Input";
+
+  return (
+      <Container>
+        <LabelAndInputContainer>
+          <LabelAndTooltipContainer>
+            <Label htmlFor={name}>
+                {label}
+            </Label>
+
+            { 
+              helperText && (
+                <QuestionHelper
+                  text={helperText}
+                />
+              )
+            }
+          </LabelAndTooltipContainer>
+
+          <InputWrapper>
+            <StyledInput
+              type={type}
+              name={name}
+              id={name}
+              placeholder={placeholder}
+              value={value}
+              onChange={() => {}}
+              onFocus={onFocus}
+              onKeyDown={onKeyDown}
+              readOnly={true}
+            />
+          </InputWrapper>
+        </LabelAndInputContainer>
+      </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 16px;
+  border-radius: 16px;
+  border: 1.5px solid #98a1c03d;
+  background-color: #131A2A;
+
+  &:focus-within {
+    border-color: #CED4DA;
+    border-width: 1px;
+  }
+`;
+
+const LabelAndInputContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`;
+
+const LabelAndTooltipContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: 0.25rem;
+  margin-top: 4px;
+  align-items: center;
+  color: #CED4DA;
+`;
+
+const Label = styled.label`
+  display: flex;
+  font-size: 14px;
+  font-weight: 550;
+`;
+
+const InputWrapper = styled.div`
+  width: 100%;  
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+  margin-top: 8px;
+`;
+
+interface StyledInputProps {
+  readOnly?: boolean;
+}
+
+const StyledInput = styled.input<StyledInputProps>`
+  width: 100%;
+  flex-grow: 1;
+  border: 0;
+  padding: 0;
+  color: #FFFFFF;
+  background-color: #131A2A;
+  font-size: 16px;
+
+  &:focus {
+    box-shadow: none;
+    outline: none;
+  }
+
+  &:placeholder {
+    color: #6C757D;
+  }
+
+  &[type='number'] {
+    -moz-appearance: textfield;
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+
+  ${({ readOnly }) => 
+    readOnly && `
+      pointer-events: none;
+    `
+  }
+`;