ui updates

Author: AhsanKhan7

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

@@ -22,15 +22,16 @@
   display: flex;
   justify-content: center;
   align-items: center;
- 
-
   .imageContainer {
+    // max-height: 60px;
+    // max-width: 60px;
+    
     height: 59px;
     width: 119px;
     background-color: #fff;  
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    // display: flex;
+    // justify-content: center;
+    // align-items: center;
 
     img {
       height: 100%;

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

@@ -3,6 +3,7 @@ import { Box, Paragraph } from '../../../components';
 
 import styles from './index.module.scss';
 import { titleCase } from '../../../../utils/camelCase';
+import ReactTooltip from 'react-tooltip';
 
 export const CustomStackBox: React.FC<{
   image: any;
@@ -16,7 +17,7 @@ export const CustomStackBox: React.FC<{
     <Box
       paddingHorizontal="sm2" 
       paddingVertical="sm2"
-      className={styles.stackBox}
+      className={styles.stackBox} 
     >
     <input type='checkbox' className={styles.checkbox} checked={value} onClick={onCheck} />
       <Box className={styles.imageWrapper}>
@@ -26,13 +27,21 @@ export const CustomStackBox: React.FC<{
       </Box>
 
       <Box style={{ marginTop: '8px' }}>
-        <Paragraph className={styles.stackName}>{stackName?.slice(0, 15)}</Paragraph>
+        <div data-tip data-for={stackName}>
+          <Paragraph className={styles.stackName}>{stackName?.length > 14 ? <>{stackName?.slice(0, 15)}...</> : stackName}</Paragraph>
+        </div>
+        <ReactTooltip id={stackName} place="top" effect="solid">
+          <Paragraph color="white">{stackName}</Paragraph>
+        </ReactTooltip>
       </Box>
 
       <Box marginTop="xs">
-        <Paragraph className={styles.stackDesc}>
-          {titleCase(stackDesc?.slice(0, 15))}
-        </Paragraph>
+        <div data-tip data-for={stackDesc}>
+          <Paragraph className={styles.stackDesc}>{stackDesc?.length > 14 ? <>{titleCase(stackDesc?.slice(0, 15))}...</> : stackDesc}</Paragraph>
+        </div>
+        <ReactTooltip id={stackDesc} place="top" effect="solid">
+          <Paragraph color="white">{titleCase(stackDesc)}</Paragraph>
+        </ReactTooltip>
       </Box>
     </Box>
   );

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

@@ -1,3 +1,13 @@
+.top {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  padding: 10px 0;
+  background-color: #fff;
+  z-index: 99;
+
+}
+
 .selectedBox {
     height: 60px;
     width: 60px;

src/ui/layouts/stacks/CreateStack/ListForAll/index.tsx

@@ -179,33 +179,35 @@ export const ListForAll: React.FC<Props> = () => {
   };
 
   return (
-    <Box style={{ width: '100%' }}>
-      <Box>
-        <H2 style={{ fontWeight: 'bolder' }}>Register a Stack</H2>
-      </Box>
-
-      <Box marginTop="lg">
-        <FlexBox.Row alignItems='center'>
-          <Box style={{ width: '30%' }}>
-            <FormTextField
-              required={'*'}
-              onChange={(e: any) => {
-                setStackName(e);
-              }}
-              placeholder="Stack Name"
-              label={'Enter Stack Name'}
-              value={stackName}
-            />
-          </Box>
-          <Box marginLeft='xl' style={{ width: '30%' }}>
-            <ToggleFieldBlock
-              label={'Share Stack with public'}
-              value={isShared}
-              onHandleChange={(value: any) => setIshared(!isShared)}
-            />
-          </Box>
-        </FlexBox.Row>
-      </Box>
+    <Box style={{ width: '100%', position: 'relative' }}>
+      
+      <div className={styles.top}>
+        <Box>
+          <H2 style={{ fontWeight: 'bolder' }}>Register a Stack</H2>
+        </Box>
+        <Box marginTop="lg">
+          <FlexBox.Row alignItems='center'>
+            <Box style={{ width: '30%' }}>
+              <FormTextField
+                required={'*'}
+                onChange={(e: any) => {
+                  setStackName(e);
+                }}
+                placeholder="Stack Name"
+                label={'Enter Stack Name'}
+                value={stackName}
+              />
+            </Box>
+            <Box marginLeft='xl' style={{ width: '30%' }}>
+              <ToggleFieldBlock
+                label={'Share Stack with public'}
+                value={isShared}
+                onHandleChange={(value: any) => setIshared(!isShared)}
+              />
+            </Box>
+          </FlexBox.Row>
+        </Box>
+      </div>
 
       {selectedStack?.length >= 0 && (
         <FlexBox.Row marginTop="md">
@@ -238,7 +240,7 @@ export const ListForAll: React.FC<Props> = () => {
       <FlexBox.Column>
         {stackComponentsTypes?.map((item) => {
           return (
-            <Box marginTop="lg" style={{ overflow: 'auto' }}>
+            <Box marginTop="lg" paddingBottom='lg' style={{ overflowX: 'auto' }}>
               <GetList
                 type={item}
                 flavourList={flavourList}