Merge pull request #17 from itsmartashub/fix/gpt4o-styling

Fix all the broken styles due to new ChatGPT layout (GPT4o) #16 while maintaining backwards compatibility to support users who have not yet transitioned to the new layout.
itsmartashub · May 19, 2024 · 9d87298 · 9d87298
2 parents 6183249 + 5011a75
commit 9d87298
Show file tree

Hide file tree

Showing 24 changed files with 1,393 additions and 502 deletions.
diff --git a/src/sass/abstract/_extends.scss b/src/sass/abstract/_extends.scss
@@ -27,8 +27,8 @@
 		content: '';
 		position: absolute;
 		width: 100%;
-		height: 2px;
-		bottom: -5px;
+		height: 1.5px;
+		bottom: -4px;
 		left: 0;
 		// right: 0; /* Set right to cover the entire link */
 		background-color: currentColor;

diff --git a/src/sass/abstract/_vars.scss b/src/sass/abstract/_vars.scss
@@ -9,7 +9,8 @@
 
 	/* ? --- Border-radius --- */
 	--br: 1rem;
-	--br-chat-bubble: calc(var(--br) * 2.55);
+	--br-chat-bubble: calc(var(--br) * 1.9);
+	// --br-chat-bubble: 30px;
 	--br-prompt-textarea: calc(var(--br) * 2.25);
 	--br-btn: calc(var(--br) / 1.1);
 	--br-btn-big: calc(var(--br) * 1.2);
@@ -20,17 +21,17 @@
 	--br-tooltips: var(--br-btn);
 
 	/* ? --- Paddings --- */
-	--p-chat-bubble: 1.5rem;
+	--p-chat-bubble: 1.2rem;
 	--p-contextmenu: 0.8rem;
 	--p-contextmenu-item: 0.9rem 1rem;
 	--p-prompt-textarea: 0.7rem;
 	--p-tooltips: 0.2rem;
-	--p-btn: 0.77rem;
+	--p-btn: 0.7rem;
 	--py-btn: 1rem;
 	--px-btn: 1rem;
 
 	--p-sidebar-nav: 0.5rem;
-	--p-sidebar-nav-a-new-chat: 2rem;
+	--p-sidebar-nav-a-new-chat: 1.8rem;
 	--p-sidebar-nav-a: 0.6rem;
 	--p-dialog: 2rem;
 
@@ -76,7 +77,7 @@
 	--main-surface-secondary: var(--c-surface-2) !important;
 
 	/* ??? */
-	--main-surface-tertiary: var(--c-surface-3);
+	--main-surface-tertiary: var(--c-surface-3) !important;
 
 	/* sidebar collapse btn */
 	--text-quaternary: var(--c-surface-3) !important;
