Skip to content
This repository was archived by the owner on Jun 19, 2026. It is now read-only.

Commit 9807779

Browse files
ziaghamziagham
committed
Modernize UI for plugin dialogs, designer, and tables
- Refactor plugin dialogs (Install, Update, Uninstall) with new layouts, alerts, and progress indicators using MudCard structure - Upgrade workflow designer and management screens: use MudPaper, improve action bar, zoom controls, and tab content styling - Enhance tables and filter boxes with rounded corners, shadows, and improved empty/loading states - Standardize secondary/gray text with .gray-text CSS class - Refactor designer.css and app.css for consistent border radius, box-shadow, and panel/table appearance - Minor improvements to HeaderTitle, Health, AddWorkflow, and ManageWorkflow for visual consistency and code cleanup #93
1 parent f9a96d5 commit 9807779

12 files changed

Lines changed: 431 additions & 322 deletions

‎src/Components/Layout/HeaderTitle.razor‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,25 @@
22

33
<MudStack Row="true"
44
Spacing="2"
5-
AlignItems="AlignItems.Baseline"
65
Class="@CombineClass("mb-6")">
76

87
@if (!string.IsNullOrWhiteSpace(Icon))
98
{
10-
<MudAvatar Size="Size.Medium"
9+
<MudAvatar Size="Size.Large"
1110
Color="@IconColor"
1211
Variant="Variant.Filled">
13-
<MudIcon Icon="@Icon" />
12+
<MudIcon Size="Size.Large" Icon="@Icon" />
1413
</MudAvatar>
1514
}
1615

17-
<MudStack Direction="Column" Spacing="1" AlignItems="AlignItems.Baseline">
16+
<MudStack Direction="Column" Spacing="0" AlignItems="AlignItems.Baseline">
1817
<MudText Typo="Typo.h5" Class="font-weight-medium">
1918
@Title
2019
</MudText>
2120

2221
@if (!string.IsNullOrWhiteSpace(Description))
2322
{
24-
<MudText Typo="Typo.body2" Style="@($"color:{Colors.Gray.Default};")">
23+
<MudText Typo="Typo.body2" Color="Color.Secondary">
2524
@Description
2625
</MudText>
2726
}

‎src/Components/Pages/AllLogs/Logs.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
IconColor="Color.Primary"
1919
IconSize="Size.Large" />
2020

21-
<MudPaper Class="px-4 pb-4 mb-4">
21+
<MudPaper Class="px-4 pb-4 mb-4 filter-box">
2222
<MudForm>
2323
<MudGrid>
2424
<MudItem xs="12" sm="6" md="12">

‎src/Components/Pages/Health/Health.razor‎

Lines changed: 63 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -3,72 +3,78 @@
33
@using FlowSynx.Client.Messages.Responses.Health
44
@using Microsoft.AspNetCore.Authorization
55
@using Microsoft.AspNetCore.Components
6+
@using MudBlazor
67

78
@attribute [Authorize]
89
@inject IFlowSynxClient FlowSynxClient
910
@inject ISnackbar SnackBar
1011

1112
<PageTitle>FlowSynx HealthCheck</PageTitle>
1213

13-
<HeaderTitle
14-
Title="Health Check"
15-
Description="Checking the Health of the FlowSynx System and Its Components"
16-
Icon="@Icons.Material.Filled.MonitorHeart"
17-
IconColor="Color.Primary"
18-
IconSize="Size.Large" />
14+
<HeaderTitle Title="Health Check"
15+
Description="Checking the Health of the FlowSynx System and Its Components"
16+
Icon="@Icons.Material.Filled.MonitorHeart"
17+
IconColor="Color.Primary"
18+
IconSize="Size.Large" />
1919

