Merge pull request #2438 from porter-dev/fe-pass

switch filterrow and buttons bc of dropdown overflow

dashboard/src/main/home/cluster-dashboard/ClusterDashboard.tsx

@@ -185,6 +185,7 @@ class ClusterDashboard extends Component<PropsType, StateType> {
     return (
       <>
         <ControlRow>
+          <SortFilterWrapper>{this.renderCommonFilters()}</SortFilterWrapper>
           {isAuthorizedToAdd && (
             <Button
               onClick={() =>
@@ -194,7 +195,6 @@ class ClusterDashboard extends Component<PropsType, StateType> {
               <i className="material-icons">add</i> Launch template
             </Button>
           )}
-          <SortFilterWrapper>{this.renderCommonFilters()}</SortFilterWrapper>
         </ControlRow>
 
         <ChartList
@@ -364,14 +364,13 @@ const Button = styled.div`
   font-size: 13px;
   cursor: pointer;
   font-family: "Work Sans", sans-serif;
-  border-radius: 20px;
+  border-radius: 5px;
   color: white;
   height: 35px;
   margin-bottom: 35px;
   padding: 0px 8px;
   min-width: 155px;
   padding-bottom: 1px;
-  margin-right: 10px;
   font-weight: 500;
   padding-right: 15px;
   overflow: hidden;

dashboard/src/main/home/cluster-dashboard/dashboard/NamespaceList.tsx

@@ -247,7 +247,7 @@ const Button = styled.div`
   font-size: 13px;
   cursor: pointer;
   font-family: "Work Sans", sans-serif;
-  border-radius: 20px;
+  border-radius: 5px;
   color: white;
   height: 35px;
   padding: 0px 8px;

dashboard/src/main/home/cluster-dashboard/env-groups/EnvGroupDashboard.tsx

@@ -58,15 +58,6 @@ class EnvGroupDashboard extends Component<PropsType, StateType> {
       return (
         <>
           <ControlRow hasMultipleChilds={isAuthorizedToAdd}>
-            {isAuthorizedToAdd && (
-              <Button
-                onClick={() =>
-                  this.setState({ createEnvMode: !this.state.createEnvMode })
-                }
-              >
-                <i className="material-icons">add</i> Create env group
-              </Button>
-            )}
             <SortFilterWrapper>
               <NamespaceSelector
                 setNamespace={(namespace) =>
@@ -84,6 +75,15 @@ class EnvGroupDashboard extends Component<PropsType, StateType> {
                 sortType={this.state.sortType}
               />
             </SortFilterWrapper>
+            {isAuthorizedToAdd && (
+              <Button
+                onClick={() =>
+                  this.setState({ createEnvMode: !this.state.createEnvMode })
+                }
+              >
+                <i className="material-icons">add</i> Create env group
+              </Button>
+            )}
           </ControlRow>
 
           <EnvGroupList
@@ -174,12 +174,11 @@ const Button = styled.div`
   font-size: 13px;
   cursor: pointer;
   font-family: "Work Sans", sans-serif;
-  border-radius: 20px;
+  border-radius: 5px;
   color: white;
   height: 35px;
   padding: 0px 8px;
   padding-bottom: 1px;
-  margin-right: 10px;
   font-weight: 500;
   padding-right: 15px;
   overflow: hidden;

dashboard/src/main/home/cluster-dashboard/preview-environments/components/ButtonEnablePREnvironments.tsx

@@ -123,7 +123,7 @@ const Button = styled(DynamicLink)`
   font-size: 13px;
   cursor: pointer;
   font-family: "Work Sans", sans-serif;
-  border-radius: 20px;
+  border-radius: 5px;
   color: white;
   height: 35px;
   padding: 0px 8px;

dashboard/src/main/home/cluster-dashboard/stacks/Dashboard.tsx

@@ -40,10 +40,6 @@ const Dashboard = () => {
         description="Groups of applications deployed from a shared source."
       />
       <Action.Row>
-        <Action.Button to={"/stacks/launch"}>
-          <i className="material-icons">add</i>
-          Create stack
-        </Action.Button>
         <FilterWrapper>
           <StyledSortSelector>
             <Label>
@@ -77,6 +73,10 @@ const Dashboard = () => {
             setNamespace={handleNamespaceChange}
           />
         </FilterWrapper>
+        <Action.Button to={"/stacks/launch"}>
+          <i className="material-icons">add</i>
+          Create stack
+        </Action.Button>
       </Action.Row>
       <StackList namespace={currentNamespace} sortBy={currentSort} />
     </>

dashboard/src/main/home/cluster-dashboard/stacks/components/styles.ts

@@ -146,13 +146,12 @@ export const Action = {
     font-size: 13px;
     cursor: pointer;
     font-family: "Work Sans", sans-serif;
-    border-radius: 20px;
+    border-radius: 5px;
     color: white;
     height: 35px;
     padding: 0px 8px;
     min-width: 130px;
     padding-bottom: 1px;
-    margin-right: 10px;
     font-weight: 500;
     padding-right: 15px;
     overflow: hidden;