Update new content placeholder

domains/grid/components/GridWidget.vue

@@ -140,9 +140,10 @@ onMounted(() => {
 
 <template>
   <div
-    class="group relative flex h-full flex-col rounded-12 border border-neutral-90 bg-neutral-100"
+    class="group relative flex h-full flex-col rounded-12"
     :class="{
-      'shadow-neutral-drop-shadow-1xl': !isAddContentWidget,
+      'border border-neutral-90 bg-neutral-100 shadow-neutral-drop-shadow-1xl':
+        !isAddContentWidget,
       'select-none': isAllowToEdit,
       'z-50': isOpen,
     }"

domains/grid/components/GridWidgetAddContent.vue

@@ -16,10 +16,12 @@
 
 <template>
   <div
-    class="flex h-full cursor-pointer flex-col items-center justify-center overflow-hidden rounded-12 p-4 opacity-60 transition hover:opacity-100 hover:shadow-neutral-drop-shadow"
+    class="bg-dashed-border flex h-full cursor-pointer flex-col items-center justify-center overflow-hidden rounded-12 p-4 opacity-50 transition hover:opacity-100 hover:shadow-neutral-drop-shadow"
     @click="handleAddContent"
   >
-    <lukso-icon name="plus" size="large" />
-    <p class="mt-2">{{ formatMessage('grid_widget_add_widget_text') }}</p>
+    <lukso-icon name="plus" size="large" color="neutral-20"></lukso-icon>
+    <p class="mt-2">
+      {{ formatMessage('grid_widget_add_widget_text') }}
+    </p>
   </div>
 </template>

tailwind.config.js

@@ -32,6 +32,9 @@ module.exports = {
           '100%': { opacity: '0.2' },
         },
       },
+      backgroundImage: {
+        'dashed-border': `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%239CB6C9FF' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e")`,
+      },
     },
   },
   plugins: [wordBreakPlugin],