artin/sourcegraph
1
0
Fork 0
mirror of https://github.com/sourcegraph/sourcegraph.git synced 2026-02-06 16:51:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix modal onboarding styles (#58997)

Browse Source 
* Fix modal onboarding styles

* Fix css lint problems
This commit is contained in:
Vova Kulikov 2023-12-14 12:41:39 -03:00 committed by GitHub
parent 6d55f42137
commit a73c4d3579
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 48 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
client/web/src/cody/onboarding/CodyOnboarding.module.scss
View File

@ -1,3 +1,15 @@
.root {
:global(.theme-dark) & {
background: linear-gradient(180deg, rgba(17, 20, 27, 0.92) 0%, rgba(13, 16, 25, 0.92) 100%);
backdrop-filter: blur(7px);
}
:global(.theme-light) & {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(244, 244, 244, 0.9) 100%);
backdrop-filter: blur(7px);
}
}
.modal {
width: 54rem;
border-radius: 6px;
@ -18,19 +30,29 @@
/* to let gradient shadow be behind the modal */
transform-style: preserve-3d;
}
/* Colorful shadow on the modali */
.modal::after {
content: '';
position: absolute;
width: 90%;
height: 2.8125rem;
background: linear-gradient(90deg, #7048e8 0%, #4ac1e8 32.21%, #4d0b79 65.39%, #ff5543 104.43%), #eff2f5;
transform: translateZ(-1px);
filter: blur(30px);
opacity: 0.9;
animation: modal-shadow 6s ease-in-out infinite;
/* Colorful shadow on the modal */
&::after {
content: '';
position: absolute;
width: 90%;
height: 2.8125rem;
background: linear-gradient(90deg, #7048e8 0%, #4ac1e8 32.21%, #4d0b79 65.39%, #ff5543 104.43%), #eff2f5;
transform: translateZ(-1px);
filter: blur(30px);
opacity: 0.9;
animation: modal-shadow 6s ease-in-out infinite;
}
:global(.theme-dark) & {
background-image: repeating-conic-gradient(
rgba(112, 72, 232, 0.3) 50%,
rgba(0, 203, 236, 0.3) 75%,
rgba(161, 18, 255, 0.5) 100%,
rgba(255, 85, 67, 0.3) 125%,
rgba(112, 72, 232, 0.3) 150%
);
}
}
@keyframes modal-shadow {
@ -48,32 +70,14 @@
}
}
:global(.theme-dark) [data-reach-dialog-overlay] {
background: linear-gradient(180deg, rgba(17, 20, 27, 0.92) 0%, rgba(13, 16, 25, 0.92) 100%);
backdrop-filter: blur(7px);
}
.highlight-step {
:global(.theme-light) & {
background: radial-gradient(50% 100% at 50% 100%, var(--gray-04) 0%, transparent 100%);
}
:global(.theme-dark) .highlight-step {
background: radial-gradient(50% 100% at 50% 100%, var(--gray-09) 0%, transparent 100%);
}
:global(.theme-dark) .modal {
background-image: repeating-conic-gradient(
rgba(112, 72, 232, 0.3) 50%,
rgba(0, 203, 236, 0.3) 75%,
rgba(161, 18, 255, 0.5) 100%,
rgba(255, 85, 67, 0.3) 125%,
rgba(112, 72, 232, 0.3) 150%
);
}
:global(.theme-light) [data-reach-dialog-overlay] {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(244, 244, 244, 0.9) 100%);
backdrop-filter: blur(7px);
}
:global(.theme-light) .highlight-step {
background: radial-gradient(50% 100% at 50% 100%, var(--gray-04) 0%, transparent 100%);
:global(.theme-dark) & {
background: radial-gradient(50% 100% at 50% 100%, var(--gray-09) 0%, transparent 100%);
}
}
.release-stage {
@ -116,7 +120,6 @@
}
/* Initial welcome */
.welcome-title {
font-size: 2.5rem;
font-weight: 600;

8
client/web/src/cody/onboarding/CodyOnboarding.tsx
View File

@ -151,7 +151,13 @@ export function CodyOnboarding({
}
return (
<Modal isOpen={true} aria-label="Cody Onboarding" className={styles.modal} position="center">
<Modal
isOpen={true}
position="center"
aria-label="Cody Onboarding"
className={styles.modal}
containerClassName={styles.root}
>
{step === 0 && <WelcomeStep onNext={onNext} pro={enrollPro} />}
{step === 1 && (
<PurposeStep