Change paddings on ListView and SubMenu (#11975)

apache · Dec 9, 2020 · a4b06d2 · a4b06d2
1 parent 3c177e5
commit a4b06d2
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 13 deletions.
diff --git a/superset-frontend/src/components/ListView/CardSortSelect.tsx b/superset-frontend/src/components/ListView/CardSortSelect.tsx
@@ -31,7 +31,7 @@ const SortTitle = styled.label`
 const SortContainer = styled.div`
   display: inline-flex;
   font-size: ${({ theme }) => theme.typography.sizes.s}px;
-  padding: ${({ theme }) => theme.gridUnit * 3}px 0 0 0;
+  padding-top: ${({ theme }) => theme.gridUnit}px;
   text-align: left;
 `;
 interface CardViewSelectSortProps {

diff --git a/superset-frontend/src/components/ListView/Filters/index.tsx b/superset-frontend/src/components/ListView/Filters/index.tsx
@@ -36,7 +36,6 @@ interface UIFiltersProps {
 
 const FilterWrapper = styled.div`
   display: inline-block;
-  padding: 0 0 ${({ theme }) => theme.gridUnit * 8}px;
 `;
 
 function UIFilters({

diff --git a/superset-frontend/src/components/ListView/ListView.tsx b/superset-frontend/src/components/ListView/ListView.tsx
@@ -44,12 +44,14 @@ const ListViewStyles = styled.div`
   .superset-list-view {
     text-align: left;
     border-radius: 4px 0;
-    margin: 0 16px;
+    margin: 0 ${({ theme }) => theme.gridUnit * 4}px;
 
     .header {
       display: flex;
+      padding-bottom: ${({ theme }) => theme.gridUnit * 4}px;
 
       .header-left {
+        display: flex;
         flex: 5;
       }
       .header-right {
@@ -91,32 +93,33 @@ const BulkSelectWrapper = styled(Alert)`
   margin-bottom: 0;
   padding-top: 0;
   padding-bottom: 0;
-  padding-right: 36px;
+  padding-right: ${({ theme }) => theme.gridUnit * 9}px;
   color: #3d3d3d;
   background-color: ${({ theme }) => theme.colors.primary.light4};
 
   .selectedCopy {
     display: inline-block;
-    padding: 16px 0;
+    padding: ${({ theme }) => theme.gridUnit * 4}px 0;
   }
 
   .deselect-all {
     color: #1985a0;
-    margin-left: 16px;
+    margin-left: ${({ theme }) => theme.gridUnit * 4}px;
   }
 
   .divider {
-    margin: -8px 0 -8px 16px;
+    margin: ${({ theme: { gridUnit } }) =>
+      `${-gridUnit * 2}px 0 ${-gridUnit * 2}px ${gridUnit * 4}px`};
     width: 1px;
-    height: 32px;
+    height: ${({ theme }) => theme.gridUnit * 8}px;
     box-shadow: inset -1px 0px 0px #dadada;
     display: inline-flex;
     vertical-align: middle;
     position: relative;
   }
 
   .close {
-    margin: 16px 0;
+    margin: ${({ theme }) => theme.gridUnit * 4}px 0;
   }
 `;
 
@@ -135,11 +138,8 @@ const bulkSelectColumnConfig = {
 };
 
 const ViewModeContainer = styled.div`
-  padding: 0 ${({ theme }) => theme.gridUnit * 4}px
-    ${({ theme }) => theme.gridUnit * 8}px 0;
+  padding-right: ${({ theme }) => theme.gridUnit * 4}px;
   display: inline-block;
-  position: relative;
-  top: 8px;
 
   .toggle-button {
     display: inline-block;

diff --git a/superset-frontend/src/components/Menu/SubMenu.tsx b/superset-frontend/src/components/Menu/SubMenu.tsx
@@ -24,6 +24,9 @@ import { Nav, Navbar } from 'react-bootstrap';
 import Button, { OnClickHandler } from 'src/components/Button';
 
 const StyledHeader = styled.header`
+  .navbar {
+    margin-bottom: ${({ theme }) => theme.gridUnit * 4}px;
+  }
   .navbar-header .navbar-brand {
     font-weight: ${({ theme }) => theme.typography.weights.bold};
   }