chore: improve styles for collapsed Native Filter sidebar (#12282)

* Improve styles for collapsed Native Filter sidebar

* Replace width for Wrapper with gridUnits

superset-frontend/src/dashboard/components/DashboardBuilder.jsx

@@ -93,8 +93,12 @@ const StyledDashboardContent = styled.div`
     width: 100%;
     flex-grow: 1;
     position: relative;
-    margin: ${({ theme }) => theme.gridUnit * 6}px
-      ${({ theme }) => theme.gridUnit * 9}px;
+    margin: ${({ theme }) => theme.gridUnit * 2}px
+      ${({ theme }) => theme.gridUnit * 8}px
+      ${({ theme }) => theme.gridUnit * 6}px
+      ${({ theme, dashboardFiltersOpen }) =>
+        // eslint-disable-next-line prettier/prettier
+        (dashboardFiltersOpen ? theme.gridUnit * 4 : 0)}px;
   }
 
   .dashboard-component-chart-holder {
@@ -279,7 +283,10 @@ class DashboardBuilder extends React.Component {
           )}
         </Sticky>
 
-        <StyledDashboardContent className="dashboard-content">
+        <StyledDashboardContent
+          className="dashboard-content"
+          dashboardFiltersOpen={this.state.dashboardFiltersOpen}
+        >
           {isFeatureEnabled(FeatureFlag.DASHBOARD_NATIVE_FILTERS) && (
             <StickyVerticalBar
               filtersOpen={this.state.dashboardFiltersOpen}

superset-frontend/src/dashboard/components/StickyVerticalBar.tsx

@@ -26,8 +26,8 @@ export const SUPERSET_HEADER_HEIGHT = 59;
 
 const Wrapper = styled.div`
   position: relative;
-  width: 16px;
-  flex: 0 0 16px;
+  width: ${({ theme }) => theme.gridUnit * 8}px;
+  flex: 0 0 ${({ theme }) => theme.gridUnit * 8}px;
   /* these animations (which can be enabled with the "animated" class) look glitchy due to chart resizing */
   /* keeping these for posterity, in case we can improve that resizing performance */
   /* &.animated {

superset-frontend/src/dashboard/components/nativeFilters/FilterBar.tsx

@@ -47,7 +47,7 @@ import CascadePopover from './CascadePopover';
 const barWidth = `250px`;
 
 const BarWrapper = styled.div`
-  width: ${({ theme }) => theme.gridUnit * 6}px;
+  width: ${({ theme }) => theme.gridUnit * 8}px;
   &.open {
     width: ${barWidth}; // arbitrary...
   }
@@ -88,7 +88,7 @@ const CollapsedBar = styled.div`
   top: 0;
   left: 0;
   height: 100%;
-  width: ${({ theme }) => theme.gridUnit * 6}px;
+  width: ${({ theme }) => theme.gridUnit * 8}px;
   padding-top: ${({ theme }) => theme.gridUnit * 2}px;
   display: none;
   text-align: center;
@@ -101,7 +101,10 @@ const CollapsedBar = styled.div`
     transition-delay: 0s;
   } */
   &.open {
-    display: block;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: ${({ theme }) => theme.gridUnit * 2}px;
     /* &.animated {
       transform: translateX(0);
       transition-delay: ${({
@@ -116,6 +119,11 @@ const CollapsedBar = styled.div`
   }
 `;
 
+const StyledCollapseIcon = styled(Icon)`
+  color: ${({ theme }) => theme.colors.primary.base};
+  margin-bottom: ${({ theme }) => theme.gridUnit * 3}px;
+`;
+
 const TitleArea = styled.h4`
   display: flex;
   flex-direction: row;
@@ -431,7 +439,7 @@ const FilterBar: React.FC<FiltersBarProps> = ({
         className={cx({ open: !filtersOpen })}
         onClick={() => toggleFiltersBar(true)}
       >
-        <Icon name="collapse" />
+        <StyledCollapseIcon name="collapse" />
         <Icon name="filter" />
       </CollapsedBar>
       <Bar className={cx({ open: filtersOpen })}>