@@ -163,12 +164,11 @@ html.light {
 	/* ? ========== Layout colors ========== */
 	--c-bg-sidebar: var(--c-surface-1);
 	--c-bg-chats-container: hsl(var(--accent-h) var(--surface-s) calc(var(--surface-l) * 1.025));
-	--c-bg-chats-sticky: hsla(var(--accent-hsl) / 0.02);
+	--c-bg-chats-sticky: hsla(var(--accent-h) var(--surface-s) calc(var(--surface-l) * 1.025) / 0.02);
 
 	/* ? ========== Chat bubbles colors ========== */
 	--c-bg-msg-user: hsla(var(--accent-hsl) / 0.08);
 	--c-bg-msg-gpt: hsl(0 0% 84%);
-	--c-msg-name-user: var(--c-accent);
 
 	/* ? ========== Type message textarea colors ========== */
 	--c-bg-textarea: hsla(0, 0%, calc(var(--surface-l) / 1.05));
@@ -186,7 +186,7 @@ html.light {
 	--c-bg-tooltip: var(--c-accent-light);
 
 	/* ? ========== border colors ========== */
-	--c-border: hsla(var(--txt-hsl) / 0.05);
+	--c-border: hsla(var(--txt-hsl) / 0.08);
 	--c-border-accent: hsla(var(--accent-hsl) / 0.1);
 
 	/* ? ========== btn colors ========== */
@@ -298,12 +298,11 @@ html.dark {
 	/* ? ========== Layout colors ========== */
 	--c-bg-sidebar: var(--c-surface-1);
 	--c-bg-chats-container: hsl(var(--accent-h) var(--surface-s) calc(var(--surface-l) * 1.076));
-	--c-bg-chats-sticky: hsla(var(--surface-hsl) / 0.02);
+	--c-bg-chats-sticky: hsla(var(--accent-h) var(--surface-s) calc(var(--surface-l) * 1.076) / 0.02);
 
 	/* ? ========== Chat bubbles colors ========== */
 	--c-bg-msg-user: hsla(var(--accent-hsl) / 0.04);
 	--c-bg-msg-gpt: hsla(var(--accent-hsl) / 0.08);
-	--c-msg-name-user: var(--c-accent);
 	// --c-msg-name-gpt: var(--c-green);
 
 	/* ? ========== Type message textarea colors ========== */
@@ -439,15 +438,13 @@ html.dark[data-gptheme='oled'] {
 	// --c-bg-chats-container: var(--c-surface-2);
 	--c-bg-sidebar: black;
 	--c-bg-chats-container: black;
-	--c-bg-chats-sticky: black;
+	--c-bg-chats-sticky: rgba(0, 0, 0, 0.02);
 
 	/* ? ========== Chat bubbles colors ========== */
 	// --c-bg-msg-user: hsla(var(--accent-hsl) / 0.04);
 	// --c-bg-msg-gpt: hsla(var(--accent-hsl) / 0.08);
 	--c-bg-msg-user: hsl(var(--accent-h), calc(var(--surface-s) + 15%), calc(var(--surface-l) + 4%));
 	--c-bg-msg-gpt: hsl(var(--accent-h), calc(var(--surface-s) + 20%), calc(var(--surface-l) + 6%));
-	--c-msg-name-user: var(--c-accent);
-	// --c-msg-name-gpt: var(--c-green);
 
 	/* ? ========== Type message textarea colors ========== */
 	--c-bg-textarea: var(--c-surface-3);
@@ -463,7 +460,7 @@ html.dark[data-gptheme='oled'] {
 	--c-bg-tooltip: var(--c-accent-light);
 
 	/* ? ========== border colors ========== */
-	--c-border: var(--c-surface-3);
+	--c-border: var(--c-surface-2);
 	--c-border-accent: hsla(var(--accent-hsl) / 0.05);
 
 	/* ? ========== btn colors ========== */

diff --git a/src/sass/elements/_btn.scss b/src/sass/elements/_btn.scss
@@ -1,5 +1,7 @@
 .btn {
-	background-color: var(--c-bg-btn) !important;
+	// background-color: var(--c-bg-btn) !important;
+	// background-color: hsla(var(--accent-hsl) / 0.18);
+
 	color: var(--c-btn) !important;
 	border-radius: var(--br-btn) !important;
 	border: none !important;
@@ -8,30 +10,46 @@
 		// padding: 1.5rem !important;
 		padding: var(--p-btn) !important;
 	}
-}
 
-/* .btn-primary {
-    background-color: var(--c-bg-btn) !important;
-} */
+	&-primary {
+		background-color: var(--c-bg-btn) !important;
+	}
+	&-secondary {
+		// background-color: hsl(var(--accent-h), calc(var(--accent-s) / 1.8), var(--accent-l)) !important;
+		// background-color: hsl(var(--accent-h), calc(var(--accent-s) * 0.5), 50%) !important;
 
-.btn-danger {
-	background-color: var(--c-danger) !important;
-	color: var(--c-bg-chats-container) !important;
-}
+		// background-color: hsl(var(--accent-h), calc(var(--accent-s) * 0.3), 55%) !important;
+		// color: var(--c-txt) !important;
 
-// .btn-secondary {
-// 	background-color: red !important;
-// }
+		// background-color: transparent !important;
+		color: var(--c-accent) !important;
+		background-color: hsla(var(--accent-hsl) / 0.15) !important;
+		backdrop-filter: blur(5px);
+
+		svg {
+			// color: var(--c-accent) !important;
+			fill: var(--c-accent) !important;
+		}
+		// outline: 2px solid var(--c-accent);
+	}
+	&-danger {
+		background-color: var(--c-danger) !important;
+		color: var(--c-bg-chats-container) !important;
+	}
 
-/* === RIGHT - Scroll Down arrow bg LIGHT  === */
-// html.light main [role="presentation"] button.absolute.rounded-full {
-//     background-color: var(--c-txt) !important;
-// }
+	&-green {
+		background-color: var(--c-accent) !important;
+	}
+
+	&:not(&-secondary, &-danger, &-green) {
+		background-color: var(--c-accent) !important;
+
+		// &:hover {
+		// 	color: var(--c-accent) !important;
+		// }
+	}
+}
 
-/* === RIGHT - Scroll Down arrow bg DARK  === */
-// html.dark main [role="presentation"] button.absolute.rounded-full {
-//     background-color: var(--c-accent) !important;
-// }
 main [role='presentation'] button.absolute.rounded-full {
 	background-color: var(--c-accent) !important;
 	box-shadow: var(--box-shadow-contextmenu);
@@ -48,29 +66,32 @@ main [role='presentation'] button.absolute.rounded-full {
 		min-width: var(--min-w-btn);
 	}
 
-	&:not(.PopoverContent) .btn-neutral {
-		background-color: var(--c-surface-3) !important;
-		color: var(--c-txt) !important;
-	}
-
-	/* ".PopoverContent" je recimo menu od btn u "Shared Link to Chat" 3dots menu (Shared your Name & Delete Link) */
-	&.PopoverContent {
-		.btn-neutral {
-			background-color: transparent !important;
-			color: var(--c-txt) !important;
-		}
-	}
+	// &:not(.PopoverContent) .btn-neutral {
+	// 	background-color: var(--c-surface-3) !important;
+	// 	color: var(--c-txt) !important;
+	// }
+
+	// /* ".PopoverContent" je recimo menu od btn u "Shared Link to Chat" 3dots menu (Shared your Name & Delete Link) */
+	// &.PopoverContent {
+	// 	.btn-neutral {
+	// 		background-color: transparent !important;
+	// 		color: var(--c-txt) !important;
+	// 	}
+	// }
 }
 
 /* === Settings > Tabs === */
 [role='tablist'] button {
-	padding: var(--p-btn) !important;
+	padding: var(--p-btn);
 	background-color: transparent !important;
 
 	&[data-state='active'],
 	&:hover {
 		// TODO Ovo je ok za desktop, ali za manje je bolje surface-1. Takodje dodati horiz gap izmedju
-		background-color: var(--c-surface-3) !important;
+		// background-color: var(--c-surface-3) !important;
+		// @extend .btn-secondary;
+		background-color: var(--c-accent) !important;
+		color: var(--c-on-accent) !important;
 	}
 }
 
@@ -102,7 +123,8 @@ button[role='switch'] {
 /* === Settings > Theme selector drop down */
 button[role='combobox'] {
 	@extend .btn;
-	@extend .btn-neutral;
+	@extend .btn-secondary;
+	font-weight: 500 !important;
 	min-width: var(--min-w-btn);
 
 	/* Theme btn - fix height smaller then other btns */
@@ -113,7 +135,7 @@ button[role='combobox'] {
 /* === ❓ circle btn on bottom right */
 button[id*='headlessui-menu-button'][class*='rounded-full'] {
 	color: var(--c-txt) !important;
-	border: none !important;
+	border: 1x solid var(--c-accent) !important;
 	background-color: var(--c-surface-3) !important;
 }
 
@@ -126,3 +148,15 @@ button[class*='bg-brand-purple'] {
 	background-color: var(--c-accent) !important;
 	color: var(--c-on-accent) !important;
 }
+
+/* "Tell us more" example buttons when clicked on 👎 in GPT chat bubble and the same buttons in "Provide Additional Feedback" when clicked on "More" */
+button.border-token-border-light[class*='hover:bg-token-main-surface-secondary'] {
+	border: 1px solid hsla(var(--accent-hsl) / 0.1) !important;
+	color: var(--c-accent) !important;
+	backdrop-filter: blur(14px);
+
+	&:hover {
+		transform: translateY(-1px);
+		background-color: hsla(var(--accent-hsl) / 0.1) !important;
+	}
+}
diff --git a/src/sass/elements/_dialogs.scss b/src/sass/elements/_dialogs.scss
@@ -156,7 +156,8 @@
 
 		// bg-gradient of link preview
 		.from-token-main-surface-primary {
-			--gradient-color-from: --main-surface-primary;
+			display: none;
+			// --gradient-color-from: var(--main-surface-primary);
 		}
 
 		/* PUBLIC LINK UPDATED - Social platforms in show in footer after the  "🔗 Copy Link" btn */
@@ -274,6 +275,11 @@
 			--border-medium: transparent !important;
 		}
 
+		/* Gradient in dialog header when clicked on GPTs product, but if we add this style here it broke the gradient in "Create Link" dialog bcs there is var(--c-surface-3) (or var(--main-surface-primary) */
+		.from-token-main-surface-primary {
+			--main-surface-primary: var(--c-surface-2) !important;
+		}
+
 		/* Numbers in "Ratings" svg stars */
 		svg.text-green-500 ~ .text-white {
 			color: var(--c-on-accent) !important;
@@ -307,6 +313,14 @@
 			}
 		}
 	}
+
+	&:has(img[alt='Uploaded image']) {
+		padding: 0 !important;
+		img[alt='Uploaded image'] {
+			border-radius: var(--br-contextmenu);
+			outline: 1px solid hsla(var(--accent-hsl) / 0.5);
+		}
+	}
 }
 
 /* ! NOT WORKING - CANNOT OVERWRITE THIS WTF */