Merge pull request #60 from itsmartashub/fix/new-chat-layout

[59] Apply the extension's theme styles to the new `New Chat` layout
itsmartashub · Oct 10, 2024 · aa9223f · aa9223f
2 parents 71cd014 + 0d6146f
commit aa9223f
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 14 deletions.
diff --git a/src/sass/elements/_right--new-chat.scss b/src/sass/elements/_right--new-chat.scss
@@ -6,16 +6,17 @@ main [role='presentation'] {
 			hsla(var(--accent-hsl) / 0.04) 40% 60%,
 			hsla(var(--accent-hsl) / 0.16) 100%);
 
-
+	/* New "New Chat" layout prompt action cards */
+	// div.w-full:has(> form #prompt-textarea) + div.hidden ul > li > button,
+	/* Classic big "New Chat" layout prompt example cards */
 	button.relative.flex.w-40.flex-col.rounded-2xl.border-token-border-light,
 	button.relative.whitespace-nowrap.rounded-2xl.border-token-border-light.text-start.align-top.shadow-xxs.transition.enabled\:hover\:bg-token-main-surface-secondary.disabled\:cursor-not-allowed {
 
-		--clr: hsla(var(--accent-hsl) / 0.08);
+		--clr: hsla(var(--accent-hsl) / 0.12);
 		border: 1px solid var(--clr) !important;
-		background-image: var(--c-bg-gradient);
-
-		color: var(--c-accent);
-		transition: background-color 0.3s ease, color 0.3s ease;
+		background-image: var(--c-bg-gradient) !important;
+		color: var(--c-accent) !important;
+		transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s;
 
 		.text-gray-600 {
 			--c-subtext-2: currentColor;
@@ -27,14 +28,46 @@ main [role='presentation'] {
 		}
 
 		&:hover {
-			background-color: var(--c-accent) !important;
-			color: var(--c-on-accent) !important;
+			transform: scale(0.97);
+		}
+	}
+
+	h1,
+	.text-token-text-primary > div.flex-shrink-0 > svg[role='img'] {
+		color: var(--c-accent) !important;
+	}
+}
+
+/* New "New Chat" layout prompt action cards */
+main [role='presentation'] div.w-full:has(> form #prompt-textarea) + div.hidden ul > li > button {
+	/* --c-bg-gradient: transparent !important;
+	--clr: hsla(var(--accent-hsl) / 0.2) !important; */
+	border: 1px solid hsla(var(--accent-hsl) / 0.12) !important;
+
+	&:hover {
+		color: var(--c-accent) !important;
+		transform: scale(0.97);
+
+		.text-gray-600 {
+			--c-subtext-2: currentColor;
+		}
 
-			.text-gray-600 {
-				--c-subtext-2: var(--c-on-accent) !important;
-			}
+		svg {
+			color: currentColor !important;
+			transition: none;
 		}
 	}
 }
 
-// .text-[15px]
+html.light main [role='presentation'] div.w-full:has(> form #prompt-textarea) + div.hidden ul > li > button {
+	color: var(--c-accent) !important;
+
+	.text-gray-600 {
+		--c-subtext-2: currentColor;
+	}
+
+	svg {
+		color: currentColor !important;
+		transition: none;
+	}
+}
diff --git a/src/sass/elements/_right--textarea.scss b/src/sass/elements/_right--textarea.scss
@@ -75,6 +75,36 @@ main form {
 				border-radius: 10px !important;
 			}
 		}
+
+		/* new NEW CHAT layout - Element when clicked example cards below prompt textarea: "Create image", "Summarize text", "Analyze data", "Analyze images", and more... */
+		& + .absolute.left-0.top-full:has(ul) {
+			// background-color: var(--c-bg-chats-container);
+			margin-top: 0.2rem;
+			padding: 0 !important;
+			border-radius: var(--br-btn-big);
+			background-color: hsla(var(--accent-hsl) / 0.08) !important;
+			backdrop-filter: blur(20px);
+
+			/* List of examples when clicked some of the cards below prompt field: "Summarize notes from a meeting", "Summarize my lease agreemen", etc */
+			ul > li > button {
+				background: transparent !important;
+
+				/* "Summarize" or "Analyze" etc */
+				span.text-token-text-tertiary {
+					--text-tertiary: var(--c-accent) !important;
+				}
+
+				/* The rest of the sentence after the word "Summarize", "Analyze" etc */
+				span.text-token-text-primary {
+					font-weight: 500;
+				}
+
+				&:hover {
+					background-color: hsla(var(--accent-hsl) / 0.12) !important;
+					transform: translateY(-2px);
+				}
+			}
+		}
 	}
 
 
@@ -99,8 +129,6 @@ main form {
 			padding: var(--p-btn) !important;
 		}
 
-		// .bg-token-main-surface-primary {
-		// }
 
 		/* @mentions - GPTs list, scrollable product parent */
 		.max-h-40.overflow-y-auto {

diff --git a/src/sass/global/_colors-txts.scss b/src/sass/global/_colors-txts.scss
@@ -72,4 +72,9 @@
 /* Intro page (before login) */
 [class*='text-[#FE7600]'] {
 	color: var(--c-accent) !important;
+}
+
+/* "Attach files" svg background circled div when clicked some of the new "New Chat" layout prompt action cards (Like "Summarize text", "Analyze images", etc. */
+.bg-brand-blue-800\/20 {
+	background-color: hsla(var(--accent-hsl) / 0.12) !important;
 }