|
1 | 1 | <template> |
2 | 2 | <section class="project-wizard-assign-users"> |
3 | 3 | <div class="project-wizard-assign-users-search-shell"> |
4 | | - <label class="visually-hidden" :for="searchInputId">Search users</label> |
| 4 | + <label |
| 5 | + class="visually-hidden" |
| 6 | + :for="searchInputId" |
| 7 | + >Search users</label> |
5 | 8 | <input |
6 | 9 | :id="searchInputId" |
7 | 10 | :value="searchQuery" |
|
10 | 13 | placeholder="Search Users" |
11 | 14 | @input="emit('update:search', ($event.target as HTMLInputElement).value)" |
12 | 15 | > |
13 | | - <app-icon variant="search" size="22" no-margin /> |
| 16 | + <app-icon |
| 17 | + variant="search" |
| 18 | + size="22" |
| 19 | + no-margin |
| 20 | + /> |
14 | 21 | </div> |
15 | 22 |
|
16 | 23 | <div |
17 | 24 | v-if="loading || shouldShowSearchResults" |
18 | 25 | class="project-wizard-assign-users-results" |
19 | 26 | > |
20 | | - <div v-if="loading" class="project-wizard-assign-users-status"> |
| 27 | + <div |
| 28 | + v-if="loading" |
| 29 | + class="project-wizard-assign-users-status" |
| 30 | + > |
21 | 31 | <app-spinner size="sm" /> |
22 | 32 | <span>Loading users...</span> |
23 | 33 | </div> |
|
31 | 41 | @click="emit('add:user', user)" |
32 | 42 | > |
33 | 43 | <span class="project-wizard-assign-users-avatar"> |
34 | | - <app-icon variant="person" size="18" no-margin /> |
| 44 | + <app-icon |
| 45 | + variant="person" |
| 46 | + size="18" |
| 47 | + no-margin |
| 48 | + /> |
35 | 49 | </span> |
36 | 50 |
|
37 | 51 | <span class="project-wizard-assign-users-copy"> |
|
44 | 58 | </span> |
45 | 59 | </button> |
46 | 60 |
|
47 | | - <p v-if="visibleSearchResults.length === 0" class="project-wizard-assign-users-status"> |
| 61 | + <p |
| 62 | + v-if="visibleSearchResults.length === 0" |
| 63 | + class="project-wizard-assign-users-status" |
| 64 | + > |
48 | 65 | No users match your search. |
49 | 66 | </p> |
50 | 67 | </template> |
|
57 | 74 | class="project-wizard-assign-users-selected-item" |
58 | 75 | > |
59 | 76 | <span class="project-wizard-assign-users-avatar"> |
60 | | - <app-icon variant="person" size="18" no-margin /> |
| 77 | + <app-icon |
| 78 | + variant="person" |
| 79 | + size="18" |
| 80 | + no-margin |
| 81 | + /> |
61 | 82 | </span> |
62 | 83 |
|
63 | 84 | <span class="project-wizard-assign-users-copy"> |
|
75 | 96 | :aria-label="`Remove ${user.displayName}`" |
76 | 97 | @click="emit('remove:user', user.authUid)" |
77 | 98 | > |
78 | | - <app-icon variant="delete" size="20" no-margin /> |
| 99 | + <app-icon |
| 100 | + variant="delete" |
| 101 | + size="20" |
| 102 | + no-margin |
| 103 | + /> |
79 | 104 | </button> |
80 | 105 | </div> |
81 | 106 |
|
82 | | - <p v-if="selectedUsers.length === 0" class="project-wizard-assign-users-status"> |
| 107 | + <p |
| 108 | + v-if="selectedUsers.length === 0" |
| 109 | + class="project-wizard-assign-users-status" |
| 110 | + > |
83 | 111 | Search and add users for this project. |
84 | 112 | </p> |
85 | 113 | </div> |
|
0 commit comments