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

Reviewed-on: BornDeleuze/coop-cloud-front#8

src/assets/scss/_global.scss

@@ -1,6 +1,7 @@
 @use './variables' as *;
 @use './mixins' as *;
 
+
 body {
   margin: 0;
   padding: 0;

src/assets/scss/_mixins.scss

@@ -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

@@ -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

@@ -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

@@ -144,7 +144,7 @@
 }
 
 .domain-link {
-  color: $primary;
+  color: $primary-dark;
   text-decoration: none;
   transition: color $transition-base;
 

src/routes/Apps/Apps.tsx

@@ -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

@@ -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

@@ -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

@@ -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>
@@ -335,7 +335,7 @@ export const Server: React.FC = () => {
                   onClick={() => handleAction('upgrade-all')}
                   disabled={!!actionLoading || server.upgradeCount === 0}
                 >
-                  <span className="action-text">⬆Upgrade All Apps</span>
+                  <span className="action-text">Upgrade All Apps</span>
                 </button>
               </div>
             </section>

src/routes/Servers/Servers.scss

@@ -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

@@ -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">