style: fix too light form labels in DatabaseModal + DRY css (#11056)

eventually should be moved away from bootstrap and onto a DRY
ControlLabel component in our design system.
This commit is contained in:
Maxime Beauchemin 2020-10-06 12:51:00 -07:00 committed by GitHub
parent b2af0c0e22
commit f109f11ceb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 9 deletions

View File

@ -45,11 +45,10 @@ const StyledIcon = styled(Icon)`
const StyledInputContainer = styled.div`
margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
.label,
.helper {
display: block;
padding: ${({ theme }) => theme.gridUnit}px 0;
color: ${({ theme }) => theme.colors.grayscale.light1};
color: ${({ theme }) => theme.colors.grayscale.base};
font-size: ${({ theme }) => theme.typography.sizes.s - 1}px;
text-align: left;
@ -313,7 +312,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
key="1"
>
<StyledInputContainer>
<div className="label">
<div className="control-label">
{t('Database Name')}
<span className="required">*</span>
</div>
@ -328,7 +327,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
</div>
</StyledInputContainer>
<StyledInputContainer>
<div className="label">
<div className="control-label">
{t('SQLAlchemy URI')}
<span className="required">*</span>
</div>
@ -359,7 +358,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
</Tabs.TabPane>
<Tabs.TabPane tab={<span>{t('Performance')}</span>} key="2">
<StyledInputContainer>
<div className="label">{t('Chart Cache Timeout')}</div>
<div className="control-label">{t('Chart Cache Timeout')}</div>
<div className="input-container">
<input
type="number"
@ -483,7 +482,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
</StyledInputContainer>
</StyledInputContainer>
<StyledInputContainer>
<div className="label">{t('CTAS Schema')}</div>
<div className="control-label">{t('CTAS Schema')}</div>
<div className="input-container">
<input
type="text"
@ -503,7 +502,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
</Tabs.TabPane>
<Tabs.TabPane tab={<span>{t('Security')}</span>} key="4">
<StyledInputContainer>
<div className="label">{t('Secure Extra')}</div>
<div className="control-label">{t('Secure Extra')}</div>
<div className="input-container">
<textarea
name="encrypted_extra"
@ -528,7 +527,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
</div>
</StyledInputContainer>
<StyledInputContainer>
<div className="label">{t('Root Certificate')}</div>
<div className="control-label">{t('Root Certificate')}</div>
<div className="input-container">
<textarea
name="server_cert"
@ -585,7 +584,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
</div>
</StyledInputContainer>
<StyledInputContainer>
<div className="label">{t('Extra')}</div>
<div className="control-label">{t('Extra')}</div>
<div className="input-container">
<textarea
name="extra"