groundfloor-react-ui 1.2.5 → 1.2.6

package/components/DesignComponent/StyledComponent/StyledComponent.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from "styled-components";
 
 export const PageContent = styled.div`
@@ -309,4 +310,17 @@ export const MultiColumnDiv = styled.div`
   max-width: 48%;
   min-width: 48%;
   
-`;
+`;
+
+const Wrapper = styled.form`
+  width: 40vw;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  gap: 20px;
+  ${({ customStyles }) => customStyles}
+`;
+
+export const FormWrapper = ({ customStyles, children }) => {
+  return <Wrapper customStyles={customStyles}>{children}</Wrapper>;
+};

package/components/Form/FormComponent.js

@@ -3,7 +3,9 @@ import { PrimaryButton, SecondaryButton, TinyButton } from '../Button';
 import defaultThemeColor from '../constants/defaultThemeColor';
 import {
   FormContainer,
-  MultiColumnDiv, MultiColumnWrapper
+  FormWrapper,
+  MultiColumnDiv,
+  MultiColumnWrapper
 } from '../DesignComponent';
 import { Header } from '../Header';
 import {
@@ -23,7 +25,6 @@ import {
 import { Label } from '../Label';
 import { Rating } from '../Rating';
 import { Table } from '../Tables';
-import { FormWrapper } from './FormWrapper';
 import { HeaderComponent } from './HeaderComponent';
 
 
@@ -101,11 +102,15 @@ export const FormComponent = ({ formData, customStyles, ...props }) => {
   };
 
   const AsyncMultiDropdownInput = (item) => {
-    return <DropdownSelect dropdownType={'asyncMultiSelect'} {...item} {...props} />;
+    return (
+      <DropdownSelect dropdownType={'asyncMultiSelect'} {...item} {...props} />
+    );
   };
 
   const AsyncSingleDropdownInput = (item) => {
-    return <DropdownSelect dropdownType={'asyncSingleSelect'} {...item} {...props} />;
+    return (
+      <DropdownSelect dropdownType={'asyncSingleSelect'} {...item} {...props} />
+    );
   };
 
   const signatureInput = (item) => {
@@ -214,7 +219,7 @@ export const FormComponent = ({ formData, customStyles, ...props }) => {
   return (
     <Fragment>
       <FormContainer defaultThemeColor={defaultThemeColor}>
-        <FormWrapper onSubmit={handleSubmit} customStyles={customStyles} >
+        <FormWrapper onSubmit={handleSubmit} customStyles={customStyles}>
           {formData.map((row, i) => {
             if (row.length > 1) {
               return (

package/components/Form/index.js

@@ -1,5 +1,4 @@
 export * from './FormComponent';
-export * from './FormWrapper';
 export * from './HeaderComponent';
 export * from './SubmitComponent';
 

package/components/Inputs/NumericInput.js

@@ -31,6 +31,7 @@ TextBox.defaultProps = {
 };
 
 const Input = styled.input`
+  width: 85%;
   border: 0;
   outline: 0;
   color: ${({ theme }) => theme.variant['primary-2']};

package/components/Inputs/PasswordInput.js

@@ -43,7 +43,7 @@ TextWrapper.defaultProps = {
 };
 
 const Input = styled.input`
-  width: auto;
+  width: 85%;
   -webkit-text-security:  ${({ showEye }) => showEye ? 'none' : 'disc'}  ;
 
   //Set the styles from the default styles object

package/components/Inputs/TextInput.js

@@ -37,7 +37,7 @@ const TextWrapper = styled.div`
 `;
 
 const Input = styled.input`
-  width: 98%;
+  width: 85%;
   //Set the styles from the default styles object
   ${({ inBuiltCss, defaultInputStyle }) => {
 		return getDefaultStyles(inBuiltCss, defaultInputStyle);