style: Improve RelayHubStatus and RelayHubDemo components for better dark mode support and UI consistency
- Update styles in RelayHubStatus.vue to enhance dark mode appearance, including adjustments to colors, borders, and font weights. - Refactor RelayHubDemo.vue to improve layout and responsiveness, ensuring better visibility and usability in both light and dark themes. - Add dark mode styles for various elements, including headers, buttons, and informational texts, to provide a cohesive user experience across the application.
This commit is contained in:
parent
48761e8035
commit
13f6f44a89
2 changed files with 202 additions and 91 deletions
|
|
@ -121,29 +121,37 @@ const {
|
|||
|
||||
<style scoped>
|
||||
.relay-hub-status {
|
||||
padding: 1rem;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 0.5rem;
|
||||
background-color: #f8fafc;
|
||||
max-width: 600px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.status-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.status-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.dark .status-header h3 {
|
||||
color: #f1f5f9;
|
||||
}
|
||||
|
||||
.dark .status-header {
|
||||
border-bottom-color: #475569;
|
||||
}
|
||||
|
||||
.connection-indicator {
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.875rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
|
@ -165,7 +173,7 @@ const {
|
|||
|
||||
.connection-indicator.error {
|
||||
background-color: #fecaca;
|
||||
color: #7f1d1d;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.connection-info {
|
||||
|
|
@ -175,8 +183,13 @@ const {
|
|||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
.dark .info-row {
|
||||
border-bottom-color: #334155;
|
||||
}
|
||||
|
||||
.info-row:last-child {
|
||||
|
|
@ -185,17 +198,30 @@ const {
|
|||
|
||||
.label {
|
||||
font-weight: 500;
|
||||
color: #475569;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.dark .label {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.dark .value {
|
||||
color: #f1f5f9;
|
||||
}
|
||||
|
||||
.value.error {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.dark .value.error {
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
.relay-list {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
|
@ -205,6 +231,10 @@ const {
|
|||
color: #1e293b;
|
||||
}
|
||||
|
||||
.dark .relay-list h4 {
|
||||
color: #f1f5f9;
|
||||
}
|
||||
|
||||
.relay-item {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto auto auto;
|
||||
|
|
@ -217,6 +247,11 @@ const {
|
|||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.dark .relay-item {
|
||||
background-color: #1e293b;
|
||||
border-color: #475569;
|
||||
}
|
||||
|
||||
.relay-url {
|
||||
font-family: monospace;
|
||||
font-size: 0.875rem;
|
||||
|
|
@ -224,6 +259,10 @@ const {
|
|||
word-break: break-all;
|
||||
}
|
||||
|
||||
.dark .relay-url {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.relay-status {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
|
|
@ -245,12 +284,20 @@ const {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.dark .relay-latency {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.relay-error {
|
||||
font-size: 0.75rem;
|
||||
color: #dc2626;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dark .relay-error {
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
|
|
@ -268,26 +315,50 @@ const {
|
|||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.dark .actions button {
|
||||
background-color: #374151;
|
||||
color: #f9fafb;
|
||||
border-color: #6b7280;
|
||||
}
|
||||
|
||||
.actions button:hover:not(:disabled) {
|
||||
background-color: #f9fafb;
|
||||
border-color: #9ca3af;
|
||||
}
|
||||
|
||||
.dark .actions button:hover:not(:disabled) {
|
||||
background-color: #4b5563;
|
||||
border-color: #9ca3af;
|
||||
}
|
||||
|
||||
.actions button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.dark .actions button:disabled {
|
||||
background-color: #6b7280;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.subscription-info {
|
||||
border-top: 1px solid #e2e8f0;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.dark .subscription-info {
|
||||
border-top-color: #475569;
|
||||
}
|
||||
|
||||
.subscription-info h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.dark .subscription-info h4 {
|
||||
color: #f1f5f9;
|
||||
}
|
||||
|
||||
.subscription-count {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
|
|
@ -295,6 +366,10 @@ const {
|
|||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.dark .subscription-count {
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
.subscription-details {
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
|
|
@ -302,6 +377,10 @@ const {
|
|||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.dark .subscription-details {
|
||||
background-color: #334155;
|
||||
}
|
||||
|
||||
.subscription-details h5 {
|
||||
margin: 0 0 0.75rem 0;
|
||||
color: #475569;
|
||||
|
|
@ -309,6 +388,10 @@ const {
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dark .subscription-details h5 {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.subscription-list {
|
||||
/* Individual subscription items handle their own spacing */
|
||||
}
|
||||
|
|
@ -321,6 +404,11 @@ const {
|
|||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.dark .subscription-item {
|
||||
background-color: #1e293b;
|
||||
border-color: #475569;
|
||||
}
|
||||
|
||||
.subscription-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -329,10 +417,20 @@ const {
|
|||
margin-bottom: 0.5rem;
|
||||
font-family: monospace;
|
||||
font-size: 0.875rem;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.dark .subscription-id {
|
||||
color: #f1f5f9;
|
||||
}
|
||||
|
||||
.subscription-filters {
|
||||
margin-bottom: 0.5rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.dark .subscription-filters {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.filter-details {
|
||||
|
|
@ -352,15 +450,28 @@ const {
|
|||
color: #475569;
|
||||
}
|
||||
|
||||
.dark .filter-item code {
|
||||
background-color: #475569;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.subscription-relays {
|
||||
font-size: 0.875rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.dark .subscription-relays {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.no-subscriptions {
|
||||
text-align: center;
|
||||
color: #94a3b8;
|
||||
font-style: italic;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.dark .no-subscriptions {
|
||||
color: #64748b;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue