Merge pull request #47 from web3privacy/pb/feedback-fixes

feat: feedback changes part 1

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

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

components/Footer.vue

@@ -13,6 +13,7 @@
     </div>
     <div
       p-24px
+      pb-8px
       flex
       items-center
     >

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

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"

components/Project/Create/Components/CategoryDivider.vue

@@ -11,6 +11,7 @@ defineProps<{
     justify-between
     gap-8px
     my-40px
+    mb-24px
     lg="gap-32px"
   >
     <div

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"

components/Project/ProjectDetailCategoryDivider.vue

@@ -11,8 +11,8 @@ defineProps<{
     flex
     justify-between
     gap-8px
-    lg:gap-32px
+    lg:gap-24px
-    mt-36px
+    mt-24px
   >
     <div
       flex

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"
       >

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>

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

components/Project/ProjectOpeness.vue

@@ -74,8 +74,11 @@ defineProps<{
         >
           Assets used
         </h3>
-        <p leading="20px lg:24px">
+        <p
-          {{ project.assets_used?.map((a) => a.toUpperCase()).join(', ') }}
+          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">
+        <p
-          {{ project.product_launch_day || 'N/A'}}
+          leading="20px lg:24px"
+          :class=" project.product_launch_day ? '' : 'opacity-50'"
+        >
+          {{ project.product_launch_day || 'N/A' }}
         </p>
       </div>
     </div>

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 }}

components/Project/ProjectSecurityAudit.vue

@@ -16,6 +16,7 @@ defineProps<{
     py-12px
     px-16px
     bg-app-bg-audits-card
+    hover="brightness-120%"
   >
     <div
       grid

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

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

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

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>

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
+      px-8px
-      py-24px
+      py-8px
+      md:py-24px
     >
       <div
         app-container
-        mb-170px
+        mb-55px
-        lg="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

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>

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',