sixsmith/coop-cloud-front
0
0
Fork 0
forked from BornDeleuze/coop-cloud-front
Code Pull Requests Activity

Merge pull request 'cleanup' (#8) from cleanup into dev

Browse Source 
Reviewed-on: BornDeleuze/coop-cloud-front#8
This commit is contained in:
BornDeleuze
2026-04-25 01:46:23 +00:00
parent 27bc8de54b d300b6353e
commit 0b59c0fa88
11 changed files with 36 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/scss/_global.scss
+1
View File
@@ -1,6 +1,7 @@
@use './variables' as *;
@use './mixins' as *;
body {
margin: 0;
padding: 0;
src/assets/scss/_mixins.scss
-1
View File
@@ -62,5 +62,4 @@
font-size: $font-size-sm;
font-weight: $font-weight-semibold;
background-color: rgba($color, 0.1);
// color: darken($color, 20%);
}
src/routes/Apps/App.scss
+9 -27
View File
@@ -1,6 +1,8 @@
@use '../../assets/scss/variables' as *;
@use '../../assets/scss/mixins' as *;
@use '../../assets/scss/global' as *;
@use "sass:color";
.app-detail-page {
@extend .page-wrapper;
@@ -69,7 +71,7 @@
&.primary {
background: $primary;
color: white;
color: $text-primary;
border-color: $primary;
&:hover:not(:disabled) {
@@ -82,10 +84,6 @@
background: $bg-secondary;
color: $text-primary;
border-color: $border-color;
&:hover:not(:disabled) {
background: darken($bg-secondary, 5%);
}
}
&.danger {
@@ -94,7 +92,7 @@
border-color: $error;
&:hover:not(:disabled) {
background: darken($error, 10%);
background: color.adjust($error, $lightness: -10%);
}
}
}
@@ -163,13 +161,13 @@
}
.chaos-active {
color: darken($info, 10%);
background: color.adjust($info, $lightness: -10%);
font-weight: $font-weight-medium;
}
}
.domain-link {
color: $primary;
.link {
color: $primary-dark;
text-decoration: none;
font-size: $font-size-base;
transition: color $transition-base;
@@ -180,22 +178,6 @@
}
}
.server-link {
background: none;
border: none;
color: $primary;
cursor: pointer;
padding: 0;
font-size: $font-size-base;
text-align: left;
transition: color $transition-base;
&:hover {
color: $primary-light;
text-decoration: underline;
}
}
// Version information
.version-info {
display: flex;
@@ -286,7 +268,7 @@
transition: all $transition-base;
&:hover:not(:disabled) {
background: darken($warning, 10%);
background: color.adjust($warning, $lightness: -10%);
transform: translateY(-1px);
}
@@ -301,7 +283,7 @@
.version-latest {
padding: $spacing-md;
background: rgba($success, 0.1);
color: darken($success, 10%);
background: color.adjust($success, $lightness: -10%);
border-radius: $radius-md;
text-align: center;
font-size: $font-size-base;
src/routes/Apps/App.tsx
+11 -10
View File
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useParams, useNavigate, Link } from 'react-router-dom';
import { Header } from '../../components/Header/Header';
import { Terminal } from '../../components/Terminal/Terminal';
import { apiService } from '../../services/api';
@@ -158,7 +158,7 @@ export const AppDetail: React.FC = () => {
<span className="recipe-badge">{app.recipe}</span>
<span className={`status-badge status-${app.status}`}>{app.status}</span>
{app.chaos === 'true' && (
<span className="chaos-badge" title="Chaos mode enabled">🔬 Chaos</span>
<span className="chaos-badge" title="Chaos mode enabled"> Chaos</span>
)}
</div>
</div>
@@ -203,7 +203,7 @@ export const AppDetail: React.FC = () => {
<div className="info-item">
<label>Domain</label>
{app.domain ? (
<a href={`https://${app.domain}`} target="_blank" rel="noopener noreferrer" className="domain-link">
<a href={`https://${app.domain}`} target="_blank" rel="noopener noreferrer" className="link">
{app.domain} ↗
</a>
) : (
@@ -212,13 +212,14 @@ export const AppDetail: React.FC = () => {
</div>
<div className="info-item">
<label>Server</label>
<button
onClick={() => navigate(`/servers/${app.server}`)}
className="server-link"
<label htmlFor="server-link">Server</label>
<Link
id="server-link"
to={`/servers/${app.server}`}
className="link"
>
{app.server} →
</button>
{app.server} ↗
</Link>
</div>
<div className="info-item">
@@ -236,7 +237,7 @@ export const AppDetail: React.FC = () => {
<div className="info-item">
<label>Chaos Mode</label>
<span className={app.chaos === 'true' ? 'chaos-active' : ''}>
{app.chaos === 'true' ? '🔬 Enabled' : 'Disabled'}
{app.chaos === 'true' ? '☠️ Enabled' : 'Disabled'}
</span>
</div>
</div>
src/routes/Apps/Apps.scss
+1 -1
View File
@@ -144,7 +144,7 @@
}
.domain-link {
color: $primary;
color: $primary-dark;
text-decoration: none;
transition: color $transition-base;
src/routes/Apps/Apps.tsx
+3 -3
View File
@@ -211,7 +211,7 @@ export const Apps: React.FC = () => {
<th>Server</th>
<th>Version</th>
<th>Status</th>
<th>Actions</th>
{/* <th>Actions</th> */}
</tr>
</thead>
<tbody>
@@ -269,7 +269,7 @@ export const Apps: React.FC = () => {
{app.status}
</span>
</td>
<td>
{/* <td>
<div className="actions">
<button
className="action-btn"
@@ -294,7 +294,7 @@ export const Apps: React.FC = () => {
</button>
)}
</div>
</td>
</td> */}
</tr>
))
)}
src/routes/Dashboard/Dashboard.tsx
-2
View File
@@ -89,7 +89,6 @@ export const Dashboard: React.FC = () => {
<button onClick={() => navigate('/apps')} className="nav-link bland-button">
<div className="stat-card">
<h3>Apps</h3>
<p className="stat-number">{apps.length}</p>
<p className="stat-label">
{deployedAppsCount} deployed
</p>
@@ -99,7 +98,6 @@ export const Dashboard: React.FC = () => {
<button onClick={() => navigate('/servers')} className="nav-link bland-button">
<div className="stat-card">
<h3>Servers</h3>
<p className="stat-number">{servers.length}</p>
<p className="stat-label">
{serversWithAppsCount} connected
</p>
src/routes/Servers/Server.scss
+6 -5
View File
@@ -1,6 +1,7 @@
@use '../../assets/scss/variables' as *;
@use '../../assets/scss/mixins' as *;
@use '../../assets/scss/global' as *;
@use "sass:color";
.server-detail-page {
@extend .page-wrapper;
@@ -84,7 +85,7 @@
border-color: $border-color;
&:hover:not(:disabled) {
background: darken($bg-secondary, 5%);
background: color.adjust($bg-secondary, $lightness: -10%);
}
}
@@ -94,7 +95,7 @@
border-color: $error;
&:hover:not(:disabled) {
background: darken($error, 10%);
background: color.adjust($error, $lightness: -10%);
}
}
}
@@ -124,7 +125,7 @@
gap: $spacing-xs;
padding: $spacing-xs $spacing-md;
background: rgba($warning, 0.1);
color: darken($warning, 20%);
background: color.adjust($error, $lightness: -20%);
border-radius: $radius-md;
font-size: $font-size-sm;
font-weight: $font-weight-medium;
@@ -189,11 +190,11 @@
color: $text-primary;
&.warning {
color: darken($warning, 10%);
background: color.adjust($warning, $lightness: -10%);
}
&.chaos {
color: darken($info, 10%);
background: color.adjust($info, $lightness: -10%);
}
}
src/routes/Servers/Server.tsx
+2 -2
View File
@@ -190,7 +190,7 @@ export const Server: React.FC = () => {
{actionLoading === 'refresh' ? 'Refreshing...' : 'Refresh'}
</button>
<button
className="action-btn primary"
className="action-btn"
onClick={() => handleAction('deploy-all')}
disabled={!!actionLoading}
>
@@ -280,7 +280,7 @@ export const Server: React.FC = () => {
{app.status}
</span>
{app.chaos === 'true' && (
<span className="chaos-badge">🔬</span>
<span className="chaos-badge">☠️</span>
)}
{app.upgrade !== 'latest' && (
<span className="upgrade-badge">⬆️</span>
src/routes/Servers/Servers.scss
+3 -3
View File
@@ -169,9 +169,9 @@
}
&.primary {
background-color: $primary;
color: white;
border-color: $primary;
// background-color: $primary;
// color: white;
// border-color: $primary;
&:hover {
background-color: $primary-light;
src/routes/Servers/Servers.tsx
-21
View File
@@ -252,27 +252,6 @@ const resetFilters = () => {
)}
</div>
<div className="server-actions">
<button
className="action-btn primary"
onClick={(e) => {
e.stopPropagation();
navigate(`/servers/${server.name}`);
}}
>
View Apps
</button>
<button
className="action-btn"
onClick={(e) => {
e.stopPropagation();
navigate(`/servers/${server.name}`);
}}
>
Manage
</button>
</div>
{server.upgradeCount > 0 && (
<div className="server-alert">
<span className="alert-text">