Merge pull request #346 from zenml-io/ahsan_fixes

fields and headers update

Author: talhainvenxion

src/ui/layouts/NonEditableConfig/index.tsx

@@ -144,7 +144,10 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
               >
                 <FlexBox.Row>
                   <Box
-                    style={{ display: 'flex', alignItems: 'center' }}
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                    }}
                     marginTop="sm"
                   >
                     <div
@@ -228,7 +231,11 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
               {Object.entries(elementSchema).map(([key, value], index) => (
                 <FlexBox.Row>
                   <Box
-                    style={{ display: 'flex', alignItems: 'center' }}
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      width: '29.8vw',
+                    }}
                     marginTop="sm"
                   >
                     <div
@@ -342,7 +349,7 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
                         &#x27A4;
                       </div>
 
-                      <div className="form-group" style={{ width: '28vw' }}>
+                      <div className="form-group" style={{ width: '28.3vw' }}>
                         <EditField
                           disabled
                           className={styles.field}

src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/index.tsx

@@ -12,7 +12,7 @@ export const SideFooter: React.FC = () => {
         <Separator.LightNew />
       </Box>
 
-      <div style={{ marginBottom: '-11px' }}>
+      <div style={{ marginBottom: '-11px', marginLeft: '-3.5px' }}>
         {/* <MenuItemExternal
         id="documentation"
         Icon={() => <icons.docs color={iconColors.white} size={iconSizes.md} />}

src/ui/layouts/pipelines/Header/index.module.scss

@@ -6,14 +6,19 @@
   box-shadow: 0px 4px 20px -2px rgba(0, 0, 0, 0.03);
 }
 
-.iconStyle { 
-  background-color: #F4F4F4; 
+.header2 {
+  padding-bottom: 40px !important;
+  box-shadow: 0px 4px 20px -2px rgba(0, 0, 0, 0.03) !important;
+}
+
+.iconStyle {
+  background-color: #f4f4f4;
   text-align: center;
-  height: 35px; 
+  height: 35px;
   width: 40px;
   border-radius: 3px;
   cursor: pointer;
-} 
+}
 
 @media (max-width: $md-breakpoint) {
   .dynamicHeaderRight {

src/ui/layouts/pipelines/Header/index.tsx

@@ -57,9 +57,10 @@ const HeaderWithButtons: React.FC<{
   renderRight?: () => JSX.Element;
 }> = ({ breadcrumbs, renderRight, title }) => (
   <FlexBox
+    marginTop="xl"
     alignItems="center"
     justifyContent="space-between"
-    className={styles.header}
+    className={styles.header2}
   >
     <FlexBox className="d-none d-md-flex">
       <Paragraph

src/ui/layouts/runs/Header/index.module.scss

@@ -6,14 +6,14 @@
   box-shadow: 0px 4px 20px -2px rgba(0, 0, 0, 0.03);
 }
 
-.iconStyle { 
-  background-color: #F4F4F4; 
+.iconStyle {
+  background-color: #f4f4f4;
   text-align: center;
-  height: 35px; 
+  height: 35px;
   width: 40px;
   border-radius: 3px;
   cursor: pointer;
-} 
+}
 
 @media (max-width: $md-breakpoint) {
   .dynamicHeaderRight {

src/ui/layouts/secrets/RegisterSecret/Register/index.tsx

@@ -259,7 +259,7 @@ export const Register: React.FC<Props> = (state: any) => {
           />
         </Box> */}
 
-        <Box style={{ width: '329px' }}>
+        <Box style={{ width: '30vw' }}>
           <FormTextField
             required={true}
             label={'Secret name'}
@@ -269,7 +269,7 @@ export const Register: React.FC<Props> = (state: any) => {
             onChange={(val: string) => setSecretName(val)}
           />
         </Box>
-        <Box marginTop="lg" style={{ width: '329px' }}>
+        <Box marginTop="lg" style={{ width: '30vw' }}>
           <FormDropdownField
             label={'Scope'}
             labelColor="rgba(66, 66, 64, 0.5)"

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

@@ -316,7 +316,7 @@ export const CreateComponent: React.FC<{ flavor: any; state: any }> = ({
                       <Box
                         className="form-group"
                         marginRight="md"
-                        style={{ width: '185px' }}
+                        style={{ width: '13.75vw' }}
                       >
                         <FormTextField
                           onChange={(event: any) =>
@@ -334,7 +334,7 @@ export const CreateComponent: React.FC<{ flavor: any; state: any }> = ({
                         />
                       </Box>
 
-                      <Box className="form-group" style={{ width: '185px' }}>
+                      <Box className="form-group" style={{ width: '13.75vw' }}>
                         <FormTextField
                           onChange={(event: any) =>
                             handleInputChange(

src/ui/layouts/stackComponents/Header/index.module.scss

@@ -7,15 +7,19 @@
   box-shadow: 0px 4px 20px -2px rgba(0, 0, 0, 0.03);
 }
 
-.iconStyle { 
-  background-color: #F4F4F4; 
+.header2 {
+  padding-bottom: 40px !important;
+  box-shadow: 0px 4px 20px -2px rgba(0, 0, 0, 0.03) !important;
+}
+
+.iconStyle {
+  background-color: #f4f4f4;
   text-align: center;
-  height: 35px; 
+  height: 35px;
   width: 40px;
   border-radius: 3px;
   cursor: pointer;
-} 
-
+}
 
 @media (max-width: $md-breakpoint) {
   // .dynamicHeaderRight {

src/ui/layouts/stackComponents/Header/index.tsx

@@ -59,10 +59,11 @@ const HeaderWithButtons: React.FC<{
   renderRight?: () => JSX.Element;
 }> = ({ breadcrumbs, renderRight, title }) => (
   <FlexBox.Row
+    marginTop="xl"
     alignItems="center"
     justifyContent="space-between"
     fullWidth
-    className={styles.header}
+    className={styles.header2}
   >
     <FlexBox className="d-none d-md-flex">
       <Paragraph

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

@@ -1,13 +1,12 @@
 @import '../../../../globalStyles.scss';
 
- 
 // .list::-webkit-scrollbar {
-//     height: 11px; 
+//     height: 11px;
 // }
-  
+
 //   /* Handle */
 // .list::-webkit-scrollbar-thumb {
-//     background: rgba(168, 168, 168, 0.5); 
+//     background: rgba(168, 168, 168, 0.5);
 //     border-radius: 6px;
 //   }
 
@@ -16,9 +15,6 @@
 //     background: rgba(217, 217, 217, 0.5);
 //     border-radius: 6px;
 // }
-  
-  
-
 
 .top {
   position: -webkit-sticky;
@@ -27,47 +23,45 @@
   padding: 10px 0;
   background-color: #fff;
   z-index: 98;
-
+  margin-top: -30px;
 }
 
 .selectedBox {
-    height: 60px;
-    width: 60px;
-    background-color: #fff;
-    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
-    cursor: pointer;
-    border-radius: 6px;
-    position: relative;
+  height: 60px;
+  width: 60px;
+  background-color: #fff;
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  border-radius: 6px;
+  position: relative;
 
-    img {
-        padding: 7px 3px;
-        height: 100%; 
-        width: 100%; 
-        object-fit: contain
-    }
+  img {
+    padding: 7px 3px;
+    height: 100%;
+    width: 100%;
+    object-fit: contain;
+  }
 }
 
 .selectedBoxCheckbox {
-    height: 15px; 
-    width: 15px;
-    accent-color:green; 
-    position: absolute; 
-    top: 5px;
+  height: 15px;
+  width: 15px;
+  accent-color: green;
+  position: absolute;
+  top: 5px;
 }
 
-
 .stackFooter {
-    width: 100%;
-    height: 74px;
-    position: sticky;
-    bottom: 0;
-    background-color: #fff; 
-    background: #ffffff; 
-    display: flex;
-    justify-content: flex-end;
+  width: 100%;
+  height: 74px;
+  position: sticky;
+  bottom: 0;
+  background-color: #fff;
+  background: #ffffff;
+  display: flex;
+  justify-content: flex-end;
 }
 .stackFooterButton {
-
-    right: 3rem;
-    margin-right: 45px,
-}
+  right: 3rem;
+  margin-right: 45px;
+}