feat: feedback changes part 1

2024-10-15 16:46:26 +02:00 · 2024-09-27 12:14:49 +02:00 · 2024-09-27 12:14:49 +02:00 · dcf953862c
commit dcf953862c
parent 5ed800eac3
21 changed files with 115 additions and 39 deletions
--- a/components/Card.vue
+++ b/components/Card.vue
@ -81,6 +81,8 @@ const projectItems: { label: string | string[], type: string, rating?: ProjectRa
            text-12px
            leading-16px
            lg:hidden
+            md:opacuty-100
+            opacity-70
          >
            {{ project.usecases?.join(', ') }}
          </p>
@ -118,8 +120,11 @@ const projectItems: { label: string | string[], type: string, rating?: ProjectRa
          >
            <UnoIcon
              i-ic-baseline-language
-              text="24px app-text-grey"
+              text="24px app-text-grey hover:app-white"
+              transition-all
+              duration-250
            />
+
          </NuxtLink>
          <NuxtLink
            v-if="projectItem.label[1]"
@ -130,8 +135,10 @@ const projectItems: { label: string | string[], type: string, rating?: ProjectRa
          >
            <UnoIcon
              i-mdi-github
-              text="24px app-text-grey"
+              text="24px app-text-grey hover:app-white"
              text-27px
+              transition-all
+              duration-250
            />
          </NuxtLink>
          <NuxtLink
@ -143,7 +150,9 @@ const projectItems: { label: string | string[], type: string, rating?: ProjectRa
          >
            <UnoIcon
              i-bi-twitter-x
-              text="24px app-text-grey"
+              text="24px app-text-grey hover:app-white"
+              transition-all
+              duration-250
            />
          </NuxtLink>
        </div>
@ -189,7 +198,10 @@ const projectItems: { label: string | string[], type: string, rating?: ProjectRa
          <UnoIcon

            i-iconoir-internet
-            text="24px"
+            text="20px"
+            md:opacity-100
+            opacity-70
+            hover:opacity="100"
          />
        </NuxtLink>
        <div
--- a/components/CategorySelectBox.vue
+++ b/components/CategorySelectBox.vue
@ -29,6 +29,9 @@ function onOptionSelected(value: string | number) {
      <HeadlessListboxButton
        :id="`headless-listbox-button-${name}`"
        class="relative cursor-pointer py-6px px-14px text-left border-2px bg-app-white text-app-black text-xs sm:text-sm sm:leading-6"
+        hover="bg-app-black text-app-white"
+        transition="all"
+        duration-250
        :class="{ 'text-app-danger!': isOptionSelected?.value === 'sunset' }"
      >
        <span class="block truncate mr-8px font">{{ isOptionSelected?.label }} <span
--- a/components/Footer.vue
+++ b/components/Footer.vue
@ -13,6 +13,7 @@
    </div>
    <div
      p-24px
+      pb-8px
      flex
      items-center
    >
--- a/components/Project/Create/Categories/BasicInfo.vue
+++ b/components/Project/Create/Categories/BasicInfo.vue
@ -98,6 +98,8 @@ defineExpose({
    <ProjectCreateComponentsInput
      v-model="description"
      lg="w-1/2"
+      textarea
+      :textarea-rows="5"
      label="Description"
      text-area
      required
--- a/components/Project/Create/Categories/Technology.vue
+++ b/components/Project/Create/Categories/Technology.vue
@ -58,6 +58,13 @@ defineExpose({
      flex-col
      gap-24px
    >
+      <ProjectCreateComponentsSelect
+        v-model="assetType"
+        :options="assetCustodyData?.map(c => ({ label: c.name, value: c.id }))"
+        label="Asset custody type"
+        placeholder="Select custody type"
+        hint="How are user’s fund handled? (non-custody, multisig, pool,...)"
+      />
      <ProjectCreateComponentsToggle
        v-model="openSource"
        label="Open source"
@ -69,13 +76,7 @@ defineExpose({
        hint="Are developers able to upgrade and change deployed contract?"
      />
    </div>
-    <ProjectCreateComponentsSelect
-      v-model="assetType"
-      :options="assetCustodyData?.map(c => ({ label: c.name, value: c.id }))"
-      label="Asset custody type"
-      placeholder="Select custody type"
-      hint="How are user’s fund handled? (non-custody, multisig, pool,...)"
-    />
+
    <ProjectCreateComponentsCategoryDivider
      w-full
      title="ADDITIONAL INFO"
--- a/components/Project/Create/Components/CategoryDivider.vue
+++ b/components/Project/Create/Components/CategoryDivider.vue
@ -11,6 +11,7 @@ defineProps<{
    justify-between
    gap-8px
    my-40px
+    mb-24px
    lg="gap-32px"
  >
    <div
--- a/components/Project/Create/Components/SelectChips.vue
+++ b/components/Project/Create/Components/SelectChips.vue
@ -97,6 +97,7 @@ function addOption() {
        </HeadlessComboboxLabel>
        <div class="relative font-700 mt-2 bg-app-black">
          <HeadlessComboboxButton
+
            as="div"
            class="relative w-full cursor-pointer p-8px text-left border-2px text-app-white bg-black sm:text-sm sm:leading-6"
            :class="error ? 'border-app-danger/50' : 'border-white/30'"
@ -146,7 +147,7 @@ function addOption() {
        >
          <HeadlessComboboxOptions
            lg="w-1/2"
-            class="w-full absolute z-100 max-h-60 divide-y-2px border-2px border-t-0 overflow-auto bg-app-black text-app-white focus:outline-none sm:text-sm border-white/30"
+            class="w-full absolute z-100 max-h-60 divide-y-2px border-2px border-t-0 overflow-auto bg-app-black text-app-white focus:outline-none sm:text-sm border-white"
          >
            <div
              v-if="filteredOptions.length === 0 && query !== '' && props.canAddNew"
--- a/components/Project/ProjectDetailCategoryDivider.vue
+++ b/components/Project/ProjectDetailCategoryDivider.vue
@ -11,8 +11,8 @@ defineProps<{
    flex
    justify-between
    gap-8px
-    lg:gap-32px
-    mt-36px
+    lg:gap-24px
+    mt-24px
  >
    <div
      flex
--- a/components/Project/ProjectGridGroup.vue
+++ b/components/Project/ProjectGridGroup.vue
@ -12,7 +12,7 @@ const { switcher } = storeToRefs(useData())

 const groupCollapsed = ref(false)

-const shownProjectsCount = ref(15)
+const shownProjectsCount = ref(10)

 const shownProjects = computed(() => props.group.projects.slice(0, shownProjectsCount.value))
 </script>
@ -41,7 +41,7 @@ const shownProjects = computed(() => props.group.projects.slice(0, shownProjects
      />
      <button
        type="button"
-        :class="[groupCollapsed ? 'i-ic-baseline-arrow-drop-up' : 'i-ic-baseline-arrow-drop-down']"
+        :class="[groupCollapsed ? 'i-ic-baseline-arrow-drop-down' : 'i-ic-baseline-arrow-drop-up']"
        text="app-text-grey 24px"
        @click="groupCollapsed = !groupCollapsed"
      />
@ -79,6 +79,8 @@ const shownProjects = computed(() => props.group.projects.slice(0, shownProjects
        text="12px lg:14px"
        leading="24px lg:32px"
        font-bold
+        pt-16px
+        pb-24px
        text-app-text-grey
        @click="shownProjectsCount += 15"
      >
--- a/components/Project/ProjectGridGroupSort.vue
+++ b/components/Project/ProjectGridGroupSort.vue
@ -34,6 +34,8 @@ const cardTitles = ref< { label: string, sortKey: string, togglable?: boolean }[
    mb-16px
  >
    <div
+      py-8px
+
      flex
      items-center
      gap-4px
@ -45,6 +47,8 @@ const cardTitles = ref< { label: string, sortKey: string, togglable?: boolean }[
        text="12px lg:14px"
        leading="16px lg:24px"
        whitespace-nowrap
+        md:mt-0px
+        mt-4px
      >
        Project name
      </p>
@ -87,6 +91,9 @@ const cardTitles = ref< { label: string, sortKey: string, togglable?: boolean }[
        text="12px lg:14px "
        leading="16px lg:24px"
        whitespace-nowrap
+        hover="text-app-white"
+        transition-all
+        duration-250
      >
        {{ title.label }}
      </p>
--- a/components/Project/ProjectHeading.vue
+++ b/components/Project/ProjectHeading.vue
@ -45,7 +45,6 @@ const logo = props.project?.logos?.at(0)?.url
        relative
      >
        <NuxtImg
-          border="1px app-text-grey"
          :src="logo ?? '/no-image-1-1.svg'"
          class="bg-app-bg-grey object-cover h-full vertical-align[middle] block w-full h-[300px] "
        />
@ -84,7 +83,7 @@ const logo = props.project?.logos?.at(0)?.url
        items-center
        lg:items-start
        justify-between
-        gap-y="lg:12px 24px"
+        gap-y="12px"
        text-app-text-grey
        w-full
      >
@ -127,6 +126,8 @@ const logo = props.project?.logos?.at(0)?.url
            Usecases:
          </h2>
          <p
+            mt-8px
+            mb-16px
            text-app-white
            col-span-9
          >
@ -142,6 +143,8 @@ const logo = props.project?.logos?.at(0)?.url
          order-3
          lg:order-2
          w-full
+          md:ml-0px
+          ml-18px
        >
          <div
            flex
@ -205,11 +208,14 @@ const logo = props.project?.logos?.at(0)?.url
              flex-col
              lg:flex-row
              gap-y-4px
-              items-center
+              md:items-center
+              items-start
            >
              <p
                text="12px lg:16px"
                leading="16px lg:24px"
+                md:ml-0
+                ml-10px
              >
                {{ rating.name }}:
              </p>
@ -246,7 +252,7 @@ const logo = props.project?.logos?.at(0)?.url
              text="16px lg:24px app-white"
              leading="24px md:32px"
              max-h-="32px md:40px"
-              max-w="84px"
+              max-w="md:84px 64px"
              w-full
              h-full
              font-700
--- a/components/Project/ProjectOpeness.vue
+++ b/components/Project/ProjectOpeness.vue
@ -74,8 +74,11 @@ defineProps<{
        >
          Assets used
        </h3>
-        <p leading="20px lg:24px">
-          {{ project.assets_used?.map((a) => a.toUpperCase()).join(', ') }}
+        <p
+          leading="20px lg:24px"
+          :class=" project.assets_used ? '' : 'opacity-50'"
+        >
+          {{ project.assets_used ? project.assets_used?.map((a) => a.toUpperCase()).join(', ') : 'N/A' }}
        </p>
      </div>
      <div>
@ -86,7 +89,10 @@ defineProps<{
        >
          Native token
        </h3>
-        <p leading="20px lg:24px">
+        <p
+          leading="20px lg:24px"
+          :class=" project.tokens?.length ? '' : 'opacity-50'"
+        >
          {{ project.tokens?.length ? project.tokens[0]?.name : 'N/A' }}
        </p>
      </div>
@ -98,8 +104,11 @@ defineProps<{
        >
          Project launch day
        </h3>
-        <p leading="20px lg:24px">
-          {{ project.product_launch_day || 'N/A'}}
+        <p
+          leading="20px lg:24px"
+          :class=" project.product_launch_day ? '' : 'opacity-50'"
+        >
+          {{ project.product_launch_day || 'N/A' }}
        </p>
      </div>
    </div>
--- a/components/Project/ProjectRatingInfo.vue
+++ b/components/Project/ProjectRatingInfo.vue
@ -32,7 +32,7 @@ withDefaults(defineProps<{ items: ProjectRatingItem[], compact?: boolean }>(), {
      >
        <div
          :class="[item.isValid ? 'i-ic-sharp-thumb-up' : 'i-ic-sharp-thumb-down']"
-          text-20px
+          text-16px
          mt--4px
        />
        {{ item.label }}
--- a/components/Project/ProjectSecurityAudit.vue
+++ b/components/Project/ProjectSecurityAudit.vue
@ -16,6 +16,7 @@ defineProps<{
    py-12px
    px-16px
    bg-app-bg-audits-card
+    hover="brightness-120%"
  >
    <div
      grid
--- a/components/SearchBox.vue
+++ b/components/SearchBox.vue
@ -27,6 +27,8 @@ const isSearchFocused = ref(false)
      w-full
      h-40px
      hover:opacity-100
+      md:max-w-470px
+
      :class="isSearchFocused ? 'opacity-100' : 'opacity-25'"
    >
      <div
--- a/components/SortSelectBox.vue
+++ b/components/SortSelectBox.vue
@ -54,7 +54,7 @@ const selectedValue = useVModel(props, 'modelValue', emits)
        leave-to-class="opacity-0"
      >
        <HeadlessListboxOptions
-          class="absolute z-100 max-h-60 w-full divide-y-2px border-2px  overflow-auto bg-app-black text-app-white focus:outline-none sm:text-sm"
+          class="absolute md: left--12 z-100 max-h-60 w-150px divide-y-2px border-2px  overflow-auto bg-app-black text-app-white focus:outline-none sm:text-sm"
        >
          <HeadlessListboxOption
            v-for="option in props.options"
@ -64,7 +64,7 @@ const selectedValue = useVModel(props, 'modelValue', emits)
            :value="option.value"
          >
            <li
-              class="w-full relative cursor-pointer select-none py-8px p-16px text-xs sm:text-sm"
+              class="w-full relative cursor-pointer select-none py-8px p-16px text-sm"
              :class="[active ? 'bg-#ffffff1a' : 'text-white']"
            >
              <span
--- a/layouts/default.vue
+++ b/layouts/default.vue
@ -51,7 +51,19 @@ watch([scrollY, top, y], (newValues, oldValues) => {
    <div
      app-container
      mt-32px
+      relative
    >
+      <div
+        md:hidden
+        block
+        absolute
+        z-5
+        class="bg-gradient-to-r from-transparent to-app-black "
+        w-50px
+        h-35px
+        top-14
+        right-0
+      />
      <div
        flex
        w-full
@ -81,6 +93,7 @@ watch([scrollY, top, y], (newValues, oldValues) => {
              flex
              items-center
              gap-16px
+              relative
              overflow-x-auto
              pb-274px
              mb--250px
--- a/layouts/detail.vue
+++ b/layouts/detail.vue
@ -18,6 +18,12 @@ watch(y, (newY, oldY) => {
    w-full
  >
    <Navigation />
-    <slot />
+    <div
+      max-w-1160px
+      w-full
+      mx-auto
+    >
+      <slot />
+    </div>
  </div>
 </template>
--- a/pages/project/[id]/edit.vue
+++ b/pages/project/[id]/edit.vue
@ -274,7 +274,7 @@ const transitionDone = ref(false)
            :model-value="selectedTab"
            label="Choose category"
            :options="tabs.map(t => ({ label: t.label, value: t.value }))"
-            :border-opacity="30"
+            :border-opacity="100"
            w-full
            lg:hidden
            block
@ -299,13 +299,13 @@ const transitionDone = ref(false)
    <div
      border-t-2
      class="border-app-white/30"
-      px-16px
-      py-24px
+      px-8px
+      py-8px
+      md:py-24px
    >
      <div
        app-container
-        mb-170px
-        lg="mb-55px"
+        mb-55px
      >
        <ClientOnly>
          <Transition
@ -333,7 +333,7 @@ const transitionDone = ref(false)
            w-full
            flex
            flex-col
-            gap-24px
+            gap-8px
          />
          <Button
            v-if="selectedTab !== tabs[tabs.length - 1].value"
@ -351,10 +351,10 @@ const transitionDone = ref(false)
    <div
      flex
      flex-col
-      gap-16px
+      gap-10px
      justify-center
      text-center
-      fixed
+      md:fixed
      bottom-0
      w-full
      bg-app-bg-dark_grey
--- a/pages/project/[id]/index.vue
+++ b/pages/project/[id]/index.vue
@ -49,7 +49,10 @@ useSeoMeta({
            <ProjectTechnology :project="project" />
            <ProjectPrivacy :project="project" />
            <ProjectSecurity :project="project" />
-            <ProjectHistory :project="project" />
+            <ProjectHistory
+              v-if="project.history"
+              :project="project"
+            />
          </div>
        </div>
      </div>
--- a/unocss.config.ts
+++ b/unocss.config.ts
@ -10,7 +10,7 @@ import { collections } from './unocss.config.collections'
 export default defineConfig({
  shortcuts: [
    {
-      'app-container': 'px-12px sm:px-1.5rem max-w-1400px m-auto w-full',
+      'app-container': 'px-12px sm:px-1.5rem max-w-1140px 2xl:max-w-1400px m-auto w-full',
      'custom-link': 'text-app-text-grey hover:underline underline-offset-4px text-18px font-400 leading-32px cursor-pointer',
    },
    {
@ -41,6 +41,12 @@ export default defineConfig({
    }),
  ],
  theme: {
+    extend: {
+      screens: {
+        '2xl': '1600px',
+      },
+
+    },
    colors: {
      app: {
        white: '#fff',