[new]Add margin to bottom and sides for cloud pages (#13559)

* fix bottom margin on create source/destination pages * Add padding to bottom and convert styles to scss * replace icon style with scss * add side margin to pages and change style to scss * move repeated bottom margin size to variable
airbytehq · Jun 10, 2022 · 862716f · 862716f
1 parent 2b31011
commit 862716f
Show file tree

Hide file tree

Showing 9 changed files with 81 additions and 61 deletions.
diff --git a/airbyte-webapp/src/components/MainPageWithScroll/MainPageWithScroll.module.scss b/airbyte-webapp/src/components/MainPageWithScroll/MainPageWithScroll.module.scss
@@ -0,0 +1,19 @@
+@use "../../scss/variables";
+
+.page {
+  overflow-y: hidden;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.headerError {
+  padding-top: 25px;
+}
+
+.content {
+  overflow-y: auto;
+  padding-top: 17px;
+  height: 100%;
+  padding-bottom: variables.$defaultBottomMargin;
+}
diff --git a/airbyte-webapp/src/components/MainPageWithScroll/MainPageWithScroll.tsx b/airbyte-webapp/src/components/MainPageWithScroll/MainPageWithScroll.tsx
@@ -1,44 +1,29 @@
+import classnames from "classnames";
 import React from "react";
-import styled from "styled-components";
 
-const Content = styled.div`
-  overflow-y: auto;
-  padding-top: 17px;
-  height: 100%;
-`;
-
-const Header = styled.div<{ hasError?: boolean }>`
-  padding-top: ${({ hasError }) => (hasError ? 25 : 0)}px;
-`;
-
-const Page = styled.div`
-  overflow-y: hidden;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-`;
+import styles from "./MainPageWithScroll.module.scss";
 
 /**
  * @param headTitle the title shown in the browser toolbar
  * @param pageTitle the title shown on the page
  */
-interface IProps {
+interface MainPageWithScrollProps {
   error?: React.ReactNode;
   headTitle?: React.ReactNode;
   pageTitle?: React.ReactNode;
   children?: React.ReactNode;
 }
 
-const MainPageWithScroll: React.FC<IProps> = ({ error, headTitle, pageTitle, children }) => {
+const MainPageWithScroll: React.FC<MainPageWithScrollProps> = ({ error, headTitle, pageTitle, children }) => {
   return (
-    <Page>
+    <div className={styles.page}>
       {error}
-      <Header hasError={!!error}>
+      <div className={classnames({ [styles.headerError]: !!error })}>
         {headTitle}
         {pageTitle}
-      </Header>
-      <Content>{children}</Content>
-    </Page>
+      </div>
+      <div className={styles.content}>{children}</div>
+    </div>
   );
 };
 

diff --git a/...ages/DestinationPage/pages/DestinationItemPage/components/DestinationSettings.module.scss b/...ages/DestinationPage/pages/DestinationItemPage/components/DestinationSettings.module.scss
@@ -0,0 +1,5 @@
+.content {
+  width: 80%;
+  max-width: 813px;
+  margin: 18px auto;
+}
diff --git a/...pp/src/pages/DestinationPage/pages/DestinationItemPage/components/DestinationSettings.tsx b/...pp/src/pages/DestinationPage/pages/DestinationItemPage/components/DestinationSettings.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
-import styled from "styled-components";
 
 import DeleteBlock from "components/DeleteBlock";
 
@@ -12,11 +11,7 @@ import { useDestinationDefinition } from "services/connector/DestinationDefiniti
 import { useGetDestinationDefinitionSpecification } from "services/connector/DestinationDefinitionSpecificationService";
 import { ConnectorCard } from "views/Connector/ConnectorCard";
 
-const Content = styled.div`
-  max-width: 813px;
-  width: 80%;
-  margin: 19px auto;
-`;
+import styles from "./DestinationSettings.module.scss";
 
 interface DestinationsSettingsProps {
   currentDestination: DestinationRead;
@@ -52,7 +47,7 @@ const DestinationsSettings: React.FC<DestinationsSettingsProps> = ({
     });
 
   return (
-    <Content>
+    <div className={styles.content}>
       <ConnectorCard
         isEditMode
         onSubmit={onSubmitForm}
@@ -67,7 +62,7 @@ const DestinationsSettings: React.FC<DestinationsSettingsProps> = ({
         title={<FormattedMessage id="destination.destinationSettings" />}
       />
       <DeleteBlock type="destination" onDelete={onDelete} />
-    </Content>
+    </div>
   );
 };
 

diff --git a/...e-webapp/src/pages/SourcesPage/pages/SourceItemPage/components/SourceSettings.module.scss b/...e-webapp/src/pages/SourcesPage/pages/SourceItemPage/components/SourceSettings.module.scss
@@ -0,0 +1,5 @@
+.content {
+  width: 80%;
+  max-width: 813px;
+  margin: 18px auto;
+}
diff --git a/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/components/SourceSettings.tsx b/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/components/SourceSettings.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect } from "react";
 import { FormattedMessage } from "react-intl";
-import styled from "styled-components";
 
 import DeleteBlock from "components/DeleteBlock";
 
@@ -12,11 +11,7 @@ import { useGetSourceDefinitionSpecification } from "services/connector/SourceDe
 import { ConnectorCard } from "views/Connector/ConnectorCard";
 import { useDocumentationPanelContext } from "views/Connector/ConnectorDocumentationLayout/DocumentationPanelContext";
 
-const Content = styled.div`
-  max-width: 813px;
-  width: 80%;
-  margin: 18px auto;
-`;
+import styles from "./SourceSettings.module.scss";
 
 interface SourceSettingsProps {
   currentSource: SourceRead;
@@ -52,7 +47,7 @@ const SourceSettings: React.FC<SourceSettingsProps> = ({ currentSource, connecti
   const onDelete = () => deleteSource({ connectionsWithSource, source: currentSource });
 
   return (
-    <Content>
+    <div className={styles.content}>
       <ConnectorCard
         title={<FormattedMessage id="sources.sourceSettings" />}
         isEditMode
@@ -67,7 +62,7 @@ const SourceSettings: React.FC<SourceSettingsProps> = ({ currentSource, connecti
         selectedConnectorDefinitionSpecification={sourceDefinitionSpecification}
       />
       <DeleteBlock type="source" onDelete={onDelete} />
-    </Content>
+    </div>
   );
 };
 

diff --git a/airbyte-webapp/src/scss/_variables.scss b/airbyte-webapp/src/scss/_variables.scss
@@ -1 +1,2 @@
 $transition: 0.3s;
+$defaultBottomMargin: 150px;
diff --git a/...t/ConnectorDocumentationLayout.module.css → .../ConnectorDocumentationLayout.module.scss b/...t/ConnectorDocumentationLayout.module.css → .../ConnectorDocumentationLayout.module.scss
@@ -1,3 +1,6 @@
+@use "../../../scss/colors";
+@use "../../../scss/variables";
+
 .leftPanelStyle {
   min-width: 200px;
   position: relative;
@@ -18,6 +21,10 @@
   padding: 400px 30px 30px 30px;
 }
 
+.container > *:last-child {
+  padding-bottom: variables.$defaultBottomMargin;
+}
+
 .noScroll {
   overflow: hidden;
   max-height: 100%;
@@ -45,3 +52,15 @@
   transform: rotate(-90deg);
   white-space: nowrap;
 }
+
+.panelGrabber {
+  height: 100vh;
+  padding: 6px;
+  display: flex;
+}
+
+.grabberHandleIcon {
+  margin: auto;
+  height: 25px;
+  color: colors.$greyColor20;
+}
diff --git a/...-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationLayout.tsx b/...-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationLayout.tsx
@@ -1,26 +1,15 @@
 import { faGripLinesVertical } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import classNames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 import { ReflexContainer, ReflexElement, ReflexSplitter } from "react-reflex";
 import { useWindowSize } from "react-use";
-import styled from "styled-components";
 
-import { DocumentationPanel } from "../../../components/DocumentationPanel/DocumentationPanel";
-import styles from "./ConnectorDocumentationLayout.module.css";
-import { useDocumentationPanelContext } from "./DocumentationPanelContext";
-
-const PanelGrabber = styled.div`
-  height: 100vh;
-  padding: 6px;
-  display: flex;
-`;
+import { DocumentationPanel } from "components/DocumentationPanel";
 
-const GrabberHandle = styled(FontAwesomeIcon)`
-  margin: auto;
-  height: 25px;
-  color: ${({ theme }) => theme.greyColor20};
-`;
+import styles from "./ConnectorDocumentationLayout.module.scss";
+import { useDocumentationPanelContext } from "./DocumentationPanelContext";
 
 interface PanelContainerProps {
   dimensions?: {
@@ -42,7 +31,14 @@ const LeftPanelContainer: React.FC<React.PropsWithChildren<PanelContainerProps>>
           </h3>
         </div>
       )}
-      <div className={width < 550 ? `${styles.noScroll}` : `${styles.fullHeight}`}>{children}</div>{" "}
+      <div
+        className={classNames(styles.container, {
+          [styles.noScroll]: width < 550,
+          [styles.fullHeight]: width > 550,
+        })}
+      >
+        {children}
+      </div>
     </>
   );
 };
@@ -53,7 +49,7 @@ const RightPanelContainer: React.FC<React.PropsWithChildren<PanelContainerProps>
   return (
     <>
       {width < 350 ? (
-        <div className={`${styles.lightOverlay}`}>
+        <div className={styles.lightOverlay}>
           <h2 className={styles.rotatedHeader}>Setup Guide</h2>
         </div>
       ) : (
@@ -70,14 +66,14 @@ export const ConnectorDocumentationLayout: React.FC = ({ children }) => {
 
   return (
     <ReflexContainer orientation="vertical" windowResizeAware>
-      <ReflexElement className={`left-pane ${styles.leftPanelClass}`} propagateDimensions minSize={150}>
+      <ReflexElement className={classNames("left-pane", styles.leftPanelStyle)} propagateDimensions minSize={150}>
         <LeftPanelContainer>{children}</LeftPanelContainer>
       </ReflexElement>
       {documentationPanelOpen && (
         <ReflexSplitter style={{ border: 0, background: "rgba(255, 165, 0, 0)" }}>
-          <PanelGrabber>
-            <GrabberHandle icon={faGripLinesVertical} size={"1x"} />
-          </PanelGrabber>
+          <div className={styles.panelGrabber}>
+            <FontAwesomeIcon className={styles.grabberHandleIcon} icon={faGripLinesVertical} size={"1x"} />
+          </div>
         </ReflexSplitter>
       )}
       {screenWidth > 500 && documentationPanelOpen && (