2020
<MudContainer MaxWidth="MaxWidth.False" Class="pa-0">
21-
<MudCard Elevation="1">
22-
<MudTable
23-
T="IndividualHealthCheckResponse"
24-
ServerData="LoadData"
25-
Dense="true"
26-
Hover="true"
27-
Bordered="false"
28-
Striped="false"
29-
@ref="_table"
30-
LoadingProgressColor="Color.Primary"
31-
RowClassFunc="GetRowClass">
32-
<ToolBarContent>
33-
<MudFab Color="Color.Surface"
34-
Size="@Size.Small"
35-
StartIcon="@Icons.Material.Filled.Refresh"
36-
Label="Refresh"
37-
OnClick="RefreshAsync" />
38-
</ToolBarContent>
39-
<HeaderContent>
40-
<MudTh>Component</MudTh>
41-
<MudTh>Description</MudTh>
42-
<MudTh>Status</MudTh>
43-
</HeaderContent>
44-
<RowTemplate>
45-
<MudTd DataLabel="Component">
46-
<MudStack Direction="Row" Spacing="1">
47-
<MudText Typo="Typo.body1"><b>@context.Component</b></MudText>
48-
</MudStack>
49-
</MudTd>
50-
<MudTd DataLabel="Description">
51-
<MudText Typo="Typo.body2">@context.Description</MudText>
52-
</MudTd>
53-
<MudTd DataLabel="Status">
54-
<MudChip T="string" Color="@GetStatusColor(context.Status)" Variant="Variant.Filled" Icon="@GetStatusIcon(context.Status)" Dense="true">
55-
@context.Status
56-
</MudChip>
57-
</MudTd>
58-
</RowTemplate>
59-
<NoRecordsContent>
60-
<MudEmptyState Icon="@Icons.Material.Outlined.SearchOff"
61-
Title="No matching records"
62-
Description="Try adjusting your search or refresh the data." />
63-
</NoRecordsContent>
64-
<LoadingContent>
65-
<MudStack Direction="Row" Spacing="2" Class="pa-4">
66-
<MudProgressCircular Color="Color.Primary" />
67-
<MudText>Loading…</MudText>
21+
22+
<MudTable T="IndividualHealthCheckResponse"
23+
ServerData="LoadData"
24+
Dense="true"
25+
Hover="true"
26+
Bordered="false"
27+
Striped="false"
28+
@ref="_table"
29+
LoadingProgressColor="Color.Primary"
30+
RowClassFunc="GetRowClass">
31+
<ToolBarContent>
32+
<MudFab Color="Color.Surface"
33+
Size="@Size.Small"
34+
StartIcon="@Icons.Material.Filled.Refresh"
35+
Label="Refresh"
36+
OnClick="RefreshAsync" />
37+
</ToolBarContent>
38+
<HeaderContent>
39+
<MudTh>Component</MudTh>
40+
<MudTh>Description</MudTh>
41+
<MudTh>Status</MudTh>
42+
</HeaderContent>
43+
<RowTemplate>
44+
<MudTd DataLabel="Component">
45+
<MudStack Direction="Row" Spacing="1">
46+
<MudText Typo="Typo.body1"><b>@context.Component</b></MudText>
6847
</MudStack>
69-
</LoadingContent>
70-
</MudTable>
71-
</MudCard>
48+
</MudTd>
49+
<MudTd DataLabel="Description">
50+
<MudText Typo="Typo.body2">@context.Description</MudText>
51+
</MudTd>
52+
<MudTd DataLabel="Status">
53+
<MudChip T="string"
54+
Color="@GetStatusColor(context.Status)"
55+
Variant="Variant.Filled"
56+
Size="Size.Small"
57+
Icon="@GetStatusIcon(context.Status)">
58+
@context.Status
59+
</MudChip>
60+
</MudTd>
61+
</RowTemplate>
62+
<NoRecordsContent>
63+
<MudPaper Class="d-flex flex-column align-center justify-center pa-6">
64+
<MudIcon Icon="@Icons.Material.Outlined.SearchOff" Size="Size.Large" />
65+
<MudText Typo="Typo.h6" Class="mt-4">No matching records</MudText>
66+
<MudText Typo="Typo.body2" Class="gray-text">
67+
Try adjusting your search or refresh the data.
68+
</MudText>
69+
</MudPaper>
70+
</NoRecordsContent>
71+
<LoadingContent>
72+
<MudStack Direction="Row" Spacing="2" Class="pa-4">
73+
<MudProgressCircular Color="Color.Primary" />
74+
<MudText>Loading…</MudText>
75+
</MudStack>
76+
</LoadingContent>
77+
</MudTable>
7278
</MudContainer>
7379

7480
@code {
@@ -84,7 +90,7 @@
8490
}
8591

