style(popup-table): update Shared Links and Archived Chats design

- Revise the style of the popup table for shared links and archived chats for a consistent and improved look. - Enhance the hover state design for links and SVG elements. - Ensure a uniform design for archived chats and shared links. - Improve the design of the delete SVG button for general selection via `[aria-label^="Delete"]` - Change the text color of the thead > th from accent to normal text. - Fix text color issues when turning off "Chat history & training" // TODO - Fix style for 3dots menu in "SHARE LINK TO CHAT" popup ("Share your name", "Delete Link")
itsmartashub · Dec 15, 2023 · 4f827ef · 4f827ef
1 parent bec8478
commit 4f827ef
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 79 deletions.
diff --git a/extension/css/index.css b/extension/css/index.css
diff --git a/src/sass/abstract/_vars.scss b/src/sass/abstract/_vars.scss
@@ -127,13 +127,10 @@ html.light {
 
     --c-bg-pre: hsl(0, 0%, 0%);
     --c-bg-pre-header: transparent;
-    /* --c-bg-pre-header-btn: hsla(0 0% 100% / 0.102); */
-    // --c-bg-pre-header-btn: var(--c-surface-1);
     --c-bg-pre-header-btn: hsla(255, 100%, 100%, 0.1);
     --c-markdown-a: var(--c-accent);
 
     /* btn u biranju teme kad nemaa nikake pozadine */
-    // --surface-primary: blue !important;
     --surface-primary: var(--c-surface-1) !important;
 
     /* border oko context-menu */
@@ -142,16 +139,9 @@ html.light {
     /* selected button/link/list in settings: General, Data controls */
     --surface-tertiary: var(--c-bg-msg-gpt) !important;
 
-    --text-primary: var(--c-txt) !important;
-    /* --text-secondary: hsl(249 19% calc(var(--txt-hsl-l) + 7%)) !important; */
-    /* --text-tertiary: hsl(249 19% calc(var(--txt-hsl-l) + 13%)) !important; */
-
     --text-primary: var(--c-txt) !important;
 
-    /* txt ispod Upgrade, i txt ispod "Chat history & training" u settingsu i txt 3.5 u sticky pored ChatGPT 3.5 i kad je recimo focused sa tabom Dark u Themes i text kad se ode na Upgrade pa ono Have an existing plan? See billing help*/
-    // --text-secondary: hsl(0, 0%, 20%) !important;
-    // --text-secondary: hsl(var(--accent-h), calc(var(--accent-s) / 2), calc(var(--accent-l) / 1.5)) !important;
-    // --text-secondary: var(--c-accent-light) !important;
+    /* txt ispod Upgrade, i txt ispod "Chat history & training" u settingsu i txt 3.5 u sticky pored ChatGPT 3.5 i kad je recimo focused sa tabom Dark u Themes i text kad se ode na Upgrade pa ono Have an existing plan? See billing help */
     --text-secondary: var(--c-subtext-1) !important;
 
     /* strelica na dole pored 3.5 u sticky pored ChatGPT 3.5 i kad je nesto focused sa tabom - accessibility - npr Clear u clear all chats i text u contextmenu kad se klikne na ChatGPT 3.5 i text kad odemo u  UPgrade pa ono USD $0/month i USD $20/month */
@@ -275,5 +265,4 @@ html.dark {
 
     --box-shadow: 0px 0px 100px 0px hsla(var(--accent-hsl) / 0.1);
     --box-shadow-contextmenu: 0px 0px 30px -10px hsla(var(--accent-hsl) / 0.18);
-    // --box-shadow-contextmenu: 0px 0px 2px 1px hsla(var(--accent-hsl) / 0.2);
 }
diff --git a/src/sass/elements/_btn.scss b/src/sass/elements/_btn.scss
@@ -50,6 +50,8 @@ main [role="presentation"] button.absolute.rounded-full {
         min-width: var(--min-w);
     }
 
+    /* ".PopoverContent" je recimo btn u "Shared Link to Chat" 3dots menu (Shared your Name & Delete Link) */
+    // .btn-neutral:not(&:has(.PopoverContent)) {
     .btn-neutral:not(.PopoverContent) {
         background-color: var(--c-surface-3) !important;
         color: var(--c-txt) !important;

diff --git a/src/sass/elements/_modal.scss b/src/sass/elements/_modal.scss
@@ -93,45 +93,18 @@
         }
     }
 
-    /* MODAL - Dialog - Buttons where is dialog that containes textarea  */
-    // &:has(textarea) .btn-primary {
-    // padding: var(--py-btn) var(--px-btn) !important;
-    // border: 2px solid red !important;
-    // }
-
-    /* MODAL - Dialog - Share Chat White preview div  */
+    /* MODAL - Dialog - "Share Chat" White preview <div>  */
     &:has(main div[data-radix-aspect-ratio-wrapper]) .w-full.rounded-lg {
         border-radius: var(--border-radius-msg) !important;
         background-color: var(--c-bg-chats-container) !important;
     }
 
-    /*  MODAL - Shared links - TABLE THEAD BG  */
+    /* ___ MODAL - "SHARED LINKS" or "ARCHIVED CHATS" - Table  */
     table {
         padding: var(--p-contextmenu) !important;
         border-radius: var(--border-radius-contextmenu);
 
-        // Link in table shared links
-        a {
-            color: var(--c-accent) !important;
-        }
-
-
-        // Delete shared link svg color
-        button[aria-label="Delete shared link"] {
-            color: var(--c-btn-danger) !important;
-        }
-
-        // Svg icons delete or share link hover state
-        span[data-state]:has(svg) {
-            opacity: .7;
-
-            &:hover {
-                opacity: 1;
-                // transform: scale(1.1);
-            }
-        }
-
-        // BG of thead th in table 'Shared Links'
+        /* BG of thead>th */
         .bg-white,
         .bg-gray-900 {
             background-color: transparent !important;
@@ -151,8 +124,29 @@
 
             th {
                 text-transform: uppercase !important;
+                // color: var(--c-accent) !important;
+                color: var(--c-txt) !important;
+            }
+        }
+
+        tbody {
+
+            /* Link in table Shared Links/Archived Chats */
+            td:first-child a {
                 color: var(--c-accent) !important;
             }
+
+            /* Center the vertically svg icons next to each other in table */
+            td:has(button[aria-label^="Delete"]) span[data-state] {
+                display: flex;
+                align-items: center;
+                justify-items: center;
+            }
+        }
+
+        /* "Delete shared link" in Shared Links and "Delete conversation" in Archived Chats svg color */
+        button[aria-label^="Delete"] {
+            color: var(--c-btn-danger) !important;
         }
     }
 }
