style: Database Connection Modal UI Polish R5 (#15412)

* Fixed inconsistent header spacing in step 1 * Touched up tooltips * Added red *s to BigQuery form * Centered modal window
apache · Jun 28, 2021 · dd47bde · dd47bde
1 parent 4db07e2
commit dd47bde
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 12 deletions.
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
@@ -22,6 +22,7 @@ import { InputProps } from 'antd/lib/input';
 import { Switch, Select, Button } from 'src/common/components';
 import InfoTooltip from 'src/components/InfoTooltip';
 import ValidatedInput from 'src/components/Form/LabeledErrorBoundInput';
+import FormLabel from 'src/components/Form/FormLabel';
 import { DeleteFilled } from '@ant-design/icons';
 import {
   formScrollableStyles,
@@ -83,9 +84,9 @@ const CredentialsInfo = ({
     <CredentialInfoForm>
       {!isEditMode && (
         <>
-          <span className="label-select">
+          <FormLabel required>
             How do you want to enter service account credentials?
-          </span>
+          </FormLabel>
           <Select
             defaultValue={uploadOption}
             style={{ width: '100%' }}
@@ -105,12 +106,19 @@ const CredentialsInfo = ({
       isEditMode ||
       editNewDb ? (
         <div className="input-container">
-          <span className="label-select">Service Account</span>
+          <FormLabel required>Service Account</FormLabel>
           <textarea
             className="input-form"
             name="credentials_info"
             value={db?.parameters?.credentials_info}
             onChange={changeMethods.onParametersChange}
+            placeholder={JSON.stringify(
+              {
+                credentials_info: '<contents of credentials JSON file>',
+              },
+              null,
+              '  ',
+            )}
           />
           <span className="label-paste">
             Copy and paste the entire service account .json file here
@@ -121,17 +129,15 @@ const CredentialsInfo = ({
           className="input-container"
           css={(theme: SupersetTheme) => infoTooltip(theme)}
         >
-          <span
-            css={{ display: 'flex', alignItems: 'center' }}
-            className="label-select"
-          >
-            Upload Credentials{' '}
+          <div css={{ display: 'flex', alignItems: 'center' }}>
+            <FormLabel required>Upload Credentials</FormLabel>
             <InfoTooltip
               tooltip={t(
                 'Use the JSON file you automatically downloaded when creating your service account in Google BigQuery.',
               )}
+              viewBox="0 0 24 24"
             />
-          </span>
+          </div>
 
           {!fileToUpload && (
             <Button

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -801,11 +801,11 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       ]}
       name="database"
       data-test="database-modal"
-      height="600px"
       onHandledPrimaryAction={onSave}
       onHide={onClose}
       primaryButtonName={isEditMode ? t('Save') : t('Connect')}
       width="500px"
+      centered
       show={show}
       title={
         <h4>{isEditMode ? t('Edit database') : t('Connect a database')}</h4>
@@ -971,11 +971,11 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
         formStyles(theme),
       ]}
       name="database"
-      height="600px"
       onHandledPrimaryAction={onSave}
       onHide={onClose}
       primaryButtonName={hasConnectedDb ? t('Finish') : t('Connect')}
       width="500px"
+      centered
       show={show}
       title={<h4>{t('Connect a database')}</h4>}
       footer={renderModalFooter()}

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
@@ -56,6 +56,7 @@ export const StyledFormHeader = styled.header`
   }
 
   .select-db {
+    padding: ${({ theme }) => theme.gridUnit}px;
     .helper {
       margin: 0;
     }
@@ -147,6 +148,10 @@ export const antDModalStyles = (theme: SupersetTheme) => css`
   .ant-modal-body {
     height: ${theme.gridUnit * 180.5}px;
   }
+
+  .ant-modal-footer {
+    height: ${theme.gridUnit * 16.25}px;
+  }
 `;
 
 export const antDAlertStyles = (theme: SupersetTheme) => css`
@@ -377,9 +382,10 @@ export const StyledBasicTab = styled(Tabs.TabPane)`
   margin-top: ${({ theme }) => theme.gridUnit * 6}px;
 `;
 
-export const buttonLinkStyles = css`
+export const buttonLinkStyles = (theme: SupersetTheme) => css`
   font-weight: 400;
   text-transform: initial;
+  padding-right: ${theme.gridUnit * 2}px;
 `;
 
 export const alchemyButtonLinkStyles = (theme: SupersetTheme) => css`
@@ -449,7 +455,13 @@ export const CredentialInfoForm = styled.div`
     height: 100px;
     width: 100%;
     border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+    border-radius: ${({ theme }) => theme.gridUnit}px;
     resize: vertical;
+    padding: ${({ theme }) => theme.gridUnit * 1.5}px
+      ${({ theme }) => theme.gridUnit * 2}px;
+    &::placeholder {
+      color: ${({ theme }) => theme.colors.grayscale.light1};
+    }
   }
 
   .input-container {