feat(components): enchancement

Signed-off-by: captain-Akshay <[email protected]>
layer5io · Apr 18, 2024 · 42d9843 · 42d9843
1 parent 0b0db2c
commit 42d9843
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git a/src/custom/ChapterCard/style.tsx b/src/custom/ChapterCard/style.tsx
@@ -5,7 +5,7 @@ import { ALABASTER_WHITE, KEPPEL, MIDNIGHT_BLACK } from '../../theme';
 export const ChapterCardWrapper = styled('div')(({ theme }) => ({
   transition: '0.8s cubic-bezier(0.2, 0.8, 0.2, 1)',
   padding: '1rem 1.25rem',
-  margin: '2rem 0',
+  width: '64rem',
   backgroundColor: theme.palette.mode === 'light' ? ALABASTER_WHITE : MIDNIGHT_BLACK,
   display: 'flex',
   border: `1px solid ${

diff --git a/src/custom/LearningCard/style.tsx b/src/custom/LearningCard/style.tsx
@@ -1,5 +1,5 @@
 import { styled } from '@mui/material/styles';
-import { ONYX_BLACK, SILVER_GRAY } from '../../theme';
+import { BLACK, ONYX_BLACK, SILVER_GRAY, WHITE } from '../../theme';
 
 const CardWrapper = styled('div')({
   maxWidth: '28rem',
@@ -8,16 +8,18 @@ const CardWrapper = styled('div')({
   borderRadius: '1rem'
 });
 
-const CardActive = styled('div')({
+const CardActive = styled('div')(({ theme }) => ({
   cursor: 'pointer',
   transition: 'all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s',
   '&:hover': {
     boxShadow: 'rgba(0, 179, 158, 0.9) 0px 0px 19px 6px'
-  }
-});
+  },
+  backgroundColor: theme.palette.mode === 'light' ? WHITE : BLACK
+}));
 
 const CardLink = styled('a')({
-  color: 'black'
+  color: 'black',
+  textDecoration: 'none'
 });
 
 const CardParent = styled('div')(({ theme }) => ({

diff --git a/src/custom/SetupPrerequisite/SetupPrerequisite.tsx b/src/custom/SetupPrerequisite/SetupPrerequisite.tsx
@@ -1,5 +1,4 @@
-import React, { FC } from 'react';
-import { IconProps } from '../../icons/types';
+import React from 'react';
 import { Card, CardHeader, ContainerCardWrapper, SetupPreReqWrapper } from './style';
 
 // const meshery =
@@ -9,7 +8,7 @@ import { Card, CardHeader, ContainerCardWrapper, SetupPreReqWrapper } from './st
 interface SetupItem {
   heading: string;
   description: string;
-  Icon: FC<IconProps>;
+  Icon: JSX.Element;
   onClick: () => void;
 }
 interface SetupPreReqProps {
@@ -30,7 +29,7 @@ const SetupPreReq: React.FC<SetupPreReqProps> = ({ Steps }) => (
           <Card>
             <CardHeader>
               <h2>{item.heading}</h2>
-              {item.Icon && <item.Icon />}
+              {item.Icon}
             </CardHeader>
             <p>{item.description}</p>
           </Card>