[Fix] New nav UI improvements (#5659)

* removed access space between tab icons and text

* added more space around new datasource cards

* fixed spacing issues around the new data sources sections

* removed logs

* updated the contrast of show more

* added + btn to all add new

* fixing height of the editor components to accommodate back btn

app/client/src/components/ads/Tabs.tsx

@@ -117,7 +117,7 @@ const TabTitleWrapper = styled.div`
   display: flex;
   align-items: center;
   .${Classes.ICON} {
-    margin-right: ${(props) => props.theme.spaces[3]}px;
+    margin-right: ${(props) => props.theme.spaces[2]}px;
   }
 `;
 
@@ -126,7 +126,7 @@ export const TabTitle = styled.span`
   font-weight: ${(props) => props.theme.typography.h5.fontWeight};
   line-height: ${(props) => props.theme.typography.h5.lineHeight - 3}px;
   letter-spacing: ${(props) => props.theme.typography.h5.letterSpacing}px;
-  margin: 0 5px;
+  margin: 0;
 `;
 
 export const TabCount = styled.div`

app/client/src/components/utils/CollapseComponent.tsx

@@ -7,7 +7,7 @@ const CollapseWrapper = styled.div`
   position: relative;
   margin-top: ${(props) => props.theme.spaces[3]}px;
   .collapse-title {
-    color: ${Colors.CADET_BLUE};
+    color: ${Colors.TROUT_DARK};
     letter-spacing: 0.04em;
     text-transform: uppercase;
     font-weight: 500;

app/client/src/pages/Editor/DataSourceEditor/Connected.tsx

@@ -52,9 +52,12 @@ const ActionButton = styled(Button)`
   padding: 10px 20px;
   &&&& {
     height: 36px;
-    max-width: 120px;
+    //max-width: 120px;
     width: auto;
   }
+  span > svg > path {
+    stroke: white;
+  }
 `;
 
 function Connected() {
@@ -173,6 +176,7 @@ function Connected() {
         <OnboardingIndicator step={OnboardingStep.EXAMPLE_DATABASE} width={120}>
           <ActionButton
             className="t--create-query"
+            icon="plus"
             onClick={isDBDatasource ? createQueryAction : createApiAction}
             text={isDBDatasource ? "New Query" : "New API"}
           />

app/client/src/pages/Editor/DataSourceEditor/JSONtoForm.tsx

@@ -51,7 +51,13 @@ export const ActionButton = styled(BaseButton)`
 const DBForm = styled.div`
   padding: 20px;
   margin-right: 0px;
-  height: calc(100vh - ${(props) => props.theme.smallHeaderHeight});
+  height: calc(
+    100vh -
+      (
+        ${(props) => props.theme.smallHeaderHeight} +
+          ${(props) => props.theme.backBanner}
+      )
+  );
   overflow: auto;
   .backBtn {
     padding-bottom: 1px;

app/client/src/pages/Editor/DataSourceEditor/RestAPIDatasourceForm.tsx

@@ -87,7 +87,10 @@ const RestApiForm = styled.div`
   padding: 20px;
   margin-left: 10px;
   margin-right: 0px;
-  height: calc(100vh - ${(props) => props.theme.headerHeight});
+  height: calc(
+    100vh - ${(props) => props.theme.headerHeight} -
+      ${(props) => props.theme.backBanner}
+  );
   overflow: auto;
   .backBtn {
     padding-bottom: 1px;
@@ -145,9 +148,12 @@ const CreateApiButton = styled(AdsButton)`
   padding: 10px 20px;
   &&&& {
     height: 36px;
-    max-width: 120px;
+    //max-width: 120px;
     width: auto;
   }
+  span > svg > path {
+    stroke: white;
+  }
 `;
 
 const StyledButton = styled(Button)`
@@ -333,6 +339,7 @@ class DatasourceRestAPIEditor extends React.Component<Props> {
         <CreateApiButton
           className="t--create-query"
           disabled={this.disableSave()}
+          icon="plus"
           isLoading={isSaving}
           onClick={this.createApiAction}
           text="New API"

app/client/src/pages/Editor/DataSourceEditor/index.tsx

@@ -66,12 +66,10 @@ class DataSourceEditor extends React.Component<Props> {
     }
   }
   handleSubmit = () => {
-    console.log("Handle Submit");
     this.props.submitForm(DATASOURCE_DB_FORM);
   };
 
   handleSave = (formData: Datasource) => {
-    console.log("Handle Save");
     const { applicationId, pageId } = this.props.match.params;
     this.props.updateDatasource(
       formData,

app/client/src/pages/Editor/IntegrationEditor/DatasourceCard.tsx

@@ -36,9 +36,12 @@ const ActionButton = styled(Button)`
   padding: 10px 20px;
   &&&& {
     height: 36px;
-    max-width: 120px;
+    //max-width: 120px;
     width: auto;
   }
+  span > svg > path {
+    stroke: white;
+  }
 `;
 
 const DatasourceImage = styled.img`
@@ -172,6 +175,7 @@ function DatasourceCard(props: DatasourceCardProps) {
           />
           <ActionButton
             className="t--create-query"
+            icon="plus"
             onClick={() => props.onCreateQuery(datasource)}
             text="New Query"
           />

app/client/src/pages/Editor/IntegrationEditor/DatasourceHome.tsx

@@ -35,7 +35,7 @@ const DatasourceHomePage = styled.div`
 const DatasourceCardsContainer = styled.div`
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 10px;
+  gap: 16px;
   text-align: center;
   min-width: 150px;
   border-radius: 4px;
@@ -46,7 +46,7 @@ const DatasourceCard = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 70px;
+  height: 64px;
   &:hover {
     background: ${Colors.Gallery};
     cursor: pointer;

app/client/src/pages/Editor/IntegrationEditor/IntegrationsHomeScreen.tsx

@@ -76,7 +76,7 @@ const NewIntegrationsContainer = styled.div`
   /* padding-bottom: 300px; */
   /* margin-top: 16px; */
   & > div {
-    margin-bottom: 16px;
+    margin-bottom: 20px;
   }
 `;
 

app/client/src/pages/Editor/IntegrationEditor/MockDataSources.tsx

@@ -8,11 +8,10 @@ import { addMockDatasourceToOrg } from "actions/datasourceActions";
 import { getCurrentOrgId } from "selectors/organizationSelectors";
 
 const MockDataSourceWrapper = styled.div`
-  padding: 5px;
   overflow: auto;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 10px;
+  gap: 16px;
   /* height: calc(
     100vh - ${(props) => props.theme.integrationsPageUnusableHeight}
   ); */

app/client/src/pages/Editor/IntegrationEditor/NewApi.tsx

@@ -59,7 +59,7 @@ const StyledContainer = styled.div`
 const ApiCardsContainer = styled.div`
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 10px;
+  gap: 16px;
   text-align: center;
   min-width: 150px;
   border-radius: 4px;
@@ -76,7 +76,7 @@ const ApiCard = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 70px;
+  height: 64px;
   &:hover {
     background: ${Colors.Gallery};
     cursor: pointer;

app/client/src/pages/Editor/SaaSEditor/DatasourceCard.tsx

@@ -30,6 +30,10 @@ const ActionButton = styled(BaseButton)`
     max-width: 120px;
     width: auto;
   }
+
+  span > svg > path {
+    stroke: white;
+  }
 `;
 
 const DatasourceImage = styled.img`