Skip to content

Commit 24b802f

Browse files
ziaghamziagham
committed
Redesign UI/UX and improve component reusability
- Enhanced navigation bar with modern design and new menu items. - Redesigned hero banner with dynamic gradient animation. - Refactored footer into a new `Footer.razor` component. - Improved error handling UI with better animations and icons. - Updated API key management with badges and modern table design. - Refactored profile page with new components and sticky sidebar. - Introduced modular components for plugin listings and metadata. - Redesigned pagination for better accessibility and styling. - Added `EmptyState` and `ErrorAlert` components for consistency. - Introduced `LoadingSpinner` for unified loading indicators. - Improved accessibility with consistent focus states and transitions. - Added CSS variables for primary colors and cleaned up styles. - Extracted reusable components for better maintainability. - Fixed responsive layout issues and corrected variable typos. #47
1 parent c5cc747 commit 24b802f

29 files changed

Lines changed: 1600 additions & 716 deletions

‎src/FlowSynx.Pluginregistry/Components/Layout/MainLayout.razor‎

Lines changed: 93 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@using System.Security.Claims
22
@using FlowSynx.PluginRegistry.Application.Services
3+
@using FlowSynx.Pluginregistry.Components.Shared
34

45
@inherits LayoutComponentBase
56
@inject NavigationManager Navigation
@@ -8,41 +9,75 @@
89
@inject AuthenticationStateProvider AuthenticationStateProvider
910

1011
<main class="flex-shrink-0">
11-
<div class="hero-banner pb-3">
12-
<div class="container px-5">
13-
<nav class="navbar navbar-expand-lg">
14-
<a class="navbar-brand pe-2" href="/">
15-
<img src="/images/logo.png" alt="Logo" width="24" height="24" class="d-inline-block align-text-top">
16-
Plugin Registry
12+
<div class="hero-banner">
13+
<div class="container px-3 px-lg-3">
14+
<nav class="navbar navbar-expand-lg navbar-light py-3 px-1">
15+
<a class="navbar-brand d-flex align-items-center" href="/">
16+
<img src="/images/logo.png" alt="Logo" width="48" height="48" class="me-2">
17+
<span class="fw-bold fs-2">Plugin Registry</span>
1718
</a>
18-
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
19+
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse"
1920
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
2021
aria-expanded="false" aria-label="Toggle navigation">
2122
<span class="navbar-toggler-icon"></span>
2223
</button>
2324
<div class="collapse navbar-collapse" id="navbarSupportedContent">
24-
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
25-
<li class="nav-item"><a class="nav-link" href="/plugins">Plugins</a></li>
26-
<li class="nav-item"><a class="nav-link" href="/manage/upload">Upload</a></li>
27-
<li class="nav-item"><a class="nav-link" href="/downloads">Downloads</a></li>
25+
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 gap-1">
26+
<li class="nav-item">
27+
<a class="nav-link rounded-2 px-3" href="/plugins">
28+
<i class="bi bi-plugin me-1"></i>Plugins
29+
</a>
30+
</li>
31+
<li class="nav-item">
32+
<a class="nav-link rounded-2 px-3" href="/manage/upload">
33+
<i class="bi bi-cloud-upload me-1"></i>Upload
34+
</a>
35+
</li>
36+
<li class="nav-item">
37+
<a class="nav-link rounded-2 px-3" href="/downloads">
38+
<i class="bi bi-download me-1"></i>Downloads
39+
</a>
40+
</li>
41+
<li class="nav-item">
42+
<a class="nav-link rounded-2 px-3" href="/policies/contact">
43+
<i class="bi bi-envelope me-1"></i>Contact
44+
</a>
45+
</li>
2846
</ul>
29-
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
47+
<div class="vr mx-2 d-none d-lg-block"></div>
48+
<ul class="navbar-nav mb-2 mb-lg-0">
3049
@if (!IsAuthenticated)
3150
{
32-
<li class="nav-item"><a class="nav-link" href="@GetLoginUrl()">Login</a></li>
51+
<li class="nav-item">
52+
<a class="nav-link rounded-2 px-3" href="@GetLoginUrl()">
53+
<i class="bi bi-box-arrow-in-right me-2"></i>Login
54+
</a>
55+
</li>
3356
}
3457
else
3558
{
3659
<li class="nav-item dropdown">
37-
<a href="#" role="button" class="d-flex nav-link align-items-center text-decoration-none dropdown-toggle" id="accountDropdown" data-bs-toggle="dropdown" aria-expanded="false">
38-
<img src="@gravatar.GetGravatarUrl(@Email!, 24);" width="24" height="24" class="rounded-circle me-2" alt="@Name">
39-
<span class="d-none d-sm-inline">@Name</span>
60+
<a href="#" role="button" class="nav-link d-flex align-items-center text-decoration-none dropdown-toggle rounded-2 px-3"
61+
id="accountDropdown" data-bs-toggle="dropdown" aria-expanded="false">
62+
<img src="@gravatar.GetGravatarUrl(@Email!, 24);" width="24" height="24"
63+
class="rounded-circle border border-2 border-light shadow-sm me-2" alt="@Name">
64+
<span class="fw-semibold d-none d-lg-inline">@Name</span>
4065
</a>
41-
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="accountDropdown">
42-
<li><a class="dropdown-item" href="/profiles/@Login">View Profile</a></li>
43-
<li><a class="dropdown-item" href="/account/apikeys">Api Keys</a></li>
44-
<li><hr class="dropdown-divider"></li>
45-
<li><a class="dropdown-item" href="/api/account/logout">Logout</a></li>
66+
<ul class="dropdown-menu dropdown-menu-end shadow border-0 mt-2" aria-labelledby="accountDropdown">
67+
<li class="px-3 py-2 border-bottom">
68+
<small class="text-muted">Signed in as</small>
69+
<div class="fw-semibold">@Name</div>
70+
</li>
71+
<li><a class="dropdown-item rounded-2 my-1" href="/profiles/@Login">
72+
<i class="bi bi-person me-2"></i>View Profile
73+
</a></li>
74+
<li><a class="dropdown-item rounded-2 my-1" href="/account/apikeys">
75+
<i class="bi bi-key me-2"></i>API Keys
76+
</a></li>
77+
<li><hr class="dropdown-divider my-2"></li>
78+
<li><a class="dropdown-item rounded-2 text-danger" href="/api/account/logout">
79+
<i class="bi bi-box-arrow-right me-2"></i>Logout
80+
</a></li>
4681
</ul>
4782
</li>
4883
}
@@ -51,32 +86,43 @@
5186
</nav>
5287
</div>
5388

