From 3ee30bb29cbb450cbbe25dc21099595381b80fb7 Mon Sep 17 00:00:00 2001 From: Daniel Marques Date: Thu, 4 May 2023 14:21:08 +0100 Subject: [PATCH] Improved Cody header logo and layout details (#51348) Adds style fixes to the header of cody. ![pr_cody](https://user-images.githubusercontent.com/7814431/235649828-269f108f-ef4c-449a-84af-9a1f5f880f8e.png) **Changes:** - Replaces logo with new version with better kerning and spacings (thx @toolmantim) - Adds a muted Sourcegraph logo in order to keep our brand present - Tones down "experimental badge" - Aligns the header with the title bar of the sidebar (now uses 20px padding, what the title bar also uses) ## Test plan Tested different color schemes and themes, seems to be somewhat consistent no matter the theme chosen by the user. Screenshot 2023-05-02 at 12 04 58 Screenshot 2023-05-02 at 12 05 09 Some issues with the SG logo in more aggressive Themes, but the Cody logo works in any theme it seems --------- Co-authored-by: Tim Lucas Co-authored-by: Beatrix --- client/cody-ui/src/utils/icons.tsx | 184 +++++++++++++++++-------- client/cody/webviews/App.css | 3 +- client/cody/webviews/Header.module.css | 40 ++---- client/cody/webviews/Header.tsx | 14 +- client/cody/webviews/NavBar.module.css | 36 ++--- client/cody/webviews/NavBar.tsx | 4 +- 6 files changed, 166 insertions(+), 115 deletions(-) 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 && ( )}