diff --git a/client/cody-ui/src/utils/icons.tsx b/client/cody-ui/src/utils/icons.tsx index ba16e9dccc1..6c1e7a26567 100644 --- a/client/cody-ui/src/utils/icons.tsx +++ b/client/cody-ui/src/utils/icons.tsx @@ -3,33 +3,47 @@ import React from 'react' export const CodyColoredSvg = React.memo<{ className?: string }>(function CodySvg({ className }) { return ( - - - - - + + + + + + + ) }) @@ -65,35 +79,95 @@ export const CodySvg = React.memo<{ className?: string }>(function CodySvg({ cla ) }) -export const ResetSvg = React.memo(() => ( -
-
- -
-
-)) +export const SubmitSvg = React.memo<{ className?: string }>(function CodySvg({ className }) { + return ( + + + + ) +}) -export const ResetIcon = React.memo(() => ( - - - - -)) - -export const SubmitSvg = React.memo(() => ( - - - -)) +export const SourcegraphLogoMuted = React.memo<{ className?: string }>(function CodySvg({ className }) { + return ( + + + + + + + + + + + + + + + + + + + ) +}) diff --git a/client/cody/webviews/App.css b/client/cody/webviews/App.css index e807cc52912..3fd38bbc3ec 100644 --- a/client/cody/webviews/App.css +++ b/client/cody/webviews/App.css @@ -1,6 +1,5 @@ .outer-container { background-color: var(--vscode-sideBar-background); - border-top: 1px solid var(--vscode-sideBarSectionHeader-border); width: 100%; height: 100%; display: flex; @@ -45,4 +44,4 @@ button { border: none; color: var(--vscode-input-foreground); cursor: pointer; -} +} \ No newline at end of file diff --git a/client/cody/webviews/Header.module.css b/client/cody/webviews/Header.module.css index dfc0abb4cdf..45cbf6f4793 100644 --- a/client/cody/webviews/Header.module.css +++ b/client/cody/webviews/Header.module.css @@ -1,40 +1,24 @@ -.header-container { +.container { display: flex; justify-content: space-between; font-family: var(--vscode-font-family); border-bottom: 1px solid var(--vscode-sideBarSectionHeader-border); - padding: 1rem; + padding: 12px 20px; color: var(--vscode-sideBarTitle-foreground); } -.header-container-left, -.header-container-right { - display: flex; - align-items: center; +.logo { + /* Slight optical fix to ensure it aligns with standard padding */ + margin-left: -3px; } -.reset-conversation { - margin: 0; - cursor: pointer; +.logo svg { + /* Resize it down from 24px to 20px height (1rem) */ + transform: scale(calc(20/24)); } -.header-title { - color: var(--vscode-sideBarTitle-foreground); - font-size: calc(var(--vscode-font-size) * 2); - display: flex; - align-items: center; - margin-left: 0.5rem !important; -} - -.header-title > span { - margin-right: 0.5rem !important; -} - -.header-logo { - position: relative; - display: flex; - align-items: center; - justify-content: flex-start; - width: calc(var(--vscode-font-size) * 2.5); - height: var(--vscode-font-size); +@media screen and (max-width: 250px) { + .tag { + display: none; + } } diff --git a/client/cody/webviews/Header.tsx b/client/cody/webviews/Header.tsx index ede200371f3..0dc139a6dc9 100644 --- a/client/cody/webviews/Header.tsx +++ b/client/cody/webviews/Header.tsx @@ -5,16 +5,10 @@ import { CodyColoredSvg } from '@sourcegraph/cody-ui/src/utils/icons' import styles from './Header.module.css' export const Header: React.FunctionComponent = () => ( -
-
-
- -
-
- Cody - experimental -
+
+
+
-
+ experimental
) diff --git a/client/cody/webviews/NavBar.module.css b/client/cody/webviews/NavBar.module.css index fa329782bc2..71d4a207bf8 100644 --- a/client/cody/webviews/NavBar.module.css +++ b/client/cody/webviews/NavBar.module.css @@ -1,14 +1,15 @@ .tab-menu-container { - width: 100%; flex-direction: row; display: flex; - margin: 0; - padding: 0.5em 0; border-bottom: 1px solid var(--vscode-sideBarSectionHeader-border); background-color: var(--vscode-tab-inactiveBackground); - justify-content: space-between; - align-items: center; - height: 2rem; +} + +.tab-menu-group { + display: flex; + flex-direction: row; + padding-left: 8px; + margin-bottom: -1px; } .tab-btn { @@ -17,21 +18,20 @@ background-color: transparent; color: var(--vscode-tab-inactiveForeground); border: none; + padding: 0 8px; } -.tab-btn-selected { +.tab-btn span { + display: inline-block; + padding: 10px 2px; + border-bottom: 1px solid transparent; +} + +.tab-btn:hover { color: var(--vscode-tab-activeForeground); - font-weight: bold; } -.tab-menu-group { - display: flex; - gap: 2rem; - flex-direction: row; - padding: 0px 1rem; -} - -.reset-conversation > svg { - width: calc(var(--vscode-font-size) * 1.5); - height: calc(var(--vscode-font-size) * 1.5); +.tab-btn .tab-btn-selected { + color: var(--vscode-tab-activeForeground); + border-bottom-color: var(--vscode-tab-activeBorderTop); } diff --git a/client/cody/webviews/NavBar.tsx b/client/cody/webviews/NavBar.tsx index 2e6d7d24b50..774ec46cc8a 100644 --- a/client/cody/webviews/NavBar.tsx +++ b/client/cody/webviews/NavBar.tsx @@ -25,12 +25,12 @@ export const NavBar: React.FunctionComponent {navBarItems.map(({ title, tab }) => ( ))} {devMode && ( )}