89+
<div class="container px-3 px-lg-3 py-4">
90+
<form class="d-flex justify-content-center" role="search" method="get" action="/plugins">
91+
<div class="search-wrapper">
92+
<InputText @bind-Value="q"
93+
type="search"
94+
class="form-control form-control-lg custom-search-input"
95+
placeholder="Search for plugins..."
96+
aria-label="Search plugins..." />
5497

55-
<div class="py-3">
56-
<div class="container px-5">
57-
<form class="d-flex" role="search" method="get" action="/plugins">
58-
<div class="input-group">
59-
<InputText @bind-Value="q" type="search" class="form-control border-dark" placeholder="Search plugins..." aria-label="Search plugins..." aria-describedby="button-addon2"></InputText>
60-
<button class="btn btn-outline-dark" type="submit" id="button-addon2">Search</button>
61-
</div>
62-
</form>
63-
</div>
98+
<button type="submit" class="search-button">
99+
<i class="bi bi-search"></i>
100+
</button>
101+
</div>
102+
</form>
64103
</div>
104+
65105
@if (IsHomePage)
66106
{
67-
<section class="py-1">
68-
<div class="container px-5">
69-
<div class="row gx-5 align-items-center justify-content-center hero-content">
70-
<div class="col-lg-12 col-xl-12 col-xxl-12 text-center">
107+
<section class="py-5">
108+
<div class="container px-4 px-lg-5">
109+
<div class="row gx-5 align-items-center justify-content-center">
110+
<div class="col-lg-10 col-xl-9 col-xxl-8 text-center">
71111
<div class="my-5">
72-
<h1 class="display-3 fw-bold mb-3">FlowSynx Plugin Registry</h1>
73-
<p class="lead fw-normal mb-4">
112+
<h1 class="display-3 fw-bold mb-4 text-white">
113+
FlowSynx Plugin Registry
114+
</h1>
115+
<p class="lead text-white mb-5 fs-4">
74116
Extend your automation capabilities with a powerful ecosystem of plugins.
75117
Discover, share, and deploy components that accelerate your workflow.
76118
</p>
77-
<div class="d-grid gap-3 d-sm-flex justify-content-sm-center">
78-
<a class="btn btn-dark btn-lg px-4 me-sm-3" href="/plugins">Explore Plugins</a>
79-
<a class="btn btn-outline-dark btn-lg px-4" href="#about">Learn More</a>
119+
<div class="d-flex gap-3 justify-content-center flex-wrap">
120+
<a class="btn btn-outline-light btn-lg px-5 py-3 rounded-pill shadow" href="/plugins">
121+
<i class="bi bi-grid-3x3-gap me-2"></i>Explore Plugins
122+
</a>
123+
<a class="btn btn-outline-light btn-lg px-5 py-3 rounded-pill" href="#features">
124+
<i class="bi bi-info-circle me-2"></i>Learn More
125+
</a>
80126
</div>
81127
</div>
82128
</div>
@@ -89,31 +135,15 @@
89135
@Body
90136
</main>
91137

92-
<footer class="bg-light py-4 mt-auto">
93-
<div class="container px-5">
94-
<div class="row align-items-center justify-content-between flex-column flex-sm-row">
95-
<div class="col-auto">
96-
<div class="small m-0">Copyright &copy; <a href="https://flowsynx.io" target="_blank">FlowSynx</a> 2025</div>
97-
</div>
98-
<div class="col-auto">
99-
<ul class="list-inline small mb-0">
100-
<li class="list-inline-item"><a href="/downloads" class="text-decoration-none text-muted">Downloads</a></li>
101-
<li class="list-inline-item">•</li>
102-
<li class="list-inline-item"><a href="/policies/privacy" class="text-decoration-none text-muted">Privacy Policy</a></li>
103-
<li class="list-inline-item">•</li>
104-
<li class="list-inline-item"><a href="/policies/terms" class="text-decoration-none text-muted">Terms of Service</a></li>
105-
<li class="list-inline-item">•</li>
106-
<li class="list-inline-item"><a href="/policies/contact" class="text-decoration-none text-muted">Contact</a></li>
107-
</ul>
108-
</div>
109-
</div>
110-
</div>
111-
</footer>
138+
<Footer />
112139

113-
<div id="blazor-error-ui" data-nosnippet>
114-
An unhandled error has occurred.
115-
<a href="." class="reload">Reload</a>
116-
<span class="dismiss">🗙</span>
140+
<div id="blazor-error-ui" data-nosnippet class="shadow-lg">
141+
<div class="d-flex align-items-center">
142+
<i class="bi bi-exclamation-triangle-fill me-2"></i>
143+
<span>An unhandled error has occurred.</span>
144+
</div>
145+
<a href="." class="reload btn btn-sm btn-light ms-3">Reload</a>
146+
<span class="dismiss">×</span>
117147
</div>
118148

119149
@code {

‎src/FlowSynx.Pluginregistry/Components/Layout/MainLayout.razor.css‎

Lines changed: 44 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,33 +2,36 @@
22
position: relative;
33
display: flex;
44
flex-direction: column;
5+
min-height: 100vh;
56
}
67

78
main {
89
flex: 1;
910
}
1011

1112
.sidebar {
12-
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
13+
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
1314
}
1415

1516
.top-row {
16-
background-color: #f7f7f7;
17-
border-bottom: 1px solid #d6d5d5;
17+
background-color: #ffffff;
18+
border-bottom: 1px solid #e9ecef;
1819
justify-content: flex-end;
1920
height: 3.5rem;
2021
display: flex;
2122
align-items: center;
23+
box-shadow: 0 2px 4px rgba(0,0,0,.04);
2224
}
2325

2426
.top-row ::deep a, .top-row ::deep .btn-link {
2527
white-space: nowrap;
2628
margin-left: 1.5rem;
2729
text-decoration: none;
30+
transition: color 0.2s ease;
2831
}
2932

3033
.top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
31-
text-decoration: underline;
34+
color: var(--bs-primary);
3235
}
3336

