connection form style

packages/web/src/utility/formStyle.js

@@ -14,10 +14,10 @@ export const FormLabel = styled.div`
 
 export const FormValue = styled.div``;
 
-export function FormFieldTemplateDefault({ label, children, type }) {
+export function FormFieldTemplateDefault({ label, children, onLabelClick, type }) {
   return (
     <FormRow>
-      <FormLabel>{label}</FormLabel>
+      <FormLabel onClick={onLabelClick}>{label}</FormLabel>
       <FormValue>{children}</FormValue>
     </FormRow>
   );
@@ -36,49 +36,51 @@ export const FormValueTiny = styled.div`
   margin-top: 3px;
 `;
 
-export function FormFieldTemplateTiny({ label, children, type }) {
+export function FormFieldTemplateTiny({ label, children, onLabelClick, type }) {
   const theme = useTheme();
   if (type == 'checkbox') {
     return (
       <FormRowTiny>
-        {children} {label}
+        {children} <span onClick={onLabelClick}>{label}</span>
       </FormRowTiny>
     );
   }
   return (
     <FormRowTiny>
-      <FormLabelTiny theme={theme}>{label}</FormLabelTiny>
+      <FormLabelTiny theme={theme} onClick={onLabelClick}>
+        {label}
+      </FormLabelTiny>
       <FormValueTiny>{children}</FormValueTiny>
     </FormRowTiny>
   );
 }
 
 export const FormRowLarge = styled.div`
-  margin: 5px;
+  margin: 20px;
 `;
 
 export const FormLabelLarge = styled.div`
+  margin-bottom: 3px;
   color: ${props => props.theme.manager_font3};
 `;
 
-export const FormValueLarge = styled.div`
-  margin-left: 15px;
-  margin-top: 3px;
-`;
+export const FormValueLarge = styled.div``;
 
-export function FormFieldTemplateLarge({ label, children, type }) {
+export function FormFieldTemplateLarge({ label, onLabelClick, children, type }) {
   const theme = useTheme();
   if (type == 'checkbox') {
     return (
-      <FormRowTiny>
-        {children} {label}
-      </FormRowTiny>
+      <FormRowLarge>
+        {children} <span onClick={onLabelClick}>{label}</span>
+      </FormRowLarge>
     );
   }
   return (
-    <FormRowTiny>
-      <FormLabelTiny theme={theme}>{label}</FormLabelTiny>
-      <FormValueTiny>{children}</FormValueTiny>
-    </FormRowTiny>
+    <FormRowLarge className="largeFormMarker">
+      <FormLabelLarge theme={theme} onClick={onLabelClick}>
+        {label}
+      </FormLabelLarge>
+      <FormValueLarge>{children}</FormValueLarge>
+    </FormRowLarge>
   );
 }

packages/web/src/utility/forms.js

@@ -65,7 +65,7 @@ export function FormPasswordFieldRaw({ name, focused = false, ...other }) {
   const isCrypted = value && value.startsWith('crypt:');
 
   return (
-    <>
+    <FlexContainer>
       <TextField
         {...other}
         value={isCrypted ? '' : value}
@@ -74,9 +74,12 @@ export function FormPasswordFieldRaw({ name, focused = false, ...other }) {
         placeholder={isCrypted ? '(Password is encrypted)' : undefined}
         type={isCrypted || showPassword ? 'text' : 'password'}
       />
-
-      {!isCrypted && <FontIcon icon="icon eye" onClick={() => setShowPassword(x => !x)} />}
-    </>
+      {!isCrypted && (
+        <InlineButton onClick={() => setShowPassword(x => !x)}>
+          <FontIcon icon="icon eye" />
+        </InlineButton>
+      )}
+    </FlexContainer>
   );
 }
 
@@ -110,9 +113,10 @@ export function FormCheckboxFieldRaw({ name = undefined, defaultValue = undefine
 }
 
 export function FormCheckboxField({ label, ...other }) {
+  const { values, setFieldValue } = useForm();
   const FieldTemplate = useFormFieldTemplate();
   return (
-    <FieldTemplate label={label} type="checkbox">
+    <FieldTemplate label={label} type="checkbox" onLabelClick={() => setFieldValue(other.name, !values[other.name])}>
       <FormCheckboxFieldRaw {...other} />
     </FieldTemplate>
   );
@@ -329,7 +333,7 @@ export function FormArchiveFolderSelect({ name, additionalFolders = [], ...other
   );
 }
 
-export function FormElectronFileSelectorRaw({ name }) {
+export function FormElectronFileSelectorRaw({ name, ...other }) {
   const { values, setFieldValue } = useForm();
   const handleBrowse = () => {
     const electron = getElectron();
@@ -343,7 +347,7 @@ export function FormElectronFileSelectorRaw({ name }) {
   };
   return (
     <FlexContainer>
-      <TextField value={values[name]} onClick={handleBrowse} readOnly />
+      <TextField value={values[name]} onClick={handleBrowse} {...other} readOnly />
       <InlineButton onClick={handleBrowse}>Browse</InlineButton>
     </FlexContainer>
   );