refactor(new-chat): Add bg gradient to example button cards

- Add a background gradient to the example button cards in the new chat layout Changes summary: - Enhanced the design of example button cards in the new chat layout, introducing a dynamic and visually appealing background gradient.
itsmartashub · Aug 29, 2024 · 09d3bc7 · 09d3bc7
1 parent c57600b
commit 09d3bc7
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/src/sass/elements/_dialogs.scss b/src/sass/elements/_dialogs.scss
@@ -206,12 +206,11 @@
 		}
 	}
 
-	/* ___ Dialog - "Share Link to Chat"  */
-	&:has(input[value^="https://chatgpt.com/share/"]),
-	// "PUBLIC LINK UPDATED"
-	&:has(input[value^="https://chat.openai.com/share/"]) {
+	/* ___ Dialog - "Share Link to Chat" & "Public Link Updated" */
+	// &:has(input[value^="https://chat.openai.com/share/"]),
+	&:has(input[value^="https://chatgpt.com/share/"]) {
 
-		/* "Copy Link" btn */
+		/* "🔗 Copy Link" btn */
 		button.rounded-full {
 			border-radius: 9999px !important;
 		}

diff --git a/src/sass/elements/_right--new-chat.scss b/src/sass/elements/_right--new-chat.scss
@@ -1,13 +1,19 @@
 // /* === RIGHT - NEW CHAT - 4 BIG BTNS === */
 /* New chat prompt examples - card buttons with prompt pregenerated */
 main [role='presentation'] {
+	--c-bg-gradient: linear-gradient(-45deg,
+			hsla(var(--accent-hsl) / 0.16) 0%,
+			hsla(var(--accent-hsl) / 0.04) 40% 60%,
+			hsla(var(--accent-hsl) / 0.16) 100%);
+
 
 	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);
 		border: 1px solid var(--clr) !important;
-		background-color: var(--clr) !important;
+		background-image: var(--c-bg-gradient);
+
 		color: var(--c-accent);
 		transition: background-color 0.3s ease, color 0.3s ease;
 

diff --git a/src/sass/global/_base.scss b/src/sass/global/_base.scss
@@ -7,6 +7,7 @@ body {
 	;
 	color: var(--c-txt) !important;
 	background-color: var(--c-bg-chats-container) !important;
+	// background-image: radial-gradient(circle at 80% 30%, #72509833 0, #72509800 30%), radial-gradient(circle at 60% 40%, #3e6cb026 0, #3e6cb000 20%), radial-gradient(ellipse at 35% 80%, #0088ff26 0, #08f0 45%) !important;
 }
 
 :host,
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,6 +7,7 @@ body { @@
     	;
     	color: var(--c-txt) !important;
     	background-color: var(--c-bg-chats-container) !important;
+    	// background-image: radial-gradient(circle at 80% 30%, #72509833 0, #72509800 30%), radial-gradient(circle at 60% 40%, #3e6cb026 0, #3e6cb000 20%), radial-gradient(ellipse at 35% 80%, #0088ff26 0, #08f0 45%) !important;
     }
     :host,
@@ Expand Down @@