diff --git a/packages/web/src/modals/ConnectionModal.js b/packages/web/src/modals/ConnectionModal.js
index 2ed3e74d9..a1b1bcfc9 100644
--- a/packages/web/src/modals/ConnectionModal.js
+++ b/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 }) {
diff --git a/packages/web/src/utility/formStyle.js b/packages/web/src/utility/formStyle.js
index 7d21f831e..f4be22a13 100644
--- a/packages/web/src/utility/formStyle.js
+++ b/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 (
- {label}
+ {label}
{children}
);
@@ -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 (
- {children} {label}
+ {children}{' '}
+
+ {label}
+
);
}
return (
-
- {label}
+
+
+ {label}
+
{children}
@@ -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} {label}
+ {children}{' '}
+
+ {label}
+
);
}
@@ -94,8 +111,10 @@ export function FormFieldTemplateLarge({ label, onLabelClick, children, type, no
// @ts-ignore
noMargin={noMargin}
>
-
- {label}
+
+
+ {label}
+
{children}
diff --git a/packages/web/src/utility/forms.js b/packages/web/src/utility/forms.js
index 2c315cdfb..73dd75bff 100644
--- a/packages/web/src/utility/forms.js
+++ b/packages/web/src/utility/forms.js
@@ -75,7 +75,7 @@ export function FormPasswordFieldRaw({ name, focused = false, ...other }) {
type={isCrypted || showPassword ? 'text' : 'password'}
/>
{!isCrypted && (
- setShowPassword(x => !x)}>
+ setShowPassword(x => !x)} disabled={other.disabled}>
)}
@@ -119,7 +119,9 @@ export function FormCheckboxField({ label, templateProps = undefined, ...other }
setFieldValue(other.name, !values[other.name])}
+ labelProps={
+ other.disabled ? { disabled: true } : { onClick: () => setFieldValue(other.name, !values[other.name]) }
+ }
{...templateProps}
>
@@ -353,7 +355,7 @@ export function FormElectronFileSelectorRaw({ name, ...other }) {
return (
- Browse
+ Browse
);
}
diff --git a/packages/web/src/widgets/InlineButton.js b/packages/web/src/widgets/InlineButton.js
index 58089d305..0ca76d2bb 100644
--- a/packages/web/src/widgets/InlineButton.js
+++ b/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 =>