From 0cb9b8940b16a9ada04ebb5538acffa4736feafd Mon Sep 17 00:00:00 2001
From: Red J Adaya <red.adaya@gmail.com>
Date: Tue, 9 Jul 2024 06:02:52 +0800
Subject: [PATCH] new tabs design 2 (#100)

---
 frontend/app/tab/tab.less    | 99 +++++++++++++-----------------------
 frontend/app/tab/tab.tsx     | 18 +------
 frontend/app/tab/tabbar.less |  4 +-
 3 files changed, 39 insertions(+), 82 deletions(-)

diff --git a/frontend/app/tab/tab.less b/frontend/app/tab/tab.less
index eac4ee8fc..443b190f6 100644
--- a/frontend/app/tab/tab.less
+++ b/frontend/app/tab/tab.less
@@ -2,13 +2,13 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .tab {
+    position: absolute;
     width: 130px;
     height: 100%;
-    position: absolute;
+    padding: 6px 3px;
     box-sizing: border-box;
     font-weight: bold;
     color: var(--secondary-text-color);
-    padding: 4px 3px;
 
     .tab-inner {
         position: relative;
@@ -16,7 +16,7 @@
         height: 100%;
         white-space: nowrap;
         border-radius: 6px;
-        background: rgba(255, 255, 255, 0.05);
+        background: rgba(35, 35, 35, 0.8);
     }
 
     &.animate {
@@ -26,12 +26,36 @@
     }
 
     &.active {
+        .base-bg {
+            background: rgba(0, 0, 0, 0.6);
+            position: absolute;
+            top: 6px;
+            left: 3px;
+            right: 3px;
+            bottom: 6px;
+        }
+
         .tab-inner {
-            background: radial-gradient(
-                133.33% 73.57% at 50% 100%,
-                rgba(118, 255, 53, 0.3) 0%,
-                rgba(255, 255, 255, 0.1) 100%
+            background: radial-gradient(ellipse at top, rgba(118, 255, 53, 0.1) 0%, transparent 120%),
+                radial-gradient(ellipse at bottom, rgba(117, 255, 53, 0.135) 0%, transparent 90%);
+        }
+
+        .mask {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(
+                to bottom,
+                rgb(57, 56, 56) 25%,
+                rgba(255, 255, 255, 0.201) 90%,
+                rgba(255, 255, 255, 0.215) 100%
             );
+            opacity: 0.95;
+            border-radius: 5px;
+            z-index: 2;
+            pointer-events: none;
         }
     }
 
@@ -43,88 +67,37 @@
         user-select: none;
         z-index: 3;
         font-size: 11px;
-        font-style: normal;
         font-weight: 500;
 
         &.focused {
             outline: none;
-            border: 1px solid var(--border-color);
+            border: 1px solid rgba(255, 255, 255, 0.179);
             padding: 2px 6px;
             border-radius: 2px;
         }
     }
 
-    .vertical-line {
-        display: inline;
-        width: 1px;
-        height: 50%;
-        position: absolute;
-        right: -1px;
-        top: 50%;
-        z-index: 1;
-        transform: translateY(-50%);
-        background-color: var(--border-color);
-    }
-
-    .vertical-line.first {
-        left: 0;
-    }
-
     .close {
         visibility: hidden;
         position: absolute;
+        top: 50%;
+        right: 0px;
+        transform: translateY(-50%);
         width: 20px;
         height: 20px;
-        padding: 0;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
-        top: 50%;
-        z-index: 3;
-        transform: translateY(-50%);
-        right: 5px;
         opacity: 0.5;
+        z-index: 3;
 
         &:hover {
             opacity: 1;
-            cursor: pointer;
-        }
-
-        i {
-            color: var(--secondary-text-color);
         }
     }
 
     &.active:hover .close {
         visibility: visible;
     }
-
-    &.active {
-        .vertical-line {
-            visibility: hidden;
-        }
-    }
-
-    // &.active {
-    //     .mask {
-    //         position: absolute;
-    //         height: 100%;
-    //         width: 100%;
-    //         top: 0;
-    //         left: 0;
-    //         z-index: 2;
-    //         background-image: linear-gradient(
-    //             to top,
-    //             rgba(0, 0, 0, 0.9) 20%,
-    //             rgba(0, 0, 0, 0.8) 60%,
-    //             rgba(0, 0, 0, 0.7) 100%
-    //         );
-    //         pointer-events: none;
-    //     }
-    // }
-
-    &.isDragging:not(.active) {
-        // background-color: rgba(0, 8, 3, 1);
-    }
 }
diff --git a/frontend/app/tab/tab.tsx b/frontend/app/tab/tab.tsx
index 9384d1c22..2224b3756 100644
--- a/frontend/app/tab/tab.tsx
+++ b/frontend/app/tab/tab.tsx
@@ -127,23 +127,7 @@ const Tab = React.memo(
                     onContextMenu={handleContextMenu}
                     data-tab-id={id}
                 >
-                    {/* {isFirst && <div className="vertical-line first" />}
-                    <div
-                        ref={editableRef}
-                        className={clsx("name", { focused: isEditable })}
-                        contentEditable={isEditable}
-                        onDoubleClick={handleDoubleClick}
-                        onBlur={handleBlur}
-                        onKeyDown={handleKeyDown}
-                        suppressContentEditableWarning={true}
-                    >
-                        {tabData?.name}
-                    </div>
-                    {!isDragging && <div className="vertical-line" />}
-                    {active && <div className="mask" />}
-                    <Button className="secondary ghost close" onClick={onClose} onMouseDown={handleMouseDownOnClose}>
-                        <i className="fa fa-solid fa-xmark" />
-                    </Button> */}
+                    {active && <div className="base-bg" />}
                     <div className="tab-inner">
                         <div
                             ref={editableRef}
diff --git a/frontend/app/tab/tabbar.less b/frontend/app/tab/tabbar.less
index 1f40344c4..376244162 100644
--- a/frontend/app/tab/tabbar.less
+++ b/frontend/app/tab/tabbar.less
@@ -3,14 +3,14 @@
 
 .tab-bar-wrapper {
     position: relative;
-    border-bottom: 1px solid var(--border-color);
+    // border-bottom: 1px solid var(--border-color);
     user-select: none;
     display: flex;
 
     .tab-bar {
         position: relative; // Needed for absolute positioning of child tabs
         margin-left: 100px;
-        height: 38px;
+        height: 40px;
         // 36 is the width of add tab button
         // 100 is offset from the left, for macOS window controls and dragging
         // 50 right offset for dragging