show me fill now fields colors

app/javascript/template_builder/area.vue

@@ -40,9 +40,9 @@
       @pointerdown.stop
     >
       <FieldSubmitter
-        v-if="!['my_text', 'my_signature', 'my_initials', 'my_date', 'my_check'].includes(field.type)"
         v-model="field.submitter_uuid"
         class="border-r"
+        :me-fields="['my_text', 'my_signature', 'my_initials', 'my_date', 'my_check'].includes(field.type)"
         :compact="true"
         :editable="editable"
         :menu-classes="'dropdown-content bg-white menu menu-xs p-2 shadow rounded-box w-52 rounded-t-none -left-[1px]'"
@@ -195,7 +195,7 @@
       v-else
       class="flex items-center h-full w-full"
       :class="[submitterIndex != 0 ? bgColors[submitterIndex] : '', field?.default_value ? '' : 'justify-center']"
-      :style="[submitterIndex == 0 ? bgColors[submitterIndex] : '']"
+      :style="{backgroundColor: submitterIndex == 0 ? bgColors[submitterIndex] : ''}"
     >
       <span
         v-if="field"

app/javascript/template_builder/field_submitter.vue

@@ -29,7 +29,7 @@
           />
         </label>
         <ul
-          v-if="editable"
+          v-if="editable && !meFields"
           tabindex="0"
           class="rounded-md min-w-max mb-2"
           :class="menuClasses"
@@ -48,7 +48,8 @@
               <span class="py-1 flex items-center">
                 <span
                   class="rounded-full w-3 h-3 ml-1 mr-3"
-                  :class="colors[index]"
+                  :class="submitter.name !== 'Me'? colors[index] : ''"
+                  :style="{backgroundColor: submitter.name === 'Me'? colors[index] : ''}"
                 />
                 <span>
                   {{ submitter.name }}
@@ -94,7 +95,8 @@
     >
       <button
         class="mx-1 w-3 h-3 rounded-full"
-        :class="colors[submitters.indexOf(selectedSubmitter)]"
+        :class="selectedSubmitter.name !== 'Me'? colors[submitters.indexOf(selectedSubmitter)] : ''"
+        :style="{backgroundColor: selectedSubmitter.name === 'Me'? colors[submitters.indexOf(selectedSubmitter)] : ''}"
       />
     </label>
     <div
@@ -129,7 +131,7 @@
       </label>
     </div>
     <ul
-      v-if="editable || !compact"
+      v-if="(editable && !meFields) || !compact"
       tabindex="0"
       :class="menuClasses"
       @click="closeDropdown"
@@ -147,7 +149,8 @@
           <span class="py-1 flex items-center">
             <span
               class="rounded-full w-3 h-3 ml-1 mr-3"
-              :class="colors[index]"
+              :class="submitter.name !== 'Me'? colors[index] : ''"
+              :style="{backgroundColor: submitter.name === 'Me'? colors[index] : ''}"
             />
             <span>
               {{ submitter.name }}
@@ -205,6 +208,11 @@ export default {
       type: Array,
       required: true
     },
+    meFields: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     editable: {
       type: Boolean,
       required: false,