style

packages/web/src/modals/ConnectionModal.js

@@ -43,6 +43,7 @@ const ButtonsContainer = styled.div`
 
 const AgentInfoWrap = styled.div`
   margin-left: 20px;
+  margin-bottom: 20px;
 `;
 
 function DriverFields({ extensions }) {

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, onLabelClick, type }) {
+export function FormFieldTemplateDefault({ label, children, labelProps, type }) {
   return (
     <FormRow>
-      <FormLabel onClick={onLabelClick}>{label}</FormLabel>
+      <FormLabel {...labelProps}>{label}</FormLabel>
       <FormValue>{children}</FormValue>
     </FormRow>
   );
@@ -36,19 +36,33 @@ export const FormValueTiny = styled.div`
   margin-top: 3px;
 `;
 
-export function FormFieldTemplateTiny({ label, children, onLabelClick, type }) {
+const FormLabelSpan = styled.span`
+  ${props =>
+    // @ts-ignore
+    props.disabled &&
+    `
+  color: ${props.theme.manager_font3};
+`}
+`;
+
+export function FormFieldTemplateTiny({ label, children, labelProps, type }) {
   const theme = useTheme();
   if (type == 'checkbox') {
     return (
       <FormRowTiny>
-        {children} <span onClick={onLabelClick}>{label}</span>
+        {children}{' '}
+        <FormLabelSpan theme={theme} {...labelProps}>
+          {label}
+        </FormLabelSpan>
       </FormRowTiny>
     );
   }
   return (
     <FormRowTiny>
-      <FormLabelTiny theme={theme} onClick={onLabelClick}>
-        {label}
+      <FormLabelTiny theme={theme}>
+        <FormLabelSpan theme={theme} {...labelProps}>
+          {label}
+        </FormLabelSpan>
       </FormLabelTiny>
       <FormValueTiny>{children}</FormValueTiny>
     </FormRowTiny>
@@ -76,7 +90,7 @@ export const FormLabelLarge = styled.div`
 
 export const FormValueLarge = styled.div``;
 
-export function FormFieldTemplateLarge({ label, onLabelClick, children, type, noMargin = false }) {
+export function FormFieldTemplateLarge({ label, labelProps, children, type, noMargin = false }) {
   const theme = useTheme();
   if (type == 'checkbox') {
     return (
@@ -84,7 +98,10 @@ export function FormFieldTemplateLarge({ label, onLabelClick, children, type, no
         // @ts-ignore
         noMargin={noMargin}
       >
-        {children} <span onClick={onLabelClick}>{label}</span>
+        {children}{' '}
+        <FormLabelSpan {...labelProps} theme={theme}>
+          {label}
+        </FormLabelSpan>
       </FormRowLargeTemplate>
     );
   }
@@ -94,8 +111,10 @@ export function FormFieldTemplateLarge({ label, onLabelClick, children, type, no
       // @ts-ignore
       noMargin={noMargin}
     >
-      <FormLabelLarge theme={theme} onClick={onLabelClick}>
-        {label}
+      <FormLabelLarge theme={theme}>
+        <FormLabelSpan theme={theme} {...labelProps}>
+          {label}
+        </FormLabelSpan>
       </FormLabelLarge>
       <FormValueLarge>{children}</FormValueLarge>
     </FormRowLargeTemplate>

packages/web/src/utility/forms.js

@@ -75,7 +75,7 @@ export function FormPasswordFieldRaw({ name, focused = false, ...other }) {
         type={isCrypted || showPassword ? 'text' : 'password'}
       />
       {!isCrypted && (
-        <InlineButton onClick={() => setShowPassword(x => !x)}>
+        <InlineButton onClick={() => setShowPassword(x => !x)} disabled={other.disabled}>
           <FontIcon icon="icon eye" />
         </InlineButton>
       )}
@@ -119,7 +119,9 @@ export function FormCheckboxField({ label, templateProps = undefined, ...other }
     <FieldTemplate
       label={label}
       type="checkbox"
-      onLabelClick={other.disabled ? undefined : () => setFieldValue(other.name, !values[other.name])}
+      labelProps={
+        other.disabled ? { disabled: true } : { onClick: () => setFieldValue(other.name, !values[other.name]) }
+      }
       {...templateProps}
     >
       <FormCheckboxFieldRaw {...other} />
@@ -353,7 +355,7 @@ export function FormElectronFileSelectorRaw({ name, ...other }) {
   return (
     <FlexContainer>
       <TextField value={values[name]} onClick={handleBrowse} {...other} readOnly />
-      <InlineButton onClick={handleBrowse}>Browse</InlineButton>
+      <InlineButton onClick={handleBrowse} disabled={other.disabled}>Browse</InlineButton>
     </FlexContainer>
   );
 }

packages/web/src/widgets/InlineButton.js

@@ -14,22 +14,26 @@ const ButtonDiv = styled.div`
   display: inline-block;
   cursor: pointer;
   vertical-align: middle;
-  color: ${props => props.theme.inlinebtn_font1};
+  color: ${props => (props.disabled ? props.theme.inlinebtn_font3 : props.theme.inlinebtn_font1)};
   font-size: 12px;
   padding: 3px;
   margin: 0;
   text-decoration: none;
-  &:hover {
-    border: 1px solid ${props => props.theme.inlinebtn_font2};
-  }
-  &:active:hover {
-    background: linear-gradient(
-      to bottom,
-      ${props => props.theme.inlinebtn_background3} 5%,
-      ${props => props.theme.inlinebtn_background} 100%
-    );
-    background-color: ${props => props.theme.inlinebtn_background3};
-  }
+  ${props =>
+    !props.disabled &&
+    `
+    &:hover {
+      border: 1px solid ${props.theme.inlinebtn_font2};
+    }
+    &:active:hover {
+      background: linear-gradient(
+        to bottom,
+        ${props.theme.inlinebtn_background3} 5%,
+        ${props.theme.inlinebtn_background} 100%
+      );
+      background-color: ${props.theme.inlinebtn_background3};
+    }
+  `}
   display: flex;
 
   ${props =>