artin/sourcegraph
1
0
Fork 0
mirror of https://github.com/sourcegraph/sourcegraph.git synced 2026-02-06 12:51:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix Cody Web CSS (#64370)

Browse Source 
closes:
https://linear.app/sourcegraph/issue/SRCH-866/improve-cody-web-theming-for-consistency-with-rest-of-product

This PR updates the Cody Web CSS based on the changes requested by
@rrhyne.

Few buttons implemented in Cody doesn't satisfy the design requirements
and do not use the css variable so we couldn't update them easily but
rather had to override the styles.

## Test plan

Before: 
![CleanShot 2024-08-08 at 22 53
48@2x](https://github.com/user-attachments/assets/95e10b42-b740-4663-a761-69449ec62296)

After:
![CleanShot 2024-08-08 at 22 54
12@2x](https://github.com/user-attachments/assets/bffbd10a-c87b-4eca-9582-b23eebccb60e)


## Changelog

- Make Cody Web styles more accessible.
This commit is contained in:
Naman Kumar 2024-08-09 01:21:09 +05:30 committed by GitHub
parent 05ca108105
commit 2dd38b3ffd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 177 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
client/web-sveltekit/src/lib/cody/CodySidebarChat.svelte
View File

@ -1,10 +1,10 @@
<script context="module" lang="ts">
function getTelemetrySourceClient(): string {
if (window.context?.sourcegraphDotComMode) {
return 'dotcom.web'
}
return 'server.web'
}
function getTelemetrySourceClient(): string {
if (window.context?.sourcegraphDotComMode) {
return "dotcom.web";
}
return "server.web";
}
</script>
<script lang="ts">
@ -96,16 +96,26 @@
--mention-color-opacity: 100%;
// LLM picker tokens
--vscode-quickInput-background: var(--dropdown-bg);
--vscode-quickInput-background: var(--body-bg);
--vscode-dropdown-border: var(--border-color);
--vscode-dropdown-foreground: var(--body-color);
--vscode-foreground: var(--body-color);
--vscode-list-activeSelectionBackground: #e8f7ff;
--vscode-list-activeSelectionForeground: var(--primary);
--vscode-input-placeholderForeground: var(--body-color);
--vscode-button-foreground: var(--body-color);
--vscode-keybindingLabel-background: transparent;
--vscode-keybindingLabel-foreground: var(--body-color);
line-height: 1.55;
padding-bottom: 2rem;
flex: 1;
min-height: 0;
:global(button) {
opacity: 1;
}
:global(h3),
:global(h4) {
font-size: inherit;
@ -157,10 +167,71 @@
:global([cmdk-root] input:focus-visible) {
box-shadow: unset !important;
}
// As of Cody Web 0.4.0 the buttons implemented in Cody does not satisfy
// the design requirements. Hence here we are overriding the button
// styles here to fix them.
:global(button:has(h4)),
:global([cmdk-root] a) {
background-color: transparent;
color: var(--body-color);
padding: 2px 4px;
&:hover {
color: #181b26;
background-color: #eff2f5;
}
&:active {
color: #1c7ed6;
background-color: #e8f7ff;
}
&:disabled {
color: #798baf;
background-color: #798baf;
}
&:focus {
color: #181b26;
background: transparent;
box-shadow: 0 0 0 2px #a3d0ff;
}
}
:global(.theme-dark) & {
--vscode-list-activeSelectionBackground: #031824;
// As of Cody Web 0.4.0 the buttons implemented in Cody does not satisfy
// the design requirements. Hence here we are overriding the button
// styles here to fix them.
:global(button:has(h4)),
:global([cmdk-root] a) {
&:hover {
color: #e6ebf2;
background-color: #14171f;
}
&:active {
color: #1c7ed6;
background-color: #031824;
}
&:disabled {
color: #5e6e8c;
background-color: #0f111a;
}
&:focus {
color: #e6ebf2;
background: transparent;
box-shadow: 0 0 0 2px #0b4c90;
}
}
}
}
:global([data-floating-ui-portal]) {
--vscode-quickInput-background: var(--secondary-2);
--vscode-quickInput-background: var(--body-bg);
--vscode-widget-border: var(--border-color);
--vscode-list-activeSelectionBackground: var(--primary);
--vscode-foreground: var(--body-color);
@ -169,4 +240,13 @@
// Which causes glitch effect in Cody Web
--vscode-sideBar-background: transparent;
}
:global([cmdk-root]) {
--vscode-list-activeSelectionBackground: #e8f7ff;
--vscode-list-activeSelectionForeground: var(--primary);
:global(.theme-dark) & {
--vscode-list-activeSelectionBackground: #031824;
}
}
</style>

97
client/web/src/cody/chat/new-chat/components/chat-ui/ChatUI.module.scss
View File

@ -17,14 +17,24 @@
--mention-color-opacity: 100%;
// LLM picker tokens
--vscode-quickInput-background: var(--dropdown-bg);
--vscode-quickInput-background: var(--search-box-color);
--vscode-dropdown-border: var(--border-color);
--vscode-dropdown-foreground: var(--body-color);
--vscode-foreground: var(--body-color);
--vscode-list-activeSelectionBackground: #e8f7ff;
--vscode-list-activeSelectionForeground: var(--primary);
--vscode-input-placeholderForeground: var(--body-color);
--vscode-button-foreground: var(--body-color);
--vscode-keybindingLabel-background: transparent;
--vscode-keybindingLabel-foreground: var(--body-color);
line-height: 1.55;
padding-bottom: 2rem;
button {
opacity: 1;
}
h3,
h4 {
font-size: inherit;
@ -63,16 +73,87 @@
:global(.tw-transition-all) {
animation: none !important;
}
}
[data-floating-ui-portal] {
--vscode-quickInput-background: var(--secondary-2);
--vscode-widget-border: var(--border-color);
--vscode-list-activeSelectionBackground: var(--primary);
--vscode-foreground: var(--body-color);
--vscode-widget-shadow: rgba(36, 41, 54, 0.2);
// As of Cody Web 0.4.0 the buttons implemented in Cody does not satisfy
// the design requirements. Hence here we are overriding the button
// styles here to fix them.
button:has(h4),
[cmdk-root] a {
background-color: transparent;
color: var(--body-color);
// stylelint-disable-next-line declaration-property-unit-allowed-list
padding: 0.125rem 0.25rem;
&:hover {
color: #181b26;
background-color: #eff2f5;
}
&:active {
color: #1c7ed6;
background-color: #e8f7ff;
}
&:disabled {
color: #798baf;
background-color: #798baf;
}
&:focus {
color: #181b26;
background: transparent;
box-shadow: 0 0 0 2px #a3d0ff;
}
}
}
[cmdk-root] :global(.focus-visible) {
box-shadow: unset !important;
}
[cmdk-root] {
--vscode-list-activeSelectionBackground: #e8f7ff;
--vscode-list-activeSelectionForeground: var(--primary);
}
:global(.theme-dark) {
.chat,
[cmdk-root] {
--vscode-list-activeSelectionBackground: #031824;
}
// As of Cody Web 0.4.0 the buttons implemented in Cody does not satisfy
// the design requirements. Hence here we are overriding the button
// styles here to fix them.
button:has(h4),
[cmdk-root] a {
&:hover {
color: #e6ebf2;
background-color: #14171f;
}
&:active {
color: #1c7ed6;
background-color: #031824;
}
&:disabled {
color: #5e6e8c;
background-color: #0f111a;
}
&:focus {
color: #e6ebf2;
background: transparent;
box-shadow: 0 0 0 2px #0b4c90;
}
}
}
[data-floating-ui-portal] {
--vscode-quickInput-background: var(--search-box-color);
--vscode-widget-border: var(--border-color);
--vscode-list-activeSelectionBackground: var(--primary);
--vscode-foreground: var(--body-color);
--vscode-widget-shadow: rgba(36, 41, 54, 0.2);
}