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

UI styling changes #33

Merged
nabarun merged 9 commits from staging into main 2024-11-06 04:10:18 +00:00
Conversation 0 Commits 9 Files Changed 80 +22 -11
3 changed files with 22 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c5bace0660 - Show all commits

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">
Configure deployment
</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
deployment or by creating a deployer auction for multiple
deployments
@ -400,6 +403,7 @@ const Configure = () => {
onChange={(event) => onChange(event.target.value)}
size="small"
displayEmpty
className="dark:bg-overlay2 dark:text-foreground"
sx={{
fontFamily: 'inherit',
'& .MuiOutlinedInput-notchedOutline': {
@ -419,7 +423,7 @@ const Configure = () => {
<div className="flex flex-col justify-start gap-4 mb-6">
<Heading
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
</Heading>
@ -429,7 +433,7 @@ const Configure = () => {
rules={{ required: true }}
render={({ field: { value, onChange }, fieldState }) => (
<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
</span>
<Select
@ -440,6 +444,7 @@ const Configure = () => {
}}
displayEmpty
size="small"
className="dark:bg-overlay2 dark:text-foreground"
>
{deployers.map((deployer) => (
<MenuItem
@ -466,12 +471,12 @@ const Configure = () => {
<div className="flex flex-col justify-start gap-4 mb-6">
<Heading
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
deployment
</Heading>
<span className="text-sm text-elements-high-em">
<span className="text-sm text-elements-high-em dark:text-foreground">
Number of Deployers
</span>
<Controller
@ -488,7 +493,7 @@ const Configure = () => {
/>
</div>
<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)
</span>
<Controller
@ -506,7 +511,7 @@ const Configure = () => {
<Heading as="h4" className="md:text-lg font-medium mb-3">
Environment Variables
</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 />
</div>
@ -538,6 +543,7 @@ const Configure = () => {
<Button
{...buttonSize}
type="submit"
shape="default"
disabled={
isLoading || isPaymentLoading || !selectedAccount
}

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

@ -15,7 +15,7 @@ const ConnectWallet = ({
};
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 ? (
<div>
<Button type={'button'} onClick={handleConnect}>
@ -30,6 +30,7 @@ const ConnectWallet = ({
onChange={(value) => {
value && onAccountChange(value);
}}
className="dark:bg-overlay2 dark:text-foreground"
>
{accounts.map((account, index) => (
<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>
)}
{status === DeployStatus.PROCESSING && (
<LoaderIcon className="animate-spin text-elements-link" />
<LoaderIcon className="animate-spin text-elements-link dark:text-foreground" />
)}
</div>
@ -44,7 +44,8 @@ const DeployStep = ({ step, status, title, startTime }: DeployStepsProps) => {
<span
className={cn(
'text-left text-sm md:text-base',
status === DeployStatus.PROCESSING && 'text-elements-link',
status === DeployStatus.PROCESSING &&
'text-elements-link dark:text-foreground',
)}
>
{title}
@ -54,7 +55,10 @@ const DeployStep = ({ step, status, title, startTime }: DeployStepsProps) => {
{/* Timer */}
{status === DeployStatus.PROCESSING && (
<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
offsetTimestamp={setStopWatchOffset(startTime!)}
isPaused={false}