8692
private async Task<TableData<IndividualHealthCheckResponse>> LoadData(
87-
TableState state,
93+
TableState state,
8894
CancellationToken cancellationToken)
8995
{
9096
try

‎src/Components/Pages/Plugins/InstallPluginDialog.razor‎

Lines changed: 60 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -6,40 +6,69 @@
66
@inject IFlowSynxClient FlowSynxClient
77
@inject ISnackbar SnackBar
88

9-
<MudDialog>
10-
<TitleContent>
11-
<MudText Typo="Typo.h6">
12-
<MudIcon Icon="@Icons.Material.Filled.Add" Class="mr-3 mb-n1" /> Install plugin
13-
</MudText>
14-
</TitleContent>
9+
<MudDialog MaxWidth="MaxWidth.Small"
10+
FullWidth="true"
11+
DisableBackdropClick="@IsProcessing"
12+
CloseOnEscapeKey="false">
13+
1514
<DialogContent>
16-
<MudGrid>
17-
<MudItem xs="12">
18-
<MudTextField For="@(() => InstallPluginRequest.Type)"
19-
@bind-Value="InstallPluginRequest.Type"
20-
Label="Plugin type"
21-
Required="true"
22-
Variant="Variant.Text"
15+
16+
<MudCard Elevation="0" Class="rounded-xl">
17+
18+
<!-- Body -->
19+
<MudCardContent Class="pt-4">
20+
<MudText Typo="Typo.body2" Color="Color.Secondary" Class="mb-4">
21+
Enter the plugin type you want to install. The plugin will be downloaded
22+
and registered automatically.
23+
</MudText>
24+
25+
<MudTextField @bind-Value="InstallPluginRequest.Type"
26+
Label="Plugin Type"
27+
Placeholder="e.g. FlowSynx.Storage.Local:latest"
28+
Variant="Variant.Filled"
2329
Margin="Margin.Dense"
24-
HelperText="Enter the type of the plugin" />
25-
</MudItem>
26-
</MudGrid>
30+
Required="true"
31+
StartIcon="@Icons.Material.Filled.Code"
32+
Disabled="@IsProcessing"
33+
Clearable="true" />
34+
</MudCardContent>
35+
36+
<!-- Footer -->
37+
<MudDivider />
38+
39+
<MudCardActions Class="pa-4 d-flex justify-end gap-2">
40+
41+
<MudButton Variant="Variant.Text"
42+
Color="Color.Default"
43+
Disabled="@IsProcessing"
44+
OnClick="Cancel">
45+
Cancel
46+
</MudButton>
47+
48+
<MudButton Variant="Variant.Filled"
49+
Color="Color.Primary"
50+
Disabled="@IsProcessing"
51+
OnClick="Install"
52+
StartIcon="@Icons.Material.Filled.Download">
53+
54+
@if (IsProcessing)
55+
{
56+
<MudProgressCircular Indeterminate="true"
57+
Size="Size.Small"
58+
Class="mr-2" />
59+
<span>Installing…</span>
60+
}
61+
else
62+
{
63+
<span>Install Plugin</span>
64+
}
65+
</MudButton>
66+
67+
</MudCardActions>
68+
69+
</MudCard>
70+
2771
</DialogContent>
28-
<DialogActions>
29-
<MudButton Variant="Variant.Outlined"
30-
StartIcon="@Icons.Material.Filled.Close"
31-
Color="Color.Default"
32-
Disabled="@IsProcessing"
33-
Size="Size.Small"
34-
OnClick="Cancel">Cancel</MudButton>
35-
36-
<MudButton Variant="Variant.Filled"
37-
StartIcon="@Icons.Material.Filled.Download"
38-
Color="Color.Primary"
39-
Disabled="@IsProcessing"
40-
Size="Size.Small"
41-
OnClick="Install">@(IsProcessing ? "Installing..." : "Install")</MudButton>
42-
</DialogActions>
4372
</MudDialog>
4473

4574
@code {

‎src/Components/Pages/Plugins/UninstallPluginDialog.razor‎

Lines changed: 71 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -5,40 +5,80 @@
55
@inject IFlowSynxClient FlowSynxClient
66
@inject ISnackbar SnackBar
77

8-
<MudDialog>
9-
<TitleContent>
10-
<MudText Typo="Typo.h6">
11-
<MudIcon Icon="@Icons.Material.Filled.DeleteForever" Class="mr-3 mb-n1" /> Uninstall plugin
12-
</MudText>
13-
</TitleContent>
8+
<MudDialog MaxWidth="MaxWidth.Small"
9+
FullWidth="true"
10+
DisableBackdropClick="@IsProcessing"
11+
CloseOnEscapeKey="false">
12+
1413
<DialogContent>
15-
<MudText>
16-
<strong>Are you sure you want to uninstall this plugin?</strong>
17-
<br /><br />
18-
<strong>Plugin type:</strong> @PluginType
19-
<br /><br />
20-
<MudCard Outlined="true" Class="pa-3 mx-auto">
21-
<MudText Color="Color.Warning" Typo="Typo.subtitle2">
22-
⚠️ Warning: Uninstalling this plugin will permanently delete all related data and settings. Additionally, any custom configurations tied to this plugin will become invalid and unusable. As a result, any workflows depending on these invalid configurations or on this plugin directly will fail to execute properly. Please ensure you have backed up any important information before proceeding.
14+
15+
<MudCard Elevation="0" Class="rounded-xl">
16+
17+
<!-- Body -->
18+
<MudCardContent Class="pt-4">
19+
20+
<MudAlert Severity="Severity.Warning"
21+
Variant="Variant.Filled"
22+
Dense="true"
23+
Class="mb-4">
24+
This action is <strong>permanent</strong> and cannot be undone.
25+
</MudAlert>
26+
27+
<MudText Typo="Typo.body2" Class="mb-2">
28+
You are about to uninstall the following plugin:
2329
</MudText>
24-
</MudCard>
25-
</MudText>
30+
31+
<MudChip T="string" Color="Color.Error"
32+
Variant="Variant.Outlined"
33+
Icon="@Icons.Material.Filled.Extension"
34+
Class="mb-4">
35+
@PluginType
36+
</MudChip>
37+
38+
<MudPaper Outlined="true" Class="pa-4 rounded-lg">
39+
<MudText Typo="Typo.caption" Color="Color.Secondary" Class="mt-3">
40+
Please ensure you have backed up any important information before continuing.
41+
</MudText>
42+
</MudPaper>
43+
44+
</MudCardContent>
45+
46+
<!-- Footer -->
47+
<MudDivider />
48+
49+
<MudCardActions Class="pa-4 d-flex justify-end gap-2">
50+
51+
<MudButton Variant="Variant.Text"
52+
Color="Color.Default"
53+
Disabled="@IsProcessing"
54+
OnClick="Cancel">
55+
Cancel
56+
</MudButton>
57+
58+
<MudButton Variant="Variant.Filled"
59+
Color="Color.Error"
60+
Disabled="@IsProcessing"
61+
OnClick="Uninstall"
62+
StartIcon="@Icons.Material.Filled.DeleteForever">
63+
64+
@if (IsProcessing)
65+
{
66+
<MudProgressCircular Indeterminate="true"
67+
Size="Size.Small"
68+
Class="mr-2" />
69+
<span>Uninstalling...</span>
70+
}
71+
else
72+
{
73+
<span>Uninstall Plugin</span>
74+
}
75+
</MudButton>
76+
77+
</MudCardActions>
78+
79+
</MudCard>
80+
2681
</DialogContent>
27-
<DialogActions>
28-
<MudButton Variant="Variant.Outlined"
29-
StartIcon="@Icons.Material.Filled.Close"
30-
Color="Color.Default"
31-
Disabled="@IsProcessing"
32-
Size="Size.Small"
33-
OnClick="Cancel">Cancel</MudButton>
34-
35-
<MudButton Color="Color.Error"
36-
StartIcon="@Icons.Material.Filled.DeleteForever"
37-
Variant="Variant.Filled"
38-
Disabled="@IsProcessing"
39-
Size="Size.Small"
40-
OnClick="Uninstall">@(IsProcessing ? "Uninstalling..." : "Uninstall")</MudButton>
41-
</DialogActions>
4282
</MudDialog>
4383

4484
@code {

0 commit comments

Comments
 (0)