Merge pull request #309 from zenml-io/ahsan_secrets_2

UI updates

Author: talhainvenxion

src/ui/components/forms/index.tsx

@@ -147,7 +147,7 @@ export const CopyField = (
                   background: 'rgba(168, 168, 168, 0.2)',
                   border: '1px solid #C9CBD0',
                 }}
-                value={`${props.value.slice(0, 30)}...`}
+                value={`${props.value.slice(0, 33)}`}
                 placeholder={props.placeholder}
               />
             ) : (
@@ -166,7 +166,7 @@ export const CopyField = (
 
         {props.showTokField && (
           <LinkBox
-            style={{ position: 'absolute', right: '10px', top: '40px' }}
+            style={{ position: 'absolute', right: '10px', top: '35px' }}
             onClick={handleClick}
           >
             <icons.copy color={iconColors.grey} />
@@ -246,7 +246,7 @@ export const MakeSecretField = (
             style={{
               position: 'absolute',
               right: '10px',
-              top: '40px',
+              top: '35px',
               display: 'flex',
               alignItems: 'center',
               background: '#fff',
@@ -275,6 +275,9 @@ export const MakeSecretField = (
               position: 'absolute',
               zIndex: 2,
               top: '7rem',
+              height: '20rem',
+              overflowY: 'auto',
+              overflowX: 'hidden'
             }}
           >
               <Box

src/ui/layouts/runs/StackDetail/index.tsx

@@ -86,16 +86,16 @@ export const StackDetail: React.FC = () => {
               marginTop: '10px',
               justifyContent: 'center',
               borderRadius: '50%',
-              height: '25px',
-              width: '25px',
+              // height: '25px',
+              // width: '25px',
               paddingTop: '3px',
               textAlign: 'center',
             }}
           >
             {stack.isShared ? (
-              <icons.multiUser color={iconColors.white} size={iconSizes.sm} />
+              <icons.multiUser color={iconColors.white} size={iconSizes.md} />
             ) : (
-              <icons.singleUser color={iconColors.white} size={iconSizes.sm} />
+              <icons.singleUser color={iconColors.white} size={iconSizes.md} />
             )}
           </Paragraph>
         </Box>

src/ui/layouts/runs/Stacks/List/getHeaderCols.tsx

@@ -79,15 +79,15 @@ export const getHeaderCols = ({
             justifyContent="center"
             style={{
               borderRadius: '50%',
-              height: '19px',
-              width: '19px',
+              // height: '19px',
+              // width: '19px',
               textAlign: 'center',
             }}
           >
             {stack.isShared ? (
-              <icons.multiUser color={iconColors.white} size={iconSizes.sm} />
+              <icons.multiUser color={iconColors.white} size={iconSizes.md} />
             ) : (
-              <icons.singleUser color={iconColors.white} size={iconSizes.sm} />
+              <icons.singleUser color={iconColors.white} size={iconSizes.md} />
             )}
           </FlexBox>
         </Box>

src/ui/layouts/secrets/SecretDetail/Configuration/index.tsx

@@ -116,6 +116,13 @@ export const Configuration: React.FC<{
                 routePaths.secret.updateSecret(secret.id, selectedWorkspace),
               )
             }
+            style={{
+              background: '#FFFFFF',    
+              boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.05)',
+              borderRadius: '4px',
+              color: '#443E99',
+          
+            }}
           >
             Update Secret
           </PrimaryButton>

src/ui/layouts/stackComponents/StackDetail/getHeaderCols.tsx

@@ -158,21 +158,21 @@ export const GetHeaderCols = ({
                 justifyContent="center"
                 style={{
                   borderRadius: '50%',
-                  height: '19px',
-                  width: '19px',
+                  // height: '19px',
+                  // width: '19px',
                   marginLeft: '-24px',
                   textAlign: 'center',
                 }}
               >
                 {stack.isShared ? (
                   <icons.multiUser
                     color={iconColors.white}
-                    size={iconSizes.sm}
+                    size={iconSizes.md}
                   />
                 ) : (
                   <icons.singleUser
                     color={iconColors.white}
-                    size={iconSizes.sm}
+                    size={iconSizes.md}
                   />
                 )}
               </FlexBox>

src/ui/layouts/stacks/StackDetail/getHeaderCols.tsx

@@ -117,21 +117,21 @@ export const GetHeaderCols = ({
                 justifyContent="center"
                 style={{
                   borderRadius: '50%',
-                  height: '19px',
-                  width: '19px',
+                  // height: '19px',
+                  // width: '19px',
                   marginLeft: '-16px',
                   textAlign: 'center',
                 }}
               >
                 {stack.isShared ? (
                   <icons.multiUser
                     color={iconColors.white}
-                    size={iconSizes.sm}
+                    size={iconSizes.md}
                   />
                 ) : (
                   <icons.singleUser
                     color={iconColors.white}
-                    size={iconSizes.sm}
+                    size={iconSizes.md}
                   />
                 )}
               </FlexBox>