Merge pull request #216 from zenml-io/dev

Dev

Author: danialraza03

src/ui/layouts/common/SidePopup/index.module.scss

@@ -3,26 +3,37 @@
 .dimmer {
   position: fixed;
   backdrop-filter: blur(4px);
-  // background: #424240;
-  // opacity: 0.5;
   height: 100vh;
   width: 100vw;
   top: 0;
   left: 0;
   z-index: 9999;
 }
 
+.popupContainer {
+  z-index: 99999;
+  position: relative;
+}
+
+.popupClose {
+  background-color: #fff;
+  border-radius: 100px;
+  position: absolute;
+  top: -2rem;
+  right: 62vw;
+  z-index: 999;
+}
+
 .sidePopup {
   background: #ffffff;
   border-radius: 4px;
   position: fixed;
-  right: 0;
+  right: 2rem;
   bottom: 0;
   top: 13rem;
-  height: 800px;
-  // height: 677px;
-  min-width: 700px;
-  overflow-x: auto;
+  height: 88rem;
+  min-width: 60vw;
+  overflow: auto;
 }
 
 @media (max-width: $md-breakpoint) {
@@ -32,27 +43,9 @@
   }
 }
 
-.popupContainer {
-  position: fixed;
-  height: 100vh;
-  width: 100vw;
-  top: 0;
-  left: 0;
-  z-index: 99999;
-}
-
-.popupClose {
-  background-color: #fff;
-  border-radius: 100px;
-  position: absolute;
-  top: 15rem;
-  right: 70rem;
-  z-index: 999;
-}
-
-.actionSection { 
-  min-width: 683px;
-  background-color: white;
+.actionSection {
+  width: 60vw;
+  background-color: #ffffff;
   position: fixed;
   bottom: 0;
 }

src/ui/layouts/common/SidePopup/index.tsx

@@ -39,12 +39,12 @@ export const SidePopup: React.FC<{
 
       <Box className={styles.sidePopup}>
         <OutsideClickHandler onOutsideClick={onClose}>
-          <Box paddingLeft="md" paddingTop="sm">
+          <Box paddingTop="sm">
             <iframe
               title="ZenML - Organization Embed"
               style={{ border: '0px', height: '100vh', width: '100%' }}
               // src="https://zenml.hellonext.co/embed/home?no_header=true"
-              src={flavor.docsUrl}
+              src={flavor?.sdkDocsUrl}
             ></iframe>
           </Box>
 

src/ui/layouts/common/Tabs/index.tsx

@@ -50,14 +50,14 @@ export const Tabs: React.FC<{ pages: TabPage[]; basePath: string }> = ({
                       <IfElse
                         condition={isActive}
                         renderWhenFalse={() => (
-                          <Truncate maxLines={1}>
-                            <Paragraph color="grey">{page.text}</Paragraph>
-                          </Truncate>
+                           <Truncate maxLines={1}>
+                              <Paragraph color="grey" style={{ padding: '5px 0' }} >{page.text}</Paragraph>
+                           </Truncate> 
                         )}
                         renderWhenTrue={() => (
-                          <Truncate maxLines={1}>
-                            <Paragraph color="primary">{page.text}</Paragraph>
-                          </Truncate>
+                           <Truncate maxLines={1}>
+                              <Paragraph color="primary" style={{ padding: '5px 0' }}>{page.text}</Paragraph>
+                           </Truncate>
                         )}
                       />
                     </Link>

src/ui/layouts/stackComponents/BasePage.tsx

@@ -106,7 +106,7 @@ export const BasePage: React.FC<{
                   );
                 }}
               >
-                Register Component
+                Register New Component
               </PrimaryButton>
             </Box>
           </FlexBox>

src/ui/layouts/stackComponents/ConfigureComponent/CreateComponent/index.tsx

@@ -430,7 +430,7 @@ export const CreateComponent: React.FC<{ flavor: any }> = ({ flavor }) => {
             type: toasterTypes.success,
           }),
         );
-        dispatchStackComponentsData(1, 10);
+        dispatchStackComponentsData(1, 1);
 
         history.push(
           routePaths.stackComponents.configuration(

src/ui/layouts/stackComponents/ConfigureComponent/SidePopup/index.module.scss

@@ -18,7 +18,7 @@
   bottom: 0;
   top: 13rem;
   height: 88rem;
-  min-width: 45vw;
+  min-width: 60vw;
   overflow: auto;
 } 
 
@@ -30,7 +30,7 @@
 }
 
 .actionSection {
-  width: 100%;
+  width: 60vw;
   background-color: #ffffff;
   position: fixed;
   bottom: 0;

src/ui/layouts/stackComponents/ConfigureComponent/SidePopup/index.tsx

@@ -22,7 +22,7 @@ export const SidePopup: React.FC<{
             title="ZenML - Organization Embed"
             style={{ border: '0px', height: '100vh', width: '100%' }}
             // src="https://zenml.hellonext.co/embed/home?no_header=true"
-            src={flavor.docsUrl}
+            src={flavor.sdkDocsUrl}
           ></iframe>
         </Box>
 

src/ui/layouts/stackComponents/StackDetail/Configuration/useService.ts

@@ -38,7 +38,7 @@ export const useService = ({ stackId }: { stackId: TId }): ServiceInterface => {
       }),
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [locationPath, stackComponent]);
+  }, [locationPath]);
 
   const setFetching = (fetching: boolean) => {
     dispatch(flavorPagesActions.setFetching({ fetching }));

src/ui/layouts/stacks/BasePage.tsx

@@ -91,7 +91,7 @@ export const BasePage: React.FC<{
                 history.push(routePaths.stacks.createStack(selectedWorkspace))
               }
             >
-              Register Stack
+              Register New Stack
             </PrimaryButton>
           </Box>
         </FlexBox>

src/ui/layouts/stacks/CreateStack/ListForAll/SidePopup/index.module.scss

@@ -3,26 +3,28 @@
 .dimmer {
   position: fixed;
   backdrop-filter: blur(4px);
-  // background: #424240;
-  // opacity: 0.5;
   height: 100vh;
   width: 100vw;
   top: 0;
   left: 0;
   z-index: 9999;
 }
 
+.popupContainer {
+  z-index: 99999;
+  position: relative;
+}
+
 .sidePopup {
   background: #ffffff;
   border-radius: 4px;
   position: fixed;
-  right: 0;
+  right: 2rem;
   bottom: 0;
   top: 13rem;
-  height: 800px;
-  // height: 677px;
-  min-width: 700px;
-  overflow-x: auto;
+  height: 88rem;
+  min-width: 60vw;
+  overflow: auto;
 }
 
 @media (max-width: $md-breakpoint) {
@@ -32,26 +34,17 @@
   }
 }
 
-.popupContainer {
-  position: fixed;
-  height: 100vh;
-  width: 100vw;
-  top: 0;
-  left: 0;
-  z-index: 99999;
-}
-
 .popupClose {
   background-color: #fff;
   border-radius: 100px;
-  position: absolute;
-  top: 15rem;
-  right: 70rem;
-  z-index: 999;
+  position: fixed;
+  top: 16rem;
+  right: 62vw;
+  z-index: 99999999999;
 }
 
 .actionSection { 
-  min-width: 683px;
+  width: 60vw;
   background-color: white;
   position: fixed;
   bottom: 0;