Skip to content
This repository was archived by the owner on Sep 30, 2024. It is now read-only.

Fix Cody Web CSS #64370

Merged
merged 3 commits into from
Aug 8, 2024
Merged

Fix Cody Web CSS #64370

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8afe313
Fix Cody Web CSS
thenamankumar Aug 8, 2024
5e3fe03
update units
thenamankumar Aug 8, 2024
ff6a2db
update color
thenamankumar Aug 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 88 additions & 8 deletions client/web-sveltekit/src/lib/cody/CodySidebarChat.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As the buttons implemented in Cody does not satisfy the design requirements and it will take longer to design them correctly, then making code changes in Cody, release Cody Web, and then finally update SG. I have been told to override the styles for buttons in SG for the patch release. And the team (me or someone else) will be follow up fixing Cody in next couple of days.

// 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);
Expand All @@ -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>
93 changes: 87 additions & 6 deletions client/web/src/cody/chat/new-chat/components/chat-ui/ChatUI.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -63,16 +73,87 @@
:global(.tw-transition-all) {
animation: none !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.
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(--secondary-2);
--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);
}

[cmdk-root] :global(.focus-visible) {
box-shadow: unset !important;
}
Loading