change color palette, change user_id to member_id

resources/js/Components/Common/Project/ProjectColorSelector.vue

@@ -6,15 +6,17 @@ const model = defineModel<string>({ default: '' });
 </script>
 
 <template>
-    <div class="px-3">
+    <div>
         <Dropdown align="bottom">
             <template #trigger>
-                <div
-                    :style="{
-                        backgroundColor: model,
-                        boxShadow: `var(--tw-ring-inset) 0 0 0 calc(5px + var(--tw-ring-offset-width)) ${model}30`,
-                    }"
-                    class="w-4 h-4 rounded-full cursor-pointer"></div>
+                <button
+                    class="p-2 bg-input-background hover:bg-tertiary transition rounded-full border border-input-border">
+                    <div
+                        :style="{
+                            backgroundColor: model,
+                        }"
+                        class="w-5 h-5 rounded-full cursor-pointer"></div>
+                </button>
             </template>
             <template #content>
                 <div class="text-white grid grid-cols-6 gap-3 px-3 py-3">

resources/js/Components/Common/Project/ProjectCreateModal.vue

@@ -9,12 +9,13 @@ import PrimaryButton from '@/Components/PrimaryButton.vue';
 import { useProjectsStore } from '@/utils/useProjects';
 import { useFocus } from '@vueuse/core';
 import ClientDropdown from '@/Components/Common/Client/ClientDropdown.vue';
-import { twMerge } from 'tailwind-merge';
 import Badge from '@/Components/Common/Badge.vue';
 import { useClientsStore } from '@/utils/useClients';
 import { storeToRefs } from 'pinia';
 import ProjectColorSelector from '@/Components/Common/Project/ProjectColorSelector.vue';
 import BillableRateInput from '@/Components/Common/BillableRateInput.vue';
+import { UserCircleIcon } from '@heroicons/vue/20/solid';
+import InputLabel from '@/Components/InputLabel.vue';
 
 const { createProject } = useProjectsStore();
 const { clients } = storeToRefs(useClientsStore());
@@ -63,33 +64,47 @@ const currentClientName = computed(() => {
             <div
                 class="sm:flex items-center space-y-2 sm:space-y-0 sm:space-x-4">
                 <div class="flex-1 flex items-center">
-                    <ProjectColorSelector
-                        v-model="project.color"></ProjectColorSelector>
-                    <TextInput
-                        id="projectName"
-                        ref="projectNameInput"
-                        v-model="project.name"
-                        type="text"
-                        placeholder="Project Name"
-                        @keydown.enter="submit()"
-                        class="mt-1 block w-full"
-                        required
-                        autocomplete="projectName" />
+                    <div class="text-center pr-5">
+                        <InputLabel for="color" value="Color" />
+                        <ProjectColorSelector
+                            class="mt-2.5"
+                            v-model="project.color"></ProjectColorSelector>
+                    </div>
+                    <div class="w-full">
+                        <InputLabel for="projectName" value="Project name" />
+                        <TextInput
+                            id="projectName"
+                            name="projectName"
+                            ref="projectNameInput"
+                            v-model="project.name"
+                            type="text"
+                            placeholder="The next big thing"
+                            @keydown.enter="submit()"
+                            class="mt-2 block w-full"
+                            required
+                            autocomplete="projectName" />
+                    </div>
                 </div>
                 <div class="sm:max-w-[120px]">
-                    <BillableRateInput v-model="project.billable_rate" />
+                    <InputLabel for="billableRate" value="Billable Rate" />
+                    <BillableRateInput
+                        v-model="project.billable_rate"
+                        name="billableRate" />
                 </div>
                 <div>
-                    <ClientDropdown v-model="project.client_id">
+                    <InputLabel for="client" value="Client" />
+                    <ClientDropdown class="mt-2" v-model="project.client_id">
                         <template #trigger>
-                            <Badge size="large">
-                                <div
-                                    :class="
-                                        twMerge('inline-block rounded-full')
-                                    "></div>
-                                <span>
-                                    {{ currentClientName }}
-                                </span>
+                            <Badge
+                                class="bg-input-background cursor-pointer hover:bg-tertiary"
+                                size="xlarge">
+                                <div class="flex items-center space-x-2">
+                                    <UserCircleIcon
+                                        class="w-5 text-icon-default"></UserCircleIcon>
+                                    <span>
+                                        {{ currentClientName }}
+                                    </span>
+                                </div>
                             </Badge>
                         </template>
                     </ClientDropdown>
@@ -97,7 +112,7 @@ const currentClientName = computed(() => {
             </div>
         </template>
         <template #footer>
-            <SecondaryButton @click="show = false"> Cancel </SecondaryButton>
+            <SecondaryButton @click="show = false"> Cancel</SecondaryButton>
 
             <PrimaryButton
                 class="ms-3"

resources/js/Components/Common/Project/ProjectEditModal.vue

@@ -78,7 +78,9 @@ const currentClientName = computed(() => {
                         autocomplete="projectName" />
                 </div>
                 <div class="sm:max-w-[120px]">
-                    <BillableRateInput v-model="project.billable_rate" />
+                    <BillableRateInput
+                        v-model="project.billable_rate"
+                        name="billable_rate" />
                 </div>
                 <div class="">
                     <ClientDropdown v-model="project.client_id">

resources/js/Components/Common/Project/ProjectMultiselectDropdown.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import MultiselectDropdown from '@/Components/Common/MultiselectDropdown.vue';
+import { storeToRefs } from 'pinia';
+import { useProjectsStore } from '@/utils/useProjects';
+import type { Project } from '@/utils/api';
+
+const projectsStore = useProjectsStore();
+const { projects } = storeToRefs(projectsStore);
+
+function getKeyFromItem(item: Project) {
+    return item.id;
+}
+
+function getNameForItem(item: Project) {
+    return item.name;
+}
+</script>
+
+<template>
+    <MultiselectDropdown
+        searchPlaceholder="Search for a Project..."
+        :items="projects"
+        :get-key-from-item="getKeyFromItem"
+        :get-name-for-item="getNameForItem">
+        <template #trigger>
+            <slot name="trigger"></slot>
+        </template>
+    </MultiselectDropdown>
+</template>