style(editor): finder and switcher entity type

Novout · Apr 16, 2022 · 6f46b73 · 6f46b73
1 parent 305e879
commit 6f46b73
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 20 deletions.
diff --git a/...ges/better-write-app/src/components/page/editor/entity/finder/EditorEntityFinderInput.vue b/...ges/better-write-app/src/components/page/editor/entity/finder/EditorEntityFinderInput.vue
@@ -1,12 +1,15 @@
 <template>
-  <div
-    class="w-full relative px-4 md:px-14 text-justify text-theme-editor-entity-text hover:text-theme-editor-entity-text-hover active:text-theme-editor-entity-text-active"
-    :style="{
-      whiteSpace: 'pre-line',
-      textIndent: '2rem',
-    }"
-    v-html="raw.v2().purge().finder(entity)"
-  />
+  <div class="flex flex-row justify-center px-4 md:px-14 w-full py-2 text-lg">
+    <EntityTypeShow :type="entity.type" />
+    <div
+      class="w-full px-1 md:px-5 relative text-justify text-theme-editor-entity-text hover:text-theme-editor-entity-text-hover active:text-theme-editor-entity-text-active"
+      :style="{
+        whiteSpace: 'pre-line',
+        textIndent: '2rem',
+      }"
+      v-html="raw.v2().purge().finder(entity)"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">

diff --git a/...better-write-app/src/components/page/editor/entity/switcher/EditorEntitySwitcherInput.vue b/...better-write-app/src/components/page/editor/entity/switcher/EditorEntitySwitcherInput.vue
@@ -1,12 +1,15 @@
 <template>
-  <div
-    class="w-full relative px-4 md:px-14 text-justify text-theme-editor-entity-text hover:text-theme-editor-entity-text-hover active:text-theme-editor-entity-text-active"
-    :style="{
-      whiteSpace: 'pre-line',
-      textIndent: '2rem',
-    }"
-    v-html="raw.v2().purge().switcher(entity)"
-  />
+  <div class="flex flex-row justify-center px-4 md:px-14 w-full py-2 text-lg">
+    <EntityTypeShow :type="entity.type" />
+    <div
+      class="w-full px-1 md:px-5 relative text-justify text-theme-editor-entity-text hover:text-theme-editor-entity-text-hover active:text-theme-editor-entity-text-active"
+      :style="{
+        whiteSpace: 'pre-line',
+        textIndent: '2rem',
+      }"
+      v-html="raw.v2().purge().switcher(entity)"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">

diff --git a/packages/better-write-app/src/components/utils/Logo.vue b/packages/better-write-app/src/components/utils/Logo.vue
@@ -12,9 +12,12 @@
     />
     <h1
       :class="[!back ? 'hidden md:flex text-lg' : 'text-xl']"
-      class="font-raleway text-theme-aside-logo-text ml-3"
+      class="font-raleway text-theme-editor-betterwrite ml-3"
     >
-      betterwrite<span class="text-theme-background-3 font-bold">.io</span>
+      betterwrite<span
+        class="text-theme-background-3 font-bold text-theme-editor-io"
+        >.io</span
+      >
     </h1>
   </div>
 </template>

diff --git a/packages/better-write-plugin-theme/css/themes/betterwrite-ascend.css b/packages/better-write-plugin-theme/css/themes/betterwrite-ascend.css
@@ -26,6 +26,8 @@
   --theme-aside-graph-background: #242222;
   --theme-aside-graph-background-hover: #725656;
   --theme-aside-graph-background-active: #514646;
+  --theme-editor-betterwrite: #faa59e;
+  --theme-editor-io: #fa8373;
   --theme-editor-full-background: #191919;
   --theme-editor-full-background-hover: #191919;
   --theme-editor-full-background-active: #191919;
@@ -189,8 +191,8 @@
   --theme-logger-error-background: rgb(255, 137, 135, 0.1);
   --theme-logger-info-text: rgb(103, 147, 255);
   --theme-logger-info-background: rgb(103, 147, 255, 0.1);
