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

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>