3437
.top-row ::deep a:first-child {
@@ -39,6 +42,7 @@ main {
3942
@media (max-width: 640.98px) {
4043
.top-row {
4144
justify-content: space-between;
45+
padding: 0 1rem;
4246
}
4347

4448
.top-row ::deep a, .top-row ::deep .btn-link {
@@ -52,16 +56,17 @@ main {
5256
}
5357

5458
.sidebar {
55-
width: 250px;
59+
width: 260px;
5660
height: 100vh;
5761
position: sticky;
5862
top: 0;
63+
box-shadow: 2px 0 10px rgba(0,0,0,.1);
5964
}
6065

6166
.top-row {
6267
position: sticky;
6368
top: 0;
64-
z-index: 1;
69+
z-index: 1000;
6570
}
6671

6772
.top-row.auth ::deep a:first-child {
@@ -77,22 +82,47 @@ main {
7782
}
7883

7984
#blazor-error-ui {
80-
color-scheme: light only;
81-
background: lightyellow;
85+
background: #fff3cd;
86+
color: #856404;
8287
bottom: 0;
83-
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
84-
box-sizing: border-box;
88+
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
8589
display: none;
8690
left: 0;
87-
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
91+
padding: 1rem 1.5rem;
8892
position: fixed;
8993
width: 100%;
90-
z-index: 1000;
94+
z-index: 2000;
95+
border-top: 3px solid #ffc107;
96+
animation: slideUp 0.3s ease;
97+
}
98+
99+
@@keyframes slideUp {
100+
from {
101+
transform: translateY(100%);
102+
}
103+
to {
104+
transform: translateY(0);
105+
}
91106
}
92107

93108
#blazor-error-ui .dismiss {
94109
cursor: pointer;
95110
position: absolute;
96-
right: 0.75rem;
97-
top: 0.5rem;
111+
right: 1.5rem;
112+
top: 50%;
113+
transform: translateY(-50%);
114+
font-size: 1.5rem;
115+
font-weight: bold;
116+
color: #856404;
117+
transition: color 0.2s ease;
98118
}
119+
120+
#blazor-error-ui .dismiss:hover {
121+
color: #533f03;
122+
}
123+
124+
#blazor-error-ui .reload {
125+
margin-left: 1rem;
126+
text-decoration: none;
127+
font-weight: 600;
128+
}

0 commit comments

Comments
 (0)