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 =>