Minor cosmetic changes

Author: peterschmidt85

frontend/src/components/form/Toogle/index.tsx

@@ -28,7 +28,6 @@ export const FormToggle = <T extends FieldValues>({
             render={({ field: { onChange, value, ...fieldRest }, fieldState: { error } }) => {
                 return (
                     <FormField
-                        description={description}
                         label={label}
                         info={info}
                         stretch={stretch}
@@ -46,6 +45,7 @@ export const FormToggle = <T extends FieldValues>({
                                 onChange(event.detail.checked);
                                 onChangeProp?.(event);
                             }}
+                            description={description}
                         >
                             {toggleLabel}
                         </ToggleCSD>

frontend/src/components/form/Toogle/types.ts

@@ -7,5 +7,5 @@ export type FormToggleProps<T extends FieldValues> = Omit<ToggleProps, 'value' |
     Omit<FormFieldProps, 'errorText'> &
     Pick<ControllerProps<T>, 'control' | 'name' | 'rules'> & {
         leftContent?: ReactNode;
-        toggleLabel?: string;
+        toggleLabel?: ReactNode | string;
     };

frontend/src/locale/en.json

@@ -6,6 +6,7 @@
     "add": "Add",
     "yes": "Yes",
     "no": "No",
+    "create_": "Create",
     "create": "Create {{text}}",
     "edit": "Edit",
     "delete": "Delete",
@@ -206,19 +207,19 @@
       "backends": "Backends",
       "base_backends_description": "dstack will automatically collect offers from the following providers. Deselect providers you don’t want to use.",
       "backends_description": "The following backends can be configured with your own cloud credentials in the project settings after the project is created.",
-      "default_fleet": "Create default fleet",
-      "default_fleet_description": "You can create default fleet for project",
+      "default_fleet": "Create a default fleet",
+      "default_fleet_description": "At least one fleet is required to create dev environments, submit tasks, or run services",
       "fleet_name": "Name",
       "fleet_name_description": "The name of the fleet, e.g. 'my-fleet'",
       "fleet_name_placeholder": "Optional",
       "fleet_name_constraint": "If not specified, generated automatically",
       "fleet_min_instances": "Min number of instances",
-      "fleet_min_instances_description": "Only digits",
+      "fleet_min_instances_description": "Specify \"0\" if you want instances to be created on demand",
       "fleet_max_instances": "Max number of instances",
-      "fleet_max_instances_description": "Only digits",
+      "fleet_max_instances_description": "Specify it only if you want to limit the maximum number of instances",
       "fleet_max_instances_placeholder": "Optional",
       "fleet_idle_duration": "Idle duration",
-      "fleet_idle_duration_description": "e.g. 0s, 1m, 1h",
+      "fleet_idle_duration_description": "For how long instances should be kept idle before termination, e.g. \"0s\", \"1m\", \"1h\"",
       "is_public": "Make project public",
       "is_public_description": "Public projects can be accessed by any user without being a member",
       "backend": "Backend",

frontend/src/pages/Project/CreateWizard/index.tsx

@@ -465,33 +465,19 @@ export const CreateProjectWizard: React.FC = () => {
                         ),
                     },
                     {
-                        title: 'Default fleet',
+                        title: 'Fleets',
                         content: (
                             <Container>
                                 <SpaceBetween direction="vertical" size="l">
                                     <FormToggle
-                                        toggleLabel={t('projects.edit.default_fleet')}
+                                        toggleLabel={<strong>{t('projects.edit.default_fleet')}</strong>}
+                                        constraintText={t('projects.edit.default_fleet_description')}
                                         control={control}
                                         name="enable_default_fleet"
                                     />
 
                                     {formValues['enable_default_fleet'] && (
                                         <>
-                                            <SpaceBetween direction="vertical" size="s">
-                                                <div>
-                                                    To create dev environments, submit tasks, or run services, you need at least
-                                                    one fleet.
-                                                </div>
-
-                                                <div>
-                                                    It's recommended to create it now, or you can set it up manually later.
-                                                </div>
-
-                                                <div>
-                                                    Don't worry, creating a fleet doesn’t necessarily create cloud instances.
-                                                </div>
-                                            </SpaceBetween>
-
                                             <FormInput
                                                 label={t('projects.edit.fleet_name')}
                                                 description={t('projects.edit.fleet_name_description')}

frontend/src/pages/Project/List/index.tsx

@@ -54,7 +54,7 @@ export const ProjectList: React.FC = () => {
     const renderEmptyMessage = (): React.ReactNode => {
         return (
             <ListEmptyMessage title={t('projects.empty_message_title')} message={t('projects.empty_message_text')}>
-                {isAvailableProjectManaging && <Button onClick={addProjectHandler}>{t('common.add')}</Button>}
+                {isAvailableProjectManaging && <Button onClick={addProjectHandler}>{t('common.create_')}</Button>}
             </ListEmptyMessage>
         );
     };
@@ -137,7 +137,7 @@ export const ProjectList: React.FC = () => {
                                         {t('common.delete')}
                                     </ButtonWithConfirmation>
 
-                                    <Button onClick={addProjectHandler}>{t('common.add')}</Button>
+                                    <Button onClick={addProjectHandler}>{t('common.create_')}</Button>
 
                                     <Button
                                         iconName="refresh"