add image

This commit is contained in:
Mathew Pareles 2025-04-16 00:58:22 -07:00
parent 3bd6d08841
commit bd580946ce
2 changed files with 65 additions and 35 deletions

View file

@ -3,7 +3,7 @@
* Licensed under the Apache License, Version 2.0. See LICENSE.txt for more information.
*--------------------------------------------------------------------------------------*/
.monaco-editor .void-sweepIdxBG {
.monaco-editor .void-sweepIdxBG {
background-color: var(--vscode-void-sweepIdxBG);
}
@ -24,47 +24,65 @@
}
.void-watermark-button {
margin: 8px 0;
padding: 8px 20px;
background-color: #3b82f6;
color: white;
border: none;
border-radius: 4px;
outline: none !important;
margin: 8px 0;
padding: 8px 20px;
background-color: #3b82f6;
color: white;
border: none;
border-radius: 4px;
outline: none !important;
box-shadow: none !important;
cursor: pointer;
transition: background-color 0.2s ease;
cursor: pointer;
transition: background-color 0.2s ease;
}
.void-watermark-button:hover {
background-color: #2563eb;
background-color: #2563eb;
}
.void-watermark-button:active {
background-color: #2563eb;
background-color: #2563eb;
}
.void-settings-watermark-button {
margin: 8px 0;
padding: 8px 20px;
background-color: var(--vscode-input-background);
margin: 8px 0;
padding: 8px 20px;
background-color: var(--vscode-input-background);
color: var(--vscode-input-foreground);
border: none;
border-radius: 4px;
outline: none !important;
border: none;
border-radius: 4px;
outline: none !important;
box-shadow: none !important;
cursor: pointer;
transition: all 0.2s ease;
cursor: pointer;
transition: all 0.2s ease;
}
.void-settings-watermark-button:hover {
filter: brightness(1.1);
}
.void-settings-watermark-button:active {
filter: brightness(1.1);
}
.void-slice-of-void-image {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
max-width: 100%;
max-height: 100%;
/* Has no shadow */
background-image: url('../../../../../../../scripts/appimage/void.png');
/* Has shadow */
/* background-image: url('../../../../browser/parts/editor/media/slice_of_void.png'); */
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.void-link {
@ -72,6 +90,7 @@
cursor: pointer;
transition: all 0.2s ease;
}
.void-link:hover {
opacity: 80%;
}
@ -86,7 +105,8 @@
.void-scope,
.void-scope * {
scrollbar-width: thin !important;
scrollbar-color: var(--void-bg-1) var(--void-bg-3) !important; /* For Firefox */
scrollbar-color: var(--void-bg-1) var(--void-bg-3) !important;
/* For Firefox */
}
.void-scope::-webkit-scrollbar,
@ -133,13 +153,16 @@
background-color: var(--vscode-editor-background);
--scrollbar-vertical-width: 14px;
--scrollbar-horizontal-height: 6px;
overflow: auto; /* Ensure scrollbars are shown when needed */
overflow: auto;
/* Ensure scrollbars are shown when needed */
}
.void-scrollable-element,
.void-scrollable-element * {
scrollbar-width: thin !important; /* For Firefox */
scrollbar-color: var(--void-bg-1) var(--void-bg-3) !important; /* For Firefox */
scrollbar-width: thin !important;
/* For Firefox */
scrollbar-color: var(--void-bg-1) var(--void-bg-3) !important;
/* For Firefox */
}
.void-scrollable-element::-webkit-scrollbar,

View file

@ -109,7 +109,7 @@ const NextButton = ({ onClick, ...props }: { onClick: () => void } & React.Butto
className="px-6 py-2 bg-zinc-100 enabled:hover:bg-zinc-100 disabled:bg-zinc-100/40 disabled:cursor-not-allowed rounded text-black duration-600 transition-all"
{...props.disabled && {
'data-tooltip-id': 'void-tooltip',
'data-tooltip-content': 'Disabled (Please enter all required fields or choose another provider)',
'data-tooltip-content': 'Please enter all required fields or choose another provider',
'data-tooltip-place': 'top',
}}
{...props}
@ -389,10 +389,9 @@ const PrimaryActionButton = ({ children, className, ...props }: { children: Reac
hover:ring-2 hover:ring-black/90 dark:hover:ring-white/90
active:ring-2 active:ring-black/90 dark:active:ring-white/90
transition-all duration-300
transition-all duration-300 ease-in-out
rounded-lg
shadow-md hover:shadow-lg
group
"
{...props}
@ -400,7 +399,7 @@ const PrimaryActionButton = ({ children, className, ...props }: { children: Reac
{children}
<ChevronRight
className="
transition-all duration-300
transition-all duration-300 ease-in-out
transform
group-hover:translate-x-1
@ -526,18 +525,26 @@ const VoidOnboardingContent = () => {
const contentOfIdx: { [pageIndex: number]: React.ReactNode } = {
0: <OnboardingPageShell
content={
<>
<div className='flex flex-col items-center gap-8'>
<div className="text-5xl font-light text-center">Welcome to Void</div>
{/* Slice of Void image */}
<div className='max-w-md w-full h-64 mx-auto'>
<div className="slice-of-void-image" />
</div>
<FadeIn
delayMs={1500}
className='flex justify-center'
delayMs={2000}
>
<PrimaryActionButton
onClick={() => { setPageIndex(pageIndex + 1) }}
>Get Started</PrimaryActionButton>
>
Get Started
</PrimaryActionButton>
</FadeIn>
</>
</div>
}
/>,
1: <OnboardingPageShell
@ -794,7 +801,7 @@ const VoidOnboardingContent = () => {
}
return <div key={pageIndex} className="w-full h-full text-left mx-auto overflow-y-auto flex flex-col items-center justify-around">
return <div key={pageIndex} className="w-full h-full text-left mx-auto overflow-y-scroll flex flex-col items-center justify-around">
{contentOfIdx[pageIndex]}
</div>