diff --git a/src/sass/elements/_transitions.scss b/src/sass/elements/_transitions.scss
@@ -8,11 +8,30 @@ svg,
     transition: all .35s ease-in-out;
 }
 
-/* ___ SVG icon which are not in Theme choosing, or in active tab, in .btn, in send message btn, btns in message bubble footer ([class*="[.final-completion]"]) */
-button:not(.btn, [role="tab"], [role="combobox"], [data-testid="send-button"], [class*="[.final-completion]"]),
-td:not(:has(a[href^="/share/"])) {
-
-    /* svg {
+/* ___ BUTTON SVG icon which ARE NOT in:
+    - in .btn <button>
+    - Theme choosing <button>
+    - in active tab <button>
+    - in send message btn <button>
+    - btns in message bubble footer <button> ([class*="[.final-completion]"]) 
+------------------------------
+    - .btn  |  Button
+    - [role="tab"]  |  Active tab
+    - [role="combobox"]  |  Theme choosing
+    - [data-testid="send-button"]  |  Send Message Button
+    - [class*="[.final-completion]"]  |  Btns in Message bubble footer
+    - [aria-label^="Delete"])  | "Delete" icon in "Shared links" and "Archived Chats" 
+    - [aria-label="Unarchive conversation"])  | "Unarchive" icon in "Archived Chats"
+   */
+button:not(.btn,
+    [role="tab"],
+    [role="combobox"],
+    [data-testid="send-button"],
+    [class*="[.final-completion]"],
+    [aria-label^="Delete"],
+    [aria-label="Unarchive conversation"]) {
+
+    /*     svg {
         border: 1px solid red !important;
     } */
 
@@ -147,8 +166,35 @@ main [role="presentation"] button.absolute.rounded-full {
     }
 }
 
-/* ___ Table shared links */
-[role="dialog"] table a:hover {
-    translate: 5px 0;
-    text-decoration: underline;
+/* ___ Table "Archived Chats" or "Shared Links" */
+[role="dialog"] table {
+
+    tbody {
+
+        /* NAME - first column Links
+        "Shared links" & "Archived Chats" links in table, but a[href^="/c/"] is also Conversation SVG in "Shared Links", ahh */
+        td:first-child a:hover {
+            color: var(--c-accent) !important;
+
+            svg {
+                scale: .9 !important;
+                translate: -5px 0;
+            }
+
+            translate: 5px 0;
+            text-decoration: underline;
+        }
+
+        /* Table column that contains "Delete" svg icon */
+        td:has(button[aria-label^="Delete"]) {
+
+            /* SVG parent wrapper */
+            span[data-state]:hover {
+                svg {
+                    translate: 0 -2px !important;
+                    scale: 1 !important;
+                }
+            }
+        }
+    }
 }
diff --git a/src/sass/global/_base.scss b/src/sass/global/_base.scss
@@ -31,12 +31,17 @@ textarea::placeholder {
 
 /* .text-gizmo-gray-500 is the footer txt in dialog "YOU'RE INVITED TO PLUS" */
 .text-gizmo-gray-500,
-.text-gray-500 {
+// .text-gray-500,
+.text-gray-100 {
     color: var(--c-subtext-1) !important;
 }
 
-/* Is this conversation helpful so far? 👍👎 */
-.text-gray-400 {
+/* 
+ - Is this conversation helpful so far? 👍👎
+ - tg500 je recimo btn svg u "Archived/Shared Links" popup
+*/
+.text-gray-400,
+.text-gray-500 {
     color: var(--c-subtext-2) !important;
     // color: red !important;
 }