vantzs/corrosion-admin-panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

feat: Align UI to brand guidelines — Oxide Orange #F26622 replaces red accent

Browse Source 
Defines oxide color scale (50-950) via Tailwind v4 @theme directive.
Swaps all accent red-* classes to oxide-* across layouts, auth views,
and footer. Semantic reds (error banners, offline status, stop button)
intentionally preserved.

Brand spec: Corrosion_Management_Brand_Guidelines.pdf

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Vantz Stockwell
2026-02-14 22:48:35 -05:00
parent c12acd39a3
commit 993db90e1f
5 changed files with 32 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/layout/DashboardLayout.vue
View File

@@ -62,7 +62,7 @@ function handleLogout() {
<div class="flex items-center gap-3">
<img src="/logo.png" alt="Corrosion" class="h-8 w-8" />
<div>
<h1 class="text-sm font-bold text-red-500 tracking-wider">CORROSION</h1>
<h1 class="text-sm font-bold text-oxide-500 tracking-wider">CORROSION</h1>
<p class="text-xs text-neutral-500">{{ auth.license?.server_name || 'Server Management' }}</p>
</div>
</div>
@@ -93,7 +93,7 @@ function handleLogout() {
:to="item.path"
class="flex items-center gap-3 px-4 py-2 mx-2 rounded-lg text-sm transition-colors"
:class="isActive(item.path)
? 'bg-red-500/10 text-red-400'
? 'bg-oxide-500/10 text-oxide-400'
: 'text-neutral-400 hover:bg-neutral-800 hover:text-neutral-200'"
>
<component :is="item.icon" class="w-4 h-4" />
@@ -110,7 +110,7 @@ function handleLogout() {
</div>
<button
@click="handleLogout"
class="text-neutral-500 hover:text-red-400 transition-colors"
class="text-neutral-500 hover:text-oxide-400 transition-colors"
>
<LogOut class="w-4 h-4" />
</button>

2
frontend/src/components/layout/PublicLayout.vue
View File

@@ -9,7 +9,7 @@ import { RouterView } from 'vue-router'
<footer class="py-6 text-center text-neutral-600 text-sm border-t border-neutral-800">
<div class="flex items-center justify-center gap-2">
<img src="/logo.png" alt="Corrosion" class="h-4 w-4 opacity-60" />
<span>Powered by <span class="text-red-500 font-semibold">Corrosion</span></span>
<span>Powered by <span class="text-oxide-500 font-semibold">Corrosion</span></span>
</div>
</footer>
</div>

21
frontend/src/style.css
View File

@@ -1,12 +1,25 @@
@import "tailwindcss";
/* Corrosion Platform — Custom Styles */
/* Corrosion Brand — Oxide Orange #F26622 */
@theme {
--color-oxide-50: #FEF3EB;
--color-oxide-100: #FDE3D0;
--color-oxide-200: #FBC4A1;
--color-oxide-300: #F9A472;
--color-oxide-400: #F58543;
--color-oxide-500: #F26622;
--color-oxide-600: #D9541A;
--color-oxide-700: #B84315;
--color-oxide-800: #933510;
--color-oxide-900: #6E280C;
--color-oxide-950: #3D1506;
}
/* Dark mode is default — Rust servers run at night */
:root {
--corrosion-red: #ef4444;
--corrosion-orange: #f97316;
--corrosion-dark: #0f0f0f;
--corrosion-accent: #F26622;
--corrosion-dark: #000000;
--corrosion-charcoal: #1E2024;
--corrosion-surface: #1a1a1a;
--corrosion-border: #2a2a2a;
}

8
frontend/src/views/auth/LoginView.vue
View File

@@ -68,7 +68,7 @@ async function handleLogin() {
required
autocomplete="email"
placeholder="admin@example.com"
class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-red-500/50 focus:border-red-500 transition-colors"
class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
/>
</div>
@@ -83,14 +83,14 @@ async function handleLogin() {
required
autocomplete="current-password"
placeholder="Enter your password"
class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-red-500/50 focus:border-red-500 transition-colors"
class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
/>
</div>
<button
type="submit"
:disabled="loading"
class="w-full py-2.5 bg-red-600 hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors flex items-center justify-center gap-2"
class="w-full py-2.5 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors flex items-center justify-center gap-2"
>
<svg
v-if="loading"
@@ -120,7 +120,7 @@ async function handleLogin() {
<!-- Register link -->
<p class="mt-6 text-center text-sm text-neutral-500">
Don't have an account?
<router-link to="/register" class="text-red-400 hover:text-red-300 transition-colors">
<router-link to="/register" class="text-oxide-400 hover:text-oxide-300 transition-colors">
Create one
</router-link>
</p>

14
frontend/src/views/auth/RegisterView.vue
View File

@@ -101,7 +101,7 @@ async function handleRegister() {
required
autocomplete="email"
placeholder="you@example.com"
class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-red-500/50 focus:border-red-500 transition-colors"
class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
/>
</div>
@@ -116,7 +116,7 @@ async function handleRegister() {
required
autocomplete="username"
placeholder="At least 3 characters"
class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-red-500/50 focus:border-red-500 transition-colors"
class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
/>
</div>
@@ -131,7 +131,7 @@ async function handleRegister() {
required
autocomplete="new-password"
placeholder="At least 8 characters"
class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-red-500/50 focus:border-red-500 transition-colors"
class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
/>
</div>
@@ -146,7 +146,7 @@ async function handleRegister() {
required
autocomplete="new-password"
placeholder="Re-enter your password"
class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-red-500/50 focus:border-red-500 transition-colors"
class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
/>
</div>
@@ -161,14 +161,14 @@ async function handleRegister() {
required
autocomplete="off"
placeholder="XXXX-XXXX-XXXX-XXXX"
class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-red-500/50 focus:border-red-500 transition-colors font-mono tracking-wider"
class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors font-mono tracking-wider"
/>
</div>
<button
type="submit"
:disabled="loading || !formValid"
class="w-full py-2.5 bg-red-600 hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors flex items-center justify-center gap-2"
class="w-full py-2.5 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors flex items-center justify-center gap-2"
>
<svg
v-if="loading"
@@ -198,7 +198,7 @@ async function handleRegister() {
<!-- Login link -->
<p class="mt-6 text-center text-sm text-neutral-500">
Already have an account?
<router-link to="/login" class="text-red-400 hover:text-red-300 transition-colors">
<router-link to="/login" class="text-oxide-400 hover:text-oxide-300 transition-colors">
Sign in
</router-link>
</p>