update instances add form + fix popovers color

src/ui/client/builder/pages/instances.py

@@ -321,10 +321,15 @@ def instances_new_form() -> dict:
                             columns={"pc": 12, "tablet": 12, "mobile": 12},
                             placeholder="instances_hostname_placeholder",  # keep it (a18n)
                             popovers=[
+                                {
+                                    "iconName": "exclamation",
+                                    "iconColor": "yellow-darker",
+                                    "text": "instances_hostname_warning_desc",
+                                },
                                 {
                                     "iconName": "info",
                                     "text": "instances_hostname_desc",
-                                }
+                                },
                             ],
                         )
                     ),

src/ui/client/dashboard/components/Icons/Back.vue

@@ -44,7 +44,7 @@ const icon = reactive({
     data-svg="back"
     role="img"
     aria-hidden="true"
-    :class="[props.iconClass, icon.color, 'fill dark:brightness-[125%]']"
+    :class="[props.iconClass, icon.color, 'fill']"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     fill="currentColor"

src/ui/client/dashboard/components/Icons/Exclamation.vue

@@ -27,13 +27,13 @@ const props = defineProps({
   color: {
     type: String,
     required: false,
-    default: "red",
+    default: "edit",
   },
   disabled: { type: Boolean, required: false, default: false },
 });
 
 const icon = reactive({
-  color: props.color || "red",
+  color: props.color || "edit",
 });
 </script>
 <template>
@@ -41,16 +41,18 @@ const icon = reactive({
     :data-color="icon.color"
     :data-value="props.value"
     :aria-disabled="props.disabled ? 'true' : 'false'"
-    data-svg="box"
+    data-svg="exclamation"
     role="img"
     aria-hidden="true"
-    :class="[props.iconClass, icon.color]"
+    :class="[props.iconClass, icon.color, 'fill']"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     fill="currentColor"
   >
     <path
-      d="M12.378 1.602a.75.75 0 0 0-.756 0L3 6.632l9 5.25 9-5.25-8.622-5.03ZM21.75 7.93l-9 5.25v9l8.628-5.032a.75.75 0 0 0 .372-.648V7.93ZM11.25 22.18v-9l-9-5.25v8.57a.75.75 0 0 0 .372.648l8.628 5.033Z"
+      fill-rule="evenodd"
+      d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
+      clip-rule="evenodd"
     />
   </svg>
 </template>

src/ui/client/dashboard/components/Icons/Refresh.vue

@@ -44,7 +44,7 @@ const icon = reactive({
     data-svg="reload"
     role="img"
     aria-hidden="true"
-    :class="[props.iconClass, icon.color, 'fill dark:brightness-[125%]']"
+    :class="[props.iconClass, icon.color, 'fill']"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     fill="currentColor"

src/ui/client/dashboard/components/Widget/Popover.vue

@@ -162,7 +162,7 @@ onMounted(() => {
     @pointerleave="hidePopover()"
     :class="['popover-btn']"
   >
-    <Icons :iconName="props.iconName" />
+    <Icons :iconName="props.iconName" :color="props.color" />
   </component>
   <div
     ref="popoverContainer"

src/ui/client/dashboard/lang/en.json

@@ -213,9 +213,10 @@
   "instances_delete_title": "Delete instance",
   "instances_delete_subtitle": "Are you sure to delete the following instance ?",
   "instances_create_title": "Create instance",
-  "instances_create_subtitle": "Notice that port and server name will be set by scheduler.",
-  "instances_hostname_placeholder": "http://random:2375",
+  "instances_create_subtitle": "Add a new instance to your list.",
+  "instances_hostname_placeholder": "http://random",
   "instances_hostname_desc": "The adress of the server used for the instance.",
+  "instances_hostname_warning_desc": "Port and server name will be set by scheduler.",
   "instances_name_placeholder": "awesome-instance",
   "instances_name_desc": "The name of the instance.",
   "instances_tab_list": "Instances",

src/ui/client/input.css

@@ -2172,10 +2172,18 @@ body {
   @apply bg-red-500;
 }
 
+.danger.bg-el {
+  @apply bg-red-500;
+}
+
 .warning.bg-el {
   @apply bg-yellow-500;
 }
 
+.edit.bg-el {
+  @apply bg-yellow-500;
+}
+
 .info.bg-el {
   @apply bg-sky-500;
 }
@@ -2325,10 +2333,18 @@ body {
   @apply fill-red-500;
 }
 
+.danger.fill {
+  @apply fill-red-500;
+}
+
 .warning.fill {
   @apply fill-yellow-500;
 }
 
+.edit.fill {
+  @apply fill-yellow-500;
+}
+
 .info.fill {
   @apply fill-sky-500;
 }