fix(console): small ui fixes

akash-network · Aug 6, 2024 · b301f7f · b301f7f
1 parent dfff217
commit b301f7f
Show file tree

Hide file tree

Showing 12 changed files with 24 additions and 25 deletions.
diff --git a/apps/deploy-web/src/components/authorizations/AllowanceModal.tsx b/apps/deploy-web/src/components/authorizations/AllowanceModal.tsx
@@ -144,7 +144,7 @@ export const AllowanceModal: React.FunctionComponent<Props> = ({ editingAllowanc
                     min={0}
                     step={0.000001}
                     max={denomData?.inputMax}
-                    startIcon={denomData?.label}
+                    startIcon={<span className="text-xs pl-2">{denomData?.label}</span>}
                   />
                 );
               }}

diff --git a/apps/deploy-web/src/components/authorizations/GrantModal.tsx b/apps/deploy-web/src/components/authorizations/GrantModal.tsx
@@ -188,7 +188,7 @@ export const GrantModal: React.FunctionComponent<Props> = ({ editingGrant, addre
                     min={0}
                     step={0.000001}
                     max={denomData?.inputMax}
-                    startIcon={denomData?.label}
+                    startIcon={<span className="text-xs pl-2">{denomData?.label}</span>}
                     className="ml-4 flex-grow"
                   />
                 );

diff --git a/apps/deploy-web/src/components/sdl/CpuFormControl.tsx b/apps/deploy-web/src/components/sdl/CpuFormControl.tsx
@@ -56,7 +56,7 @@ export const CpuFormControl: React.FunctionComponent<Props> = ({ control, servic
                 min={0.1}
                 step={0.1}
                 max={validationConfig.maxCpuAmount}
-                className="ml-4 w-[100px]"
+                inputClassName="ml-4 w-[100px]"
               />
             </div>
 

diff --git a/apps/deploy-web/src/components/sdl/GpuFormControl.tsx b/apps/deploy-web/src/components/sdl/GpuFormControl.tsx
@@ -108,7 +108,7 @@ export const GpuFormControl: React.FunctionComponent<Props> = ({ gpuModels, cont
                       min={1}
                       step={1}
                       max={validationConfig.maxGpuAmount}
-                      className="w-[100px]"
+                      inputClassName="w-[100px]"
                     />
                   </div>
                 )}
@@ -122,6 +122,7 @@ export const GpuFormControl: React.FunctionComponent<Props> = ({ gpuModels, cont
                   step={1}
                   color="secondary"
                   aria-label="GPUs"
+                  className="pt-2"
                   onValueChange={newValue => field.onChange(newValue)}
                 />
               )}

diff --git a/apps/deploy-web/src/components/sdl/ImageSelect.tsx b/apps/deploy-web/src/components/sdl/ImageSelect.tsx
@@ -167,11 +167,11 @@ export const ImageSelect: React.FunctionComponent<Props> = ({ control, currentSe
             onResizeCapture={undefined}
           >
             <ul className="relative m-0 max-h-[40vh] list-none overflow-auto py-2">
-              {filteredGpuTemplates.map(template => (
+              {filteredGpuTemplates.map((template, i) => (
                 <li
                   className="MuiAutocomplete-option flex w-full cursor-pointer items-center justify-between px-4 py-2 text-sm hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-800"
                   ref={eleRefs[template.id as string]}
-                  key={template.id}
+                  key={`${template.id}-${i}`}
                   onClick={() => _onSelectTemplate(template)}
                   onMouseOver={() => {
                     setHoveredTemplate(template);

diff --git a/apps/deploy-web/src/components/sdl/MemoryFormControl.tsx b/apps/deploy-web/src/components/sdl/MemoryFormControl.tsx
@@ -35,7 +35,7 @@ export const MemoryFormControl: React.FunctionComponent<Props> = ({ control, ser
       control={control}
       name={`services.${serviceIndex}.profile.ram`}
       render={({ field, fieldState }) => (
-        <FormPaper className={cn({ ["border-b border-red-500"]: !!fieldState.error })}>
+        <FormPaper>
           <FormItem>
             <div className="flex flex-col items-start sm:flex-row sm:items-center">
               <div className="flex items-center">
@@ -68,7 +68,7 @@ export const MemoryFormControl: React.FunctionComponent<Props> = ({ control, ser
                   onChange={event => field.onChange(parseFloat(event.target.value))}
                   min={1}
                   step={1}
-                  className="w-[100px]"
+                  inputClassName="w-[100px]"
                 />
 
                 <Controller
@@ -77,8 +77,8 @@ export const MemoryFormControl: React.FunctionComponent<Props> = ({ control, ser
                   defaultValue=""
                   render={({ field }) => (
                     <Select value={field.value || ""} onValueChange={field.onChange}>
-                      <SelectTrigger className="ml-1">
-                        <SelectValue placeholder="Select unit" className="w-[75px]" />
+                      <SelectTrigger className="ml-1 w-[75px]">
+                        <SelectValue placeholder="Select unit" />
                       </SelectTrigger>
                       <SelectContent>
                         <SelectGroup>

diff --git a/apps/deploy-web/src/components/sdl/PersistentStorage.tsx b/apps/deploy-web/src/components/sdl/PersistentStorage.tsx
@@ -42,7 +42,7 @@ export const PersistentStorage: React.FunctionComponent<Props> = ({ currentServi
         name={`services.${serviceIndex}.profile.persistentStorage`}
         render={({ field, fieldState }) => (
           <FormItem>
-            <div className="flex items-start justify-between sm:flex-row sm:items-center">
+            <div className="flex flex-col items-start sm:flex-row sm:items-center">
               <div className="flex items-center">
                 <div className="flex items-center">
                   <MdStorage className="mr-2 text-2xl text-muted-foreground" />
@@ -75,7 +75,7 @@ export const PersistentStorage: React.FunctionComponent<Props> = ({ currentServi
               </div>
 
               {currentService.profile.hasPersistentStorage && (
-                <div className="mt-2 flex items-center sm:mt-0">
+                <div className="mt-2 flex items-center sm:ml-4 sm:mt-0">
                   <Input
                     type="number"
                     color="secondary"
@@ -84,7 +84,7 @@ export const PersistentStorage: React.FunctionComponent<Props> = ({ currentServi
                     onChange={event => field.onChange(parseFloat(event.target.value))}
                     min={1}
                     step={1}
-                    className="w-[100px]"
+                    inputClassName="w-[100px]"
                   />
 
                   <Controller
@@ -93,8 +93,8 @@ export const PersistentStorage: React.FunctionComponent<Props> = ({ currentServi
                     defaultValue=""
                     render={({ field }) => (
                       <Select value={field.value || ""} onValueChange={field.onChange}>
-                        <SelectTrigger className="ml-1">
-                          <SelectValue placeholder="Select unit" className="w-[75px]" />
+                        <SelectTrigger className="ml-1 w-[75px]">
+                          <SelectValue placeholder="Select unit" />
                         </SelectTrigger>
                         <SelectContent>
                           <SelectGroup>

diff --git a/apps/deploy-web/src/components/sdl/RentGpusForm.tsx b/apps/deploy-web/src/components/sdl/RentGpusForm.tsx
@@ -278,7 +278,7 @@ export const RentGpusForm: React.FunctionComponent = () => {
 
       <Form {...form}>
         <form onSubmit={handleSubmit(onSubmit)} ref={formRef} autoComplete="off">
-          <FormPaper className="mt-4 p-4">
+          <FormPaper className="mt-4 md:p-4">
             <ImageSelect control={control as any} currentService={currentService} onSelectTemplate={onSelectTemplate} />
 
             <div className="mt-4">

diff --git a/apps/deploy-web/src/components/sdl/SimpleServiceFormControl.tsx b/apps/deploy-web/src/components/sdl/SimpleServiceFormControl.tsx
@@ -255,7 +255,6 @@ export const SimpleServiceFormControl: React.FunctionComponent<Props> = ({
                                   </div>
                                 }
                                 placeholder="Example: mydockerimage:1.01"
-                                className="space-y-1"
                                 value={field.value}
                                 error={!!fieldState.error}
                                 onChange={event => field.onChange((event.target.value || "").toLowerCase())}

diff --git a/apps/deploy-web/src/components/sdl/StorageFormControl.tsx b/apps/deploy-web/src/components/sdl/StorageFormControl.tsx
@@ -35,7 +35,7 @@ export const StorageFormControl: React.FunctionComponent<Props> = ({ control, se
       control={control}
       name={`services.${serviceIndex}.profile.storage`}
       render={({ field, fieldState }) => (
-        <FormPaper className={cn({ ["border-b border-red-500"]: !!fieldState.error })}>
+        <FormPaper>
           <FormItem>
             <div className="flex flex-col items-start sm:flex-row sm:items-center">
               <div className="flex items-center">
@@ -71,7 +71,7 @@ export const StorageFormControl: React.FunctionComponent<Props> = ({ control, se
                   onChange={event => field.onChange(parseFloat(event.target.value))}
                   min={1}
                   step={1}
-                  className="w-[100px]"
+                  inputClassName="w-[100px]"
                 />
 
                 <Controller
@@ -80,8 +80,8 @@ export const StorageFormControl: React.FunctionComponent<Props> = ({ control, se
                   defaultValue=""
                   render={({ field }) => (
                     <Select value={field.value || ""} onValueChange={field.onChange}>
-                      <SelectTrigger className="ml-1">
-                        <SelectValue placeholder="Select unit" className="w-[75px]" />
+                      <SelectTrigger className="ml-1 w-[75px]">
+                        <SelectValue placeholder="Select unit" />
                       </SelectTrigger>
                       <SelectContent>
                         <SelectGroup>

diff --git a/apps/deploy-web/src/utils/sdl/sdlImport.ts b/apps/deploy-web/src/utils/sdl/sdlImport.ts
@@ -67,7 +67,7 @@ export const importSimpleSdl = (yamlStr: string) => {
         const _expose: ExposeType = {
           id: nanoid(),
           port: expose.port,
-          as: expose.as,
+          as: expose.as || 80,
           proto: expose.proto === "tcp" ? expose.proto : "http",
           global: !!isGlobal,
           to: expose.to.filter(t => t.global === undefined).map(t => ({ id: nanoid(), value: t.service })),

diff --git a/packages/ui/components/input.tsx b/packages/ui/components/input.tsx
@@ -16,9 +16,8 @@ const FormInput = React.forwardRef<HTMLInputElement, FormInputProps>(({ classNam
   const { error } = useFormField();
   return (
     <FormItem className={className}>
-      {label && <FormLabel>{label}</FormLabel>}
       <FormControl>
-        <Input type={type} inputClassName={inputClassName} ref={ref} error={!!error} {...props} />
+        <Input type={type} inputClassName={inputClassName} ref={ref} error={!!error} label={label} {...props} />
       </FormControl>
       {description && <FormDescription>{description}</FormDescription>}
       <FormMessage />
@@ -47,7 +46,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     const formField = useFormField();
 
     return (
-      <div className={className}>
+      <div className={cn("space-y-1", className)}>
         {label && (formField.id ? <FormLabel>{label}</FormLabel> : <Label htmlFor={`${id}-input`}>{label}</Label>)}
         <div className="relative flex items-center">
           {startIcon && <div className={cn("absolute inset-y-0 left-0 flex items-center", startIconClassName)}>{startIcon}</div>}