fix: directive editor background and `Modal` in dark mode (#267)

app/src/language/LINGUAS

@@ -1 +1 @@
-es fr_FR ru_RU vi_VN zh_CN zh_TW
+en zh_CN zh_TW fr_FR es ru_RU vi_VN

app/src/views/domain/ngx_conf/NgxConfigEditor.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useGettext } from 'vue3-gettext'
-import Modal from 'ant-design-vue/lib/modal'
+import { Modal } from 'ant-design-vue'
 import type { ComputedRef } from 'vue'
 import CodeEditor from '@/components/CodeEditor/CodeEditor.vue'
 import template from '@/api/template'

app/src/views/domain/ngx_conf/NgxServer.vue

@@ -3,7 +3,7 @@
 import { MoreOutlined, PlusOutlined } from '@ant-design/icons-vue'
 import { useGettext } from 'vue3-gettext'
 import type { ComputedRef, Ref } from 'vue'
-import Modal from 'ant-design-vue/lib/modal'
+import { Modal } from 'ant-design-vue'
 import LogEntry from '@/views/domain/ngx_conf/LogEntry.vue'
 import ConfigTemplate from '@/views/domain/ngx_conf/config_template/ConfigTemplate.vue'
 import LocationEditor from '@/views/domain/ngx_conf/LocationEditor.vue'

app/src/views/domain/ngx_conf/NgxUpstream.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { MoreOutlined, PlusOutlined } from '@ant-design/icons-vue'
 import { useGettext } from 'vue3-gettext'
-import Modal from 'ant-design-vue/lib/modal'
+import { Modal } from 'ant-design-vue'
 import _ from 'lodash'
 import type { NgxConfig, NgxDirective } from '@/api/ngx'
 import DirectiveEditor from '@/views/domain/ngx_conf/directive/DirectiveEditor.vue'

app/src/views/domain/ngx_conf/directive/DirectiveEditorItem.vue

@@ -145,8 +145,9 @@ const currentIdx = inject('current_idx')
 
 .directive-editor-extra {
   background-color: #fafafa;
+  border-radius: 5px;
   padding: 10px 20px;
-  margin-bottom: 10px;
+  margin: 10px 0;
 
   .save-btn {
     display: flex;
@@ -155,6 +156,12 @@ const currentIdx = inject('current_idx')
   }
 }
 
+.dark {
+  .directive-editor-extra {
+    background-color: #1f1f1f;
+  }
+}
+
 .input-wrapper {
   display: flex;
   gap: 10px;