From fa734fb217774e87ca896c80509c9bd5f2e9e87e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Samy=20Pess=C3=A9?= <samypesse@gmail.com>
Date: Thu, 15 Feb 2024 15:37:18 +0100
Subject: [PATCH] Fix border radius for tabs and code-blocks when using
 straight corners (#163)

* Fix border radius for tabs and code-blocks when using straight corners

* Format
---
 src/app/[spaceId]/globals.css                 |  6 +++-
 .../DocumentView/CodeBlock/CodeBlock.tsx      |  7 ++++-
 .../DocumentView/Tabs/DynamicTabs.tsx         |  1 +
 src/components/Footer/Footer.tsx              | 31 +++++++++++++++++--
 src/components/Footer/FooterLinksGroup.tsx    | 12 ++++++-
 src/components/PageBody/PageBody.tsx          |  9 +-----
 .../TableOfContents/TableOfContents.tsx       | 10 +-----
 7 files changed, 53 insertions(+), 23 deletions(-)

diff --git a/src/app/[spaceId]/globals.css b/src/app/[spaceId]/globals.css
index 7662a6338..4c784c3f6 100644
--- a/src/app/[spaceId]/globals.css
+++ b/src/app/[spaceId]/globals.css
@@ -18,7 +18,11 @@
         --light-4: color-mix(in srgb, rgb(var(--primary-base-800)), rgb(var(--light-base)) 72%);
 
         --dark-1: color-mix(in srgb, rgb(var(--primary-base-100)), rgb(1 1 1) 96%);
-        --dark-DEFAULT: color-mix(in srgb, rgb(var(--primary-base-300)), rgb(var(--dark-base)) 94.5%);
+        --dark-DEFAULT: color-mix(
+            in srgb,
+            rgb(var(--primary-base-300)),
+            rgb(var(--dark-base)) 94.5%
+        );
         --dark-2: color-mix(in srgb, rgb(var(--primary-base-200)), rgb(var(--dark-base)) 92%);
         --dark-3: color-mix(in srgb, rgb(var(--primary-base-200)), rgb(25 25 25) 91%);
         --dark-4: color-mix(in srgb, rgb(var(--primary-base-200)), rgb(var(--dark-base)) 64%);
diff --git a/src/components/DocumentView/CodeBlock/CodeBlock.tsx b/src/components/DocumentView/CodeBlock/CodeBlock.tsx
index 395717322..cda385087 100644
--- a/src/components/DocumentView/CodeBlock/CodeBlock.tsx
+++ b/src/components/DocumentView/CodeBlock/CodeBlock.tsx
@@ -25,7 +25,11 @@ export async function CodeBlock(props: BlockProps<DocumentBlockCode>) {
     const fullWidth = block.data.fullWidth;
 
     const fullWidthStyle = fullWidth ? 'max-w-4xl' : 'max-w-3xl';
-    const titleRoundingStyle = title ? ['rounded-md', 'rounded-ss-none'] : ['rounded-md'];
+    const titleRoundingStyle = [
+        'rounded-md',
+        'straight-corners:rounded-sm',
+        title ? 'rounded-ss-none' : null,
+    ];
 
     return (
         <div className={tcls('group/codeblock', 'grid', 'grid-flow-col', style, fullWidthStyle)}>
@@ -51,6 +55,7 @@ export async function CodeBlock(props: BlockProps<DocumentBlockCode>) {
                             'justify-center',
                             'bg-light-2',
                             'rounded-t',
+                            'straight-corners:rounded-t-s',
                             'px-3',
                             'py-2',
                             'dark:bg-dark-2',
diff --git a/src/components/DocumentView/Tabs/DynamicTabs.tsx b/src/components/DocumentView/Tabs/DynamicTabs.tsx
index 8410a0ad6..593839d2f 100644
--- a/src/components/DocumentView/Tabs/DynamicTabs.tsx
+++ b/src/components/DocumentView/Tabs/DynamicTabs.tsx
@@ -23,6 +23,7 @@ export function DynamicTabs(props: {
         <div
             className={tcls(
                 'rounded-lg',
+                'straight-corners:rounded-sm',
                 'ring-1',
                 'ring-inset',
                 'ring-dark/3',
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 9968a2cc2..bb1b540d0 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -26,10 +26,29 @@ export function Footer(props: {
                 'dark:bg-dark-2',
             )}
         >
-            <div className={tcls('flex', 'flex-col', CONTAINER_STYLE, 'py-6', 'md:flex-row', 'gap-6')}>
+            <div
+                className={tcls(
+                    'flex',
+                    'flex-col',
+                    CONTAINER_STYLE,
+                    'py-6',
+                    'md:flex-row',
+                    'gap-6',
+                )}
+            >
                 <div className={tcls('flex-1', 'flex', 'flex-col', 'gap-6')}>
                     {customization.footer.logo || customization.footer.groups?.length > 0 ? (
-                        <div className={tcls('flex', 'flex-col', 'gap-10', 'sm:gap-20', 'sm:flex-row', 'items-center', 'flex-wrap')}>
+                        <div
+                            className={tcls(
+                                'flex',
+                                'flex-col',
+                                'gap-10',
+                                'sm:gap-20',
+                                'sm:flex-row',
+                                'items-center',
+                                'flex-wrap',
+                            )}
+                        >
                             {customization.footer.logo ? (
                                 <div>
                                     <Image
@@ -45,7 +64,13 @@ export function Footer(props: {
                                                 : null,
                                         }}
                                         priority="lazy"
-                                        style={['h-10', 'md:h-24', 'max-w-full', 'sm:max-w-80', 'object-contain']}
+                                        style={[
+                                            'h-10',
+                                            'md:h-24',
+                                            'max-w-full',
+                                            'sm:max-w-80',
+                                            'object-contain',
+                                        ]}
                                         sizes={[
                                             {
                                                 width: 320,
diff --git a/src/components/Footer/FooterLinksGroup.tsx b/src/components/Footer/FooterLinksGroup.tsx
index 9b79601d1..4453962d4 100644
--- a/src/components/Footer/FooterLinksGroup.tsx
+++ b/src/components/Footer/FooterLinksGroup.tsx
@@ -11,7 +11,17 @@ export function FooterLinksGroup(props: {
     const { group, context } = props;
 
     return (
-        <div className={tcls('flex', 'flex-col', 'gap-3', 'items-center', 'text-center', 'sm:items-start', 'sm:text-start')}>
+        <div
+            className={tcls(
+                'flex',
+                'flex-col',
+                'gap-3',
+                'items-center',
+                'text-center',
+                'sm:items-start',
+                'sm:text-start',
+            )}
+        >
             <p className={tcls('text-base', 'font-medium')}>{group.title}</p>
             {group.links.map((link, index) => {
                 return <FooterLink key={index} link={link} context={context} />;
diff --git a/src/components/PageBody/PageBody.tsx b/src/components/PageBody/PageBody.tsx
index cf5bb517a..2badb601f 100644
--- a/src/components/PageBody/PageBody.tsx
+++ b/src/components/PageBody/PageBody.tsx
@@ -25,14 +25,7 @@ export function PageBody(props: {
     context: ContentRefContext;
     withPageFeedback: boolean;
 }) {
-    const {
-        space,
-        customization,
-        context,
-        page,
-        document,
-        withPageFeedback,
-    } = props;
+    const { space, customization, context, page, document, withPageFeedback } = props;
 
     const asFullWidth = document ? hasFullWidthBlock(document) : false;
     const language = getSpaceLanguage(customization);
diff --git a/src/components/TableOfContents/TableOfContents.tsx b/src/components/TableOfContents/TableOfContents.tsx
index 0efd664be..dae8bbcdb 100644
--- a/src/components/TableOfContents/TableOfContents.tsx
+++ b/src/components/TableOfContents/TableOfContents.tsx
@@ -24,15 +24,7 @@ export function TableOfContents(props: {
     header?: React.ReactNode;
     withHeaderOffset: boolean;
 }) {
-    const {
-        space,
-        customization,
-        pages,
-        ancestors,
-        header,
-        context,
-        withHeaderOffset,
-    } = props;
+    const { space, customization, pages, ancestors, header, context, withHeaderOffset } = props;
 
     return (
         <aside