Skip to content

Commit 7e74bd8

Browse files
lyang2821lyang2821
committed
dashboard style changes
1 parent 1dcc150 commit 7e74bd8

File tree

13 files changed

+362
-376
lines changed

13 files changed

+362
-376
lines changed

‎lapdev-dashboard/src/account.rs

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ pub fn Login() -> impl IntoView {
4747
view! {
4848
<section class="bg-gray-50">
4949
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto h-screen lg:py-0">
50-
<a href="#" class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
50+
<a href="#" class="flex items-center mb-6 text-2xl font-semibold text-gray-900">
5151
<svg class="w-10 h-10 mr-4" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 1024 1024">
5252
<path d="M512 0C390.759 0 279.426 42.2227 191.719 112.656L191.719 612L351.719 612L351.719 332L422 332L431.719 332L431.719 332.344C488.169 334.127 541.249 351.138 581.875 380.625C627.591 413.806 654.875 460.633 654.875 512C654.875 563.367 627.591 610.194 581.875 643.375C541.249 672.862 488.169 689.873 431.719 691.656L431.719 1017.69C457.88 1021.81 484.68 1024 512 1024C794.77 1024 1024 794.77 1024 512C1024 229.23 794.77 0 512 0ZM111.719 192.906C41.8539 280.432 0 391.303 0 512C0 738.766 147.487 930.96 351.719 998.25L351.719 692L151.719 692L151.719 691.844L111.719 691.844L111.719 192.906ZM738.219 372C741.597 372.107 745.042 373.02 748.312 374.812L946.281 483.312C952.311 486.616 956.692 492.393 959.188 499.156C959.821 500.874 960.317 502.641 960.688 504.469C960.764 504.834 960.841 505.196 960.906 505.562C961.12 506.807 961.225 508.071 961.312 509.344C961.378 510.235 961.498 511.112 961.5 512C961.498 512.888 961.378 513.765 961.312 514.656C961.226 515.929 961.12 517.193 960.906 518.438C960.841 518.804 960.764 519.166 960.688 519.531C960.317 521.359 959.821 523.126 959.188 524.844C956.692 531.608 952.311 537.384 946.281 540.688L748.312 649.188C735.232 656.355 719.818 649.367 713.875 633.594C707.932 617.82 713.7 599.23 726.781 592.062L872.875 512L726.781 431.938C713.7 424.771 707.932 406.18 713.875 390.406C718.332 378.576 728.085 371.678 738.219 372ZM431.719 412.344L431.719 611.656C513.56 608.208 574.875 561.985 574.875 512C574.875 462.015 513.56 415.792 431.719 412.344Z" />
5353
<path d="M742 403.688C740.062 403.483 738.097 404.438 737.094 406.25C735.756 408.666 736.615 411.694 739.031 413.031L925.719 516.375C928.135 517.712 931.194 516.822 932.531 514.406C933.869 511.99 932.979 508.962 930.562 507.625L743.875 404.281C743.271 403.947 742.646 403.756 742 403.688Z" />
@@ -87,15 +87,15 @@ pub fn LoginWithView(auth_providers: Vec<AuthProvider>) -> impl IntoView {
8787
class="max-w-96 w-full"
8888
class:hidden=move || login.with(|l| l.is_none())
8989
>
90-
<h1 class="mb-4 text-center text-2xl font-bold leading-tight tracking-tight text-gray-900 dark:text-white">
90+
<h1 class="mb-4 text-center text-2xl font-bold leading-tight tracking-tight text-gray-900">
9191
Sign in to your account
9292
</h1>
9393
<div
94-
class="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700"
94+
class="w-full bg-white rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0"
9595
>
9696
<div class="p-6 flex flex-col space-y-3">
9797
<button type="button"
98-
class="w-full text-gray-900 bg-white hover:bg-gray-100 border border-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-gray-600 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700"
98+
class="w-full text-gray-900 bg-white hover:bg-gray-100 border border-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center"
9999
class:hidden={ let auth_providers = auth_providers.clone(); move || !auth_providers.contains(&AuthProvider::Github) }
100100
on:click=move |_| { create_action(move |_| {now_login(AuthProvider::Github)}).dispatch(()) }
101101
>
@@ -106,7 +106,7 @@ pub fn LoginWithView(auth_providers: Vec<AuthProvider>) -> impl IntoView {
106106
</button>
107107

108108
<button type="button"
109-
class="w-full text-gray-900 bg-white hover:bg-gray-100 border border-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-gray-600 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700"
109+
class="w-full text-gray-900 bg-white hover:bg-gray-100 border border-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center"
110110
class:hidden=move || !auth_providers.contains(&AuthProvider::Gitlab)
111111
on:click=move |_| { create_action(move |_| {now_login(AuthProvider::Gitlab)}).dispatch(()) }
112112
>
@@ -137,37 +137,37 @@ pub fn NavUserControl(user_control_hidden: RwSignal<bool>) -> impl IntoView {
137137

138138
view! {
139139
<div
140-
class="absolute z-50 my-2 right-0 w-56 text-base list-none bg-white rounded divide-y divide-gray-100 shadow border dark:bg-gray-700 dark:divide-gray-600 rounded-xl"
140+
class="absolute z-50 my-2 right-0 w-56 text-base list-none bg-white rounded divide-y divide-gray-100 shadow border rounded-xl"
141141
class:hidden=move || user_control_hidden.get()
142142
>
143143
<div class="py-3 px-4">
144-
<span class="block text-sm font-semibold text-gray-900 dark:text-white">
144+
<span class="block text-sm font-semibold text-gray-900">
145145
{ move || login.get().flatten().and_then(|l| l.name).unwrap_or("".to_string()) }
146146
</span>
147-
<span class="block text-sm text-gray-900 truncate dark:text-white">
147+
<span class="block text-sm text-gray-900 truncate">
148148
{ move || login.get().flatten().and_then(|l| l.email).unwrap_or("".to_string()) }
149149
</span>
150150
</div>
151151
<ul
152-
class="py-1 text-gray-700 dark:text-gray-300"
152+
class="py-1 text-gray-700"
153153
aria-labelledby="dropdown"
154154
>
155155
<li>
156156
<a
157157
href="/account"
158-
class="block py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white"
158+
class="block py-2 px-4 text-sm hover:bg-gray-100"
159159
>User settings</a
160160
>
161161
</li>
162162
</ul>
163163
<ul
164-
class="py-1 text-gray-700 dark:text-gray-300"
164+
class="py-1 text-gray-700"
165165
aria-labelledby="dropdown"
166166
>
167167
<li>
168168
<a
169169
href="#"
170-
class="block py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
170+
class="block py-2 px-4 text-sm hover:bg-gray-100"
171171
on:click=logout
172172
>Sign out</a
173173
>
@@ -181,10 +181,10 @@ pub fn NavUserControl(user_control_hidden: RwSignal<bool>) -> impl IntoView {
181181
pub fn AccountSettings() -> impl IntoView {
182182
view! {
183183
<div class="border-b pb-4">
184-
<h5 class="mr-3 text-2xl font-semibold dark:text-white">
184+
<h5 class="mr-3 text-2xl font-semibold">
185185
User Settings
186186
</h5>
187-
<p class="text-gray-700 dark:text-gray-400">{"Manage your account settings"}</p>
187+
<p class="text-gray-700">{"Manage your account settings"}</p>
188188
</div>
189189
}
190190
}
@@ -226,8 +226,8 @@ pub fn JoinView() -> impl IntoView {
226226
{
227227
move || if let Some(error) = result.with(|r| r.as_ref().and_then(|r| r.as_ref().ok().cloned())).flatten() {
228228
view! {
229-
<div class="my-2 p-4 rounded-lg bg-red-50 dark:bg-gray-800 ">
230-
<span class="text-sm font-medium text-red-800 dark:text-red-400">{ error.error }</span>
229+
<div class="my-2 p-4 rounded-lg bg-red-50">
230+
<span class="text-sm font-medium text-red-800">{ error.error }</span>
231231
</div>
232232
}.into_view()
233233
} else {

‎lapdev-dashboard/src/audit_log.rs

Lines changed: 42 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -157,36 +157,36 @@ pub fn AuditLogView() -> impl IntoView {
157157
<Datepicker value=to_date />
158158
<button
159159
type="button"
160-
class="ml-4 px-4 py-2 text-sm font-medium text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
160+
class="ml-4 px-4 py-2 text-sm font-medium text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 focus:outline-none"
161161
on:click=move |_| get_action.dispatch(())
162162
>
163163
Search
164164
</button>
165165
</div>
166166
{ move || if let Some(error) = error.get() {
167167
view! {
168-
<div class="my-4 p-4 rounded-lg bg-red-50 dark:bg-gray-800 ">
169-
<span class="text-sm font-medium text-red-800 dark:text-red-400">{ error }</span>
168+
<div class="my-4 p-4 rounded-lg bg-red-50">
169+
<span class="text-sm font-medium text-red-800">{ error }</span>
170170
</div>
171171
}.into_view()
172172
} else {
173173
view!{}.into_view()
174174
}}
175175

176176
<div class="mt-4 flex flex-row items-center justify-between">
177-
<span class="text-sm font-normal text-gray-500 dark:text-gray-400">
177+
<span class="text-sm font-normal text-gray-500">
178178
{"Showing "}
179-
<span class="font-semibold text-gray-900 dark:text-white">
179+
<span class="font-semibold text-gray-900">
180180
{move || format!("{}-{}", audit_logs.with(|a| if a.records.is_empty() {0} else {1} + a.page * a.page_size ), audit_logs.with(|a| if a.records.is_empty() {0} else {a.records.len() as u64} + a.page * a.page_size ))}
181181
</span>
182182
{" of "}
183-
<span class="font-semibold text-gray-900 dark:text-white">{move || audit_logs.with(|a| a.total_items)}</span>
183+
<span class="font-semibold text-gray-900">{move || audit_logs.with(|a| a.total_items)}</span>
184184
</span>
185185
<div class="flex flex-row items-center">
186186
<p class="mr-2">{"rows per page"}</p>
187187

188188
<select
189-
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-18 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
189+
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-18 p-2.5"
190190
on:change=change_page_size
191191
>
192192
<option selected>10</option>
@@ -220,53 +220,60 @@ pub fn AuditLogView() -> impl IntoView {
220220
</div>
221221
</div>
222222

223-
<div class="mt-2 flex items-center w-full px-4 py-2 text-gray-900 dark:text-white bg-gray-50 dark:bg-gray-700">
224-
<span class="w-1/4 truncate">Time</span>
225-
<span class="w-1/4 truncate">User</span>
226-
<span class="w-1/4 truncate">Action</span>
227-
<span class="w-1/4 truncate">Resource</span>
223+
<div class="mt-2 overflow-x-auto w-full">
224+
<table class="w-full text-left text-gray-700 bg-gray-50">
225+
<thead>
226+
<tr>
227+
<th scope="col" class="py-2 px-4">Time</th>
228+
<th scope="col" class="py-2 px-4">User</th>
229+
<th scope="col" class="py-2 px-4">Action</th>
230+
<th scope="col" class="py-2 px-4">Resource</th>
231+
</tr>
232+
</thead>
233+
<tbody>
234+
<For
235+
each=move || audit_logs.get().records.into_iter().enumerate()
236+
key=|(_, a)| a.id
237+
children=move |(i, record)| {
238+
view! {
239+
<RecordItemView i record />
240+
}
241+
}
242+
/>
243+
</tbody>
244+
</table>
228245
</div>
229-
230-
<For
231-
each=move || audit_logs.get().records.into_iter().enumerate()
232-
key=|(_, a)| a.id
233-
children=move |(i, record)| {
234-
view! {
235-
<RecordItemView i record />
236-
}
237-
}
238-
/>
239246
</div>
240247
}
241248
}
242249

243250
#[component]
244251
fn RecordItemView(i: usize, record: AuditLogRecord) -> impl IntoView {
245252
view! {
246-
<div
247-
class="flex items-center w-full px-4 py-2"
253+
<tr
254+
class="w-full bg-white"
248255
class=("border-t", move || i > 0)
249256
>
250-
<div class="w-1/4 flex flex-col">
257+
<td scope="row" class="px-4 py-2">
251258
<DatetimeModal time=record.time />
252-
</div>
253-
<div class="w-1/4 flex flex-col">
254-
<span class="truncate text-gray-900 dark:text-white flex flex-row items-center">
259+
</td>
260+
<td class="px-4 py-2">
261+
<div class="text-gray-900 flex flex-row items-center">
255262
<img
256263
class="w-6 h-6 rounded-full mr-2"
257264
src={ record.avatar.clone() }
258265
alt="user photo"
259266
/>
260267
{record.user.clone()}
261-
</span>
262-
</div>
263-
<div class="w-1/4 flex flex-col">
268+
</div>
269+
</td>
270+
<td class="px-4 py-2">
264271
<p>{record.action}</p>
265-
</div>
266-
<div class="w-1/4 flex flex-col">
272+
</td>
273+
<td class="px-4 py-2">
267274
<p>{record.resource_kind}</p>
268275
<p class="text-gray-500">{record.resource_name}</p>
269-
</div>
270-
</div>
276+
</td>
277+
</tr>
271278
}
272279
}

‎lapdev-dashboard/src/cluster.rs

Lines changed: 40 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1561,22 +1561,30 @@ pub fn ClusterUsersView() -> impl IntoView {
15611561
</div>
15621562
</div>
15631563

1564-
<div class="mt-2 flex items-center w-full px-4 py-2 text-gray-900">
1565-
<span class="w-1/4 truncate">Oauth Provider</span>
1566-
<span class="w-1/4 truncate">User</span>
1567-
<span class="w-1/4 truncate">Created At</span>
1568-
<span class="w-1/4 truncate">Cluster Admin</span>
1564+
<div class="mt-2 overflow-x-auto w-full">
1565+
<table class="w-full text-left text-gray-700 bg-gray-50">
1566+
<thead>
1567+
<tr>
1568+
<th scope="col" class="py-2 px-4">Oauth Provider</th>
1569+
<th scope="col" class="py-2 px-4">User</th>
1570+
<th scope="col" class="py-2 px-4">Created At</th>
1571+
<th scope="col" class="py-2 px-4">Cluster Admin</th>
1572+
</tr>
1573+
</thead>
1574+
1575+
<tbody>
1576+
<For
1577+
each=move || users.get().users.into_iter().enumerate()
1578+
key=|(_, u)| (u.id, u.cluster_admin)
1579+
children=move |(i, user)| {
1580+
view! {
1581+
<ClusterUserItemView i user search_action />
1582+
}
1583+
}
1584+
/>
1585+
</tbody>
1586+
</table>
15691587
</div>
1570-
1571-
<For
1572-
each=move || users.get().users.into_iter().enumerate()
1573-
key=|(_, u)| (u.id, u.cluster_admin)
1574-
children=move |(i, user)| {
1575-
view! {
1576-
<ClusterUserItemView i user search_action />
1577-
}
1578-
}
1579-
/>
15801588
}
15811589
}
15821590

@@ -1634,15 +1642,17 @@ fn ClusterUserItemView(
16341642
},
16351643
};
16361644
view! {
1637-
<div
1638-
class="flex items-center w-full px-4 py-2"
1645+
<tr
1646+
class="w-full bg-white"
16391647
class=("border-t", move || i > 0)
16401648
>
1641-
<div class="w-1/4 flex flex-row items-center">
1642-
{icon}
1643-
<p>{user.auth_provider.to_string()}</p>
1644-
</div>
1645-
<div class="w-1/4">
1649+
<td scope="row" class="px-4 py-2">
1650+
<div class="flex flex-row items-center">
1651+
{icon}
1652+
<p>{user.auth_provider.to_string()}</p>
1653+
</div>
1654+
</td>
1655+
<td class="px-4 py-2">
16461656
<div class="flex flex-row items-center">
16471657
<img
16481658
class="w-8 h-8 rounded-full mr-2"
@@ -1654,20 +1664,22 @@ fn ClusterUserItemView(
16541664
<p>{user.email}</p>
16551665
</div>
16561666
</div>
1657-
</div>
1658-
<div class="w-1/4 flex flex-col">
1667+
</td>
1668+
<td class="px-4 py-2">
16591669
<DatetimeModal time=user.created_at />
1660-
</div>
1661-
<div class="w-1/4 flex flex-row items-center justify-between">
1670+
</td>
1671+
<td class="px-4 py-2">
16621672
<p>{user.cluster_admin}</p>
1673+
</td>
1674+
<td class="px-4 py-2">
16631675
<button
16641676
class="px-4 py-2 text-sm font-medium text-white rounded-lg bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 focus:outline-none"
16651677
on:click=move |_| update_modal_hidden.set(false)
16661678
>
16671679
Update
16681680
</button>
1669-
</div>
1670-
</div>
1681+
</td>
1682+
</tr>
16711683
<CreationModal title=format!("Update Cluster User") modal_hidden=update_modal_hidden action=update_action body=update_modal_body update_text=None updating_text=None create_button_hidden=false />
16721684
}
16731685
}

0 commit comments

Comments
 (0)