fix: styles and transitions

components/Project/Create/Components/Select.vue

@@ -24,7 +24,10 @@ const selectedValue = useVModel(props, 'modelValue', emits)
     lg="flex flex-row gap-24px"
     relative
   >
-    <div v-bind="$attrs" lg="w-1/2">
+    <div
+      v-bind="$attrs"
+      lg="w-1/2"
+    >
       <HeadlessListbox
         v-model="selectedValue"
         as="div"
@@ -52,7 +55,7 @@ const selectedValue = useVModel(props, 'modelValue', emits)
           >
             <span
               class="block truncate mr-8px"
-              :class="[selectedValue ? 'text-app-white' : 'font-400 text-white/50']"
+              :style="[selectedValue ? 'text-app-white' : 'font-400 text-white/50']"
             >
               {{ props.options.find(option => option.value === selectedValue)?.label || props.placeholder }}
             </span>

pages/project/[id]/edit.vue

@@ -173,13 +173,12 @@ const transitionDone = ref(false)
           gap-46px
           lg="mt-24px"
         >
-          <SelectBox
+          <ProjectCreateComponentsSelect
             :model-value="selectedTab"
             label="Choose category"
-            :options="tabsArray.map(t => ({ label: t.label, value: t.value }))"
-            :border-opacity="100"
+            :options="tabsArray.map((t, index) => ({ label: t.label, value: index }))"
             w-full
-            lg:hidden
+            class="lg:hidden! block!"
             block
             mt-16px
             @update:model-value="$event => jumpTo($event)"
@@ -251,13 +250,20 @@ const transitionDone = ref(false)
         </ClientOnly>
       </div>
     </div>
+    <Transition
+      name="fade"
+      mode="out-in"
+      appear
+    >
       <div
+        v-if="transitionDone"
         flex
         flex-col
         gap-10px
         justify-center
         text-center
-      md:fixed
+        block
+        lg:fixed
         bottom-0
         w-full
         bg-app-bg-dark_grey
@@ -309,6 +315,7 @@ const transitionDone = ref(false)
           </Button>
         </div>
       </div>
+    </Transition>
   </div>
 </template>
 

pages/project/create.vue

@@ -160,14 +160,12 @@ const transitionDone = ref(false)
           gap-46px
           lg="mt-24px"
         >
-          <SelectBox
+          <ProjectCreateComponentsSelect
             :model-value="selectedTab"
             label="Choose category"
-            :options="tabsArray.map(t => ({ label: t.label, value: t.value }))"
-            :border-opacity="30"
+            :options="tabsArray.map((t, index) => ({ label: t.label, value: index }))"
             w-full
-            lg:hidden
-            block
+            class="lg:hidden! block!"
             mt-16px
             @update:model-value="$event => jumpTo($event)"
           />
@@ -194,7 +192,6 @@ const transitionDone = ref(false)
     >
       <div
         app-container
-        mb-170px
         lg="mb-55px"
       >
         <ClientOnly>
@@ -238,13 +235,20 @@ const transitionDone = ref(false)
         </ClientOnly>
       </div>
     </div>
+    <Transition
+      name="fade"
+      mode="out-in"
+      appear
+    >
       <div
+        v-if="transitionDone"
         flex
         flex-col
         gap-16px
         justify-center
         text-center
-      fixed
+        block
+        lg:fixed
         bottom-0
         w-full
         bg-app-bg-dark_grey
@@ -296,6 +300,7 @@ const transitionDone = ref(false)
           </Button>
         </div>
       </div>
+    </Transition>
   </div>
 </template>