mirror of
https://github.com/sourcegraph/sourcegraph.git
synced 2026-02-06 17:31:43 +00:00
fix(plg): banner styles (#63287)
Adresses [UI feedback](https://www.figma.com/design/FMSdn1oKccJRHQPgf7053o/Cody-PLG-GA?node-id=5472-12492&t=ndgEZFI57dVTIBpo-4) on https://github.com/sourcegraph/sourcegraph/pull/63231 |Description|Before|After| |--|--|--| | Change dismiss button variant from "secondary" to "link" |<img width="1516" alt="Screenshot 2024-06-14 at 14 34 30" src="https://github.com/sourcegraph/sourcegraph/assets/25318659/d6b53dc4-c7df-45eb-a743-9baddfdd8aa3">|<img width="1170" alt="Screenshot 2024-06-17 at 12 35 53" src="https://github.com/sourcegraph/sourcegraph/assets/25318659/6778a4bf-9a03-4c3b-a83c-57777859b7f1">| | Fix banner content alignment |<img width="1516" alt="Screenshot 2024-06-14 at 14 35 41" src="https://github.com/sourcegraph/sourcegraph/assets/25318659/eaa871ce-acd3-4a7e-a25c-74011a42af58"><img width="1516" alt="Screenshot 2024-06-14 at 14 38 42" src="https://github.com/sourcegraph/sourcegraph/assets/25318659/1382e5a0-4375-4002-93a4-ec25d354317f">|<img width="1165" alt="Screenshot 2024-06-17 at 12 31 14" src="https://github.com/sourcegraph/sourcegraph/assets/25318659/532930ff-8471-46d8-83c0-f2bbeb1a8bcd">| <!-- 💡 To write a useful PR description, make sure that your description covers: - WHAT this PR is changing: - How was it PREVIOUSLY. - How it will be from NOW on. - WHY this PR is needed. - CONTEXT, i.e. to which initiative, project or RFC it belongs. The structure of the description doesn't matter as much as covering these points, so use your best judgement based on your context. Learn how to write good pull request description: https://www.notion.so/sourcegraph/Write-a-good-pull-request-description-610a7fd3e613496eb76f450db5a49b6e?pvs=4 --> ## Test plan - Tested manually (screenshots attached) <!-- All pull requests REQUIRE a test plan: https://docs-legacy.sourcegraph.com/dev/background-information/testing_principles --> ## Changelog <!-- 1. Ensure your pull request title is formatted as: $type($domain): $what 2. Add bullet list items for each additional detail you want to cover (see example below) 3. You can edit this after the pull request was merged, as long as release shipping it hasn't been promoted to the public. 4. For more information, please see this how-to https://www.notion.so/sourcegraph/Writing-a-changelog-entry-dd997f411d524caabf0d8d38a24a878c? Audience: TS/CSE > Customers > Teammates (in that order). Cheat sheet: $type = chore|fix|feat $domain: source|search|ci|release|plg|cody|local|... --> <!-- Example: Title: fix(search): parse quotes with the appropriate context Changelog section: ## Changelog - When a quote is used with regexp pattern type, then ... - Refactored underlying code. -->
This commit is contained in:
Taras Yemets
GitHub
parent
8412e6b45d
commit
02e9afcbdd
@ -47,20 +47,20 @@
|
||||
.purple-cody-pro {
|
||||
/* stylelint-disable-next-line declaration-property-unit-allowed-list */
|
||||
padding-left: calc(1.5rem + 135px + 1.5rem);
|
||||
padding-bottom: 1rem;
|
||||
background-color: var(--violet-01);
|
||||
color: var(--gray-11);
|
||||
overflow: hidden;
|
||||
:global(.theme-dark) & {
|
||||
background-color: var(--pink);
|
||||
}
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
top: 1.5rem;
|
||||
left: 1.5rem;
|
||||
/* stylelint-disable-next-line declaration-property-unit-allowed-list */
|
||||
width: 135px;
|
||||
/* stylelint-disable-next-line declaration-property-unit-allowed-list */
|
||||
height: 95px;
|
||||
background-image: url('https://storage.googleapis.com/sourcegraph-assets/cody-pro-card.png');
|
||||
height: 100%;
|
||||
background-image: url('https://storage.googleapis.com/sourcegraph-assets/cody-pro-user.png');
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
@ -68,40 +68,40 @@
|
||||
.green-cody-pro {
|
||||
/* stylelint-disable-next-line declaration-property-unit-allowed-list */
|
||||
padding-left: calc(1.5rem + 135px + 1.5rem);
|
||||
padding-bottom: 1rem;
|
||||
background-color: #e0f9d5;
|
||||
color: #054410;
|
||||
overflow: hidden;
|
||||
:global(.theme-dark) & {
|
||||
background-color: #51cf66;
|
||||
}
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
top: 1.5rem;
|
||||
left: 1.5rem;
|
||||
/* stylelint-disable-next-line declaration-property-unit-allowed-list */
|
||||
width: 135px;
|
||||
/* stylelint-disable-next-line declaration-property-unit-allowed-list */
|
||||
height: 95px;
|
||||
background-image: url('https://storage.googleapis.com/sourcegraph-assets/cody-pro-card.png');
|
||||
height: 100%;
|
||||
background-image: url('https://storage.googleapis.com/sourcegraph-assets/cody-pro-user.png');
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
/* stylelint-disable-next-line declaration-property-unit-allowed-list */
|
||||
padding-left: calc(1.5rem + 124px + 1.5rem);
|
||||
padding-left: calc(2rem + 124px + 2rem);
|
||||
padding-bottom: 1rem;
|
||||
background-color: var(--oc-orange-1);
|
||||
color: var(--gray-08);
|
||||
overflow: hidden;
|
||||
:global(.theme-dark) & {
|
||||
background-color: var(--oc-orange-4);
|
||||
}
|
||||
&::after {
|
||||
left: 2rem;
|
||||
bottom: 0;
|
||||
top: 1.5rem;
|
||||
left: 1.5rem;
|
||||
height: 100%;
|
||||
/* stylelint-disable-next-line declaration-property-unit-allowed-list */
|
||||
width: 124px;
|
||||
/* stylelint-disable-next-line declaration-property-unit-allowed-list */
|
||||
height: 95px;
|
||||
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 124 99"><g filter="url(%23a)"><path fill="%23D9D9D9" fill-rule="evenodd" d="M10.86 5c-3.32 0-6 3.22-6 7.19v124.62c0 3.97 2.68 7.19 6 7.19h102c3.31 0 6-3.22 6-7.19V12.19c0-3.97-2.69-7.19-6-7.19h-102Zm44.82 11.17c-1.65 0-3 1.6-3 3.59 0 1.98 1.35 3.58 3 3.58h12.36c1.65 0 2.99-1.6 2.99-3.58s-1.34-3.59-3-3.59H55.69Z" clip-rule="evenodd"/><path fill="%23EFF2F5" fill-rule="evenodd" d="M10.86 5c-3.32 0-6 3.22-6 7.19v124.62c0 3.97 2.68 7.19 6 7.19h102c3.31 0 6-3.22 6-7.19V12.19c0-3.97-2.69-7.19-6-7.19h-102Zm44.82 11.17c-1.65 0-3 1.6-3 3.59 0 1.98 1.35 3.58 3 3.58h12.36c1.65 0 2.99-1.6 2.99-3.58s-1.34-3.59-3-3.59H55.69Z" clip-rule="evenodd"/><path fill="%23fff" fill-opacity=".2" fill-rule="evenodd" d="M10.86 5c-3.32 0-6 3.22-6 7.19v124.62c0 3.97 2.68 7.19 6 7.19h102c3.31 0 6-3.22 6-7.19V12.19c0-3.97-2.69-7.19-6-7.19h-102Zm44.82 11.17c-1.65 0-3 1.6-3 3.59 0 1.98 1.35 3.58 3 3.58h12.36c1.65 0 2.99-1.6 2.99-3.58s-1.34-3.59-3-3.59H55.69Z" clip-rule="evenodd"/><path fill="url(%23b)" fill-rule="evenodd" d="M10.86 5c-3.32 0-6 3.22-6 7.19v124.62c0 3.97 2.68 7.19 6 7.19h102c3.31 0 6-3.22 6-7.19V12.19c0-3.97-2.69-7.19-6-7.19h-102Zm44.82 11.17c-1.65 0-3 1.6-3 3.59 0 1.98 1.35 3.58 3 3.58h12.36c1.65 0 2.99-1.6 2.99-3.58s-1.34-3.59-3-3.59H55.69Z" clip-rule="evenodd"/><path stroke="%23000" stroke-opacity=".16" stroke-width=".4" d="M5.06 12.19c0-3.9 2.63-6.99 5.8-6.99h102c3.17 0 5.8 3.1 5.8 6.99v124.62c0 3.9-2.63 6.99-5.8 6.99h-102c-3.17 0-5.8-3.1-5.8-6.99V12.19Zm50.62 3.78c-1.8 0-3.2 1.73-3.2 3.79 0 2.05 1.4 3.78 3.2 3.78h12.36c1.8 0 3.19-1.73 3.19-3.78 0-2.06-1.4-3.79-3.2-3.79H55.69Z"/><path fill="%23DBE2F0" d="M63.67 69.33h-3.34v-6.66h3.34v6.66Zm0 6.67h-3.34v-3.33h3.34V76Zm-20 5h36.66L62 49.33 43.67 81Z"/></g><defs><linearGradient id="b" x1="62.09" x2="62.09" y1="137.07" y2="5" gradientUnits="userSpaceOnUse"><stop offset=".43" stop-color="%23fff"/><stop offset="1" stop-color="%23fff" stop-opacity="0"/></linearGradient><filter id="a" width="123" height="148" x=".36" y=".5" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feMorphology in="SourceAlpha" operator="dilate" radius="1" result="effect1_dropShadow_5081_15909"/><feOffset/><feGaussianBlur stdDeviation="1.75"/><feColorMatrix values="0 0 0 0 0.141522 0 0 0 0 0.159783 0 0 0 0 0.21 0 0 0 0.31 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_5081_15909"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_5081_15909" result="shape"/></filter></defs></svg>');
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('https://storage.googleapis.com/sourcegraph-assets/cody-plg-banner-error.png');
|
||||
}
|
||||
}
|
||||
|
||||
@ -115,7 +115,7 @@ const AcceptInviteBannerContent: React.FC<{
|
||||
Accept
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
variant="link"
|
||||
disabled={acceptInviteMutation.isPending || cancelInviteMutation.isPending}
|
||||
onClick={() =>
|
||||
cancelInviteMutation.mutate(
|
||||
@ -141,8 +141,10 @@ const AcceptInviteBannerContent: React.FC<{
|
||||
<H1 as="p" className="mb-2">
|
||||
Issue with invite
|
||||
</H1>
|
||||
<Text>You've been invited to a Cody Pro team by {inviteState.sentBy}.</Text>
|
||||
<Text className="mb-0">You cannot accept this invite as as you are already on this team.</Text>
|
||||
<Text className="mb-0">
|
||||
You've been invited to a Cody Pro team by {inviteState.sentBy}.<br />
|
||||
You cannot accept this invite as as you are already on this team.
|
||||
</Text>
|
||||
</CodyAlert>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user