From e76f6138305a6b9654572a56ddad322de93dd30b Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Fri, 12 Jul 2024 16:02:22 +0200
Subject: [PATCH] fix: remove custom styling, and uncessary conditional check

---
 .../SidePeek/Content/content.module.css       | 10 +------
 .../SidePeek/Content/index.tsx                | 26 +++++++++----------
 2 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/components/TempDesignSystem/SidePeek/Content/content.module.css b/components/TempDesignSystem/SidePeek/Content/content.module.css
index da4e97006..f8f4fec36 100644
--- a/components/TempDesignSystem/SidePeek/Content/content.module.css
+++ b/components/TempDesignSystem/SidePeek/Content/content.module.css
@@ -13,21 +13,13 @@
   display: flex;
   justify-content: flex-end;
   border-bottom: 1px solid var(--Base-Border-Subtle);
+  align-items: center;
 }
 
 .header:has(> h2) {
   justify-content: space-between;
 }
 
-.closeBtn {
-  border: none;
-  background-color: transparent;
-  display: flex;
-  align-items: center;
-  padding: 0;
-  cursor: pointer;
-}
-
 @media and screen (min-width: 1367px) {
   .content > * {
     padding: var(--Spacing-x4);
diff --git a/components/TempDesignSystem/SidePeek/Content/index.tsx b/components/TempDesignSystem/SidePeek/Content/index.tsx
index cfa4b60a3..8e29b8922 100644
--- a/components/TempDesignSystem/SidePeek/Content/index.tsx
+++ b/components/TempDesignSystem/SidePeek/Content/index.tsx
@@ -6,6 +6,8 @@ import { CloseIcon } from "@/components/Icons"
 import { SidePeekContentProps } from "@/components/TempDesignSystem/SidePeek/types"
 import Title from "@/components/TempDesignSystem/Text/Title"
 
+import Button from "../../Button"
+
 import styles from "./content.module.css"
 
 export default function Content({
@@ -18,24 +20,22 @@ export default function Content({
   return isActive ? (
     <aside className={styles.content}>
       <header className={styles.header}>
-        {title && (
-          <Title
-            color="burgundy"
-            textTransform="uppercase"
-            level={"h2"}
-            as={"h3"}
-          >
-            {title}
-          </Title>
-        )}
-        <button
+        <Title
+          color="burgundy"
+          textTransform="uppercase"
+          level={"h2"}
+          as={"h3"}
+        >
+          {title}
+        </Title>
+        <Button
+          intent="text"
           onClick={() => {
             onClose && onClose()
           }}
-          className={styles.closeBtn}
         >
           <CloseIcon color="burgundy" height={32} width={32} />
-        </button>
+        </Button>
       </header>
       {children}
     </aside>