chore: Remove older UI (#11720)

app/javascript/dashboard/components/widgets/WootWriter/Editor.vue

@@ -709,7 +709,7 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
     <div ref="editor" />
     <div
       v-show="isImageNodeSelected && showImageResizeToolbar"
-      class="absolute shadow-md rounded-[4px] flex gap-1 py-1 px-1 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-50"
+      class="absolute shadow-md rounded-[6px] flex gap-1 py-1 px-1 bg-n-solid-3 outline outline-1 outline-n-weak text-n-slate-12"
       :style="{
         top: toolbarPosition.top,
         left: toolbarPosition.left,
@@ -718,7 +718,7 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
       <button
         v-for="size in sizes"
         :key="size.name"
-        class="text-xs font-medium rounded-[4px] border border-solid border-slate-200 dark:border-slate-600 px-1.5 py-0.5 hover:bg-slate-100 dark:hover:bg-slate-800"
+        class="text-xs font-medium rounded-[4px] outline outline-1 outline-n-strong px-1.5 py-0.5 hover:bg-n-slate-5"
         @click="setURLWithQueryAndImageSize(size)"
       >
         {{ size.name }}
@@ -735,16 +735,16 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
   @apply flex flex-col;
 
   .ProseMirror-menubar {
-    min-height: var(--space-two) !important;
+    min-height: 1.25rem !important;
     @apply -ml-2.5 pb-0 bg-transparent text-n-slate-11;
 
     .ProseMirror-menu-active {
-      @apply bg-slate-75 dark:bg-slate-800;
+      @apply bg-n-slate-5 dark:bg-n-solid-3;
     }
   }
 
   > .ProseMirror {
-    @apply p-0 break-words text-slate-800 dark:text-slate-100;
+    @apply p-0 break-words text-n-slate-12;
 
     h1,
     h2,
@@ -753,14 +753,14 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
     h5,
     h6,
     p {
-      @apply text-slate-800 dark:text-slate-100;
+      @apply text-n-slate-12;
     }
 
     blockquote {
-      @apply border-slate-400 dark:border-slate-500;
+      @apply border-n-slate-7;
 
       p {
-        @apply text-slate-600 dark:text-slate-400;
+        @apply text-n-slate-11;
       }
     }
 
@@ -825,6 +825,6 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
 }
 
 .editor-warning__message {
-  @apply text-red-400 dark:text-red-400 font-normal text-sm pt-1 pb-0 px-0;
+  @apply text-n-ruby-9 dark:text-n-ruby-9 font-normal text-sm pt-1 pb-0 px-0;
 }
 </style>

app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue

@@ -355,10 +355,10 @@ export default {
       <transition name="modal-fade">
         <div
           v-show="uploadRef && uploadRef.dropActive"
-          class="fixed top-0 bottom-0 left-0 right-0 z-20 flex flex-col items-center justify-center w-full h-full gap-2 text-slate-900 dark:text-slate-50 bg-modal-backdrop-light dark:bg-modal-backdrop-dark"
+          class="fixed top-0 bottom-0 left-0 right-0 z-20 flex flex-col items-center justify-center w-full h-full gap-2 text-n-slate-12 bg-modal-backdrop-light dark:bg-modal-backdrop-dark"
         >
           <fluent-icon icon="cloud-backup" size="40" />
-          <h4 class="text-2xl break-words text-slate-900 dark:text-slate-50">
+          <h4 class="text-2xl break-words text-n-slate-12">
             {{ $t('CONVERSATION.REPLYBOX.DRAG_DROP') }}
           </h4>
         </div>
@@ -402,7 +402,7 @@ export default {
   }
 
   &:hover button {
-    @apply dark:bg-slate-800 bg-slate-100;
+    @apply enabled:bg-n-slate-9/20;
   }
 }
 </style>

app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue

@@ -73,7 +73,7 @@ export default {
       };
     },
     charLengthClass() {
-      return this.charactersRemaining < 0 ? 'text-red-600' : 'text-slate-600';
+      return this.charactersRemaining < 0 ? 'text-n-ruby-9' : 'text-n-slate-11';
     },
     characterLengthWarning() {
       return this.charactersRemaining < 0

app/javascript/dashboard/components/widgets/WootWriter/keyboardEmojiSelector.vue

@@ -52,13 +52,13 @@ onMounted(() => {
   >
     <template #default="{ item, selected }">
       <span
-        class="max-w-full inline-flex items-center gap-0.5 min-w-0 mb-0 text-sm font-medium text-slate-900 dark:text-slate-100 group-hover:text-woot-500 dark:group-hover:text-woot-500 truncate"
+        class="max-w-full inline-flex items-center gap-0.5 min-w-0 mb-0 text-sm font-medium text-n-slate-12 group-hover:text-n-brand truncate"
       >
         {{ item.emoji }}
         <p
           class="relative mb-0 truncate bottom-px"
           :class="{
-            'text-woot-500 dark:text-woot-500': selected,
+            'text-n-brand': selected,
             'font-normal': !selected,
           }"
         >