From 042b13c0feee10ac6adc77389798a895a1987770 Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Wed, 11 Dec 2024 14:32:18 +0100 Subject: [PATCH 01/44] feat(canvas/prompt-field): Add styling to `Use a Tool` button to match the theme (#86) - Added styling to the "Use a Tool" button introduced by the new Canvas update in the ChatGPT website - Ensured the button matches the visual theme and design of the prompt field Changes summary: - Added styling to the "Use a Tool" button to ensure it matches the visual theme of the prompt field. --- src/sass/elements/_right--textarea.scss | 30 ++++++++++++++++--------- 1 file changed, 20 insertions(+), 10 deletions(-) diff --git a/src/sass/elements/_right--textarea.scss b/src/sass/elements/_right--textarea.scss index 6b736a60..fd318c66 100644 --- a/src/sass/elements/_right--textarea.scss +++ b/src/sass/elements/_right--textarea.scss @@ -79,20 +79,30 @@ main form { } } - div:has(> input[type='file']) { + /* "Attach files" and "Use a tool" buttons, and all others that have that class */ + span > button.h-8.rounded-lg[aria-label]:has(svg) { + background-color: hsla(var(--accent-hsl) / 0.15) !important; - /* πŸ“Ž "Attach files" svg */ - button:has(> svg) { - background-color: hsla(var(--accent-hsl) / 0.15) !important; - - // margin-bottom: calc(var(--p-prompt-textarea) / 2); - - svg { - color: var(--c-accent) !important; - } + svg { + color: var(--c-accent) !important; } } + + // div:has(> input[type='file']) { + + // /* πŸ“Ž "Attach files" svg */ + // button:has(> svg) { + // background-color: hsla(var(--accent-hsl) / 0.15) !important; + + // // margin-bottom: calc(var(--p-prompt-textarea) / 2); + + // svg { + // color: var(--c-accent) !important; + // } + // } + // } + /* πŸ–ΌοΈ "Attach Files" - attached image wrapper */ div[type='button'][aria-haspopup='dialog'] { From 330c348b47ddc175da72387f4d8a6d8bb52d119c Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Wed, 11 Dec 2024 14:51:58 +0100 Subject: [PATCH 02/44] feat(canvas/prompt-field): Add styling to `Open in canvas` button (#86) - Added styling to the "Open in canvas" button introduced by the new Canvas update in the ChatGPT website - Ensured the button matches the visual theme and design of the prompt field Changes summary: - Added styling to the "Open in canvas" button to ensure it matches the visual theme of the prompt field. --- src/sass/elements/_right--textarea.scss | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/sass/elements/_right--textarea.scss b/src/sass/elements/_right--textarea.scss index fd318c66..ae88ab45 100644 --- a/src/sass/elements/_right--textarea.scss +++ b/src/sass/elements/_right--textarea.scss @@ -79,13 +79,21 @@ main form { } } - /* "Attach files" and "Use a tool" buttons, and all others that have that class */ + /* "Attach files", "Use a tool", "Open in canvas" buttons, and all others that have that class */ span > button.h-8.rounded-lg[aria-label]:has(svg) { - background-color: hsla(var(--accent-hsl) / 0.15) !important; + background-color: transparent; svg { color: var(--c-accent) !important; } + + &:hover { + background-color: hsla(var(--accent-hsl) / 0.13) !important; + } + } + + span > button[aria-label="Open in canvas"]:has(svg) { + background-color: hsla(var(--accent-hsl) / 0.13) !important; } From b34e153fcaa7a42bb4e54681372f431c15471941 Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Wed, 11 Dec 2024 17:26:28 +0100 Subject: [PATCH 03/44] feat(canvas/cm-editor): Enhance theme integration and hover effects (#86) - Add backgrounds and styles to `cm-editor` to match themes - Style `cm-activeLineGutter` to match the current theme - Add border on hover to `cm-editor` Changes summary: - Enhanced codeMirror editor (cm-editor) to integrate with themes, improving visual consistency. - Styled `cm-activeLineGutter` to match the current theme for better readability. - Added a border on hover to `cm-editor` for better interactivity. --- src/sass/abstract/_vars.scss | 8 ++++ src/sass/elements/_canvas.scss | 57 +++++++++++++++++++++++ src/sass/elements/_menu.scss | 2 + src/sass/gpthemes/_gpth-floating-btn.scss | 1 - src/sass/index.scss | 1 + 5 files changed, 68 insertions(+), 1 deletion(-) create mode 100644 src/sass/elements/_canvas.scss diff --git a/src/sass/abstract/_vars.scss b/src/sass/abstract/_vars.scss index 5dc14189..c4d1bacd 100644 --- a/src/sass/abstract/_vars.scss +++ b/src/sass/abstract/_vars.scss @@ -245,6 +245,10 @@ html.light { --c-bg-pre-header-btn-color: var(--c-txt); --c-markdown-a: var(--c-accent); + /* ========== CodeMirror Editor ========== */ + --c-bg-cm: var(--c-surface-1); + + /* ? ========== Scrollbar colors ========== */ --c-scrollbar-thumb: var(--c-surface-3); --c-scrollbar-track: transparent; @@ -381,6 +385,10 @@ html.dark { --c-bg-pre-header-btn-color: var(--c-on-accent); --c-markdown-a: var(--c-accent); + /* ========== CodeMirror Editor ========== */ + // --c-bg-cm: var(--c-bg-pre); // surface-1 + --c-bg-cm: var(--c-surface-1); // surface-1 + /* ? ========== Scrollbar colors ========== */ --c-scrollbar-thumb: var(--c-surface-3); --c-scrollbar-track: transparent; diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss new file mode 100644 index 00000000..84b9dab6 --- /dev/null +++ b/src/sass/elements/_canvas.scss @@ -0,0 +1,57 @@ +/* ______ Canvas in chat bubble */ +.agent-turn:has([id^="textdoc-message"]) { + // --c-bg-pre: var(--c-surface-1); + // --c-bg-pre: var(--c-surface-2); + + .popover { + --main-surface-primary: var(--c-bg-cm) !important; + } + + [id^="textdoc-message"] { + will-change: border-color; + border: 2px solid hsla(var(--accent-hsl) / .12) !important; + transition: border-color .2s; + + /* Gradient on the bottom of code */ + .absolute.bottom-0.z-20.h-24.w-full.transition-colors { + background: linear-gradient(rgba(0, 0, 0, 0), var(--c-bg-cm)) !important; + } + + &:hover { + border-color: hsla(var(--accent-hsl) / .3) !important; + } + } + + /* Chat bubble - "Typing" btn when canvas creating */ + [role="button"].absolute.bottom-3:has(>.loading-shimmer-pure-text) { + // --main-surface-primary: red !important; + } +} + +/* ______ CM CodeMirror EDITOR */ +.cm-editor { + + &, + .cm-gutters { + background-color: var(--c-bg-cm) !important; + } + + .cm-activeLineGutter { + background-color: hsla(var(--accent-hsl) / .2) !important; + color: var(--c-accent) !important; + } +} + +/* Canvas with cm-editor showed on the left (when open canvas) */ +.absolute.z-20.h-full.transition-shadow.overflow-hidden.left-0:has(.cm-editor) { + + /* Has to add for the bg of canvas (visible gap or when drag the separator) */ + section.popover.h-full.w-full { + background-color: var(--c-bg-cm) !important; + + /* Header of canvas with title, coppy btn */ + header[class*="@container"] { + background-color: var(--c-bg-cm); + } + } +} \ No newline at end of file diff --git a/src/sass/elements/_menu.scss b/src/sass/elements/_menu.scss index 5a06b9c5..9898b3ea 100644 --- a/src/sass/elements/_menu.scss +++ b/src/sass/elements/_menu.scss @@ -102,6 +102,8 @@ --main-surface-primary: var(--c-surface-2) !important; --main-surface-secondary: var(--c-surface-2) !important; --main-surface-tertiary: var(--c-surface-3) !important; + --sidebar-surface-primary: var(--c-surface-2) !important; + // --main-surface-primary: var(--white) !important; // --main-surface-secondary: var(--gray-100) !important; // --main-surface-tertiary: var(--gray-200) !important; diff --git a/src/sass/gpthemes/_gpth-floating-btn.scss b/src/sass/gpthemes/_gpth-floating-btn.scss index c1652fc8..acc16285 100644 --- a/src/sass/gpthemes/_gpth-floating-btn.scss +++ b/src/sass/gpthemes/_gpth-floating-btn.scss @@ -8,7 +8,6 @@ position: fixed; top: var(--top); right: var(--right); - // z-index: 1; transform: scale(var(--floating-scale)) rotate(var(--floating-rotate)); transition: transform 0.8s $easeInOutCirc; diff --git a/src/sass/index.scss b/src/sass/index.scss index 8af43126..e322c2cc 100644 --- a/src/sass/index.scss +++ b/src/sass/index.scss @@ -36,6 +36,7 @@ @import 'elements/_modal'; @import 'elements/_dialogs'; @import 'elements/_right--main'; +@import 'elements/_canvas'; @import 'elements/_right--new-chat'; @import 'elements/_right--sticky'; @import 'elements/_right--textarea'; From 25cb24335b9f16a8c5db64b339482ffe9acbf94b Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Wed, 11 Dec 2024 19:48:45 +0100 Subject: [PATCH 04/44] fix(canvas/cm-editor): Background not aplied for `section` and `header` on screens <= `1000px` width (#86) - Fix background application for section and header elements on screens <= 1000px width - Ensure `cm-editor` remains full-width on smaller screens Changes summary: - Resolved an issue where section and header backgrounds were not applied when the screen width was 1000px or less, and the codeMirror editor (cm-editor) was set to full-width. --- src/sass/elements/_canvas.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index 84b9dab6..f47ddb1f 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -42,8 +42,10 @@ } } -/* Canvas with cm-editor showed on the left (when open canvas) */ -.absolute.z-20.h-full.transition-shadow.overflow-hidden.left-0:has(.cm-editor) { +/* Canvas with cm-editor showed on the left (when open canvas) +- .fixed.inset-0.z-40.overflow-hidden:has(section.popover main #codemirror) is for smaller screens (width <= 1000px) */ +.absolute.left-0.z-20.h-full.transition-shadow.left-0.overflow-hidden:has(section.popover main #codemirror), +.fixed.inset-0.z-40.overflow-hidden:has(section.popover main #codemirror) { /* Has to add for the bg of canvas (visible gap or when drag the separator) */ section.popover.h-full.w-full { From e476ed6c39dd4800bfcf6d0cc7abfcb0fbea0f4c Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Wed, 11 Dec 2024 20:24:33 +0100 Subject: [PATCH 05/44] feat(canvas/prosemirror): Extend canvas background support (#86) - Add background to canvas when there is text content (ProseMirror) - Ensure consistent background styling for both code and text content Changes summary: - Extended canvas background support to include text content created with ProseMirror, ensuring a consistent look and feel for both code and text. --- src/sass/elements/_canvas.scss | 30 ++++++++++++++++++++---------- 1 file changed, 20 insertions(+), 10 deletions(-) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index f47ddb1f..03531931 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -42,18 +42,28 @@ } } -/* Canvas with cm-editor showed on the left (when open canvas) -- .fixed.inset-0.z-40.overflow-hidden:has(section.popover main #codemirror) is for smaller screens (width <= 1000px) */ -.absolute.left-0.z-20.h-full.transition-shadow.left-0.overflow-hidden:has(section.popover main #codemirror), -.fixed.inset-0.z-40.overflow-hidden:has(section.popover main #codemirror) { +/* Canvas with CodeMirror (for code) and ProseMirror (for text) showed on the left (when open canvas) +- .fixed.inset-0.z-40.overflow-hidden is for smaller screens (width <= 1000px) */ +.absolute.left-0.z-20.h-full.overflow-hidden, +.fixed.inset-0.z-40.overflow-hidden { - /* Has to add for the bg of canvas (visible gap or when drag the separator) */ - section.popover.h-full.w-full { - background-color: var(--c-bg-cm) !important; + &:has(section.popover main #codemirror, section.popover main #prosemirror-editor-container) { + + /* + - Edit Canvas floating action button warapper on the bottom right + - "Ask GPT" floating wrapper */ + // .bg-token-main-surface-primary { + // background-color: red !important; + // } + + /* Has to add for the bg of canvas (visible gap or when drag the separator) */ + section.popover.h-full.w-full { + background-color: var(--c-bg-cm) !important; - /* Header of canvas with title, coppy btn */ - header[class*="@container"] { - background-color: var(--c-bg-cm); + /* Header of canvas with title, coppy btn */ + header[class*="@container"] { + background-color: var(--c-bg-cm); + } } } } \ No newline at end of file From ee4347e309ed0519744f155ea4740abdbae12b6a Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Wed, 11 Dec 2024 22:00:20 +0100 Subject: [PATCH 06/44] feat(canvas/floating-edit-btns): Add transparent accent bg and backdrop-blur (#88, #86) - Add transparent accent background to floating edit buttons to match the theme - Apply backdrop-blur effect to improve visual clarity Changes summary: - Added transparent accent background and backdrop-blur to floating edit buttons for better theme integration and visual clarity. --- src/sass/elements/_canvas.scss | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index 03531931..0fee4b34 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -65,5 +65,23 @@ background-color: var(--c-bg-cm); } } + + + /* Canvas Edit floating button on bottom right */ + main .absolute[class*="z-[70]"].overflow-visible.border.border-token-border-light.transition-colors { + + /* Wrapper */ + &.bg-token-main-surface-primary { + background-color: hsla(var(--accent-hsl) / .2) !important; + color: var(--c-accent) !important; + backdrop-filter: blur(10px); + + .bg-gray-300 { + background-color: var(--c-accent) !important; + } + } + + + } } } \ No newline at end of file From 21d6ad1075479b27d61a036d7ba1f09d48e2c688 Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Wed, 11 Dec 2024 22:07:44 +0100 Subject: [PATCH 07/44] feat(canvas/floating-edit-btns): add transparent accent bg and accent color to draggable sliders (#88, #86) - Add transparent accent background to draggable sliders in ProseMirror (text canvas) - Use accent color for "Adjust the length" and "Reading level" slider buttons Changes summary: - Added transparent accent background and accent color to draggable sliders for "Adjust the length" and "Reading level" in ProseMirror (text canvas) for improved visual integration. --- src/sass/elements/_canvas.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index 0fee4b34..6765b8fe 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -81,7 +81,12 @@ } } - + /* Action drag buttons like Y-sliders*/ + /* Draggable slider btn like: "Adjust the length" and "Reading level" in ProseMirror (text canvas) */ + .cursor-grab.rounded-full.bg-token-main-surface-primary[draggable] { + background-color: hsla(var(--accent-hsl) / .2); + color: var(--c-accent) !important; + } } } } \ No newline at end of file From 835d41b46eab81f8b088becf9b5a5e59c3853f9b Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Wed, 11 Dec 2024 22:42:45 +0100 Subject: [PATCH 08/44] feat(canvas/floating-edit-btns): add accent bg and on-accent color for submit change buttons (#88, #86) - Add accent background color to submit change buttons - Use on-accent color for text on submit change buttons, including main buttons like "Code review" and "Suggest edits" Changes summary: - Added accent background and on-accent text color to submit change buttons, including main buttons like "Code review" and "Suggest edits" for better visual consistency. --- src/sass/elements/_canvas.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index 6765b8fe..e81fa7e5 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -87,6 +87,17 @@ background-color: hsla(var(--accent-hsl) / .2); color: var(--c-accent) !important; } + + /* SUBMIT CHANGE BUTTONS IN GENERAL */ + /* Submit btn for draggable slider btn */ + .rounded-full.bg-black[draggable], + // .rounded-full.bg-black.h-8.w-8, + // .rounded-full.bg-black.h-6.w-6, + /* Submit on main button "Suggest edits" in Text Canvas or "Code review" in Code Canvas */ + .rounded-full.bg-black:has(>svg) { + background-color: var(--c-accent) !important; + color: var(--c-on-accent) !important; + } } } } \ No newline at end of file From 52f607c33fc604b30bb35ee967e3170271900362 Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Wed, 11 Dec 2024 22:45:32 +0100 Subject: [PATCH 09/44] feat(canvas/floating-edit-btns): improve `Port to a language` list btns with hover and active state styles (#88, #86) - Add hover and active state styles to `Port to a language` list buttons in Code Canvas Changes summary: - Improved `Port to a language` list buttons in Code Canvas by adding hover and active state styles for better user interaction. --- src/sass/elements/_canvas.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index e81fa7e5..02f9a7b5 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -98,6 +98,11 @@ background-color: var(--c-accent) !important; color: var(--c-on-accent) !important; } + + /* "Port to a language" list */ + .content-center.overflow-x-hidden [class*="hover:bg-gray-100/"] { + background-color: hsla(var(--accent-hsl) / .2) !important; + } } } } \ No newline at end of file From 08cab6d52a45f087b552af6cee170f1f6dff0672 Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Wed, 11 Dec 2024 23:20:30 +0100 Subject: [PATCH 10/44] fix(canvas/floating-edit-btns): correct floating bg when slider state is entered (#88, #86) - Ensure the background color of the floating edit buttons not matches the main floating state when the slider state is active - Main state has: ".bg-token-main-surface-primary", slider state has: ".bg-token-main-surface-secondary" Changes summary: - Fixed the background color of floating edit buttons to not match the main floating state when the slider state is active. --- src/sass/elements/_canvas.scss | 27 ++++++++++++++++++++------- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index 02f9a7b5..1c2325e8 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -28,7 +28,7 @@ } } -/* ______ CM CodeMirror EDITOR */ +/* ______ CODE CANVAS: CM CodeMirror EDITOR */ .cm-editor { &, @@ -71,21 +71,34 @@ main .absolute[class*="z-[70]"].overflow-visible.border.border-token-border-light.transition-colors { /* Wrapper */ - &.bg-token-main-surface-primary { - background-color: hsla(var(--accent-hsl) / .2) !important; + &.bg-token-main-surface-primary, + /* .bg-token-main-surface-secondary is for another step, for sliders floating wrappers */ + &.bg-token-main-surface-secondary { color: var(--c-accent) !important; - backdrop-filter: blur(10px); .bg-gray-300 { background-color: var(--c-accent) !important; } } - /* Action drag buttons like Y-sliders*/ - /* Draggable slider btn like: "Adjust the length" and "Reading level" in ProseMirror (text canvas) */ + &.bg-token-main-surface-primary { + background-color: hsla(var(--accent-hsl) / .2) !important; + backdrop-filter: blur(10px); + } + + &.bg-token-main-surface-secondary { + background-color: var(--c-accent-light); + // background-color: var(--c-surface-2) !important; + // box-shadow: 0 0 5px 2px hsla(var(--accent-hsl) / .2) inset !important; + } + + /* Draggable Y-slider btn like: "Adjust the length" and "Reading level" in ProseMirror (text canvas) */ .cursor-grab.rounded-full.bg-token-main-surface-primary[draggable] { - background-color: hsla(var(--accent-hsl) / .2); + background-color: hsla(var(--accent-hsl) / .35) !important; color: var(--c-accent) !important; + // background-color: hsla(var(--accent-hsl) / .3); + // box-shadow: 0 0 0px 2px hsla(var(--accent-hsl) / .3) !important; + // color: var(--c-on-accent) !important; } /* SUBMIT CHANGE BUTTONS IN GENERAL */ From bda550e5d7c7742018dd52c17f4d182181ee74bd Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Wed, 11 Dec 2024 23:46:18 +0100 Subject: [PATCH 11/44] feat(canvas/floating-edit-btns): improve Y-slider btn with ring around (#88, #86) - Add box-shadow to Y-slider buttons to enhance their appearance and make them look more like slider buttons Changes summary: - Improved the appearance of Y-slider buttons by adding a ring around, making them look more like slider buttons. --- src/sass/elements/_canvas.scss | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index 1c2325e8..08b124eb 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -68,7 +68,8 @@ /* Canvas Edit floating button on bottom right */ - main .absolute[class*="z-[70]"].overflow-visible.border.border-token-border-light.transition-colors { + // main .absolute[class*="z-[70]"].overflow-visible.border.border-token-border-light.transition-colors { + .absolute[class*="z-[70]"].overflow-visible.border.border-token-border-light.transition-colors { /* Wrapper */ &.bg-token-main-surface-primary, @@ -81,24 +82,28 @@ } } + /* Main state floating bg */ &.bg-token-main-surface-primary { background-color: hsla(var(--accent-hsl) / .2) !important; backdrop-filter: blur(10px); } - &.bg-token-main-surface-secondary { - background-color: var(--c-accent-light); - // background-color: var(--c-surface-2) !important; - // box-shadow: 0 0 5px 2px hsla(var(--accent-hsl) / .2) inset !important; - } + /* Slider state floating bg: when go into "Adjust the length" and "Reading level" */ + // &.bg-token-main-surface-secondary { + // background-color: var(--c-accent-light); + // // background-color: var(--c-surface-2) !important; + // // box-shadow: 0 0 5px 2px hsla(var(--accent-hsl) / .2) inset !important; + // } /* Draggable Y-slider btn like: "Adjust the length" and "Reading level" in ProseMirror (text canvas) */ .cursor-grab.rounded-full.bg-token-main-surface-primary[draggable] { - background-color: hsla(var(--accent-hsl) / .35) !important; + // background-color: hsla(var(--accent-hsl) / .35) !important; + background-color: var(--c-accent-light) !important; color: var(--c-accent) !important; - // background-color: hsla(var(--accent-hsl) / .3); - // box-shadow: 0 0 0px 2px hsla(var(--accent-hsl) / .3) !important; - // color: var(--c-on-accent) !important; + // box-shadow: 0 0 20px 10px hsla(var(--accent-hsl) / .4) inset !important; + // box-shadow: 0 0 2px 5px hsla(var(--accent-hsl) / .5) !important; + box-shadow: 0 0 0 0.65rem hsla(var(--accent-hsl) / 1) !important; + // outline: 7px solid hsla(var(--accent-hsl) / .5) !important; } /* SUBMIT CHANGE BUTTONS IN GENERAL */ From dcd2450c8f276f115188c97c60bff88dbbb90d0d Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Thu, 12 Dec 2024 00:19:46 +0100 Subject: [PATCH 12/44] feat(canvas/floating-edit-btns): improve Y-slider button, `Add emoji` and `Port to a language` list (#88, #86) - Add box-shadow to Y-slider buttons for better visual distinction - Enhance "Add emoji" and "Port to a language" list buttons for improved user experience Changes summary: - Improved the Y-slider button and "Add emoji" and "Port to a language" list buttons. --- src/sass/elements/_canvas.scss | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index 08b124eb..db9446ef 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -77,6 +77,7 @@ &.bg-token-main-surface-secondary { color: var(--c-accent) !important; + /* dots level in slider */ .bg-gray-300 { background-color: var(--c-accent) !important; } @@ -97,13 +98,7 @@ /* Draggable Y-slider btn like: "Adjust the length" and "Reading level" in ProseMirror (text canvas) */ .cursor-grab.rounded-full.bg-token-main-surface-primary[draggable] { - // background-color: hsla(var(--accent-hsl) / .35) !important; - background-color: var(--c-accent-light) !important; - color: var(--c-accent) !important; - // box-shadow: 0 0 20px 10px hsla(var(--accent-hsl) / .4) inset !important; - // box-shadow: 0 0 2px 5px hsla(var(--accent-hsl) / .5) !important; box-shadow: 0 0 0 0.65rem hsla(var(--accent-hsl) / 1) !important; - // outline: 7px solid hsla(var(--accent-hsl) / .5) !important; } /* SUBMIT CHANGE BUTTONS IN GENERAL */ @@ -117,10 +112,21 @@ color: var(--c-on-accent) !important; } - /* "Port to a language" list */ - .content-center.overflow-x-hidden [class*="hover:bg-gray-100/"] { - background-color: hsla(var(--accent-hsl) / .2) !important; + /* "Port to a language" and "Add emoji" list */ + .content-center.overflow-x-hidden { + [class*="dark:hover:bg-gray-700"] { + + &[class*="dark:bg-gray-700/50"], + &:hover { + background-color: hsla(var(--accent-hsl) / .2) !important; + } + } } } } -} \ No newline at end of file +} + + + +/* hover\:bg-gray-100\/75 .dark\:hover\:bg-gray-700 .bg-gray-100\/50 .dark\:bg-gray-700\/50 */ +// hover:bg-gray-100/75 .dark:hover:bg-gray-700 \ No newline at end of file From d244f1ac362b4d1659e048f2af108e7b741085bc Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Thu, 12 Dec 2024 00:34:55 +0100 Subject: [PATCH 13/44] feat(canvas/floating-edit-btns): add bg accent and on-accent color to floating pause btn (#88, #86) - Add background accent to floating pause button while processing submitted changes - use on-accent color for better visual distinction and user interaction Changes summary: - Added background accent and on-accent color to floating pause button while processing submitted changes for enhanced visual distinction and user interaction. --- src/sass/elements/_canvas.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index db9446ef..6ab4357a 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -83,6 +83,12 @@ } } + /* Pause primary floating btn while processing */ + &[class*="!bg-white !text-black"] { + background-color: var(--c-accent) !important; + color: var(--c-on-accent) !important; + } + /* Main state floating bg */ &.bg-token-main-surface-primary { background-color: hsla(var(--accent-hsl) / .2) !important; From 044f4aeb749a853ef67580d40fd10e3fed15815d Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Thu, 12 Dec 2024 13:38:59 +0100 Subject: [PATCH 14/44] fix(canvas/floating-edit-btns): fix pause button bg accent and color on-accent for light theme (#88, #86) --- src/sass/elements/_canvas.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index 6ab4357a..89b4101b 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -69,7 +69,7 @@ /* Canvas Edit floating button on bottom right */ // main .absolute[class*="z-[70]"].overflow-visible.border.border-token-border-light.transition-colors { - .absolute[class*="z-[70]"].overflow-visible.border.border-token-border-light.transition-colors { + .absolute.z-\[70\].overflow-visible.border.border-token-border-light.transition-colors { /* Wrapper */ &.bg-token-main-surface-primary, @@ -83,7 +83,8 @@ } } - /* Pause primary floating btn while processing */ + /* Pause primary floating btn while processing: !bg-black !text-white is for light themes, !bg-white, !text-black is for dark */ + &[class*="!bg-black !text-white"], &[class*="!bg-white !text-black"] { background-color: var(--c-accent) !important; color: var(--c-on-accent) !important; From 5bd2174b7e6f6cf4a0085fbe801ef35d500665ca Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Thu, 12 Dec 2024 14:54:11 +0100 Subject: [PATCH 15/44] feat(canvas/floating-toolbar): improve toolbar and `Ask a ChatGPT` buttons, add styles to `Edit or explain...` prompt field (#89, #86) - Improve toolbar and `Ask a ChatGPT` buttons with appropriate background styles - Add a different background to the `Edit or explain...` prompt field - Apply accent and on-accent styles to the submit button in the prompt field Changes summary: - Improved the toolbar and `Ask a ChatGPT` buttons with appropriate background styles, added a different background to the `Edit or explain...` prompt field, and applied accent and on-accent styles to the submit button for better visual consistency. --- src/sass/elements/_canvas.scss | 55 ++++++++++++++++++++++++++++++---- 1 file changed, 50 insertions(+), 5 deletions(-) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index 89b4101b..88d95b8d 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -49,6 +49,11 @@ &:has(section.popover main #codemirror, section.popover main #prosemirror-editor-container) { + .bg-black { + background-color: var(--c-accent) !important; + color: var(--c-on-accent) !important; + } + /* - Edit Canvas floating action button warapper on the bottom right - "Ask GPT" floating wrapper */ @@ -67,7 +72,7 @@ } - /* Canvas Edit floating button on bottom right */ + /* @@@@@@@@@ Canvas Edit floating button on bottom right */ // main .absolute[class*="z-[70]"].overflow-visible.border.border-token-border-light.transition-colors { .absolute.z-\[70\].overflow-visible.border.border-token-border-light.transition-colors { @@ -130,10 +135,50 @@ } } } - } -} + /* ___________ "Ask a ChatGPT" and "Edit or expain..." floating wrapper */ + main .absolute.z-50 { + + /* "Ask a ChatGPT" and toolbar wrapper */ + &:has(> .h-10[role="toolbar"]) { + .h-10[role="toolbar"] { + + &.bg-token-main-surface-primary { + --main-surface-primary: var(--c-surface-2) !important; + border: 1px solid hsla(var(--accent-hsl) / .14) !important; + // background-color: hsla(var(--accent-hsl) / .2) !important; + // background-color: var(--c-accent-light)!important; + + /* "Ask a ChatGPT" and toolbar buttons hover states */ + button[class*="hover:bg-[#f5f5f5]"]:hover { + background-color: var(--c-surface-3) !important; + // background-color: var(--c-accent) !important; + // color: var(--c-on-accent) !important; + } + + /* Toolbar buttons like: "Bold", "Italic", "Text style" */ + // button.bg-token-main-surface-secondary:has(svg) { + // // color: var(--c-accent) !important; + // } + } + } + } + + /* "Edit or explain" wrapper */ + .relative.bg-token-main-surface-primary:has(>textarea[aria-placeholder^="Edit or explain"]) { + background-color: hsla(var(--accent-hsl) / .1) !important; + + /* "Edit or explain" field overlay */ + .backdrop-saturate-25 { + background-color: hsla(var(--accent-hsl) / .1) !important; + } + } + } + } +} -/* hover\:bg-gray-100\/75 .dark\:hover\:bg-gray-700 .bg-gray-100\/50 .dark\:bg-gray-700\/50 */ -// hover:bg-gray-100/75 .dark:hover:bg-gray-700 \ No newline at end of file +/* +"Port to a language" classes: +.hover\:bg-gray-100\/75 .dark\:hover\:bg-gray-700 .bg-gray-100\/50 .dark\:bg-gray-700\/50 +.hover:bg-gray-100/75 .dark:hover:bg-gray-700 */ \ No newline at end of file From 44bf340f83e99777386caa124df2703c44c3aff8 Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Thu, 12 Dec 2024 16:13:04 +0100 Subject: [PATCH 16/44] fix(canvas/toolbar): adjust `Text style` dialog and button wrapper styles (#89, #86) - Decrease padding and radius for the "Text style" dialog: Heading 1, Heading 2, Heading 3 and Body buttons - Change background color of the text style buttons wrapper - Remove box-shadow of buttons wrapper Changes summary: - Adjusted the "Text style" dialog by decreasing spacing and radius, and changed the background color of the text style buttons wrapper for improved UI consistency. --- src/sass/elements/_canvas.scss | 39 ++++++++++++++++------------------ 1 file changed, 18 insertions(+), 21 deletions(-) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index 88d95b8d..74a8ed4d 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -48,19 +48,11 @@ .fixed.inset-0.z-40.overflow-hidden { &:has(section.popover main #codemirror, section.popover main #prosemirror-editor-container) { - .bg-black { background-color: var(--c-accent) !important; color: var(--c-on-accent) !important; } - /* - - Edit Canvas floating action button warapper on the bottom right - - "Ask GPT" floating wrapper */ - // .bg-token-main-surface-primary { - // background-color: red !important; - // } - /* Has to add for the bg of canvas (visible gap or when drag the separator) */ section.popover.h-full.w-full { background-color: var(--c-bg-cm) !important; @@ -71,9 +63,7 @@ } } - /* @@@@@@@@@ Canvas Edit floating button on bottom right */ - // main .absolute[class*="z-[70]"].overflow-visible.border.border-token-border-light.transition-colors { .absolute.z-\[70\].overflow-visible.border.border-token-border-light.transition-colors { /* Wrapper */ @@ -136,7 +126,6 @@ } } - /* ___________ "Ask a ChatGPT" and "Edit or expain..." floating wrapper */ main .absolute.z-50 { @@ -147,20 +136,11 @@ &.bg-token-main-surface-primary { --main-surface-primary: var(--c-surface-2) !important; border: 1px solid hsla(var(--accent-hsl) / .14) !important; - // background-color: hsla(var(--accent-hsl) / .2) !important; - // background-color: var(--c-accent-light)!important; /* "Ask a ChatGPT" and toolbar buttons hover states */ button[class*="hover:bg-[#f5f5f5]"]:hover { background-color: var(--c-surface-3) !important; - // background-color: var(--c-accent) !important; - // color: var(--c-on-accent) !important; } - - /* Toolbar buttons like: "Bold", "Italic", "Text style" */ - // button.bg-token-main-surface-secondary:has(svg) { - // // color: var(--c-accent) !important; - // } } } } @@ -181,4 +161,21 @@ /* "Port to a language" classes: .hover\:bg-gray-100\/75 .dark\:hover\:bg-gray-700 .bg-gray-100\/50 .dark\:bg-gray-700\/50 -.hover:bg-gray-100/75 .dark:hover:bg-gray-700 */ \ No newline at end of file +.hover:bg-gray-100/75 .dark:hover:bg-gray-700 */ + +[role="dialog"]:has(div.flex.flex-col.items-stretch.rounded-xl.bg-token-main-surface-primary.shadow-xl > button[class*="hover:bg-token-main-surface-secondary"] > .text-5xl.font-semibold) { + padding: calc(var(--p-dialog) * 0.3) !important; + border-radius: calc(var(--br-dialog) * 0.5) !important; + + /* Wrapper of the Heading 1, Heading 2, Heading 3 and Body buttons */ + & > div.rounded-xl.bg-token-main-surface-primary.shadow-xl { + box-shadow: none !important; + } + + /* "Text style" dialog of: Headings and body text style */ + button[class*="hover:bg-token-main-surface-secondary"] { + &:hover { + --main-surface-secondary: var(--c-surface-3) !important; + } + } +} \ No newline at end of file From 98d5677f02a9b2e2e7eb720f4a160ecc7166f94b Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Thu, 12 Dec 2024 16:35:02 +0100 Subject: [PATCH 17/44] feat(canvas/ask-gpt): add bg to main prompt field and style submit btn for `<= 1000px` screens (#89, #86) - Add background to the main prompt field in "Ask GPT to edit" - Style the submit button for screens with width less than 1000px when Canvas is full-width Changes summary: - Added background to the main prompt field and styled the submit button in the "Ask GPT to edit" prompt field for screens with a width less than 1000px when the Canvas is full-width. --- src/sass/elements/_canvas.scss | 61 ++++++++++++++++++++++++---------- 1 file changed, 43 insertions(+), 18 deletions(-) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index 74a8ed4d..070dfd05 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -126,38 +126,63 @@ } } - /* ___________ "Ask a ChatGPT" and "Edit or expain..." floating wrapper */ - main .absolute.z-50 { + main { - /* "Ask a ChatGPT" and toolbar wrapper */ - &:has(> .h-10[role="toolbar"]) { - .h-10[role="toolbar"] { + /* ___________ "Ask a ChatGPT" and "Edit or expain..." floating wrapper */ + .absolute.z-50 { - &.bg-token-main-surface-primary { - --main-surface-primary: var(--c-surface-2) !important; - border: 1px solid hsla(var(--accent-hsl) / .14) !important; + /* "Ask a ChatGPT" and toolbar wrapper */ + &:has(> .h-10[role="toolbar"]) { + .h-10[role="toolbar"] { - /* "Ask a ChatGPT" and toolbar buttons hover states */ - button[class*="hover:bg-[#f5f5f5]"]:hover { - background-color: var(--c-surface-3) !important; + &.bg-token-main-surface-primary { + --main-surface-primary: var(--c-surface-2) !important; + border: 1px solid hsla(var(--accent-hsl) / .14) !important; + + /* "Ask a ChatGPT" and toolbar buttons hover states */ + button[class*="hover:bg-[#f5f5f5]"]:hover { + background-color: var(--c-surface-3) !important; + } } } } - } - - /* "Edit or explain" wrapper */ - .relative.bg-token-main-surface-primary:has(>textarea[aria-placeholder^="Edit or explain"]) { - background-color: hsla(var(--accent-hsl) / .1) !important; - /* "Edit or explain" field overlay */ - .backdrop-saturate-25 { + /* "Edit or explain" wrapper */ + .relative.bg-token-main-surface-primary:has(>textarea[aria-placeholder^="Edit or explain"]) { background-color: hsla(var(--accent-hsl) / .1) !important; + + /* "Edit or explain" field overlay */ + .backdrop-saturate-25 { + background-color: hsla(var(--accent-hsl) / .1) !important; + } } } } } } +/* Width less then 1000px */ +.fixed.inset-0.z-40.overflow-hidden { + + /* "Ask a ChatGPT to edit" on full-width screen less then 1000px width */ + [class*="bg-[#f4f4f4]"]:has([placeholder="Ask ChatGPT to edit"]) { + background-color: var(--c-bg-textarea) !important; + + /* Submit btn */ + button.rounded-full.bg-token-main-surface-primary { + background-color: var(--c-accent) !important; + + svg { + color: var(--c-on-accent) !important; + } + + &:disabled { + background-color: hsla(var(--accent-hsl) / .12) !important; + } + } + } +} + /* "Port to a language" classes: .hover\:bg-gray-100\/75 .dark\:hover\:bg-gray-700 .bg-gray-100\/50 .dark\:bg-gray-700\/50 From 2fa79c0ac9893bd21b05ad0e47c4a237d69f8c06 Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Thu, 12 Dec 2024 16:44:56 +0100 Subject: [PATCH 18/44] feat(canvas/editor): add accent styles to `1 more edit...` (#89, #86) - Add accent styles to the `1 more edit...` floating buttons shown on the top when there's an unread edit on the top center. Changes summary: - Added accent styles to the `1 more edit...` floating buttons shown on the top when there's an unread edit on the top center for improved visual consistency. --- src/sass/elements/_canvas.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index 070dfd05..1034b2cd 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -157,6 +157,14 @@ } } } + + /* Floating balloons, like "1 more edit" */ + .bg-token-main-surface-primary.border-token-main-surface-tertiary[aria-label="Button to scroll the next edit into view"] { + --main-surface-primary: hsla(var(--accent-hsl) / .12) !important; + border-color: hsla(var(--accent-hsl) / .1) !important; + color: var(--c-accent) !important; + backdrop-filter: blur(10px); + } } } } @@ -188,6 +196,7 @@ .hover\:bg-gray-100\/75 .dark\:hover\:bg-gray-700 .bg-gray-100\/50 .dark\:bg-gray-700\/50 .hover:bg-gray-100/75 .dark:hover:bg-gray-700 */ +/* Select a "Text style" dialog: Heading 1 | Heading 2 | Heading 3 | Body radix dialog */ [role="dialog"]:has(div.flex.flex-col.items-stretch.rounded-xl.bg-token-main-surface-primary.shadow-xl > button[class*="hover:bg-token-main-surface-secondary"] > .text-5xl.font-semibold) { padding: calc(var(--p-dialog) * 0.3) !important; border-radius: calc(var(--br-dialog) * 0.5) !important; From 8fb59763ff428507483d4f2f6c3a92fd041cbaa2 Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Thu, 12 Dec 2024 17:21:21 +0100 Subject: [PATCH 19/44] feat(canvas/text-highlights): change blue highlight colors on hover and click for adding comments (#89, #86) - Change blue highlight to accentish when hovering over text elements to add a comment - Change highlight to pure accent when clicking to add a comment, bringing the "Edit or explain..." field into view Changes summary: - Changed the highlight color to accentish on hover and to pure accent on click for adding comments in the text canvas, improving visual feedback. --- src/sass/elements/_canvas.scss | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index 1034b2cd..e902b38f 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -53,8 +53,13 @@ color: var(--c-on-accent) !important; } - /* Has to add for the bg of canvas (visible gap or when drag the separator) */ + /* TODO: Has to add for the bg of Canvas (visible gap or when drag the separator). Btw, when opening canvas, when there is skeleton waiting, the bg is not --c-bg-cm for this section.bg-token-main-surface-primary */ section.popover.h-full.w-full { + // &.bg-token-main-surface-primary { + // --main-surface-primary: var(--c-bg-cm) !important; + // // background-color: var(--c-bg-cm) !important; + // } + background-color: var(--c-bg-cm) !important; /* Header of canvas with title, coppy btn */ @@ -165,6 +170,21 @@ color: var(--c-accent) !important; backdrop-filter: blur(10px); } + + + /* Blue Highlight when hover text to add a comment in Text Canvas */ + [class*="dark:after:bg-[Highlight]"] { + &::after { + background-color: hsla(var(--accent-hsl) / .12) !important; + border: 1px solid hsla(var(--accent-hsl) / .12) !important; + } + } + + /* Selected text for commenting, when we click on comment icon in Text Canvas and "Edit or explain" prompt showed */ + .selection-highlight.bg-\[Highlight\] { + background-color: var(--c-accent) !important; + color: var(--c-on-accent) !important; + } } } } From 6bb5de7ee4b19afa1619af8efe24c3ff155285e8 Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Thu, 12 Dec 2024 17:55:44 +0100 Subject: [PATCH 20/44] feat(canvas/text-highlights): add accent color to `Add comment` SVG icon (#89, #86) - Add accent color to the "Add comment" SVG icon in the `[data-block-comment-launcher]` button Changes summary: - Added accent color to the "Add comment" SVG icon in the `[data-block-comment-launcher]` button for better visual consistency. --- src/sass/elements/_canvas.scss | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index e902b38f..f1e62cfb 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -175,8 +175,8 @@ /* Blue Highlight when hover text to add a comment in Text Canvas */ [class*="dark:after:bg-[Highlight]"] { &::after { - background-color: hsla(var(--accent-hsl) / .12) !important; - border: 1px solid hsla(var(--accent-hsl) / .12) !important; + background-color: hsla(var(--accent-hsl) / .15) !important; + border: 1px solid hsla(var(--accent-hsl) / .15) !important; } } @@ -185,6 +185,15 @@ background-color: var(--c-accent) !important; color: var(--c-on-accent) !important; } + + /* Comment section on the right of the text where add comment btn is */ + [data-block-comment-launcher] button { + .text-gray-400 { + svg { + color: var(--c-accent) !important; + } + } + } } } } From 7b2a5bff812825e51b41c2b4564736d1f11a54c2 Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Thu, 12 Dec 2024 19:40:34 +0100 Subject: [PATCH 21/44] feat(canvas/code-highlights): add selection highlight bg and text color for Code Canvas (#89, #86) - Add selection highlight background and text color for Code Canvas Changes summary: - Added selection highlight background and text color for Code Canvas to improve visual feedback and consistency. --- src/sass/elements/_canvas.scss | 34 +++++++++++++++++++++++++++++++++- 1 file changed, 33 insertions(+), 1 deletion(-) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index f1e62cfb..7486a43b 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -31,6 +31,24 @@ /* ______ CODE CANVAS: CM CodeMirror EDITOR */ .cm-editor { + // .ΝΌ1p.cm-focused .cm-selectionBackground, .ΝΌ1p .cm-line::selection, .ΝΌ1p .cm-selectionLayer .cm-selectionBackground, .ΝΌ1p .cm-content ::selection { + // background: #6199ff2f !important; + // } + .cm-content { + caret-color: var(--c-accent) !important; + + ::selection, + .cm-selectionLayer .cm-selectionBackground, + .cm-line span.cm-focused .cm-selectionBackground, + .cm-line > span::selection, + .cm-line::selection { + // background: var(--c-accent) !important; + // color: var(--c-on-accent) !important; + background: hsla(var(--accent-hsl) / .14) !important; + color: var(--c-accent) !important; + } + } + &, .cm-gutters { background-color: var(--c-bg-cm) !important; @@ -60,6 +78,7 @@ // // background-color: var(--c-bg-cm) !important; // } + background-color: var(--c-bg-cm) !important; /* Header of canvas with title, coppy btn */ @@ -181,7 +200,9 @@ } /* Selected text for commenting, when we click on comment icon in Text Canvas and "Edit or explain" prompt showed */ - .selection-highlight.bg-\[Highlight\] { + .selection-highlight.bg-\[Highlight\], + // blue highlight of current line when code rewwriting + .cm-editor .cm-line.\!bg-\[Highlight\] { background-color: var(--c-accent) !important; color: var(--c-on-accent) !important; } @@ -194,6 +215,17 @@ } } } + + .cm-editor { + + /* Code Canvas while code rewriting */ + .streaming-line-overlay { + .before\:bg-white\/50:before { + background-color: var(--c-bg-cm) !important; + opacity: 0.6; + } + } + } } } } From 00ec242627f822d3c0857abfae22c245624fd88c Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Thu, 12 Dec 2024 20:00:17 +0100 Subject: [PATCH 22/44] feat(canvas/code-highlights): update code text selection highlight when about to send `Edit or explain` prompt (#89, #88) - Update the `hc-blue` code text selection to accent color when about to send a prompt (when the "Edit or explain" floating prompt field is in view) - Change text color to `on-accent` when the "Edit or explain" floating prompt field is in view Changes summary: - Updated the code text selection highlight to accent color and text color to `on-accent` when the "Edit or explain" floating prompt field is in view for better visual feedback. --- src/sass/elements/_canvas.scss | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index 7486a43b..547d9878 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -202,11 +202,22 @@ /* Selected text for commenting, when we click on comment icon in Text Canvas and "Edit or explain" prompt showed */ .selection-highlight.bg-\[Highlight\], // blue highlight of current line when code rewwriting - .cm-editor .cm-line.\!bg-\[Highlight\] { + .cm-editor .cm-line.\!bg-\[Highlight\], + // blue highlight of current selected and about to prompt lines + .cm-editor .cm-line span.bg-\[Highlight\] { background-color: var(--c-accent) !important; color: var(--c-on-accent) !important; } + .cm-editor .cm-line span.bg-\[Highlight\] { + // background-color: var(--c-accent) !important; + + &, + span { + color: var(--c-on-accent) !important; + } + } + /* Comment section on the right of the text where add comment btn is */ [data-block-comment-launcher] button { .text-gray-400 { From d38cec6633228cde5ee02aef715a439785de4d35 Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Thu, 12 Dec 2024 22:35:53 +0100 Subject: [PATCH 23/44] feat(canvas/code-highlights): add accent color for curr processing line and update next processing lines bg and opacity (#89, #86) - Add accent color for the current processing line - Change the background of `.streaming-line-overlay::before` lines for next processing lines to better match the theme Changes summary: - Added accent color for the current processing line and updated the background of next processing lines to better match the theme for improved visual consistency. --- src/sass/elements/_canvas.scss | 25 +++++++++++++++++++------ src/sass/global/_colors-bgs.scss | 4 +++- 2 files changed, 22 insertions(+), 7 deletions(-) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index 547d9878..10447c0f 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -58,6 +58,12 @@ background-color: hsla(var(--accent-hsl) / .2) !important; color: var(--c-accent) !important; } + + .cm-line { + [class^="_modelCursor"]::after { + color: var(--c-accent); + } + } } /* Canvas with CodeMirror (for code) and ProseMirror (for text) showed on the left (when open canvas) @@ -201,15 +207,18 @@ /* Selected text for commenting, when we click on comment icon in Text Canvas and "Edit or explain" prompt showed */ .selection-highlight.bg-\[Highlight\], - // blue highlight of current line when code rewwriting + // Code Canvas: blue highlight of current line when code rewwriting .cm-editor .cm-line.\!bg-\[Highlight\], - // blue highlight of current selected and about to prompt lines + + // Code Canvas: blue highlight of current selected and about to prompt lines .cm-editor .cm-line span.bg-\[Highlight\] { background-color: var(--c-accent) !important; color: var(--c-on-accent) !important; } - .cm-editor .cm-line span.bg-\[Highlight\] { + .cm-editor .cm-line span.bg-\[Highlight\], + // Code Canvas: Hc-blue line of current processing line + .cm-editor .cm-line.\!bg-\[Highlight\] span { // background-color: var(--c-accent) !important; &, @@ -229,11 +238,15 @@ .cm-editor { - /* Code Canvas while code rewriting */ + /* Code Canvas of yet non-edited lines while code is rewriting ("Add logs", "Add comments") */ .streaming-line-overlay { - .before\:bg-white\/50:before { + &.before\:bg-white\/50:before { + background-color: var(--c-bg-cm) !important; + opacity: 0.85; + } + + &.\:bg-white\/50 { background-color: var(--c-bg-cm) !important; - opacity: 0.6; } } } diff --git a/src/sass/global/_colors-bgs.scss b/src/sass/global/_colors-bgs.scss index 6b33fb4f..fa9a715a 100644 --- a/src/sass/global/_colors-bgs.scss +++ b/src/sass/global/_colors-bgs.scss @@ -145,8 +145,10 @@ This content may violate our Terms of Use or usage policies. is bg-orange-400 no - Checkbox circle - GPTs Store PAGE - Search query section - GPTs Store PAGE - Search query section link-on-hover - CHANGE IT !! + +- .streaming-line-overlay are lines during the processing edit in Code Canvas (like add logs etc) */ -[class*='bg-white'], +[class*='bg-white']:not(.streaming-line-overlay), .bg-token-sidebar-surface-secondary { background-color: var(--c-surface-2) !important; // @include borderBoxShadow(red); From e42d14e32ceb819811e90113a1ab736aff6c0ee2 Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Thu, 12 Dec 2024 23:23:46 +0100 Subject: [PATCH 24/44] fix(canvas/code-highlights): ensure `
` tags are accentish highlighted on selection (#89, #86) - Ensure `
` tags are highlighted with the accent color when selected Changes summary: - Fixed the issue where `
` tags were not highlighted with the accent color on selection, ensuring consistent visual feedback. --- src/sass/elements/_canvas.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index 10447c0f..44516823 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -39,8 +39,8 @@ ::selection, .cm-selectionLayer .cm-selectionBackground, - .cm-line span.cm-focused .cm-selectionBackground, - .cm-line > span::selection, + // .cm-line span.cm-focused .cm-selectionBackground, + .cm-line > *::selection, .cm-line::selection { // background: var(--c-accent) !important; // color: var(--c-on-accent) !important; From b91faa32d39f4f0681d7f82cfc2107f09a4922e4 Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Thu, 12 Dec 2024 23:32:59 +0100 Subject: [PATCH 25/44] fix(canvas/text-highlights): correct processing gradients over previous texts (#89, #86) - Fix gradients over previous texts to ensure they look consistent and fit the theme for ProseMirror (Text Canvas) while processing the submited changes ("Add emoji", etc) Changes summary: - Corrected processing gradients over previous texts to ensure consistency and theme fit for ProseMirror (Text Canvas). --- src/sass/elements/_canvas.scss | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index 44516823..4194d23e 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -29,6 +29,7 @@ } /* ______ CODE CANVAS: CM CodeMirror EDITOR */ + .cm-editor { // .ΝΌ1p.cm-focused .cm-selectionBackground, .ΝΌ1p .cm-line::selection, .ΝΌ1p .cm-selectionLayer .cm-selectionBackground, .ΝΌ1p .cm-content ::selection { @@ -66,6 +67,18 @@ } } +/* ______ TEXT CANVAS: ProseMirror EDITOR */ +#prosemirror-editor-container { + + & > div.bg-token-main-surface-primary.ProseMirror { + --main-surface-primary: var(--c-bg-cm) !important; + } + + .from-token-main-surface-primary { + --main-surface-primary: var(--c-bg-cm) !important; + } +} + /* Canvas with CodeMirror (for code) and ProseMirror (for text) showed on the left (when open canvas) - .fixed.inset-0.z-40.overflow-hidden is for smaller screens (width <= 1000px) */ .absolute.left-0.z-20.h-full.overflow-hidden, From e9c56000426175efd06d35c1e0935184e71b3319 Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Fri, 13 Dec 2024 16:41:25 +0100 Subject: [PATCH 26/44] feat(canvas/console): enhance console UI elements (#91, #86) - Change console background to match the canvas background - Improve error background for better visibility - Colorize "Clear console" and "Cancel" icons in the console header to accent color - Enhance "Run" sticky header on hover - Change resizing line background to an accent color - Update --border-xlight border color to accentish Changes summary: - Updated the console background to match the canvas background for a cohesive look. - Improved the error background for better visibility and readability. - Colorized the "Clear console" and "Cancel" icons in the console header to the accent color. - Enhanced the "Run" sticky header with a hover effect for better user interaction. - Changed the resizing line background to an accent color for a more consistent design. --- src/sass/elements/_canvas.scss | 126 +++++++++++++++++--------- src/sass/elements/_right--sticky.scss | 5 +- 2 files changed, 88 insertions(+), 43 deletions(-) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index 4194d23e..56912bf2 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -30,39 +30,42 @@ /* ______ CODE CANVAS: CM CodeMirror EDITOR */ -.cm-editor { - - // .ΝΌ1p.cm-focused .cm-selectionBackground, .ΝΌ1p .cm-line::selection, .ΝΌ1p .cm-selectionLayer .cm-selectionBackground, .ΝΌ1p .cm-content ::selection { - // background: #6199ff2f !important; - // } - .cm-content { - caret-color: var(--c-accent) !important; - - ::selection, - .cm-selectionLayer .cm-selectionBackground, - // .cm-line span.cm-focused .cm-selectionBackground, - .cm-line > *::selection, - .cm-line::selection { - // background: var(--c-accent) !important; - // color: var(--c-on-accent) !important; - background: hsla(var(--accent-hsl) / .14) !important; - color: var(--c-accent) !important; +#codemirror { + + .cm-editor { + + // .ΝΌ1p.cm-focused .cm-selectionBackground, .ΝΌ1p .cm-line::selection, .ΝΌ1p .cm-selectionLayer .cm-selectionBackground, .ΝΌ1p .cm-content ::selection { + // background: #6199ff2f !important; + // } + .cm-content { + caret-color: var(--c-accent) !important; + + ::selection, + .cm-selectionLayer .cm-selectionBackground, + // .cm-line span.cm-focused .cm-selectionBackground, + .cm-line > *::selection, + .cm-line::selection { + // background: var(--c-accent) !important; + // color: var(--c-on-accent) !important; + background: hsla(var(--accent-hsl) / .14) !important; + color: var(--c-accent) !important; + } } - } - &, - .cm-gutters { - background-color: var(--c-bg-cm) !important; - } + &, + .cm-gutters { + background-color: var(--c-bg-cm) !important; + } - .cm-activeLineGutter { - background-color: hsla(var(--accent-hsl) / .2) !important; - color: var(--c-accent) !important; - } + .cm-activeLineGutter { + background-color: hsla(var(--accent-hsl) / .2) !important; + color: var(--c-accent) !important; + } - .cm-line { - [class^="_modelCursor"]::after { - color: var(--c-accent); + .cm-line { + [class^="_modelCursor"]::after { + color: var(--c-accent); + } } } } @@ -92,18 +95,30 @@ /* TODO: Has to add for the bg of Canvas (visible gap or when drag the separator). Btw, when opening canvas, when there is skeleton waiting, the bg is not --c-bg-cm for this section.bg-token-main-surface-primary */ section.popover.h-full.w-full { - // &.bg-token-main-surface-primary { - // --main-surface-primary: var(--c-bg-cm) !important; - // // background-color: var(--c-bg-cm) !important; - // } + background-color: var(--c-bg-cm) !important; + /* Canvas wrapper, this is also bg color for the console */ + /* &, + .bg-token-main-surface-primary { + --main-surface-primary: var(--c-bg-cm) !important; + // background-color: var(--c-bg-cm) !important; + } */ - background-color: var(--c-bg-cm) !important; + /* Resizing line */ + .cursor-ns-resize.bg-token-text-quaternary { + background-color: hsla(var(--accent-hsl) / .4) !important; + } /* Header of canvas with title, coppy btn */ header[class*="@container"] { background-color: var(--c-bg-cm); } + + /* Borders in console */ + .border-token-border-xlight { + --border-xlight: hsla(var(--accent-hsl) / .05) !important; + // border-color: var(--border-xlight); + } } /* @@@@@@@@@ Canvas Edit floating button on bottom right */ @@ -134,13 +149,6 @@ backdrop-filter: blur(10px); } - /* Slider state floating bg: when go into "Adjust the length" and "Reading level" */ - // &.bg-token-main-surface-secondary { - // background-color: var(--c-accent-light); - // // background-color: var(--c-surface-2) !important; - // // box-shadow: 0 0 5px 2px hsla(var(--accent-hsl) / .2) inset !important; - // } - /* Draggable Y-slider btn like: "Adjust the length" and "Reading level" in ProseMirror (text canvas) */ .cursor-grab.rounded-full.bg-token-main-surface-primary[draggable] { box-shadow: 0 0 0 0.65rem hsla(var(--accent-hsl) / 1) !important; @@ -264,6 +272,42 @@ } } } + + + /* Code Canvas: Console when "Run" Python code */ + section > .relative:has(>.cursor-ns-resize) { + + // Console bg + .bg-token-main-surface-primary { + --main-surface-primary: var(--c-bg-cm) !important; + // background-color: var(--c-bg-cm) !important; + } + + /* Da obrisemo border za "Console" header jer je bila neka ruzna bela samo za njega */ + // .border-token-border-xlight:not(.font-mono) { + // border: none !important; + // } + + .sticky.top-0.z-10.font-mono.text-sm[class*="dark:hover:bg-gray-700"] { + &:hover { + background-color: var(--c-surface-2) !important; + } + } + + button[as="button"].btn.btn-ghost.btn-small.aspect-square.\!p-1:has(svg) { + color: var(--c-accent) !important; + } + + /* Error output in consoles */ + .font-mono[class*="hover:bg-red-500/10"] { + background-color: transparent !important; + border: none !important; + + &:hover { + background-color: hsla(var(--danger-hsl) / .11) !important; + } + } + } } } diff --git a/src/sass/elements/_right--sticky.scss b/src/sass/elements/_right--sticky.scss index 42791282..e7f74b87 100644 --- a/src/sass/elements/_right--sticky.scss +++ b/src/sass/elements/_right--sticky.scss @@ -6,11 +6,12 @@ But adding this "main" blocked this style to smaller screens so I have to add it - .sticky.border-token-border-medium je za small devices - .sticky.bg-token-main-surface-primary je za small devices - not(th) means to not include style on table headings in dialogs - - not(div[class*="var(--screen-thread-header-min-height"]) means to not include sticky headers in search link sources dialog when clicked on "SOURCES" in chat bubbles */ + - not(div[class*="var(--screen-thread-header-min-height"]) means to not include sticky headers in search link sources dialog when clicked on "SOURCES" in chat bubbles + - not(.font-mono) je "Run" sticky header u python consoli u Code Canvasu */ .sticky { &.h-header-height, - &.bg-token-main-surface-primary:not(th, div[class*="var(--screen-thread-header-min-height"]) { + &.bg-token-main-surface-primary:not(th, div[class*="var(--screen-thread-header-min-height"], .font-mono) { // .h-full.overflow-y-auto:has(.sticky [href^='/auth/login?next=/gpts']) .sticky { background: var(--c-bg-chats-sticky) !important; backdrop-filter: blur(var(--blur-sticky)); From 5ba1a5c1af7fff162775138e7b885881fa15b83d Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Fri, 13 Dec 2024 17:02:27 +0100 Subject: [PATCH 27/44] refactor(canvas/console): move console code to `section` scoping and add code comments --- src/sass/elements/_canvas.scss | 77 ++++++++++++++-------------------- 1 file changed, 32 insertions(+), 45 deletions(-) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index 56912bf2..73cb40f9 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -97,16 +97,9 @@ section.popover.h-full.w-full { background-color: var(--c-bg-cm) !important; - /* Canvas wrapper, this is also bg color for the console */ - /* &, - .bg-token-main-surface-primary { - --main-surface-primary: var(--c-bg-cm) !important; - // background-color: var(--c-bg-cm) !important; - } */ - /* Resizing line */ .cursor-ns-resize.bg-token-text-quaternary { - background-color: hsla(var(--accent-hsl) / .4) !important; + background-color: hsla(var(--accent-hsl) / .5) !important; } /* Header of canvas with title, coppy btn */ @@ -116,9 +109,39 @@ /* Borders in console */ .border-token-border-xlight { - --border-xlight: hsla(var(--accent-hsl) / .05) !important; + --border-xlight: hsla(var(--accent-hsl) / .1) !important; // border-color: var(--border-xlight); } + + /* Code Canvas: Console when "Run" Python code */ + & > .relative:has(>.cursor-ns-resize) { + + /* Console bg */ + .bg-token-main-surface-primary { + --main-surface-primary: var(--c-bg-cm) !important; + } + + .sticky.top-0.z-10.font-mono.text-sm[class*="dark:hover:bg-gray-700"] { + &:hover { + background-color: var(--c-surface-2) !important; + } + } + + /* "Clear console" and "Cancel" btns in Console header */ + button[as="button"].btn.btn-ghost.btn-small.aspect-square.\!p-1:has(svg) { + color: var(--c-accent) !important; + } + + /* Error output in consoles: this is applied from my global bg-red style so we have to reset it */ + .font-mono[class*="hover:bg-red-500"] { + background-color: transparent !important; + border: none !important; + + &:hover { + background-color: hsla(var(--danger-hsl) / .11) !important; + } + } + } } /* @@@@@@@@@ Canvas Edit floating button on bottom right */ @@ -272,42 +295,6 @@ } } } - - - /* Code Canvas: Console when "Run" Python code */ - section > .relative:has(>.cursor-ns-resize) { - - // Console bg - .bg-token-main-surface-primary { - --main-surface-primary: var(--c-bg-cm) !important; - // background-color: var(--c-bg-cm) !important; - } - - /* Da obrisemo border za "Console" header jer je bila neka ruzna bela samo za njega */ - // .border-token-border-xlight:not(.font-mono) { - // border: none !important; - // } - - .sticky.top-0.z-10.font-mono.text-sm[class*="dark:hover:bg-gray-700"] { - &:hover { - background-color: var(--c-surface-2) !important; - } - } - - button[as="button"].btn.btn-ghost.btn-small.aspect-square.\!p-1:has(svg) { - color: var(--c-accent) !important; - } - - /* Error output in consoles */ - .font-mono[class*="hover:bg-red-500/10"] { - background-color: transparent !important; - border: none !important; - - &:hover { - background-color: hsla(var(--danger-hsl) / .11) !important; - } - } - } } } From f4a4ad894f9a24ed44ce242e8eb7cadc701af957 Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Fri, 13 Dec 2024 17:24:30 +0100 Subject: [PATCH 28/44] fix(canvas/dialogs): improve `apply` comments dialog styles like in py `Console` (#91, #86) - Ensure styles for `[role="dialog"]` are not applied when `[data-comment-id]` attribute is present Changes summary: - Refined the styling for "Apply" comments dialogs to ensure that styles are not applied when the `data-comment-id` attribute is present. --- src/sass/elements/_canvas.scss | 10 +++++----- src/sass/elements/_dialogs.scss | 10 +++++++--- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index 73cb40f9..0961d517 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -97,16 +97,16 @@ section.popover.h-full.w-full { background-color: var(--c-bg-cm) !important; - /* Resizing line */ - .cursor-ns-resize.bg-token-text-quaternary { - background-color: hsla(var(--accent-hsl) / .5) !important; - } - /* Header of canvas with title, coppy btn */ header[class*="@container"] { background-color: var(--c-bg-cm); } + /* Resizing line */ + .cursor-ns-resize.bg-token-text-quaternary { + background-color: hsla(var(--accent-hsl) / .5) !important; + } + /* Borders in console */ .border-token-border-xlight { --border-xlight: hsla(var(--accent-hsl) / .1) !important; diff --git a/src/sass/elements/_dialogs.scss b/src/sass/elements/_dialogs.scss index 95d610d6..df444c0e 100644 --- a/src/sass/elements/_dialogs.scss +++ b/src/sass/elements/_dialogs.scss @@ -1,5 +1,7 @@ -/* Dialogs - Settings */ -[role='dialog'] { +/* ===================== DIAOGS ==================== +not(> [data-comment-id]) - dialog without code comment like in "Run" python code console +*/ +[role='dialog']:not(> [data-comment-id]) { padding: var(--p-dialog) !important; background-color: var(--c-bg-dialog) !important; border-radius: var(--br-dialog) !important; @@ -83,7 +85,7 @@ text-transform: uppercase; } - /* "Your invite is valid until December X, 2023" in "YOU'RE INVITED TO PLUS" footer */ + /* TODO(remove?) ???? "Your invite is valid until December X, 2023" in "YOU'RE INVITED TO PLUS" footer */ .text-gizmo-gray-500 { text-align: center; margin-top: 1rem; @@ -547,6 +549,8 @@ } + &:has(> [data-comment-id]) {} + } html.dark[data-gptheme='oled'] [role='dialog'] { From 1e3f62ecf60d90f40ed6c47885038e285edd80e8 Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Fri, 13 Dec 2024 19:14:25 +0100 Subject: [PATCH 29/44] feat(canvas/header): enhance header UI elements (#86) - Improved title color for better readability - Updated button background colors and hover/disabled states for better visual feedback - Enhanced visibility, differentiate and colors of `Run` and `Stop` buttons - Enhanced History of changes button when active Changes summary: - Improved the title color for better readability. - Updated button background colors and hover/disabled states to provide better visual feedback. - Enhanced the visibility and colors of the `Run` and `Stop` buttons for a more intuitive user experience. - Enhanced History of changes button when active --- src/sass/elements/_canvas.scss | 41 +++++++++++++++++++++++++++++++++ src/sass/elements/_dialogs.scss | 6 ++--- 2 files changed, 43 insertions(+), 4 deletions(-) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index 0961d517..04bceb40 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -100,6 +100,47 @@ /* Header of canvas with title, coppy btn */ header[class*="@container"] { background-color: var(--c-bg-cm); + + /* Main Canvas title */ + h2.truncate.text-lg.text-gray-700 { + color: var(--c-accent) !important; + } + + /* Previous, Before, Copy btns in header */ + button.h-10[class*="enabled:hover:bg-token-main-surface-secondary"] { + --main-surface-secondary: var(--c-surface-3) !important; + + &:disabled { + color: var(--c-subtext-2) !important; + + svg { + transition: none !important; + } + + &:hover { + background-color: none !important; + + svg { + transform: none !important; + } + } + } + } + + /* History of changes btn when active/clicked */ + button.h-10[class*="bg-blue-400/15"] { + @extend .btn-primary; + } + + /* "Run" code button */ + button.rounded-full.bg-token-main-surface-primary { + @extend .btn-secondary; + } + + /* User Profile btn */ + button[aria-label="Open Profile Menu"] { + --main-surface-secondary: var(--c-surface-3) !important + } } /* Resizing line */ diff --git a/src/sass/elements/_dialogs.scss b/src/sass/elements/_dialogs.scss index df444c0e..e0898153 100644 --- a/src/sass/elements/_dialogs.scss +++ b/src/sass/elements/_dialogs.scss @@ -1,7 +1,7 @@ /* ===================== DIAOGS ==================== -not(> [data-comment-id]) - dialog without code comment like in "Run" python code console +not(> [data-comment-id]) - dialog without code comment like in "Run" python code console ("Fix bug") */ -[role='dialog']:not(> [data-comment-id]) { +[role='dialog']:not(> div[data-comment-id]) { padding: var(--p-dialog) !important; background-color: var(--c-bg-dialog) !important; border-radius: var(--br-dialog) !important; @@ -549,8 +549,6 @@ not(> [data-comment-id]) - dialog without code comment like in "Run" python code } - &:has(> [data-comment-id]) {} - } html.dark[data-gptheme='oled'] [role='dialog'] { From 8caeb54137566c1ff0097398df1b0b75dedffe69 Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Fri, 13 Dec 2024 19:24:32 +0100 Subject: [PATCH 30/44] refactor(dialogs): remove `>` from `[role="dialog"]:not(>[data-comment-id])` due to compatibility - Removed the `>` from the CSS selector `[role="dialog"]:not(>[data-comment-id])` to ensure compatibility with SCSS in version 2.0.0 Changes summary: - Updated the CSS selector for dialog elements to remove the `>` to ensure compatibility with SCSS in version 2.0.0. --- src/sass/elements/_dialogs.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sass/elements/_dialogs.scss b/src/sass/elements/_dialogs.scss index e0898153..504c373d 100644 --- a/src/sass/elements/_dialogs.scss +++ b/src/sass/elements/_dialogs.scss @@ -1,7 +1,7 @@ /* ===================== DIAOGS ==================== not(> [data-comment-id]) - dialog without code comment like in "Run" python code console ("Fix bug") */ -[role='dialog']:not(> div[data-comment-id]) { +[role='dialog']:not([data-comment-id]) { padding: var(--p-dialog) !important; background-color: var(--c-bg-dialog) !important; border-radius: var(--br-dialog) !important; From f2cc7a34664a63506b2033f95d2e6668e1d32c8d Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Fri, 13 Dec 2024 19:37:50 +0100 Subject: [PATCH 31/44] feat(canvas/text-highlights): change blue text selection-highlight to accent when `Apply` comment submit (#89, #86) - Changed text highlight color from blue to accent color when processing changes for selected text after clicking the "Apply" comment button Changes summary: - Updated the text selection-highlight blue color to the accent when changes are applied to selected text via the "Apply" comment button. --- src/sass/elements/_canvas.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index 04bceb40..c372eb73 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -292,6 +292,8 @@ /* Selected text for commenting, when we click on comment icon in Text Canvas and "Edit or explain" prompt showed */ .selection-highlight.bg-\[Highlight\], + // Text Canvas: blue highlight when text started to proccesing "Apply" from GPT comment + .selection-highlight.\!bg-\[Highlight\], // Code Canvas: blue highlight of current line when code rewwriting .cm-editor .cm-line.\!bg-\[Highlight\], From 530304e2fefaf7706b10ed7025e2631194243652 Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Fri, 13 Dec 2024 20:05:01 +0100 Subject: [PATCH 32/44] fix(canvas): fix broken speech btn clr in prompt field and `Settings` dropdown bg - Fixed the broken speech button icon color in the prompt field - Resolved the incorrect background color in the settings dropdown Changes summary: - Fixed the broken speech button icon color in the prompt field to ensure it is visible. - Resolved the incorrect background color in the settings dropdown to match the intended design. --- src/sass/elements/_canvas.scss | 222 +++++++++++++++--------------- src/sass/global/_colors-bgs.scss | 2 +- src/sass/global/_colors-txts.scss | 2 +- 3 files changed, 113 insertions(+), 113 deletions(-) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index c372eb73..4622682e 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -183,157 +183,157 @@ } } } - } - /* @@@@@@@@@ Canvas Edit floating button on bottom right */ - .absolute.z-\[70\].overflow-visible.border.border-token-border-light.transition-colors { + /* @@@@@@@@@ Canvas Edit floating button on bottom right */ + .absolute.z-\[70\].overflow-visible.border.border-token-border-light.transition-colors { - /* Wrapper */ - &.bg-token-main-surface-primary, - /* .bg-token-main-surface-secondary is for another step, for sliders floating wrappers */ - &.bg-token-main-surface-secondary { - color: var(--c-accent) !important; + /* Wrapper */ + &.bg-token-main-surface-primary, + /* .bg-token-main-surface-secondary is for another step, for sliders floating wrappers */ + &.bg-token-main-surface-secondary { + color: var(--c-accent) !important; - /* dots level in slider */ - .bg-gray-300 { - background-color: var(--c-accent) !important; + /* dots level in slider */ + .bg-gray-300 { + background-color: var(--c-accent) !important; + } } - } - /* Pause primary floating btn while processing: !bg-black !text-white is for light themes, !bg-white, !text-black is for dark */ - &[class*="!bg-black !text-white"], - &[class*="!bg-white !text-black"] { - background-color: var(--c-accent) !important; - color: var(--c-on-accent) !important; - } + /* Pause primary floating btn while processing: !bg-black !text-white is for light themes, !bg-white, !text-black is for dark */ + &[class*="!bg-black !text-white"], + &[class*="!bg-white !text-black"] { + background-color: var(--c-accent) !important; + color: var(--c-on-accent) !important; + } - /* Main state floating bg */ - &.bg-token-main-surface-primary { - background-color: hsla(var(--accent-hsl) / .2) !important; - backdrop-filter: blur(10px); - } + /* Main state floating bg */ + &.bg-token-main-surface-primary { + background-color: hsla(var(--accent-hsl) / .2) !important; + backdrop-filter: blur(10px); + } - /* Draggable Y-slider btn like: "Adjust the length" and "Reading level" in ProseMirror (text canvas) */ - .cursor-grab.rounded-full.bg-token-main-surface-primary[draggable] { - box-shadow: 0 0 0 0.65rem hsla(var(--accent-hsl) / 1) !important; - } + /* Draggable Y-slider btn like: "Adjust the length" and "Reading level" in ProseMirror (text canvas) */ + .cursor-grab.rounded-full.bg-token-main-surface-primary[draggable] { + box-shadow: 0 0 0 0.65rem hsla(var(--accent-hsl) / 1) !important; + } - /* SUBMIT CHANGE BUTTONS IN GENERAL */ - /* Submit btn for draggable slider btn */ - .rounded-full.bg-black[draggable], - // .rounded-full.bg-black.h-8.w-8, - // .rounded-full.bg-black.h-6.w-6, - /* Submit on main button "Suggest edits" in Text Canvas or "Code review" in Code Canvas */ - .rounded-full.bg-black:has(>svg) { - background-color: var(--c-accent) !important; - color: var(--c-on-accent) !important; - } + /* SUBMIT CHANGE BUTTONS IN GENERAL */ + /* Submit btn for draggable slider btn */ + .rounded-full.bg-black[draggable], + // .rounded-full.bg-black.h-8.w-8, + // .rounded-full.bg-black.h-6.w-6, + /* Submit on main button "Suggest edits" in Text Canvas or "Code review" in Code Canvas */ + .rounded-full.bg-black:has(>svg) { + background-color: var(--c-accent) !important; + color: var(--c-on-accent) !important; + } - /* "Port to a language" and "Add emoji" list */ - .content-center.overflow-x-hidden { - [class*="dark:hover:bg-gray-700"] { + /* "Port to a language" and "Add emoji" list */ + .content-center.overflow-x-hidden { + [class*="dark:hover:bg-gray-700"] { - &[class*="dark:bg-gray-700/50"], - &:hover { - background-color: hsla(var(--accent-hsl) / .2) !important; + &[class*="dark:bg-gray-700/50"], + &:hover { + background-color: hsla(var(--accent-hsl) / .2) !important; + } } } } - } - main { + main { - /* ___________ "Ask a ChatGPT" and "Edit or expain..." floating wrapper */ - .absolute.z-50 { + /* ___________ "Ask a ChatGPT" and "Edit or expain..." floating wrapper */ + .absolute.z-50 { - /* "Ask a ChatGPT" and toolbar wrapper */ - &:has(> .h-10[role="toolbar"]) { - .h-10[role="toolbar"] { + /* "Ask a ChatGPT" and toolbar wrapper */ + &:has(> .h-10[role="toolbar"]) { + .h-10[role="toolbar"] { - &.bg-token-main-surface-primary { - --main-surface-primary: var(--c-surface-2) !important; - border: 1px solid hsla(var(--accent-hsl) / .14) !important; + &.bg-token-main-surface-primary { + --main-surface-primary: var(--c-surface-2) !important; + border: 1px solid hsla(var(--accent-hsl) / .14) !important; - /* "Ask a ChatGPT" and toolbar buttons hover states */ - button[class*="hover:bg-[#f5f5f5]"]:hover { - background-color: var(--c-surface-3) !important; + /* "Ask a ChatGPT" and toolbar buttons hover states */ + button[class*="hover:bg-[#f5f5f5]"]:hover { + background-color: var(--c-surface-3) !important; + } } } } - } - /* "Edit or explain" wrapper */ - .relative.bg-token-main-surface-primary:has(>textarea[aria-placeholder^="Edit or explain"]) { - background-color: hsla(var(--accent-hsl) / .1) !important; - - /* "Edit or explain" field overlay */ - .backdrop-saturate-25 { + /* "Edit or explain" wrapper */ + .relative.bg-token-main-surface-primary:has(>textarea[aria-placeholder^="Edit or explain"]) { background-color: hsla(var(--accent-hsl) / .1) !important; + + /* "Edit or explain" field overlay */ + .backdrop-saturate-25 { + background-color: hsla(var(--accent-hsl) / .1) !important; + } } } - } - /* Floating balloons, like "1 more edit" */ - .bg-token-main-surface-primary.border-token-main-surface-tertiary[aria-label="Button to scroll the next edit into view"] { - --main-surface-primary: hsla(var(--accent-hsl) / .12) !important; - border-color: hsla(var(--accent-hsl) / .1) !important; - color: var(--c-accent) !important; - backdrop-filter: blur(10px); - } + /* Floating balloons, like "1 more edit" */ + .bg-token-main-surface-primary.border-token-main-surface-tertiary[aria-label="Button to scroll the next edit into view"] { + --main-surface-primary: hsla(var(--accent-hsl) / .12) !important; + border-color: hsla(var(--accent-hsl) / .1) !important; + color: var(--c-accent) !important; + backdrop-filter: blur(10px); + } - /* Blue Highlight when hover text to add a comment in Text Canvas */ - [class*="dark:after:bg-[Highlight]"] { - &::after { - background-color: hsla(var(--accent-hsl) / .15) !important; - border: 1px solid hsla(var(--accent-hsl) / .15) !important; + /* Blue Highlight when hover text to add a comment in Text Canvas */ + [class*="dark:after:bg-[Highlight]"] { + &::after { + background-color: hsla(var(--accent-hsl) / .15) !important; + border: 1px solid hsla(var(--accent-hsl) / .15) !important; + } } - } - /* Selected text for commenting, when we click on comment icon in Text Canvas and "Edit or explain" prompt showed */ - .selection-highlight.bg-\[Highlight\], - // Text Canvas: blue highlight when text started to proccesing "Apply" from GPT comment - .selection-highlight.\!bg-\[Highlight\], - // Code Canvas: blue highlight of current line when code rewwriting - .cm-editor .cm-line.\!bg-\[Highlight\], + /* Selected text for commenting, when we click on comment icon in Text Canvas and "Edit or explain" prompt showed */ + .selection-highlight.bg-\[Highlight\], + // Text Canvas: blue highlight when text started to proccesing "Apply" from GPT comment + .selection-highlight.\!bg-\[Highlight\], + // Code Canvas: blue highlight of current line when code rewwriting + .cm-editor .cm-line.\!bg-\[Highlight\], - // Code Canvas: blue highlight of current selected and about to prompt lines - .cm-editor .cm-line span.bg-\[Highlight\] { - background-color: var(--c-accent) !important; - color: var(--c-on-accent) !important; - } + // Code Canvas: blue highlight of current selected and about to prompt lines + .cm-editor .cm-line span.bg-\[Highlight\] { + background-color: var(--c-accent) !important; + color: var(--c-on-accent) !important; + } - .cm-editor .cm-line span.bg-\[Highlight\], - // Code Canvas: Hc-blue line of current processing line - .cm-editor .cm-line.\!bg-\[Highlight\] span { - // background-color: var(--c-accent) !important; + .cm-editor .cm-line span.bg-\[Highlight\], + // Code Canvas: Hc-blue line of current processing line + .cm-editor .cm-line.\!bg-\[Highlight\] span { + // background-color: var(--c-accent) !important; - &, - span { - color: var(--c-on-accent) !important; + &, + span { + color: var(--c-on-accent) !important; + } } - } - /* Comment section on the right of the text where add comment btn is */ - [data-block-comment-launcher] button { - .text-gray-400 { - svg { - color: var(--c-accent) !important; + /* Comment section on the right of the text where add comment btn is */ + [data-block-comment-launcher] button { + .text-gray-400 { + svg { + color: var(--c-accent) !important; + } } } - } - .cm-editor { + .cm-editor { - /* Code Canvas of yet non-edited lines while code is rewriting ("Add logs", "Add comments") */ - .streaming-line-overlay { - &.before\:bg-white\/50:before { - background-color: var(--c-bg-cm) !important; - opacity: 0.85; - } + /* Code Canvas of yet non-edited lines while code is rewriting ("Add logs", "Add comments") */ + .streaming-line-overlay { + &.before\:bg-white\/50:before { + background-color: var(--c-bg-cm) !important; + opacity: 0.85; + } - &.\:bg-white\/50 { - background-color: var(--c-bg-cm) !important; + &.\:bg-white\/50 { + background-color: var(--c-bg-cm) !important; + } } } } diff --git a/src/sass/global/_colors-bgs.scss b/src/sass/global/_colors-bgs.scss index fa9a715a..939d4e1e 100644 --- a/src/sass/global/_colors-bgs.scss +++ b/src/sass/global/_colors-bgs.scss @@ -148,7 +148,7 @@ This content may violate our Terms of Use or usage policies. is bg-orange-400 no - .streaming-line-overlay are lines during the processing edit in Code Canvas (like add logs etc) */ -[class*='bg-white']:not(.streaming-line-overlay), +[class*='bg-white']:not(.streaming-line-overlay, [role="combobox"]), .bg-token-sidebar-surface-secondary { background-color: var(--c-surface-2) !important; // @include borderBoxShadow(red); diff --git a/src/sass/global/_colors-txts.scss b/src/sass/global/_colors-txts.scss index 3ae51dec..62ae6901 100644 --- a/src/sass/global/_colors-txts.scss +++ b/src/sass/global/_colors-txts.scss @@ -7,7 +7,7 @@ - [class*='text-gray-'] utice i na div[data-radix-popper-content-wrapper] tj "Theme" dropdown iteme te ne mogu da se overwrituju tamo u _menu.scss. Zato sam sklonila !important */ [class*='text-gray-']:not(.text-gray-100, .text-gray-400, .text-gray-500, .text-gray-600), -[class*='text-white']:not(.btn-primary .text-white, .bg-green-600, svg, .toast-root .text-white[role='alert']) { +[class*='text-white']:not(.btn-primary .text-white, .bg-green-600, svg, .toast-root .text-white[role='alert'], [data-testid="composer-speech-button"]) { color: var(--c-txt); } From 1c0002cbcae00b1d99ba5b4fa55d7f0b733b838a Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Fri, 13 Dec 2024 21:53:17 +0100 Subject: [PATCH 33/44] feat(canvas): match popover video bg with theme for first-time Canvas use (#86) - Matched the background of the popover with the autoplayed video card shown when using Canvas for the first time to the theme - Ensured the "Refine and debug on the spot" and "Got it" buttons are styled consistently Changes summary: - Matched the background of the popover with the autoplayed video card to the theme for a consistent look when using Canvas for the first time. - Ensured the "Refine and debug on the spot" and "Got it" buttons are styled consistently with the theme. --- src/sass/elements/_dialogs.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/sass/elements/_dialogs.scss b/src/sass/elements/_dialogs.scss index 504c373d..b9c88d3b 100644 --- a/src/sass/elements/_dialogs.scss +++ b/src/sass/elements/_dialogs.scss @@ -560,6 +560,17 @@ html.dark[data-gptheme='oled'] [role='dialog'] { } } + +/* popover with autoplay video showed once when used Canvas for the first time. Probably could be removed after some time in future, "Got it" btn +"Refine and debug on the spot" +"Refactor code. Translate to Python. Check for bugs. ChatGPT can do it all, right on the canvas." +*/ +.popover.fixed.max-w-sm:has(video) { + .bg-token-main-surface-secondary.text-token-text-secondary:has(>video) ~ .flex.px-10.py-8 { + background-color: var(--c-surface-2) !important; + } +} + /* ! NOT WORKING - CANNOT OVERWRITE THIS WTF */ /* .dark .popover, .light .popover, From 8dc34553379d22e95cf3b9ef883037294163ff43 Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Fri, 13 Dec 2024 23:32:15 +0100 Subject: [PATCH 34/44] fix(canvas/ask-gpt): adjust user chat bg and gradient "ask-gpt" chats wrapper on `w <= 1000px` (#89, #86) - Fixed the user chat background and gradient wrapper for dark and light themes on screens with a width of 1000px or greater - Ensured the styles are applied correctly when there is a submitted prompt and chat Changes summary: - Adjusted the user chat background and gradient wrapper to ensure proper styling for dark and light themes on screens with a width of 1000px or greater. - Ensured the styles are correctly applied when there is a submitted "ask gpt" prompt and chat. --- src/sass/elements/_canvas.scss | 16 ++++++++++++++++ src/sass/elements/_dialogs.scss | 2 +- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index 4622682e..c5d1b9fc 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -337,6 +337,22 @@ } } } + + /* width <= 1000px: User chat in Code Canvas when "Ask GPT" */ + /* width <= 1000px: Gradient oko chata na light temi */ + .bg-vert-light-gradient { + background-image: linear-gradient(180deg, #fff0 13.94%, var(--c-bg-cm) 54.73%); + } + + /* width <= 1000px: Gradient oko chata na dark temi */ + [class*="dark:from-token-main-surface-primary"] { + --main-surface-primary: var(--c-bg-cm) !important; + } + + /* width <= 1000px: Poruke usera u Code Canvas */ + .bg-token-message-surface { + background-color: var(--c-bg-msg-user) !important; + } } } } diff --git a/src/sass/elements/_dialogs.scss b/src/sass/elements/_dialogs.scss index b9c88d3b..026908e3 100644 --- a/src/sass/elements/_dialogs.scss +++ b/src/sass/elements/_dialogs.scss @@ -1,7 +1,7 @@ /* ===================== DIAOGS ==================== not(> [data-comment-id]) - dialog without code comment like in "Run" python code console ("Fix bug") */ -[role='dialog']:not([data-comment-id]) { +[role='dialog']:not(:has(>[data-comment-id])) { padding: var(--p-dialog) !important; background-color: var(--c-bg-dialog) !important; border-radius: var(--br-dialog) !important; From 7d1b3dd68129d3c30e0e2c651335a0b617f9ba95 Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Fri, 13 Dec 2024 23:46:03 +0100 Subject: [PATCH 35/44] fix(canvas/loading-skeleton): ensure bg is applied correctly when no Code or Text canvas loaded yet (#89, #86) - Fixed the background not being applied when there is no text (`#prosemirror-editor-container`) or code (`#codemirror`) canvas section loaded yet - Fixed the issue where the background was not applied when selecting a canvas
via the `#codemirror` or `#prosemirror-editor-container` elements. Changes summary: - Ensured the background is applied correctly to the loading skeleton when there is no text or code canvas section loaded yet. --- src/sass/elements/_canvas.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index c5d1b9fc..79f90fb3 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -87,6 +87,11 @@ .absolute.left-0.z-20.h-full.overflow-hidden, .fixed.inset-0.z-40.overflow-hidden { + /* Loading screen for Canvas when there is no #codemirror or #prosemirror-editor-container loaded yet */ + section.popover:has(main [class*="absolute left-0 top-0 h-full w-full rotate-45 bg-gradient-to-r from-transparent via-black/20 to-transparent opacity-50 dark:via-white/5"]) { + background-color: var(--c-bg-cm) !important; + } + &:has(section.popover main #codemirror, section.popover main #prosemirror-editor-container) { .bg-black { background-color: var(--c-accent) !important; From bbcaf874fe4be601925f7a3dd9bd68f2a1caa28f Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Sat, 14 Dec 2024 00:08:59 +0100 Subject: [PATCH 36/44] fix(canvas/gpth-floating): hide GPThemes floating button when canvas is opened or skeleton-loading (#86) - Hide the GPT themes floating button when a code or text canvas is opened - Ensure the button remains hidden when the canvas skeleton-loading layout is active Changes summary: - Hid the GPT themes floating button when a code or text canvas is opened. - Ensured the button remains hidden when the canvas skeleton-loading layout is active. --- src/sass/elements/_canvas.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss index 79f90fb3..dc532ffa 100644 --- a/src/sass/elements/_canvas.scss +++ b/src/sass/elements/_canvas.scss @@ -405,4 +405,15 @@ --main-surface-secondary: var(--c-surface-3) !important; } } +} + + +/* Hide the floating button when Canvas is opened */ +body:has(.absolute.z-20.h-full.transition-shadow.overflow-hidden.left-0 section.popover main #codemirror), +body:has(.absolute.z-20.h-full.transition-shadow.overflow-hidden.left-0 section.popover main #prosemirror-editor-container), +body:has(.absolute.z-20.h-full.transition-shadow.overflow-hidden.left-0 section.popover main [class*="absolute left-0 top-0 h-full w-full rotate-45 bg-gradient-to-r from-transparent via-black/20 to-transparent opacity-50 dark:via-white/5"]) { + .gpth__floating { + opacity: 0; + pointer-events: none; + } } \ No newline at end of file From 54b2b89845250ff1ce77313f09607059e70b6fce Mon Sep 17 00:00:00 2001 From: itsmartashub <44645238+itsmartashub@users.noreply.github.com> Date: Sat, 14 Dec 2024 20:22:51 +0100 Subject: [PATCH 37/44] feat(canvas/chats-@container): implement more compact chat styles for Canvas view using `@container` queries (#92, #86) - Applied mobile-like chat styles when the canvas is opened and the parent element of chats and the prompt field is less than `md` or `sm` breakpoint using the new `@container` CSS property - Made chats and the prompt textarea full width for a more compact and readable layout - Removed unnecessary elements like the GPT logo, big paddings,big paddings and spacing around, and border radius for a cleaner look Changes summary: - Enhanced chat styles to be more compact and readable when the canvas is opened - Made the chats and prompt textarea full width for better visual appeal in the canvas layout. - Removed unnecessary elements like the GPT logo, big paddings and spacing around, and border radius to create a cleaner and more readable design --- src/sass/abstract/_bp.scss | 47 +++++++++- src/sass/abstract/_vars.scss | 18 +++- .../elements/_chats-textarea-max-width.scss | 9 +- src/sass/elements/_right--main.scss | 89 +++++++++++++++++-- 4 files changed, 151 insertions(+), 12 deletions(-) diff --git a/src/sass/abstract/_bp.scss b/src/sass/abstract/_bp.scss index 811d9d46..bd3eeed8 100644 --- a/src/sass/abstract/_bp.scss +++ b/src/sass/abstract/_bp.scss @@ -71,4 +71,49 @@ $xxl: 96em; // 1536px @include dev('xxl') { // Your styles for 2x extra-large screens (min-width: 1536px) -} */ \ No newline at end of file +} */ + + +@mixin container($bp) { + @if $bp =='xxs' { + @container (max-width: #{$xxs}) { + @content; + } + } + + @if $bp =='xs' { + @container (max-width: #{$xs}) { + @content; + } + } + + @if $bp =='sm' { + @container (max-width: #{$sm}) { + @content; + } + } + + @if $bp =='md' { + @container (max-width: #{$md}) { + @content; + } + } + + @if $bp =='lg' { + @container (max-width: #{$lg}) { + @content; + } + } + + @if $bp =='xl' { + @container (max-width: #{$xl}) { + @content; + } + } + + @if $bp =='xxl' { + @container (min-width: #{$xxl}) { + @content; + } + } +} \ No newline at end of file diff --git a/src/sass/abstract/_vars.scss b/src/sass/abstract/_vars.scss index c4d1bacd..86d3efa2 100644 --- a/src/sass/abstract/_vars.scss +++ b/src/sass/abstract/_vars.scss @@ -37,7 +37,7 @@ /* ? --- Paddings --- */ --p-chat-bubble: 1.2rem; - --px-chat-bubble-edge-gap: 4vw; + // --px-chat-bubble-edge-gap: 4vw; --p-contextmenu: 0.8rem; --p-contextmenu-item: 0.9rem 1rem; --p-prompt-textarea: 0.7rem; @@ -133,6 +133,16 @@ --link: var(--c-accent) !important; + @include container('md') { + // --px-chat-bubble-edge-gap: 1vw; + --p-chat-bubble: .8rem; + --br-chat-bubble: calc(var(--br) * 1.1); + } + + @include container('sm') { + --br-chat-bubble: var(--br) !important; + } + @include dev('md') { --p-chat-bubble: .8rem; --br-chat-bubble: calc(var(--br) * 1.55); @@ -143,9 +153,9 @@ --p-sidebar-nav: 0.3rem; } - @include dev('sm') { - --px-chat-bubble-edge-gap: 0.45rem; - } + // @include dev('sm') { + // --px-chat-bubble-edge-gap: 0.45rem; + // } // --box-shadow-sticky: 0 10px 40px 5px hsla(var(--accent-h) var(--surface-s) calc(var(--surface-l) * 1.025) / 0.85); diff --git a/src/sass/elements/_chats-textarea-max-width.scss b/src/sass/elements/_chats-textarea-max-width.scss index 02d990cf..dfd838c8 100644 --- a/src/sass/elements/_chats-textarea-max-width.scss +++ b/src/sass/elements/_chats-textarea-max-width.scss @@ -2,13 +2,18 @@ // main:has(#prompt-textarea) [class*="xl:max-w-[48rem]"] { main:has(#composer-background) { .px-3.text-base.m-auto { - padding-left: var(--px-chat-bubble-edge-gap) !important; - padding-right: var(--px-chat-bubble-edge-gap) !important; + // padding-left: var(--px-chat-bubble-edge-gap) !important; + // padding-right: var(--px-chat-bubble-edge-gap) !important; /* Only textarea wrapper */ .mx-auto.flex.flex-1.text-base:has(>form) { max-width: var(--w_prompt_textarea) !important; + // @include container('md') { + // border: 1px solid green !important; + // --w_prompt_textarea: 100%; + // } + /* TODO This element causes weird empty space before prompt field which makes prompt fields visually unshifted or misaligned. The best would be to display:none, but idk if that would be filled with some important content in the future. So I use :empty to remove it only when this element is without any content. */ & > div.flex.justify-center:has(~form):empty { // border: 4px solid orange !important; diff --git a/src/sass/elements/_right--main.scss b/src/sass/elements/_right--main.scss index 81d3e31a..298530bc 100644 --- a/src/sass/elements/_right--main.scss +++ b/src/sass/elements/_right--main.scss @@ -2,6 +2,7 @@ /* .grow.overflow-auto.bg-token-main-surface-primary:has(article) - is for the targeting "Share Link" page */ .grow.overflow-auto.bg-token-main-surface-primary:has([data-testid^='conversation-turn-']), main [role='presentation'] { + container: inline-size; /* Main Page chat-container Bg*/ &, @@ -34,22 +35,43 @@ main [role='presentation'] { /* @ === RIGHT - CHATS BUBBLES ===*/ [data-testid^='conversation-turn-'] { + // container: inline-size / article; + // container: inline-size; + // container: article / inline-size; /* Edit icon in user chat for example. Edit state user chat bg */ --main-surface-tertiary: var(--c-surface-3) !important; // margin-bottom: var(--mb-chat-bubble) !important; + @include container('sm') { + // --px-chat-bubble-edge-gap: 0.45rem; + --p-chat-bubble: 1rem; + --br-chat-bubble: calc(var(--br) * 1.2); + + .m-auto.text-base:has(>.mx-auto.flex.flex-1.text-base[class*="md:max-w-3xl"]) { + // border: 2px solid red !important; + padding-left: 0.8rem !important; + padding-right: 0.8rem !important; + } + } + div[data-message-author-role], .prose { line-height: calc(var(--lineHeight) / 16) !important; font-size: calc((var(--fontSize) / 16) * 1rem) !important; } - /* TODO: check if this [class*='xl:max-w-[48rem]'] can be removed + /* Right chat content parent .mx-auto.flex.flex-1.text-base[class*="md:max-w-3xl"] is GPT chat bubble */ // [class*='xl:max-w-[48rem]'], /* Necu da stavim direkt na chat bubble jer nece biti dobro kad imamo double response prikazan */ + // .mx-auto.flex.flex-1.text-base[class*="md:max-w-3xl"] { .mx-auto.flex.flex-1.text-base[class*="md:max-w-3xl"] { max-width: var(--w_chat_gpt) !important; + + @include container('md') { + --w_chat_gpt: 100%; + width: var(--w_chat_gpt); + } } /* Chat bubble footer SVG icons - edit, read aloud, copy, regenerate, bad response */ @@ -229,11 +251,14 @@ main [role='presentation'] { padding: calc(var(--p-chat-bubble) * var(--pt-multiplier)) var(--p-chat-bubble) var(--p-chat-bubble) var(--p-chat-bubble) !important; border-radius: var(--br-chat-bubble) !important; + @include container('sm') { + --pt-multiplier: 1; + } + @include dev('sm') { --pt-multiplier: 1.4; } - /* Left chat content parent ! Adding fixed width prevent content overflowing on the right side of chat bubble when there is some markdown (
) element shown with scrolling horizontally */
 			/* 
@@ -254,9 +279,16 @@ main [role='presentation'] {
 
 				width: calc(100% - var(--svg-w) - var(--svg-gap) - var(--p-chat-bubble) - var(--p-chat-bubble)) !important; // more consistent width (right chat bubble spacing = left spacing)
 
+				@include container('md') {
+					--svg-gap: 1.25rem;
+				}
+
+				@include container('sm') {
+					width: 100% !important;
+				}
 
 				@include dev('md') {
-					--svg-gap: 1.25rem !important; // md-gap-5 (1.25rem)
+					--svg-gap: 1.25rem; // md-gap-5 (1.25rem)
 				}
 
 				@include dev('sm') {
@@ -290,9 +322,14 @@ main [role='presentation'] {
 		}
 
 		/* GPT avatar in its chat bubbles: with img is the GPTs Store item avatar (.gizmo-shadow-stroke), and with svg is gpt logo (.gizmo-bot-avatar	) */
+		@include container('sm') {
+			.flex-shrink-0.flex.flex-col.items-end:has(.gizmo-bot-avatar, .gizmo-shadow-stroke) {
+				display: none !important;
+			}
+		}
+
 		@include dev('sm') {
 			.flex-shrink-0.flex.flex-col.items-end:has(.gizmo-bot-avatar, .gizmo-shadow-stroke) {
-				// background-color: red !important;
 				display: none !important;
 			}
 		}
@@ -474,4 +511,46 @@ body > .fixed.top-8.right-4 {
 		--text-primary: var(--c-on-accent) !important;
 		border-color: var(--c-accent) !important;
 	}
-}
\ No newline at end of file
+}
+
+
+// @container article (max-width: $sm) {
+
+// 	[data-testid^='conversation-turn-'] {
+
+// 		& > div {
+// 			--px-chat-bubble-edge-gap: 0.4rem !important;
+// 		}
+
+// 		.mx-auto.flex.flex-1.text-base[class*="md:max-w-3xl"] {
+// 			--p-chat-bubble: 0.5rem !important;
+// 			--br-chat-bubble: var(--br) !important;
+// 			// background-color: red !important;
+// 			// border: 4px solid orange !important;
+// 			width: 100% !important;
+
+// 			.flex-shrink-0.flex.flex-col.items-end:has(.gizmo-bot-avatar, .gizmo-shadow-stroke) {
+// 				// background-color: red !important;
+// 				display: none !important;
+// 			}
+
+// 		}
+
+// 		&:has([data-message-author-role='user']) [class*='bg-token-message-surface'] {
+// 			width: 100% !important;
+// 			max-width: 100% !important;
+// 		}
+
+// 		&:has([data-message-author-role='assistent']) {
+// 			border: 2px solid red !important;
+// 		}
+
+// 	}
+
+// 	[data-testid^="conversation-turn-"]:has([data-message-author-role="assistant"]) > div.text-base > div:first-child:has(.markdown) .agent-turn.relative.flex.w-full.flex-col {
+// 		width: 100% !important;
+// 		border: 2px solid red !important;
+
+// 	}
+
+// }
\ No newline at end of file

