[superset] branch pexdax/db-connection-ui-show-preferred updated: update styles

[hugh]

This is an automated email from the ASF dual-hosted git repository.

hugh pushed a commit to branch pexdax/db-connection-ui-show-preferred
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to 
refs/heads/pexdax/db-connection-ui-show-preferred by this push:
     new 717c9ab  update styles
717c9ab is described below

commit 717c9abc09eb9352b2324cc46811dd73d5183c5c
Author: hughhhh <hughmi...@gmail.com>
AuthorDate: Tue Jun 1 22:12:52 2021 -0400

    update styles
---
 superset-frontend/src/components/IconButton/index.tsx             | 3 +--
 .../src/views/CRUD/data/database/DatabaseModal/index.tsx          | 7 +++----
 .../src/views/CRUD/data/database/DatabaseModal/styles.ts          | 8 ++++++++
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/superset-frontend/src/components/IconButton/index.tsx 
b/superset-frontend/src/components/IconButton/index.tsx
index e7f9c2d..fb10b77 100644
--- a/superset-frontend/src/components/IconButton/index.tsx
+++ b/superset-frontend/src/components/IconButton/index.tsx
@@ -32,6 +32,7 @@ const StyledButton = styled(Button)`
   display: flex;
   flex-direction: column;
   padding: 0;
+  width: 33%;
 `;
 const StyledImage = styled.div`
   margin: ${({ theme }) => theme.gridUnit * 8}px 0;
@@ -76,8 +77,6 @@ const StyledInner = styled.div`
 `;
 
 const StyledBottom = styled.div`
-  padding: ${({ theme }) => theme.gridUnit * 6}px
-    ${({ theme }) => theme.gridUnit * 4}px;
   border-radius: 0 0 ${({ theme }) => theme.borderRadius}px
     ${({ theme }) => theme.borderRadius}px;
   background-color: ${({ theme }) => theme.colors.grayscale.light4};
diff --git 
a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx 
b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
index e992e67..d6ec660 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -533,14 +533,13 @@ const DatabaseModal: 
FunctionComponent<DatabaseModalProps> = ({
                   ?.filter(db => db.preferred)
                   .map(database => (
                     <IconButton
-                      value={database.engine}
-                      onClick={e => {
-                        console.log(e.target.value);
+                      className="preferred-item"
+                      onClick={() => {
                         setDB({
                           type: ActionType.dbSelected,
                           payload: {
                             configuration_method: 
CONFIGURATION_METHOD.DYNAMIC_FORM,
-                            engine: e.target.value,
+                            engine: database.engine,
                           },
                         });
                       }}
diff --git 
a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts 
b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
index 63dedab..3394e93 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/styles.ts
@@ -342,5 +342,13 @@ export const EditHeaderSubtitle = styled.div`
 export const SelectDatabaseStyles = styled.div`
   .preferred {
     display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    margin: 0 36px;
+  }
+
+  .preferred-item {
+    width: 133px;
+    height: 133px;
   }
 `;