added icon and list is scrolable now

Author: talhainvenxion

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

@@ -63,6 +63,7 @@ import { ReactComponent as ChatDots } from './assets/ChatDots.svg';
 import { ReactComponent as Run } from './assets/Run.svg';
 import { ReactComponent as ImageBuilder } from './assets/ImageBuilder.svg';
 import { ReactComponent as Pen } from './assets/Pen.svg';
+import { ReactComponent as ModelRegistry } from './assets/ModelRegistry.svg';
 // import { ReactComponent as Inprogress } from './assets/InProgress.svg';
 // import { ReactComponent as Cached } from './assets/Cached.svg';
 // import { ReactComponent as RightArrow } from './assets/RightArrow.svg';
@@ -200,6 +201,7 @@ const icons = {
     useStroke: true,
   }),
   pen: createIcon({ Component: Pen, useStroke: true }),
+  model_registry: createIcon({ Component: ModelRegistry, useStroke: true }),
 
   // paginations
   paginationFirst: createIcon({ Component: PaginationFirst, useStroke: true }),

src/ui/components/icons/index.tsx

@@ -82,6 +82,11 @@ const Component = (props: any) => {
   return (
     <Box
       style={{
+        height: '75%',
+        // width: '20%',
+        overflow: 'hidden',
+        scrollBehavior: 'smooth',
+        overflowY: 'scroll',
         borderRight: '1px solid #A8A8A8',
         padding: '0 50px 0 33px',
         marginTop: '10rem',
@@ -95,7 +100,7 @@ const Component = (props: any) => {
         />
       </Box> */}
 
-      <Box style={{ marginTop: '-20px' }}>
+      <Box style={{}}>
         {/* {props?.fromRegisterComponent && (
           <FlexBox
             onClick={() => selectSection('all_components')}
@@ -362,7 +367,7 @@ const Component = (props: any) => {
                   ...sectionStyle,
                   background: formatSectionColor(item),
                 }}
-                marginTop="sm"
+                // marginTop="sm"
               >
                 <Box>
                   <icons.orchestrator
@@ -439,6 +444,34 @@ const Component = (props: any) => {
                 </Box>
               </FlexBox>
             )}
+            {item === 'model_registry' && (
+              <FlexBox
+                onClick={() => selectSection(item)}
+                style={{
+                  ...sectionStyle,
+                  background: formatSectionColor(item),
+                }}
+                marginTop="sm"
+              >
+                <Box>
+                  <icons.model_registry
+                    color={
+                      selectedComp === item
+                        ? iconColors.white
+                        : iconColors.primary
+                    }
+                    size={iconSizes.md}
+                  />
+                </Box>
+                <Box>
+                  <Paragraph
+                    style={{ color: formatTextColor(item), ...textStyle }}
+                  >
+                    {formatText(item)}
+                  </Paragraph>
+                </Box>
+              </FlexBox>
+            )}
             {item === 'image_builder' && (
               <FlexBox
                 onClick={() => selectSection(item)}
@@ -480,7 +513,8 @@ const Component = (props: any) => {
               item !== 'annotator' &&
               item !== 'alerter' &&
               item !== 'image_builder' &&
-              item !== 'artifact_store' && (
+              item !== 'artifact_store' &&
+              item !== 'model_registry' && (
                 <FlexBox
                   onClick={() => selectSection(item)}
                   style={{