feat(app): new details footer appearance

src/components/Tabs/Tabs.css

@@ -1,15 +1,12 @@
 .tabs {
   display: flex;
   flex-direction: column;
-  border-left: 2px solid rgba(163, 159, 171, 0.1);
-  border-right: 2px solid rgba(163, 159, 171, 0.1);
 }
 
 .tabs-header {
   display: flex;
   align-items: center;
   gap: 8px;
-  border-bottom: 2px solid rgba(163, 159, 171, 0.1);
 }
 
 button.tab {
@@ -19,14 +16,25 @@ button.tab {
   text-align: center;
   cursor: pointer;
   flex: 1;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+
+button.tab:focus-within {
+  /* background-color: var(--tabs-background); */
 }
 
 .tab.active {
-  background-color: rgba(194, 186, 196, 0.25);
+  background-color: var(--tabs-background);
+  border-bottom: none;
 }
 
 .tab-content {
   flex: 1;
+  padding: 8px 16px;
   display: grid;
   place-items: center;
+  border-radius: 8px;
+  background-color: var(--tabs-background);
+  overflow-y: auto;
 }

src/components/Tabs/Tabs.tsx

@@ -1,4 +1,7 @@
-import { ReactNode, useState } from "react";
+import { CSSProperties, ReactNode, useState } from "react";
+import { useRecoilValue } from "recoil";
+
+import { isDarkThemeSelector } from "@/state";
 
 import "./Tabs.css";
 
@@ -11,15 +14,37 @@ type TabsProps = {
   tabs: Tab[];
 };
 
+type CSSCustomPropertyName = `--${string}`;
+
+type CSSCustomProperties = {
+  [property: CSSCustomPropertyName]: string;
+};
+
+const colorStyles: Record<string, CSSProperties & CSSCustomProperties> = {
+  light: { "--tabs-background": "white" },
+  dark: { "--tabs-background": "rgba(194, 186, 196, 0.25)" },
+} as const;
+
+const contentStyles: Record<string, CSSProperties> = {
+  activeLeft: { borderTopLeftRadius: 0 },
+  activeRight: { borderTopRightRadius: 0 },
+} as const;
+
 const Tabs = ({ tabs }: TabsProps) => {
   const [activeIndex, setActiveIndex] = useState<number>(0);
+  const isDark = useRecoilValue(isDarkThemeSelector);
 
   return (
-    <div className="tabs">
+    <div
+      className="tabs"
+      tabIndex={0}
+      style={isDark ? colorStyles.dark : colorStyles.light}
+    >
       <div className="tabs-header">
         {tabs.map((tab, i) => (
           <button
             key={i}
+            tabIndex={0}
             className={`tab ${activeIndex === i ? "active" : ""}`}
             onClick={() => setActiveIndex(i)}
           >
@@ -27,7 +52,18 @@ const Tabs = ({ tabs }: TabsProps) => {
           </button>
         ))}
       </div>
-      <div className="tab-content">{tabs[activeIndex]?.content}</div>
+      <div
+        className="tab-content"
+        style={
+          activeIndex === 0
+            ? contentStyles.activeLeft
+            : activeIndex === tabs.length - 1
+            ? contentStyles.activeRight
+            : undefined
+        }
+      >
+        {tabs[activeIndex]?.content}
+      </div>
     </div>
   );
 };