cerc-io/snowballtools-base
16
0
Fork 2
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: contrast with new elements

Browse Source
This commit is contained in:
Cody Bender 2024-10-30 16:20:44 -04:00 committed by Nabarun
parent a033a8a7b3
commit c5bace0660
3 changed files with 22 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/frontend/src/components/projects/create/Configure.tsx
View File

@ -379,7 +379,10 @@ const Configure = () => {
<Heading as="h4" className="md:text-lg font-medium"> <Heading as="h4" className="md:text-lg font-medium">
Configure deployment Configure deployment
</Heading> </Heading>
<Heading as="h5" className="text-sm font-sans text-elements-low-em"> <Heading
as="h5"
className="text-sm font-sans text-elements-low-em dark:text-foreground-secondaryu"
>
The app can be deployed by setting the deployer LRN for a single The app can be deployed by setting the deployer LRN for a single
deployment or by creating a deployer auction for multiple deployment or by creating a deployer auction for multiple
deployments deployments
@ -400,6 +403,7 @@ const Configure = () => {
onChange={(event) => onChange(event.target.value)} onChange={(event) => onChange(event.target.value)}
size="small" size="small"
displayEmpty displayEmpty
className="dark:bg-overlay2 dark:text-foreground"
sx={{ sx={{
fontFamily: 'inherit', fontFamily: 'inherit',
'& .MuiOutlinedInput-notchedOutline': { '& .MuiOutlinedInput-notchedOutline': {
@ -419,7 +423,7 @@ const Configure = () => {
<div className="flex flex-col justify-start gap-4 mb-6"> <div className="flex flex-col justify-start gap-4 mb-6">
<Heading <Heading
as="h5" as="h5"
className="text-sm font-sans text-elements-low-em" className="text-sm font-sans text-elements-low-em dark:text-foreground-secondary"
> >
The app will be deployed by the configured deployer The app will be deployed by the configured deployer
</Heading> </Heading>
@ -429,7 +433,7 @@ const Configure = () => {
rules={{ required: true }} rules={{ required: true }}
render={({ field: { value, onChange }, fieldState }) => ( render={({ field: { value, onChange }, fieldState }) => (
<FormControl fullWidth error={Boolean(fieldState.error)}> <FormControl fullWidth error={Boolean(fieldState.error)}>
<span className="text-sm text-elements-high-em mb-4"> <span className="text-sm dark:text-foreground text-elements-high-em dark:text-foreground mb-4">
Select deployer LRN Select deployer LRN
</span> </span>
<Select <Select
@ -440,6 +444,7 @@ const Configure = () => {
}} }}
displayEmpty displayEmpty
size="small" size="small"
className="dark:bg-overlay2 dark:text-foreground"
> >
{deployers.map((deployer) => ( {deployers.map((deployer) => (
<MenuItem <MenuItem
@ -466,12 +471,12 @@ const Configure = () => {
<div className="flex flex-col justify-start gap-4 mb-6"> <div className="flex flex-col justify-start gap-4 mb-6">
<Heading <Heading
as="h5" as="h5"
className="text-sm font-sans text-elements-low-em" className="text-sm font-sans text-elements-low-em dark:text-foreground-secondary"
> >
Set the number of deployers and maximum price for each Set the number of deployers and maximum price for each
deployment deployment
</Heading> </Heading>
<span className="text-sm text-elements-high-em"> <span className="text-sm text-elements-high-em dark:text-foreground">
Number of Deployers Number of Deployers
</span> </span>
<Controller <Controller
@ -488,7 +493,7 @@ const Configure = () => {
/> />
</div> </div>
<div className="flex flex-col justify-start gap-4 mb-6"> <div className="flex flex-col justify-start gap-4 mb-6">
<span className="text-sm text-elements-high-em"> <span className="text-sm text-elements-high-em dark:text-foreground">
Maximum Price (alnt) Maximum Price (alnt)
</span> </span>
<Controller <Controller
@ -506,7 +511,7 @@ const Configure = () => {
<Heading as="h4" className="md:text-lg font-medium mb-3"> <Heading as="h4" className="md:text-lg font-medium mb-3">
Environment Variables Environment Variables
</Heading> </Heading>
<div className="p-4 bg-slate-100 rounded-lg mb-6"> <div className="p-4 bg-slate-100 dark:bg-overlay3 rounded-lg mb-6">
<EnvironmentVariablesForm /> <EnvironmentVariablesForm />
</div> </div>
@ -538,6 +543,7 @@ const Configure = () => {
<Button <Button
{...buttonSize} {...buttonSize}
type="submit" type="submit"
shape="default"
disabled={ disabled={
isLoading || isPaymentLoading || !selectedAccount isLoading || isPaymentLoading || !selectedAccount
} }

3
packages/frontend/src/components/projects/create/ConnectWallet.tsx
View File

@ -15,7 +15,7 @@ const ConnectWallet = ({
}; };
return ( return (
<div className="p-4 bg-slate-100 rounded-lg mb-6"> <div className="p-4 bg-slate-100 dark:bg-overlay3 rounded-lg mb-6">
{accounts.length === 0 ? ( {accounts.length === 0 ? (
<div> <div>
<Button type={'button'} onClick={handleConnect}> <Button type={'button'} onClick={handleConnect}>
@ -30,6 +30,7 @@ const ConnectWallet = ({
onChange={(value) => { onChange={(value) => {
value && onAccountChange(value); value && onAccountChange(value);
}} }}
className="dark:bg-overlay2 dark:text-foreground"
> >
{accounts.map((account, index) => ( {accounts.map((account, index) => (
<Option key={index} value={account.address}> <Option key={index} value={account.address}>

10
packages/frontend/src/components/projects/create/DeployStep.tsx
View File

@ -36,7 +36,7 @@ const DeployStep = ({ step, status, title, startTime }: DeployStepsProps) => {
</div> </div>
)} )}
{status === DeployStatus.PROCESSING && ( {status === DeployStatus.PROCESSING && (
<LoaderIcon className="animate-spin text-elements-link" /> <LoaderIcon className="animate-spin text-elements-link dark:text-foreground" />
)} )}
</div> </div>
@ -44,7 +44,8 @@ const DeployStep = ({ step, status, title, startTime }: DeployStepsProps) => {
<span <span
className={cn( className={cn(
'text-left text-sm md:text-base', 'text-left text-sm md:text-base',
status === DeployStatus.PROCESSING && 'text-elements-link', status === DeployStatus.PROCESSING &&
'text-elements-link dark:text-foreground',
)} )}
> >
{title} {title}
@ -54,7 +55,10 @@ const DeployStep = ({ step, status, title, startTime }: DeployStepsProps) => {
{/* Timer */} {/* Timer */}
{status === DeployStatus.PROCESSING && ( {status === DeployStatus.PROCESSING && (
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
<ClockOutlineIcon size={16} className="text-elements-low-em" /> <ClockOutlineIcon
size={16}
className="text-elements-low-em dark:text-foreground-secondary"
/>
<Stopwatch <Stopwatch
offsetTimestamp={setStopWatchOffset(startTime!)} offsetTimestamp={setStopWatchOffset(startTime!)}
isPaused={false} isPaused={false}