From f9b55881d6eae934fdf4789bedb60ea692040bc4 Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Sat, 14 Dec 2024 21:38:44 +0100
Subject: [PATCH 38/44] fix(canvas/chats-@container): ensure prompt field
 updates to full-width when canvas is open and on `md` breakpoints (#92, #86)

- Ensure the prompt field updates to full-width when the canvas is open and on `md` breakpoints by updating the @container mixins to the named

Changes summary:
    - Fixed the issue where the prompt field did not update to full-width when the canvas is open and on `md` breakpoints, ensuring consistent layout.
---
 src/sass/abstract/_bp.scss                    | 46 ++++++++++++++++++-
 .../elements/_chats-textarea-max-width.scss   | 12 +++--
 src/sass/elements/_right--main.scss           |  5 +-
 3 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/src/sass/abstract/_bp.scss b/src/sass/abstract/_bp.scss
index bd3eeed8..c2d19893 100644
--- a/src/sass/abstract/_bp.scss
+++ b/src/sass/abstract/_bp.scss
@@ -74,7 +74,7 @@ $xxl: 96em; // 1536px
 } */
 
 
-@mixin container($bp) {
+/* @mixin container($bp) {
     @if $bp =='xxs' {
         @container (max-width: #{$xxs}) {
             @content;
@@ -116,4 +116,48 @@ $xxl: 96em; // 1536px
             @content;
         }
     }
+} */
+
+@mixin container($bp, $name: main) {
+    @if $bp =='xxs' {
+        @container #{$name} (max-width: #{$xxs}) {
+            @content;
+        }
+    }
+
+    @if $bp =='xs' {
+        @container #{$name} (max-width: #{$xs}) {
+            @content;
+        }
+    }
+
+    @if $bp =='sm' {
+        @container #{$name} (max-width: #{$sm}) {
+            @content;
+        }
+    }
+
+    @if $bp =='md' {
+        @container #{$name} (max-width: #{$md}) {
+            @content;
+        }
+    }
+
+    @if $bp =='lg' {
+        @container #{$name} (max-width: #{$lg}) {
+            @content;
+        }
+    }
+
+    @if $bp =='xl' {
+        @container #{$name} (max-width: #{$xl}) {
+            @content;
+        }
+    }
+
+    @if $bp =='xxl' {
+        @container #{$name} (min-width: #{$xxl}) {
+            @content;
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/sass/elements/_chats-textarea-max-width.scss b/src/sass/elements/_chats-textarea-max-width.scss
index dfd838c8..77dd8bce 100644
--- a/src/sass/elements/_chats-textarea-max-width.scss
+++ b/src/sass/elements/_chats-textarea-max-width.scss
@@ -1,18 +1,20 @@
 // main:has(#prompt-textarea) [class*='lg:max-w-[40rem]'] {
 // main:has(#prompt-textarea) [class*="xl:max-w-[48rem]"] {
 main:has(#composer-background) {
+	// container: inline-size;
+
 	.px-3.text-base.m-auto {
 		// padding-left: var(--px-chat-bubble-edge-gap) !important;
 		// padding-right: var(--px-chat-bubble-edge-gap) !important;
 
 		/* Only textarea wrapper */
 		.mx-auto.flex.flex-1.text-base:has(>form) {
-			max-width: var(--w_prompt_textarea) !important;
+			max-width: var(--w_prompt_textarea);
 
-			// @include container('md') {
-			// 	border: 1px solid green !important;
-			// 	--w_prompt_textarea: 100%;
-			// }
+			@include container('md') {
+				--w_prompt_textarea: 100%;
+				// border: 1px solid greenyellow !important;
+			}
 
 			/* TODO This element causes weird empty space before prompt field which makes prompt fields visually unshifted or misaligned. The best would be to display:none, but idk if that would be filled with some important content in the future. So I use :empty to remove it only when this element is without any content. */
 			& > div.flex.justify-center:has(~form):empty {
diff --git a/src/sass/elements/_right--main.scss b/src/sass/elements/_right--main.scss
index 298530bc..8f969d9a 100644
--- a/src/sass/elements/_right--main.scss
+++ b/src/sass/elements/_right--main.scss
@@ -2,7 +2,7 @@
 /* .grow.overflow-auto.bg-token-main-surface-primary:has(article) - is for the targeting "Share Link" page */
 .grow.overflow-auto.bg-token-main-surface-primary:has([data-testid^='conversation-turn-']),
 main [role='presentation'] {
-	container: inline-size;
+	container: main / inline-size;
 
 	/* Main Page chat-container  Bg*/
 	&,
@@ -35,9 +35,6 @@ main [role='presentation'] {
 
 /* @ === RIGHT - CHATS BUBBLES ===*/
 [data-testid^='conversation-turn-'] {
-	// container: inline-size / article;
-	// container: inline-size;
-	// container: article / inline-size;
 	/* Edit icon in user chat for example. Edit state user chat bg  */
 	--main-surface-tertiary: var(--c-surface-3) !important;
 	// margin-bottom: var(--mb-chat-bubble) !important;

From fab444dcf535ec0deccef0c072e6a79c9b254e4f Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Sat, 14 Dec 2024 22:30:16 +0100
Subject: [PATCH 39/44] fix(canvas/chats): correct bg gradients in user chat
 bubbles (#86)

- Fix background gradients in chat bubbles to ensure they look consistent and fit the theme when in user chat

Changes summary:
    - Corrected the background gradients in user chat bubbles to ensure they look consistent and fit the theme.
---
 src/sass/elements/_canvas.scss      | 35 +----------------------------
 src/sass/elements/_right--main.scss | 29 ++++++++++++++++++++++++
 2 files changed, 30 insertions(+), 34 deletions(-)

diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss
index dc532ffa..12be3e0b 100644
--- a/src/sass/elements/_canvas.scss
+++ b/src/sass/elements/_canvas.scss
@@ -1,33 +1,3 @@
-/* ______ Canvas in chat bubble */
-.agent-turn:has([id^="textdoc-message"]) {
-    // --c-bg-pre: var(--c-surface-1);
-    // --c-bg-pre: var(--c-surface-2);
-
-    .popover {
-        --main-surface-primary: var(--c-bg-cm) !important;
-    }
-
-    [id^="textdoc-message"] {
-        will-change: border-color;
-        border: 2px solid hsla(var(--accent-hsl) / .12) !important;
-        transition: border-color .2s;
-
-        /* Gradient on the bottom of code */
-        .absolute.bottom-0.z-20.h-24.w-full.transition-colors {
-            background: linear-gradient(rgba(0, 0, 0, 0), var(--c-bg-cm)) !important;
-        }
-
-        &:hover {
-            border-color: hsla(var(--accent-hsl) / .3) !important;
-        }
-    }
-
-    /* Chat bubble - "Typing" btn when canvas creating */
-    [role="button"].absolute.bottom-3:has(>.loading-shimmer-pure-text) {
-        // --main-surface-primary: red !important;
-    }
-}
-
 /* ______ CODE CANVAS: CM CodeMirror EDITOR */
 
 #codemirror {
@@ -73,10 +43,7 @@
 /* ______ TEXT CANVAS: ProseMirror EDITOR */
 #prosemirror-editor-container {
 
-    & > div.bg-token-main-surface-primary.ProseMirror {
-        --main-surface-primary: var(--c-bg-cm) !important;
-    }
-
+    & > div.bg-token-main-surface-primary.ProseMirror,
     .from-token-main-surface-primary {
         --main-surface-primary: var(--c-bg-cm) !important;
     }
diff --git a/src/sass/elements/_right--main.scss b/src/sass/elements/_right--main.scss
index 8f969d9a..aec095b8 100644
--- a/src/sass/elements/_right--main.scss
+++ b/src/sass/elements/_right--main.scss
@@ -57,6 +57,35 @@ main [role='presentation'] {
 		font-size: calc((var(--fontSize) / 16) * 1rem) !important;
 	}
 
+	/* _________ CANVAS in chat bubbles */
+	&:has([id^="textdoc-message"]) {
+		.popover {
+			--main-surface-primary: var(--c-bg-cm) !important;
+		}
+
+		[id^="textdoc-message"] {
+			--main-surface-primary: var(--c-bg-cm) !important;
+			will-change: border-color;
+			border: 2px solid hsla(var(--accent-hsl) / .12) !important;
+			transition: border-color .2s;
+
+			/* Gradient on the bottom of code */
+			.absolute.bottom-0.z-20.h-24.w-full.transition-colors {
+				background: linear-gradient(rgba(0, 0, 0, 0), var(--c-bg-cm)) !important;
+			}
+		}
+
+		&:hover {
+			border-color: hsla(var(--accent-hsl) / .3) !important;
+		}
+
+
+		/* Chat bubble - "Typing" btn when canvas creating */
+		[role="button"].absolute.bottom-3:has(>.loading-shimmer-pure-text) {
+			// --main-surface-primary: red !important;
+		}
+	}
+
 	/* Right chat content parent
 	.mx-auto.flex.flex-1.text-base[class*="md:max-w-3xl"] is GPT chat bubble */
 	// [class*='xl:max-w-[48rem]'], 

From 8c909360d016659ff41119cbc41975f79d0ff796 Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Sat, 14 Dec 2024 22:36:18 +0100
Subject: [PATCH 40/44] fix(canvas/editor): apply style to `X more edits` btn
 in history of edits (#89, #86)

- Ensure styles are applied to the `x more edits` button in the history of edits by selecting the element with `[aria-label^="Button to scroll the next edit into view"]`

Changes summary:
    - Fixed the issue where styles were not applied to the `x more edits` button in the history of edits in Text Canvas, ensuring consistent visual appearance.
---
 src/sass/elements/_canvas.scss | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss
index 12be3e0b..75d90ae5 100644
--- a/src/sass/elements/_canvas.scss
+++ b/src/sass/elements/_canvas.scss
@@ -245,9 +245,10 @@
                 }
 
                 /* Floating balloons, like "1 more edit" */
-                .bg-token-main-surface-primary.border-token-main-surface-tertiary[aria-label="Button to scroll the next edit into view"] {
-                    --main-surface-primary: hsla(var(--accent-hsl) / .12) !important;
-                    border-color: hsla(var(--accent-hsl) / .1) !important;
+                .bg-token-main-surface-primary.border-token-main-surface-tertiary[aria-label^="Button to scroll the next edit into view"] {
+                    --main-surface-primary: hsla(var(--accent-hsl) / .15) !important;
+                    --main-surface-secondary: hsla(var(--accent-hsl) / .3) !important;
+                    border-color: hsla(var(--accent-hsl) / .12) !important;
                     color: var(--c-accent) !important;
                     backdrop-filter: blur(10px);
                 }

From 3aefa0858595f9dd6f56ad10fc153490c845c016 Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Sun, 15 Dec 2024 00:35:47 +0100
Subject: [PATCH 41/44] fix(canvas/overlay): resolve chat overlay issue in
 light theme on Firefox (#93, #86)

- Address the overlay issue that appears over the chats container when the canvas is opened in the light theme and using Firefox
- Ensure the overlay does not obstruct user interactions and is visually consistent

[The issue arises because I'm using the [class^="bg-black"] selector to apply a full bg color, but in this case, the element is semi-transparent. I'm still unsure why OpenAI is utilizing this element and why it's fully transparent specifically for the dark theme.]

Changes summary:
    - Fixed the issue where an overlay appeared over the chats container in the light theme on Firefox, ensuring it does not obstruct user interactions and is visually consistent.
---
 src/sass/global/_colors-bgs.scss | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/sass/global/_colors-bgs.scss b/src/sass/global/_colors-bgs.scss
index 939d4e1e..edb864f2 100644
--- a/src/sass/global/_colors-bgs.scss
+++ b/src/sass/global/_colors-bgs.scss
@@ -168,14 +168,23 @@ This content may violate our Terms of Use or usage policies. is bg-orange-400 no
 - Prompt textarea send button
 - GPTs - active pill ("Top Picks")
  */
-// .bg-black,
-[class*='bg-black'],
+.bg-black,
+// [class*='bg-black'],// @@@@@ THIS MAKES CHATS NOT VISIBLE IN FIREFOX ON LIGHT THEME
 .bg-token-sidebar-surface-primary {
 	background-color: var(--c-surface-1);
+	// background-color: orange;
 	// @include borderBoxShadow(lightgreen);
 	// background-color: lightgreen;
 }
 
+/* @@@@@ DEBUG FIREFOX -  THIS MAKES CHATS NOT VISIBLE IN FIREFOX ON LIGHT THEME */
+/* [class*='bg-black'] {
+	outline: 2px solid red !important;
+	border: 2px solid red !important;
+	background: red !important;
+	box-shadow: 0 0 0 4px red !important;
+} */
+
 /* 
 - Builder profile "PlaceholderGPT" - var(--c-surface-3)
 - GPTs - Search input and search query bg - var(--c-surface-2)

From 552d1f135a78d6f3f8dc23a2fc120612fe77bfc9 Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Sun, 15 Dec 2024 01:03:30 +0100
Subject: [PATCH 42/44] feat(canvas/text-markdown): update background of code
 blocks to match the theme (#89, #86)

- Update the background of markdown code blocks in the Text Canvas to better match the theme

Changes summary:
    - Updated the background of markdown code blocks in the Text Canvas to better match the theme for improved visual consistency.
---
 src/sass/elements/_canvas.scss | 66 ++++++++++++++++++----------------
 1 file changed, 35 insertions(+), 31 deletions(-)

diff --git a/src/sass/elements/_canvas.scss b/src/sass/elements/_canvas.scss
index 75d90ae5..8119c64a 100644
--- a/src/sass/elements/_canvas.scss
+++ b/src/sass/elements/_canvas.scss
@@ -1,41 +1,39 @@
 /* ______ CODE CANVAS: CM CodeMirror EDITOR */
 
-#codemirror {
 
-    .cm-editor {
-
-        // .ΝΌ1p.cm-focused .cm-selectionBackground, .ΝΌ1p .cm-line::selection, .ΝΌ1p .cm-selectionLayer .cm-selectionBackground, .ΝΌ1p .cm-content ::selection {
-        //     background: #6199ff2f !important;
-        // }
-        .cm-content {
-            caret-color: var(--c-accent) !important;
-
-            ::selection,
-            .cm-selectionLayer .cm-selectionBackground,
-            // .cm-line span.cm-focused .cm-selectionBackground,
-            .cm-line > *::selection,
-            .cm-line::selection {
-                // background: var(--c-accent) !important;
-                // color: var(--c-on-accent) !important;
-                background: hsla(var(--accent-hsl) / .14) !important;
-                color: var(--c-accent) !important;
-            }
+.cm-editor {
+
+    // .ΝΌ1p.cm-focused .cm-selectionBackground, .ΝΌ1p .cm-line::selection, .ΝΌ1p .cm-selectionLayer .cm-selectionBackground, .ΝΌ1p .cm-content ::selection {
+    //     background: #6199ff2f !important;
+    // }
+    .cm-content {
+        caret-color: var(--c-accent) !important;
+
+        ::selection,
+        .cm-selectionLayer .cm-selectionBackground,
+        // .cm-line span.cm-focused .cm-selectionBackground,
+        .cm-line > *::selection,
+        .cm-line::selection {
+            // background: var(--c-accent) !important;
+            // color: var(--c-on-accent) !important;
+            background: hsla(var(--accent-hsl) / .14) !important;
+            color: var(--c-accent) !important;
         }
+    }
 
-        &,
-        .cm-gutters {
-            background-color: var(--c-bg-cm) !important;
-        }
+    &,
+    .cm-gutters {
+        background-color: var(--c-bg-cm) !important;
+    }
 
-        .cm-activeLineGutter {
-            background-color: hsla(var(--accent-hsl) / .2) !important;
-            color: var(--c-accent) !important;
-        }
+    .cm-activeLineGutter {
+        background-color: hsla(var(--accent-hsl) / .2) !important;
+        color: var(--c-accent) !important;
+    }
 
-        .cm-line {
-            [class^="_modelCursor"]::after {
-                color: var(--c-accent);
-            }
+    .cm-line {
+        [class^="_modelCursor"]::after {
+            color: var(--c-accent);
         }
     }
 }
@@ -47,6 +45,12 @@
     .from-token-main-surface-primary {
         --main-surface-primary: var(--c-bg-cm) !important;
     }
+
+    .cm-editor {
+        background-color: var(--c-surface-2) !important;
+        border-radius: var(--br);
+        border: 1px solid var(--c-border);
+    }
 }
 
 /* Canvas with CodeMirror (for code) and ProseMirror (for text) showed on the left (when open canvas) 

From f40019dcb5fa11e32f7513b86e36adb1f7a587db Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Sun, 15 Dec 2024 15:35:39 +0100
Subject: [PATCH 43/44] fix(canvas/chats): ensure chat bubbles design is
 consistent in all scenarios (#86)

- Update the `[data-message-author-role='assistant']` selector to target GPT chat bubbles with `.agent-turn`
- Ensure chat bubbles maintain their design when editing is stopped or when there is only one line in the chat bubble
- This was specially noticable and not so pleasent in =< `md` bp when canvas is opened or in smaller screen sizes

Changes summary:
    - Fixed the issue where chat bubbles did not have the correct design in certain scenarios, such as when editing is stopped or when there is only one line in the chat bubble, by updating the selector to target GPT chat bubbles with `.agent-turn`.
---
 src/sass/elements/_right--main.scss | 56 +++++------------------------
 1 file changed, 9 insertions(+), 47 deletions(-)

diff --git a/src/sass/elements/_right--main.scss b/src/sass/elements/_right--main.scss
index aec095b8..f301a07d 100644
--- a/src/sass/elements/_right--main.scss
+++ b/src/sass/elements/_right--main.scss
@@ -257,7 +257,10 @@ main [role='presentation'] {
 	}
 
 	/* @ RIGHT - CHATS BUBBLES - GPT */
-	&:has([data-message-author-role='assistant']) {
+	// &:has([data-message-author-role='assistant']) {
+	// ! I HAVE TO CHANGE THE ASSISTENT SELECTOR to ".agent-turn" BCS IT DOESNT EXIST AT SOME SCENARIOS (e.g. when there is canvas only ([id^="textdoc-message"]), without markdown too, when the user stop py Code canvas editing, etc...
+	&:has(.agent-turn) {
+		// border: 2px solid red !important;
 
 		/* ! Without this there was strange issue with User's chat overlaping the menu for "GPT-4" or "GPT-3.5" to choose model in gpt's chat bubble' footer - ONLY FOR MOBILE which is even more strange!!! 
 		Ako neogranicimo ovo samo za mobile, na desktopu ce GPT chat da ide preko sticky headera!! Dok je u mobile ok valjda */
@@ -268,9 +271,10 @@ main [role='presentation'] {
 		}
 
 		/*   RIGHT - CHATS BUBBLE BG 
-		- Adding .markdown here fix flash background of user chat bubble on first message */
-		// & > div.text-base > div[class*="xl:max-w-[48rem]"] {
-		& > div.text-base > div:first-child:has(.markdown) {
+		& > div.text-base > div[class*="xl:max-w-[48rem]"] { // ovo ne moze jer za mobile nema ove klase vec samo md:max-w-3xl
+		& > div.text-base > div[class*="md:max-w-3xl"] {
+		// ? Adding .markdown here fix flash background of user chat bubble on first message */
+		& > div.text-base > div:first-child:has(.markdown, [id^="textdoc-message"]) {
 
 			--pt-multiplier: 1.3;
 			background-color: var(--c-bg-msg-gpt);
@@ -537,46 +541,4 @@ body > .fixed.top-8.right-4 {
 		--text-primary: var(--c-on-accent) !important;
 		border-color: var(--c-accent) !important;
 	}
-}
-
-
-// @container article (max-width: $sm) {
-
-// 	[data-testid^='conversation-turn-'] {
-
-// 		& > div {
-// 			--px-chat-bubble-edge-gap: 0.4rem !important;
-// 		}
-
-// 		.mx-auto.flex.flex-1.text-base[class*="md:max-w-3xl"] {
-// 			--p-chat-bubble: 0.5rem !important;
-// 			--br-chat-bubble: var(--br) !important;
-// 			// background-color: red !important;
-// 			// border: 4px solid orange !important;
-// 			width: 100% !important;
-
-// 			.flex-shrink-0.flex.flex-col.items-end:has(.gizmo-bot-avatar, .gizmo-shadow-stroke) {
-// 				// background-color: red !important;
-// 				display: none !important;
-// 			}
-
-// 		}
-
-// 		&:has([data-message-author-role='user']) [class*='bg-token-message-surface'] {
-// 			width: 100% !important;
-// 			max-width: 100% !important;
-// 		}
-
-// 		&:has([data-message-author-role='assistent']) {
-// 			border: 2px solid red !important;
-// 		}
-
-// 	}
-
-// 	[data-testid^="conversation-turn-"]:has([data-message-author-role="assistant"]) > div.text-base > div:first-child:has(.markdown) .agent-turn.relative.flex.w-full.flex-col {
-// 		width: 100% !important;
-// 		border: 2px solid red !important;
-
-// 	}
-
-// }
\ No newline at end of file
+}
\ No newline at end of file

From 16d56fb2c8d1481932c496768a315e9ce7e2b208 Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Sun, 15 Dec 2024 17:50:09 +0100
Subject: [PATCH 44/44] fix(gpth/colors): correct typo in `Reset Fonts` btn to
 `Reset Colors`

- Change the button text from "Reset Fonts" to "Reset Colors" in the Colors customization settings

Changes summary:
    - Fixed the typo in the "Reset Fonts" button to "Reset Colors" in the Colors customization settings for clarity and accuracy.
---
 src/js/app/mainColors.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/js/app/mainColors.js b/src/js/app/mainColors.js
index 512af506..c4c9e3b0 100644
--- a/src/js/app/mainColors.js
+++ b/src/js/app/mainColors.js
@@ -28,7 +28,7 @@ const renderColorsTab = `
`