From 42d9843eb8d6ebdd5e3d4ced0c6e85949f20e614 Mon Sep 17 00:00:00 2001
From: captain-Akshay <akshay.sharma0503@gmail.com>
Date: Thu, 18 Apr 2024 13:20:22 +0530
Subject: [PATCH] feat(components): enchancement

Signed-off-by: captain-Akshay <akshay.sharma0503@gmail.com>
---
 src/custom/ChapterCard/style.tsx                   |  2 +-
 src/custom/LearningCard/style.tsx                  | 12 +++++++-----
 src/custom/SetupPrerequisite/SetupPrerequisite.tsx |  7 +++----
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/custom/ChapterCard/style.tsx b/src/custom/ChapterCard/style.tsx
index 678ec8ecc..6f8b5153c 100644
--- 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
index f485f5f26..683d33e6d 100644
--- 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
index def465fd7..5335c7236 100644
--- 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>