feat: update styling

Signed-off-by: Amit Amrutiya <[email protected]>

src/custom/CatalogDetail/LeftPanel.tsx

@@ -15,9 +15,6 @@ interface LeftPanelProps {
   isCloneLoading: boolean;
   handleClone: (name: string, id: string) => void;
   showTechnologies?: boolean;
-  openTechnologies: boolean;
-  availableTechnologies: string[];
-  handleOpenTechnologies: () => void;
   mode: string;
   filteredAcademyData: FilteredAcademyData;
   isCloneDisabled: boolean;
@@ -34,9 +31,6 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
   isCloneLoading,
   handleClone,
   showTechnologies = true,
-  openTechnologies,
-  availableTechnologies,
-  handleOpenTechnologies,
   mode,
   filteredAcademyData,
   isCloneDisabled,
@@ -45,6 +39,7 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
   fontFamily
 }) => {
   const theme = useTheme();
+
   return (
     <div style={{ fontFamily }}>
       <CustomCatalogCard
@@ -85,11 +80,9 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
       />
       {showTechnologies && (
         <TechnologySection
-          availableTechnologies={availableTechnologies}
-          openTechnologies={openTechnologies}
-          handleOpenTechnologies={handleOpenTechnologies}
           technologySVGPath={technologySVGPath}
           technologySVGSubpath={technologySVGSubpath}
+          technologies={details.catalog_data?.compatibility || []}
         />
       )}
       <LearningSection filteredAcademyData={filteredAcademyData} />

src/custom/CatalogDetail/RelatedDesigns.tsx

@@ -33,8 +33,7 @@ const RelatedDesigns: React.FC<RelatedDesignsProps> = ({
     <AdditionalContainer>
       <ContentHeading>
         <h2 style={{ margin: '0', textTransform: 'uppercase' }}>
-          Other published design by
-          {formatToTitleCase(userProfile?.first_name ?? '')}
+          Other published design by {formatToTitleCase(userProfile?.first_name ?? '')}
         </h2>
       </ContentHeading>
       <DesignCardContainer>

src/custom/CatalogDetail/TechnologySection.tsx

@@ -1,24 +1,22 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { ListItemIcon } from '../../base';
 import { useTheme } from '../../theme';
 import CollapsibleSection from './CollapsibleSection';
 import { LabelDiv } from './style';
 
 interface TechnologySectionProps {
-  availableTechnologies: string[];
-  openTechnologies: boolean;
-  handleOpenTechnologies: () => void;
+  technologies: string[];
   technologySVGPath: string;
   technologySVGSubpath: string;
 }
 
 const TechnologySection: React.FC<TechnologySectionProps> = ({
-  availableTechnologies,
-  openTechnologies,
-  handleOpenTechnologies,
   technologySVGPath,
-  technologySVGSubpath
+  technologySVGSubpath,
+  technologies
 }) => {
+  const [openTechnologies, setOpenTechnologies] = useState(true);
+
   const theme = useTheme();
 
   const renderTechnologyItem = (item: string, index: number) => {
@@ -47,8 +45,8 @@ const TechnologySection: React.FC<TechnologySectionProps> = ({
       <CollapsibleSection
         title="TECHNOLOGY"
         isOpen={openTechnologies}
-        onToggle={handleOpenTechnologies}
-        items={availableTechnologies}
+        onToggle={() => setOpenTechnologies((prev) => !prev)}
+        items={technologies}
         renderItem={renderTechnologyItem}
         emptyState={'No technologies assigned to this design'}
         tooltip={'Technologies used in this design'}

src/custom/CatalogDetail/style.tsx

@@ -44,7 +44,7 @@ export const ContentDetailsText = styled(Typography)(({ theme }) => ({
   fontSize: '1rem',
   color: theme.palette.text.default,
   ['@media (min-width:1200px)']: {
-    fontSize: '1.3rem'
+    fontSize: '1'
   }
 }));
 

src/custom/CustomCatalog/CustomCard.tsx

@@ -138,7 +138,12 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
   const version = getVersion(pattern);
 
   useEffect(() => {
-    handleImage(technologies, basePath, subBasePath, setAvailableTechnologies);
+    handleImage({
+      technologies,
+      basePath,
+      subBasePath,
+      setAvailableTechnologies
+    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

src/custom/CustomCatalog/Helper.ts

@@ -42,16 +42,22 @@ const getValidSvgPaths = async (
   return validSvgPaths;
 };
 
-export const handleImage = async (
-  technologies: string[],
-  basePath: string = '',
-  subBasePath: string = '',
-  setAvailableTechnologies: (technologies: string[]) => void
-) => {
+interface HandleImageProps {
+  technologies: string[];
+  basePath?: string;
+  subBasePath?: string;
+  setAvailableTechnologies: (technologies: string[]) => void;
+}
+
+export const handleImage = async ({
+  technologies,
+  basePath = '',
+  subBasePath = '',
+  setAvailableTechnologies
+}: HandleImageProps) => {
   const validSvgPaths = await getValidSvgPaths(technologies, basePath, subBasePath);
   setAvailableTechnologies(validSvgPaths);
 };
-
 export const DEFAULT_DESIGN_VERSION = '0.0.0';
 
 export const getVersion = (design: Pattern) => {

src/custom/Typography/index.tsx

@@ -140,7 +140,7 @@ export const ContentDetailsPoints = styled(TextB3Regular)(({ theme }) => ({
 export const ContentDetailsText = styled(TextB1Regular)(({ theme }) => ({
   ...commonTypographyStyles(theme),
   ['@media (min-width:1200px)']: {
-    fontSize: '1.3rem'
+    fontSize: '1'
   }
 }));