Merge branch 'dev' into QA-Fixes

Author: talhainvenxion

src/ui/components/forms/index.tsx

@@ -180,7 +180,7 @@ export const EditField = (
   } & any,
 ): JSX.Element => {
   return (
-    <FlexBox.Column fullWidth style={{ height: '100px' }}>
+    <FlexBox.Column fullWidth >
       <FlexBox alignItems="center" fullWidth style={{ position: 'relative' }}>
         <InputWithLabel
           name={props.name}

src/ui/components/icons/assets/MultiUser.svg

@@ -29,7 +29,7 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
   const getFormElement: any = (elementName: any, elementSchema: any) => {
     if (typeof elementSchema === 'string') {
       return (
-        <Box marginVertical={'md'} style={{ width: '100%' }}>
+        <Box marginTop='lg' style={{ width: '100%' }}>
           <EditField
             disabled
             onChangeText={() => console.log('')}
@@ -45,7 +45,7 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
     }
     if (typeof elementSchema === 'object') {
       return (
-        <Box marginVertical={'xl'} style={{ width: '100%' }}>
+        <Box marginTop='lg' style={{ width: '100%' }}>
           <Paragraph size="body" style={{ color: 'black' }}>
             <label htmlFor={elementName}>{titleCase(elementName)}</label>
           </Paragraph>
@@ -76,7 +76,7 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
             </FlexBox.Row>
           )}
           {Object.entries(elementSchema).map(([key, value]) => (
-            <FlexBox.Row>
+            <FlexBox.Row marginTop='lg'>
               <EditField
                 disabled
                 onChangeText={() => console.log('')}
@@ -106,7 +106,7 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
     }
     if (typeof elementSchema === 'boolean') {
       return (
-        <Box marginVertical={'md'} style={{ width: '100%' }}>
+        <Box marginTop='lg' style={{ width: '100%' }}>
           <ToggleField 
             value={elementSchema} 
             onHandleChange={() => {}} 
@@ -145,7 +145,7 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
 
   return (
     <FlexBox.Column marginTop="xl" fullWidth>
-      <FlexBox.Row>
+      <FlexBox.Row flexDirection='column'>
         <Container>
           <Box style={{ width: '80%' }}>
             <EditField
@@ -159,20 +159,15 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
               className={styles.field}
             />
           </Box>
-          {/* <FlexBox.Row justifyContent="space-between" style={{ width: '80%' }}>
-            <Paragraph>Share Component with public</Paragraph>
-            <label className={styles.switch}>
-              <input type="checkbox" checked={details.is_shared} />
-              <span className={`${styles.slider} ${styles.round}`}></span>
-            </label>
-          </FlexBox.Row> */}
-          <ToggleField 
-            name='Share Component with public'
-            value={details.is_shared} 
-            onHandleChange={() => {}} 
-            label='Share Component with public'
-            disabled={true}  
-          />
+          <Box marginTop='lg'>
+            <ToggleField 
+              name='Share Component with public'
+              value={details.is_shared} 
+              onHandleChange={() => {}} 
+              label='Share Component with public'
+              disabled={true}  
+            />
+          </Box>
         </Container>
         {/* <Container>
   

src/ui/components/icons/assets/SingleUser.svg

@@ -15,7 +15,7 @@ export const NonEditableRunConfig: React.FC<{ runConfiguration: any }> = ({
   const getFormElement: any = (elementName: any, elementSchema: any) => {
     if (typeof elementSchema === 'string') {
       return (
-        <Box marginVertical={'md'} style={{ width: '40%' }}>
+        <Box marginTop={'lg'} style={{ width: '40%' }}>
           <EditField
             disabled
             // onKeyDown={(e: any) => onPressEnter(e, 'string', elementName)}
@@ -43,13 +43,13 @@ export const NonEditableRunConfig: React.FC<{ runConfiguration: any }> = ({
         );
       };
       return (
-        <Box style={{ width: '40%' }}>
+        <Box marginTop='lg' style={{ width: '40%' }}>
           <Paragraph size="body" style={{ color: 'black' }}>
             <label htmlFor={elementName}>{titleCase(elementName)}</label>
           </Paragraph>
           <Box
             padding={'md'}
-            marginVertical={'md'}
+            // marginVertical={'md'}
             className={styles.JSONPretty}
           >
             <icons.copy
@@ -70,7 +70,7 @@ export const NonEditableRunConfig: React.FC<{ runConfiguration: any }> = ({
 
     if (typeof elementSchema === 'boolean' || elementSchema === null) {
       return (
-        <Box marginVertical={'md'} style={{ width: '40%' }}>
+        <Box marginTop={'lg'} style={{ width: '40%' }}>
           <Box>
             {/* {console.log(elementSchema, elementName, 'asdasdasda2222sdasd')}
             <FlexBox.Row justifyContent="space-between">

src/ui/layouts/NonEditableConfig/index.tsx

@@ -45,11 +45,11 @@
   }
 
   input:checked + .slider {
-    background-color: $primaryColor;
+    background-color: #CCCCCC;
   }
 
   input:focus + .slider {
-    box-shadow: 0 0 1px $primaryColor;
+    box-shadow: 0 0 1px #CCCCCC;
   }
 
   input:checked + .slider:before {

src/ui/layouts/NonEditableRunConfig/index.tsx

@@ -73,7 +73,9 @@ export function ToggleField(props: any) {
               onChange={onHandleChange}
               disabled={disabled}
             />
-            <span className={`${styles.sliderBlue} ${styles.round}`}></span>
+           {disabled ? <span className={`${styles.slider} ${styles.round}`}></span> : 
+            <span className={`${styles.sliderBlue} ${styles.round}`}></span>}
+          
           </label>
         </FlexBox.Row>
       </FlexBox.Row>

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

@@ -55,7 +55,7 @@ export const StackBox: React.FC<{
 
       <Box style={{ marginTop: '8px' }}>
         <Paragraph className={styles.stackName}>
-          {titleCase(stackName?.slice(0, 17))}
+          {titleCase(stackName?.slice(0, 18))}
         </Paragraph>
       </Box>
 

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

@@ -1,6 +1,15 @@
 @import '../../../../globalStyles.scss';
 
 
+.popupContainer {
+  // height: 100vh;
+  // width: 100vw;
+  // top: 0;
+  // left: 0;
+  z-index: 1;
+  position: relative;
+}
+
 .sidePopup {
   background: #ffffff;
   border-radius: 4px;
@@ -9,7 +18,7 @@
   bottom: 0;
   top: 13rem;
   height: 88rem;
-  min-width: 700px;
+  min-width: 45vw;
   overflow: auto;
 } 
 
@@ -20,14 +29,6 @@
   }
 }
 
-.popupContainer {
-  height: 100vh;
-  width: 100vw;
-  top: 0;
-  left: 0;
-  z-index: 1;
-}
-
 .actionSection {
   width: 100%;
   background-color: #ffffff;

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

@@ -17,7 +17,7 @@ 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%' }}