diff --git a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx index 51cf104b271ca..6b0feb7268f7e 100644 --- a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx +++ b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx @@ -116,9 +116,7 @@ const LabeledErrorBoundInput = ({ {label} - {hasTooltip && ( - - )} + {hasTooltip && } alertIconStyles(theme, !!errorMessage)} diff --git a/superset-frontend/src/components/InfoTooltip/index.tsx b/superset-frontend/src/components/InfoTooltip/index.tsx index ba08393f18fc8..a3ad7aa21acb3 100644 --- a/superset-frontend/src/components/InfoTooltip/index.tsx +++ b/superset-frontend/src/components/InfoTooltip/index.tsx @@ -73,7 +73,7 @@ export default function InfoTooltip({ trigger = 'hover', overlayStyle = defaultOverlayStyle, bgColor = defaultColor, - viewBox = '0 -2 24 24', + viewBox = '0 -1 24 24', }: InfoTooltipProps) { return ( `${theme.gridUnit * 3}px ${theme.gridUnit * 4}px ${theme.gridUnit * 2}px`}; - label { + label, + .control-label { + display: inline-block; font-size: ${({ theme }) => theme.typography.sizes.s}px; - color: ${({ theme }) => theme.colors.grayscale.light1}; + color: ${({ theme }) => theme.colors.grayscale.base}; + vertical-align: middle; + } + + .info-solid-small { + vertical-align: middle; + padding-bottom: ${({ theme }) => theme.gridUnit / 2}px; } `; @@ -69,7 +84,6 @@ const StyledInputContainer = styled.div` display: flex; flex-direction: column; margin: ${({ theme }) => theme.gridUnit}px; - margin-bottom: ${({ theme }) => theme.gridUnit * 4}px; .input-container { @@ -79,11 +93,6 @@ const StyledInputContainer = styled.div` > div { width: 100%; } - - label { - display: flex; - margin-right: ${({ theme }) => theme.gridUnit * 2}px; - } } input, @@ -91,17 +100,19 @@ const StyledInputContainer = styled.div` flex: 1 1 auto; } - textarea { - height: 100px; - resize: none; - } - .required { margin-left: ${({ theme }) => theme.gridUnit / 2}px; color: ${({ theme }) => theme.colors.error.base}; } `; +const StyledTextArea = styled.textarea` + height: 100px; + resize: none; + margin-top: ${({ theme }) => theme.gridUnit}px; + border: 1px solid ${({ theme }) => theme.colors.secondary.light3}; +`; + export interface RowLevelSecurityModalProps { rule: RLSObject | null; addSuccessToast: (msg: string) => void; @@ -355,9 +366,11 @@ function RowLevelSecurityModal(props: RowLevelSecurityModalProps) { onChange: ({ target }: { target: HTMLInputElement }) => onTextChange(target), }} - css={noBottomMargin} + css={noMargins} label={t('Rule Name')} data-test="rule-name-test" + tooltipText={t('The name of the rule must be unique')} + hasTooltip /> @@ -433,7 +446,7 @@ function RowLevelSecurityModal(props: RowLevelSecurityModalProps) { onChange: ({ target }: { target: HTMLInputElement }) => onTextChange(target), }} - css={noBottomMargin} + css={noMargins} label={t('Group Key')} hasTooltip tooltipText={t( @@ -454,7 +467,7 @@ function RowLevelSecurityModal(props: RowLevelSecurityModalProps) { onChange: ({ target }: { target: HTMLInputElement }) => onTextChange(target), }} - css={noBottomMargin} + css={noMargins} label={t('Clause')} hasTooltip tooltipText={t( @@ -468,7 +481,7 @@ function RowLevelSecurityModal(props: RowLevelSecurityModalProps) {
{t('Description')}
-