Updated styling

apache · Jun 25, 2021 · a8a155a · a8a155a
1 parent 913b29c
commit a8a155a
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 28 deletions.
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx
@@ -82,28 +82,30 @@ const ModalHeader = ({
     </StyledFormHeader>
   );
   const hasConnectedDbHeader = (
-    <StyledFormHeader>
-      <p className="helper"> STEP 3 OF 3 </p>
-      <h4>
-        Your database was successfully connected! Here are some optional
-        settings for your database
-      </h4>
-      <p className="helper">
-        Need help? Learn more about{' '}
-        <a
-          href={documentationLink(db?.engine)}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          connecting to {dbModel.name}
-        </a>
-      </p>
-    </StyledFormHeader>
+    <StyledStickyHeader>
+      <StyledFormHeader>
+        <p className="helper"> STEP 3 OF 3 </p>
+        <h4>
+          Your database was successfully connected! Here are some optional
+          settings for your database
+        </h4>
+        <p className="helper">
+          Need help? Learn more about{' '}
+          <a
+            href={documentationLink(db?.engine)}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            connecting to {dbName}.
+          </a>
+        </p>
+      </StyledFormHeader>
+    </StyledStickyHeader>
   );
   const hasDbHeader = (
     <StyledStickyHeader>
       <StyledFormHeader>
-        <p className="helper"> Step 2 of 3 </p>
+        <p className="helper"> STEP 2 OF 3 </p>
         <h4>Enter the required {dbModel.name} credentials</h4>
         <p className="helper">
           Need help? Learn more about{' '}

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -58,6 +58,7 @@ import DatabaseConnectionForm from './DatabaseConnectionForm';
 import {
   antDErrorAlertStyles,
   antDAlertStyles,
+  StyledAlertMargin,
   antDModalNoPaddingStyles,
   antDModalStyles,
   antDTabsStyles,
@@ -963,14 +964,16 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                   dbModel={dbModel}
                 />
                 {connectionAlert && (
-                  <Alert
-                    closable={false}
-                    css={(theme: SupersetTheme) => antDAlertStyles(theme)}
-                    type="info"
-                    showIcon
-                    message={t('IP Allowlist')}
-                    description={connectionAlert.ALLOWED_IPS}
-                  />
+                  <StyledAlertMargin>
+                    <Alert
+                      closable={false}
+                      css={(theme: SupersetTheme) => antDAlertStyles(theme)}
+                      type="info"
+                      showIcon
+                      message={t('IP Allowlist')}
+                      description={connectionAlert.ALLOWED_IPS}
+                    />
+                  </StyledAlertMargin>
                 )}
                 <DatabaseConnectionForm
                   db={db}

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
@@ -40,8 +40,6 @@ export const StyledFormHeader = styled.header`
   border-bottom: ${({ theme }) => `${theme.gridUnit * 0.25}px solid
     ${theme.colors.grayscale.light2};`}
   padding: ${({ theme }) => theme.gridUnit * 2}px
-    ${({ theme }) => theme.gridUnit * 4}px
-    ${({ theme }) => theme.gridUnit * 4}px
     ${({ theme }) => theme.gridUnit * 4}px;
   line-height: ${({ theme }) => theme.gridUnit * 6}px;
   .helper {
@@ -180,6 +178,10 @@ export const antDAlertStyles = (theme: SupersetTheme) => css`
   }
 `;
 
+export const StyledAlertMargin = styled.div`
+  margin: 0 ${({ theme }) => theme.gridUnit * 4}px -${({ theme }) => theme.gridUnit * 4}px;
+`;
+
 export const antDErrorAlertStyles = (theme: SupersetTheme) => css`
   border: ${theme.colors.error.base} 2px solid;
   padding: ${theme.gridUnit * 4}px;