1423 UI review create project (#1446)

* #1423 Hide text 1)Test project 2)Make sure your project is hidden and check text color * #1423 Add (i) on not listed the project * #1423 Add hide/show test project * #1423 Fix lint * #1423 Fix url
rfcx · Jan 23, 2024 · 4d6d5b0 · 4d6d5b0
1 parent 45f2a63
commit 4d6d5b0
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 8 deletions.
diff --git a/apps/cli/src/db/seeders/_data/users.ts b/apps/cli/src/db/seeders/_data/users.ts
@@ -23,6 +23,20 @@ export const rawUsers: UserProfile[] = [
     idAuth0: 'auth0|6451c69c9ea0d78b7346ea61',
     firstName: 'Bhattarapong',
     lastName: 'Somwong'
+  },
+  {
+    id: 9003,
+    email: '[email protected]',
+    idAuth0: 'google-oauth2|106668036500604495330',
+    firstName: 'ratree',
+    lastName: 'onchana'
+  },
+  {
+    id: 9004,
+    email: '[email protected]',
+    idAuth0: 'auth0|5fa13093c5fb6300798e93fa',
+    firstName: 'Ratree',
+    lastName: 'Onchana'
   }
 ]
 
@@ -31,7 +45,8 @@ export const rawUsersWithRolesToProjects: LocationProjectAndRoles[] = [
     slug: 'puerto-rico',
     users: [
       { userId: 9001, roleId: 1 }, // nui as owner
-      { userId: 9002, roleId: 3 } // art as guest
+      { userId: 9002, roleId: 3 }, // art as guest
+      { userId: 9003, roleId: 1 } // tree as admin
     ]
   },
   {

diff --git a/apps/website/src/projects/components/form/project-form.vue b/apps/website/src/projects/components/form/project-form.vue
@@ -65,13 +65,13 @@
     <input
       id="project-settings-on-going-project-checkbox"
       type="checkbox"
-      class="w-5 h-5 border mb-1 border-util-gray-01 rounded dark:bg-echo focus:border-white-600 focus:ring-frequency dark:border-white-600 dark:focus:ring-frequency dark:ring-offset-gray-800 disabled:opacity-70 disabled:cursor-not-allowed"
+      class="w-5 h-5 border-2 mb-1 rounded dark:bg-echo focus:ring-frequency border-white dark:focus:ring-frequency dark:ring-offset-gray-800 disabled:opacity-70 disabled:cursor-not-allowed"
       :disabled="isDisabled"
       :checked="onGoing"
       @click="onGoingClick()"
     >
     <label
-      class="font-light text-gray-500 dark:text-util-gray-01 ml-2 cursor-pointer"
+      class="font-light ml-2 cursor-pointer"
       @click="onGoingClick()"
     >This is an on-going project</label>
   </div>

diff --git a/apps/website/src/projects/components/form/project-listed-form.vue b/apps/website/src/projects/components/form/project-listed-form.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="mt-6 flex flex-col gap-y-[17px]">
-    <h5>Test project</h5>
+    <h5 v-if="!isCreateProject">Test project</h5>
     <p>
       Your project's basic information, such as its name, will be listed and searchable on Arbimon.
       Detailed insights can be shared at your discretion. Review our
@@ -11,12 +11,12 @@
         privacy policies
       </a>
     </p>
-    <span class="text-xs">Make sure the Project’s Insight is hidden to make it a test project.</span>
+    <span v-if="!isCreateProject" class="text-xs">Make sure the Project’s Insight is hidden to make it a test project.</span>
     <div class="flex flex-row">
       <input
         id="project-settings-listed-project-checkbox"
         type="checkbox"
-        class="w-5 h-5 border mb-1 border-util-gray-01 rounded cursor-pointer  dark:bg-echo focus:border-white-600 focus:ring-frequency dark:border-white-600 dark:focus:ring-frequency dark:ring-offset-gray-800 disabled:opacity-70 disabled:cursor-not-allowed"
+        class="w-5 h-5 border-2 mb-1 rounded cursor-pointer  dark:bg-echo border-white focus:ring-frequency dark:focus:ring-frequency dark:ring-offset-gray-800 disabled:opacity-70 disabled:cursor-not-allowed"
         :disabled="isDisabled"
         :checked="!isPublicProject"
         @click="toggleListedProject()"
@@ -28,6 +28,7 @@
         This is a test project, do NOT list it on Arbimon.
       </label>
       <icon-i-info
+        :extra-class="`w-100`"
         tooltip-id="project-settings-project-listed"
         :tooltip-text="infoIconText"
       />
@@ -41,8 +42,7 @@ import { onMounted, ref, watch } from 'vue'
 
 import IconIInfo from '../icon-i-info.vue'
 
-const props = defineProps<{ isPublic: boolean | undefined, isDisabled?: boolean }>()
-
+const props = defineProps<{ isPublic: boolean | undefined, isDisabled?: boolean, isCreateProject?: boolean }>()
 const emit = defineEmits<{(e: 'emitProjectListed', value: boolean): void}>()
 
 // eslint-disable-next-line regex/invalid

diff --git a/apps/website/src/projects/components/icon-i-info.vue b/apps/website/src/projects/components/icon-i-info.vue
@@ -9,6 +9,7 @@
     :id="tooltipId"
     role="tooltip"
     class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-gray-900 transition-opacity duration-300 bg-white rounded-lg shadow-sm opacity-0 tooltip"
+    :class="extraClass"
   >
     {{ tooltipText }}
     <div
@@ -25,6 +26,7 @@ import { onMounted } from 'vue'
 defineProps<{
   tooltipId: string
   tooltipText?: string
+  extraClass?: string
 }>()
 
 onMounted(() => {

diff --git a/apps/website/src/projects/create-project-page.vue b/apps/website/src/projects/create-project-page.vue
@@ -21,6 +21,7 @@
         <project-listed-form
           :is-public="isPublic"
           :is-disabled="false"
+          :is-create-project="true"
           @emit-project-listed="toggleListedProject"
         />
       </div>

diff --git a/apps/website/src/projects/project-settings-page.vue b/apps/website/src/projects/project-settings-page.vue
@@ -47,6 +47,7 @@
           <project-listed-form
             :is-public="settings?.isPublic"
             :is-disabled="!isUserHasFullAccess || settings?.isPublished"
+            :is-create-project="false"
             @emit-project-listed="toggleListedProject"
           />
           <div class="my-6 h-[1px] w-full bg-util-gray-01" />