Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make the Enterprise login button more prominent #2672

Merged
merged 6 commits into from
Jan 11, 2024
Merged

Make the Enterprise login button more prominent #2672

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ddeb231
Bigger Enterprise login button
toolmantim Jan 11, 2024
02547c3
Merge branch 'main' into tl/bigger-enterprise-login-buttons
toolmantim Jan 11, 2024
3983590
No 'Use'
toolmantim Jan 11, 2024
2c2101d
Lint
toolmantim Jan 11, 2024
182d6c4
Fix auth success assertion
toolmantim Jan 11, 2024
335ce26
Changelog
toolmantim Jan 11, 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
2 changes: 2 additions & 0 deletions vscode/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ This is a log of all notable changes to Cody for VS Code. [Unreleased] changes a

### Changed

- Made the Enterprise login button more prominent. [pull/2672](https://github.com/sourcegraph/cody/pull/2672)

## [1.1.1]

### Fixed
Expand Down
2 changes: 1 addition & 1 deletion vscode/test/e2e/auth.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,6 @@ test('requires a valid auth token and allows logouts', async ({ page, sidebar })
await signOut(page)

const sidebarFrame = page.frameLocator('iframe.webview').frameLocator('iframe').first()
await expect(sidebarFrame.getByRole('heading', { name: 'Sign In to Get Started' })).toBeVisible()
await expect(sidebarFrame.getByRole('button', { name: 'Sign In to Your Enterprise Instance' })).toBeVisible()
await assertEvents(loggedEvents, expectedEvents)
})
62 changes: 18 additions & 44 deletions vscode/webviews/OnboardingExperiment.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@
color: var(--vscode-editor-foreground);
}

.sections-container {
flex: 1;
}

.logo {
margin-bottom: 1rem;
}
Expand All @@ -25,52 +29,34 @@
width: 100%;
}

.section.auth-method-screen {
.section {
background: var(--vscode-sideBar-background);
color: var(--vscode-sideBar-foreground);
border: 1px solid var(--vscode-widget-border);
box-shadow: 0 2px 16px 0 var(--vscode-widget-shadow);
border-radius: 4px;
margin-bottom: var(--spacing);
padding: var(--spacing);
}

@media (min-width: 640px) {
.section.auth-method-screen {
@media (width >= 640px) {
.section {
width: fit-content;
min-width: 300px;
}
}

.auth-method-screen h1 {
font-size: 1.2em;
.section h1 {
font-size: 14px;
font-weight: 500;
line-height: 1;
margin: 0 0 0.75rem 0;
margin: 0 0 0.75rem;
}

.auth-method-screen .button {
font-weight: 500;
}

.sections-container {
flex: 1;
}

.section {
border: 0.1em solid;
border-width: 0.1em;
margin-bottom: var(--spacing);
padding: var(--spacing);
}

.other-sign-in-options h2 {
font-size: inherit;
font-weight: 500;
margin: 0;
opacity: 80%;
}

.other-sign-in-options p {
margin: 0.33rem 0 0 0;
.section p {
margin: 15px 0 0;
font-size: 12px;
opacity: 0.8;
}

.button {
Expand All @@ -83,15 +69,15 @@
margin-right: auto;
}

@media (min-width: 640px) {
@media (width >= 640px) {
.button {
margin-left: 0;
}
}

.terms {
font-size: 90%;
opacity: 80%;
opacity: 0.8;
margin-bottom: 0.5rem;
line-height: 1.4;
}
Expand All @@ -100,15 +86,3 @@
width: 16px;
margin-inline-end: 0.5rem;
}

/* To suppress jsx-eslint/anchor-is-valid. */
.link-button {
background-color: transparent;
color: var(--vscode-textLink-foreground);
border: none;
cursor: pointer;
display: inline;
margin: 0;
padding: 0;
line-height: 1;
}
20 changes: 12 additions & 8 deletions vscode/webviews/OnboardingExperiment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { VSCodeButton } from '@vscode/webview-ui-toolkit/react'
import classNames from 'classnames'

import { type TelemetryService } from '@sourcegraph/cody-shared/src/telemetry'

Expand Down Expand Up @@ -73,8 +72,8 @@ export const LoginSimplified: React.FunctionComponent<React.PropsWithoutRef<Logi
<div className={styles.container}>
<div className={styles.sectionsContainer}>
<img src={onboardingSplashImage} alt="Hi, I'm Cody" className={styles.logo} />
<div className={classNames(styles.section, styles.authMethodScreen)}>
<h1>Sign In to Get Started</h1>
<div className={styles.section}>
<h1>Cody Free or Cody Pro</h1>
<div className={styles.buttonWidthSizer}>
<div className={styles.buttonStack}>
{uiKindIsWeb ? (
Expand Down Expand Up @@ -119,12 +118,17 @@ export const LoginSimplified: React.FunctionComponent<React.PropsWithoutRef<Logi
</div>
</div>
</div>
<div className={styles.otherSignInOptions}>
<h2>Using Sourcegraph Enterprise?</h2>
<div className={styles.section}>
<h1>Cody Enterprise</h1>
<div className={styles.buttonWidthSizer}>
<div className={styles.buttonStack}>
<VSCodeButton className={styles.button} type="button" onClick={otherSignInClick}>
Sign In to Your Enterprise&nbsp;Instance
</VSCodeButton>
</div>
</div>
<p>
<button type="button" className={styles.linkButton} onClick={otherSignInClick}>
Sign In to Your Enterprise Instance
</button>
Learn more about <a href="https://sourcegraph.com/cloud">Sourcegraph Enterprise</a>
</p>
</div>
</div>
Expand Down
Loading