-  --theme-logger-entity-background: #1f2937;
-  --theme-logger-entity-text: #e5e7eb;
+  --theme-logger-entity-background: #282626;
+  --theme-logger-entity-text: #faa59e;
   --theme-toast-default-text: rgb(103, 147, 255);
   --theme-toast-default-background: rgb(103, 147, 255, 0.5);
   --theme-toast-default-close: black;

diff --git a/packages/better-write-plugin-theme/css/themes/betterwrite-dark.css b/packages/better-write-plugin-theme/css/themes/betterwrite-dark.css
@@ -30,6 +30,8 @@
   --theme-aside-graph-background: none;
   --theme-aside-graph-background-hover: #1f2937;
   --theme-aside-graph-background-active: #111827;
+  --theme-editor-betterwrite: #e5e7eb;
+  --theme-editor-io: #111827;
   --theme-editor-full-background: #1f2937;
   --theme-editor-full-background-hover: #1f2937;
   --theme-editor-full-background-active: #1f2937;

diff --git a/packages/better-write-plugin-theme/css/themes/betterwrite-harmonic.css b/packages/better-write-plugin-theme/css/themes/betterwrite-harmonic.css
@@ -26,6 +26,8 @@
   --theme-aside-graph-background: none;
   --theme-aside-graph-background-hover: rgba(106, 129, 158, 0.5);
   --theme-aside-graph-background-active: rgba(106, 129, 158, 0.2);
+  --theme-editor-betterwrite: #111111;
+  --theme-editor-io: #6a819e;
   --theme-editor-full-background: rgba(222, 237, 255, 0.3);
   --theme-editor-full-background-hover: rgba(222, 237, 255, 0.3);
   --theme-editor-full-background-active: rgba(222, 237, 255, 0.3);

diff --git a/packages/better-write-plugin-theme/css/themes/betterwrite-light.css b/packages/better-write-plugin-theme/css/themes/betterwrite-light.css
@@ -26,6 +26,8 @@
   --theme-aside-graph-background: none;
   --theme-aside-graph-background-hover: #d1d5db;
   --theme-aside-graph-background-active: #a1a5ab;
+  --theme-editor-betterwrite: #111111;
+  --theme-editor-io: #111111;
   --theme-editor-full-background: #e5e7eb;
   --theme-editor-full-background-hover: #e5e7eb;
   --theme-editor-full-background-active: #e5e7eb;

diff --git a/packages/better-write-plugin-theme/css/themes/betterwrite-rise.css b/packages/better-write-plugin-theme/css/themes/betterwrite-rise.css
@@ -26,6 +26,8 @@
   --theme-aside-graph-background: none;
   --theme-aside-graph-background-hover: #2f3357;
   --theme-aside-graph-background-active: #161829;
+  --theme-editor-betterwrite: #e1e1e1;
+  --theme-editor-io: #8ab6ff;
   --theme-editor-full-background: #2f3357;
   --theme-editor-full-background-hover: #2f3357;
   --theme-editor-full-background-active: #2f3357;

diff --git a/packages/better-write-plugin-theme/src/external.ts b/packages/better-write-plugin-theme/src/external.ts
@@ -55,6 +55,8 @@ export const setTailwindCssVariables = () => {
     'theme-aside-graph-text': 'var(--theme-aside-graph-text)',
     'theme-aside-graph-text-hover': 'var(--theme-aside-graph-text-hover)',
     'theme-aside-graph-text-active': 'var(--theme-aside-graph-text-active)',
+    'theme-editor-betterwrite': 'var(--theme-editor-betterwrite)',
+    'theme-editor-io': 'var(--theme-editor-io)',
     'theme-editor-full-background': 'var(--theme-editor-full-background)',
     'theme-editor-full-background-hover':
       'var(--theme-editor-full-background-hover)',