From c2400496c38c0e2dc93a7f33da208af588b3a3c9 Mon Sep 17 00:00:00 2001
From: Modern-artist <90668597+Modern-artist@users.noreply.github.com>
Date: Tue, 11 Jul 2023 15:55:48 +0530
Subject: [PATCH] In layer5/learn page slick-slider(carousel) arrows are not
 aligned properly and icon are different. So I have aligned it properly and
 changed icon to desired icon issue #4525

Signed-off-by: Modern-artist <90668597+Modern-artist@users.noreply.github.com>
---
 .../Learn/LearnPage-Sections/workshops.js         | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/sections/Learn/LearnPage-Sections/workshops.js b/src/sections/Learn/LearnPage-Sections/workshops.js
index cf6530bfd840..65704434193d 100644
--- a/src/sections/Learn/LearnPage-Sections/workshops.js
+++ b/src/sections/Learn/LearnPage-Sections/workshops.js
@@ -60,6 +60,7 @@ export const WorkshopsListWrapper = styled.div`
 				background: ${props => props.theme.secondaryColor};
 				width: 2.75rem;
 				height: 2.75rem;
+        padding: 8px;
 				border-radius: 2rem;
 
 				&:hover {
@@ -213,21 +214,17 @@ const WorkshopsSection = () => {
   );
 
 
-  const SlickButtonFix = ({ children, ...props }) => (
-    <span {...props}>{children}</span>
-  );
+
 
   var settings = {
     infinite: false,
     speed: 400,
     slidesToShow: 1,
     slidesToScroll: 1,
-    nextArrow: (<SlickButtonFix>
-      <FiArrowRight />
-    </SlickButtonFix>),
-    prevArrow: (<SlickButtonFix>
-      <FiArrowLeft />
-    </SlickButtonFix>),
+    nextArrow: (
+      <FiArrowRight />),
+    prevArrow: (
+      <FiArrowLeft />),
     responsive: [
       {
         breakpoint: 700,