chore(editor): new styles

Author: Novout

packages/better-write-app/src/components/editor/pdf/configuration/PDFConfiguration.vue

@@ -3,17 +3,72 @@
     v-motion
     :initial="{ opacity: 0, y: 10 }"
     :enter="{ opacity: 1, y: 0 }"
-    :delay="100"
+    :delay="0"
     class="flex flex-col justify-start items-start p-5 gap-5"
   >
     <PDFConfigurationHeader />
-    <PDFConfigurationSetProject />
-    <PDFConfigurationSetCover />
-    <PDFConfigurationSetBase />
-    <PDFConfigurationSetParagraph />
-    <PDFConfigurationSetHeadingOne />
-    <PDFConfigurationSetHeadingTwo />
-    <PDFConfigurationSetHeadingThree />
-    <PDFConfigurationSetLineBreak />
+    <PDFConfigurationSetProject
+      v-motion
+      :initial="{ opacity: 0, y: 30 }"
+      :enter="{ opacity: 1, y: 0 }"
+      :delay="100"
+    />
+    <PDFConfigurationSetCover
+      v-motion
+      :initial="{ opacity: 0, y: 30 }"
+      :enter="{ opacity: 1, y: 0 }"
+      :delay="200"
+    />
+    <PDFConfigurationSetBase
+      v-motion
+      :initial="{ opacity: 0, y: 30 }"
+      :enter="{ opacity: 1, y: 0 }"
+      :delay="300"
+    />
+    <PDFConfigurationSetParagraph
+      v-motion
+      :initial="{ opacity: 0, y: 30 }"
+      :visible-once="{
+        opacity: 1,
+        y: 0,
+      }"
+      :delay="0"
+    />
+    <PDFConfigurationSetHeadingOne
+      v-motion
+      :initial="{ opacity: 0, y: 30 }"
+      :visible-once="{
+        opacity: 1,
+        y: 0,
+      }"
+      :delay="0"
+    />
+    <PDFConfigurationSetHeadingTwo
+      v-motion
+      :initial="{ opacity: 0, y: 30 }"
+      :visible-once="{
+        opacity: 1,
+        y: 0,
+      }"
+      :delay="0"
+    />
+    <PDFConfigurationSetHeadingThree
+      v-motion
+      :initial="{ opacity: 0, y: 30 }"
+      :visible-once="{
+        opacity: 1,
+        y: 0,
+      }"
+      :delay="0"
+    />
+    <PDFConfigurationSetLineBreak
+      v-motion
+      :initial="{ opacity: 0, y: 30 }"
+      :visible-once="{
+        opacity: 1,
+        y: 0,
+      }"
+      :delay="0"
+    />
   </div>
 </template>

packages/better-write-app/src/components/editor/provider/project/ProviderProjectPreferences.vue

@@ -3,14 +3,40 @@
     v-motion
     :initial="{ opacity: 0 }"
     :enter="{ opacity: 1 }"
-    :delay="100"
+    :delay="0"
     class="wb-configuration-absolute"
   >
-    <EditorProjectPreferencesDefault />
-    <EditorProjectPreferencesConfiguration />
-    <EditorProjectPreferencesDropbox v-if="AUTH.dropbox.accessToken" />
-    <EditorProjectPreferencesEntity />
-    <EditorProjectPreferencesCommands />
+    <EditorProjectPreferencesDefault
+      v-motion
+      :initial="{ opacity: 0, y: 30 }"
+      :enter="{ opacity: 1, y: 0 }"
+      :delay="150"
+    />
+    <EditorProjectPreferencesConfiguration
+      v-motion
+      :initial="{ opacity: 0, y: 30 }"
+      :enter="{ opacity: 1, y: 0 }"
+      :delay="250"
+    />
+    <EditorProjectPreferencesDropbox
+      v-if="AUTH.dropbox.accessToken"
+      v-motion
+      :initial="{ opacity: 0, y: 30 }"
+      :enter="{ opacity: 1, y: 0 }"
+      :delay="350"
+    />
+    <EditorProjectPreferencesEntity
+      v-motion
+      :initial="{ opacity: 0, y: 30 }"
+      :enter="{ opacity: 1, y: 0 }"
+      :delay="450"
+    />
+    <EditorProjectPreferencesCommands
+      v-motion
+      :initial="{ opacity: 0, y: 30 }"
+      :enter="{ opacity: 1, y: 0 }"
+      :delay="550"
+    />
   </div>
 </template>
 

packages/better-write-app/src/components/material/InputFile.vue

@@ -31,7 +31,7 @@
       />
       <HeroIcon
         v-if="props.src"
-        class="wb-text"
+        class="wb-icon"
         @click.prevent.stop="onDeleteBase64"
       >
         <svg