fix: remove custom styling, and uncessary conditional check

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);

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>