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 }))"
+            :options="tabsArray.map((t, index) => ({ label: t.label, value: index }))"
-            :border-opacity="100"
             w-full
-            lg:hidden
+            class="lg:hidden! block!"
             block
             mt-16px
             @update:model-value="$event => jumpTo($event)"
@@ -251,64 +250,72 @@ const transitionDone = ref(false)
         </ClientOnly>
       </div>
     </div>
-    <div
+    <Transition
-      flex
+      name="fade"
-      flex-col
+      mode="out-in"
-      gap-10px
+      appear
-      justify-center
-      text-center
-      md:fixed
-      bottom-0
-      w-full
-      bg-app-bg-dark_grey
-      class="border-app-white/30"
-      lg="bg-app-black w-fit border-l-2 border-t-2 right-0 border-app-white"
-      p-12px
     >
-      <Button
+      <div
-        v-if="selectedTab !== tabsArray.length - 1"
+        v-if="transitionDone"
         flex
-        lg="w-fit hidden!"
+        flex-col
-        border
+        gap-10px
-        @click="next()"
+        justify-center
-      >
+        text-center
-        <span px-24px>NEXT SECTION</span>
-      </Button>
-      <span
-        v-if="selectedTab !== tabsArray.length - 1"
-        lg="hidden"
         block
-        text="12px italic app-white/50"
+        lg:fixed
-      >or you can submit changes by publishing them</span>
+        bottom-0
-      <div flex>
+        w-full
+        bg-app-bg-dark_grey
+        class="border-app-white/30"
+        lg="bg-app-black w-fit border-l-2 border-t-2 right-0 border-app-white"
+        p-12px
+      >
         <Button
-          w-full
+          v-if="selectedTab !== tabsArray.length - 1"
-          lg="w-fit"
+          flex
+          lg="w-fit hidden!"
           border
-          @click="navigateTo(`/project/${route.params.id}`)"
+          @click="next()"
         >
-          <span px-24px>CANCEL</span>
+          <span px-24px>NEXT SECTION</span>
-        </Button>
-        <Button
-          w-full
-          lg="w-fit"
-          inverted-color
-          @click="publish()"
-        >
-          <UnoIcon
-            v-if="isPublishing"
-            w-108px
-            i-eos-icons-loading
-            text-black
-            text-18px
-          />
-          <span
-            v-else
-            px-24px
-          >PUBLISH</span>
         </Button>
+        <span
+          v-if="selectedTab !== tabsArray.length - 1"
+          lg="hidden"
+          block
+          text="12px italic app-white/50"
+        >or you can submit changes by publishing them</span>
+        <div flex>
+          <Button
+            w-full
+            lg="w-fit"
+            border
+            @click="navigateTo(`/project/${route.params.id}`)"
+          >
+            <span px-24px>CANCEL</span>
+          </Button>
+          <Button
+            w-full
+            lg="w-fit"
+            inverted-color
+            @click="publish()"
+          >
+            <UnoIcon
+              v-if="isPublishing"
+              w-108px
+              i-eos-icons-loading
+              text-black
+              text-18px
+            />
+            <span
+              v-else
+              px-24px
+            >PUBLISH</span>
+          </Button>
+        </div>
       </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 }))"
+            :options="tabsArray.map((t, index) => ({ label: t.label, value: index }))"
-            :border-opacity="30"
             w-full
-            lg:hidden
+            class="lg:hidden! block!"
-            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,64 +235,72 @@ const transitionDone = ref(false)
         </ClientOnly>
       </div>
     </div>
-    <div
+    <Transition
-      flex
+      name="fade"
-      flex-col
+      mode="out-in"
-      gap-16px
+      appear
-      justify-center
-      text-center
-      fixed
-      bottom-0
-      w-full
-      bg-app-bg-dark_grey
-      class="border-app-white/30"
-      lg="bg-app-black w-fit border-l-2 border-t-2 right-0 border-app-white"
-      p-12px
     >
-      <Button
+      <div
-        v-if="selectedTab !== tabsArray.length - 1"
+        v-if="transitionDone"
         flex
-        lg="w-fit hidden!"
+        flex-col
-        border
+        gap-16px
-        @click="next()"
+        justify-center
-      >
+        text-center
-        <span px-24px>NEXT SECTION</span>
-      </Button>
-      <span
-        v-if="selectedTab !== tabsArray.length - 1"
-        lg="hidden"
         block
-        text="12px italic app-white/50"
+        lg:fixed
-      >or you can submit changes by publishing them</span>
+        bottom-0
-      <div flex>
+        w-full
+        bg-app-bg-dark_grey
+        class="border-app-white/30"
+        lg="bg-app-black w-fit border-l-2 border-t-2 right-0 border-app-white"
+        p-12px
+      >
         <Button
-          w-full
+          v-if="selectedTab !== tabsArray.length - 1"
-          lg="w-fit"
+          flex
+          lg="w-fit hidden!"
           border
-          @click="navigateTo('/')"
+          @click="next()"
         >
-          <span px-24px>CANCEL</span>
+          <span px-24px>NEXT SECTION</span>
-        </Button>
-        <Button
-          w-full
-          lg="w-fit"
-          inverted-color
-          @click="publish(true)"
-        >
-          <UnoIcon
-            v-if="isPublishing"
-            w-108px
-            i-eos-icons-loading
-            text-black
-            text-18px
-          />
-          <span
-            v-else
-            px-24px
-          >PUBLISH</span>
         </Button>
+        <span
+          v-if="selectedTab !== tabsArray.length - 1"
+          lg="hidden"
+          block
+          text="12px italic app-white/50"
+        >or you can submit changes by publishing them</span>
+        <div flex>
+          <Button
+            w-full
+            lg="w-fit"
+            border
+            @click="navigateTo('/')"
+          >
+            <span px-24px>CANCEL</span>
+          </Button>
+          <Button
+            w-full
+            lg="w-fit"
+            inverted-color
+            @click="publish(true)"
+          >
+            <UnoIcon
+              v-if="isPublishing"
+              w-108px
+              i-eos-icons-loading
+              text-black
+              text-18px
+            />
+            <span
+              v-else
+              px-24px
+            >PUBLISH</span>
+          </Button>
+        </div>
       </div>
-    </div>
+    </Transition>
   </div>
 </template>