modified color palette

2025-11-10 21:58:28 +01:00
parent ceac24ffe7
commit aff591e2f7
6 changed files with 275 additions and 26 deletions
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -150,7 +150,7 @@ const App = () => {

  const handleVerifyTwoFactor = async (code) => {
    if (!authState.preAuthToken) {
-      showFeedback('warning', 'Primero inicia sesion con usuario y clave')
+      showFeedback('warning', 'Primero inicia sesion con usuario y contraseña')
      return
    }

@@ -203,12 +203,12 @@ const App = () => {
  }, [authState.accessToken])

  return (
-    <main className="min-vh-100 d-flex align-items-center justify-content-center bg-dark-subtle">
+    <main className="app-shell">
      <div className="container py-5">
        <div className="row justify-content-center">
          <div className="col-12 col-md-8 col-lg-6">
-            <div className="card shadow-lg bg-dark text-light border-0">
-              <div className="card-body p-4 p-md-5">
+            <div className="card app-card shadow-lg border-0">
+              <div className="card-body app-card-body p-4 p-md-5">
                <h1 className="h3 text-center mb-4">Portal 2FA</h1>
                <AlertMessage
                  type={feedback.type}
@@ -219,7 +219,7 @@ const App = () => {
                {step === 'login' && (
                  <>
                    <ul className="nav nav-pills mb-4" role="tablist">
-                      <li className="nav-item" role="presentation">
+                      <li className="nav-item me-2" role="presentation">
                        <button
                          className={`nav-link ${activeTab === 'login' ? 'active' : ''}`}
                          type="button"
@@ -289,13 +289,13 @@ const App = () => {

                {step === 'dashboard' && (
                  <div className="d-flex flex-column gap-3">
-                    <div className="bg-dark-subtle rounded p-3">
+                    <div className="panel-surface rounded p-3">
                      <h2 className="h5">Token de acceso</h2>
                      <code className="small text-break">{authState.accessToken}</code>
                    </div>

                    {tokenPayload && (
-                      <div className="bg-dark-subtle rounded p-3">
+                      <div className="panel-surface rounded p-3">
                        <h2 className="h5">Payload decodificado</h2>
                        <pre className="small text-break mb-0">
                          {JSON.stringify(tokenPayload, null, 2)}
@@ -314,7 +314,7 @@ const App = () => {

                    {users.length > 0 && (
                      <div className="table-responsive">
-                        <table className="table table-dark table-striped table-bordered align-middle mb-0">
+                        <table className="table theme-table align-middle mb-0">
                          <thead>
                            <tr>
                              <th scope="col">ID</th>
@@ -338,7 +338,7 @@ const App = () => {
                {step !== 'login' && step !== 'dashboard' && (
                  <button
                    type="button"
-                    className="btn btn-outline-light mt-4"
+                    className="btn btn-danger mt-4 ms-3"
                    onClick={resetFlow}
                  >
                    Cancelar
--- a/frontend/src/components/forms/Enable2FA.jsx
+++ b/frontend/src/components/forms/Enable2FA.jsx
@@ -1,24 +1,24 @@
 const Enable2FA = ({ secret, otpauthUrl, qrBase64, onBack, onRefresh, isLoading }) => {
  return (
    <div className="d-flex flex-column gap-3">
-      <p>Escanea el codigo o introduce la clave manualmente en tu app TOTP.</p>
+  <p className="text-white">Escanea el codigo o introduce la contraseña manualmente en tu app TOTP.</p>
      {qrBase64 ? (
        <img
          src={`data:image/png;base64,${qrBase64}`}
          alt="Codigo QR 2FA"
-          className="align-self-center border rounded"
+          className="align-self-center qr-frame"
          style={{ width: '220px', height: '220px' }}
        />
      ) : (
        <div className="alert alert-warning" role="alert">
-          No se pudo generar la imagen QR. Usa la clave manual.
+          No se pudo generar la imagen QR. Usa la contraseña manual.
        </div>
      )}
-      <div className="bg-dark-subtle rounded p-3">
+      <div className="panel-surface rounded p-3">
        <strong>Clave TOTP:</strong>
        <div className="mt-2 text-break">{secret}</div>
      </div>
-      <div className="bg-dark-subtle rounded p-3">
+      <div className="panel-surface rounded p-3">
        <strong>URL OTPAuth:</strong>
        <div className="mt-2 text-break">{otpauthUrl}</div>
      </div>
--- a/frontend/src/components/forms/LoginForm.jsx
+++ b/frontend/src/components/forms/LoginForm.jsx
@@ -32,7 +32,7 @@ const LoginForm = ({ onSubmit, isLoading }) => {
        />
      </div>
      <div>
-        <label htmlFor="password" className="form-label">Clave</label>
+        <label htmlFor="password" className="form-label">Contraseña</label>
        <input
          id="password"
          name="password"
--- a/frontend/src/components/forms/RegisterForm.jsx
+++ b/frontend/src/components/forms/RegisterForm.jsx
@@ -17,7 +17,7 @@ const RegisterForm = ({ onSubmit, isLoading }) => {
  const handleSubmit = (event) => {
    event.preventDefault()
    if (formState.password !== formState.confirmPassword) {
-      setLocalError('Las claves no coinciden')
+      setLocalError('Las contraseñas no coinciden')
      return
    }
    onSubmit({ user_name: formState.user_name, password: formState.password })
@@ -38,7 +38,7 @@ const RegisterForm = ({ onSubmit, isLoading }) => {
        />
      </div>
      <div>
-        <label htmlFor="register-password" className="form-label">Clave</label>
+        <label htmlFor="register-password" className="form-label">Contraseña</label>
        <input
          id="register-password"
          name="password"
@@ -50,7 +50,7 @@ const RegisterForm = ({ onSubmit, isLoading }) => {
        />
      </div>
      <div>
-        <label htmlFor="register-confirm" className="form-label">Repetir clave</label>
+        <label htmlFor="register-confirm" className="form-label">Repetir contraseña</label>
        <input
          id="register-confirm"
          name="confirmPassword"
--- a/frontend/src/components/forms/TotpForm.jsx
+++ b/frontend/src/components/forms/TotpForm.jsx
@@ -30,7 +30,7 @@ const TotpForm = ({ onSubmit, isLoading, onBack }) => {
        {onBack && (
          <button
            type="button"
-            className="btn btn-outline-secondary"
+            className="btn btn-primary"
            onClick={onBack}
            disabled={isLoading}
          >
--- a/frontend/src/css/index.css
+++ b/frontend/src/css/index.css
@@ -99,13 +99,13 @@ html {

 body {
  font-family: "Open Sans", sans-serif;
-  color: var(--text-main);
+  color: var(--text-main) !important;
  background-color: transparent !important;
 }

 main {
-  color: var(--text-main);
-  background-color: var(--background-main);
+  color: var(--text-main) !important;
+  background-color: var(--background-main) !important;
 }

 /* Tipografía global */
@@ -116,8 +116,8 @@ p,
 span,
 a,
 button {
-  font-family: "Open Sans", sans-serif;
-  color: var(--text-main);
+  font-family: "Open Sans", sans-serif !important;
+  color: var(--text-main) !important;
 }

 h1,
@@ -126,6 +126,255 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: "Product Sans", sans-serif;
-  color: var(--text-main);
+  font-family: "Product Sans", sans-serif !important;
+  color: var(--text-main) !important;
+}
+
+/* ================================
+   THEME STYLES
+================================== */
+.app-shell {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: radial-gradient(circle at top, rgba(53, 158, 188, 0.2), transparent 55%), var(--background-main) !important;
+  color: var(--text-main) !important;
+}
+
+.app-card {
+  background: var(--background-card) !important;
+  color: var(--text-main) !important;
+  border: 1px solid var(--border-color) !important;
+  box-shadow: var(--shadow-lg) !important;
+}
+
+.app-card-body {
+  background: linear-gradient(180deg, rgba(14, 16, 28, 0.2), transparent 65%) !important;
+}
+
+.panel-surface {
+  background: var(--background-alt) !important;
+  border: 1px solid var(--border-color) !important;
+  color: var(--text-main) !important;
+  box-shadow: var(--shadow-sm) !important;
+}
+
+.nav-pills .nav-link {
+  color: var(--text-muted) !important;
+  background: transparent !important;
+  border: 1px solid transparent !important;
+  transition: all 0.2s ease-in-out !important;
+}
+
+.nav-pills .nav-link:hover {
+  color: var(--text-accent) !important;
+  border-color: var(--border-hover) !important;
+}
+
+.nav-pills .nav-link.active {
+  color: var(--text-main) !important;
+  background: linear-gradient(135deg, var(--bondi-blue), var(--bondi-blue-dark)) !important;
+  border-color: transparent !important;
+  box-shadow: var(--shadow-accent) !important;
+}
+
+.form-control {
+  background: var(--input-bg) !important;
+  border: 1px solid var(--input-border) !important;
+  color: var(--input-text) !important;
+}
+
+.form-control::placeholder {
+  color: var(--input-placeholder) !important;
+}
+
+.form-control:focus {
+  background: var(--input-bg) !important;
+  color: var(--input-text) !important;
+  border-color: var(--input-border-focus) !important;
+  box-shadow: 0 0 0 0.25rem rgba(53, 158, 188, 0.25) !important;
+}
+
+.form-text {
+  color: var(--text-muted) !important;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, var(--button-bg), var(--bondi-blue-dark)) !important;
+  border-color: var(--button-bg) !important;
+  color: var(--button-text) !important;
+}
+
+.btn-primary:hover,
+.btn-primary:focus {
+  background: linear-gradient(135deg, var(--button-bg-hover), var(--bondi-blue-darker)) !important;
+  border-color: var(--button-bg-hover) !important;
+}
+
+.btn-outline-primary {
+  color: var(--button-bg) !important;
+  border-color: var(--button-bg) !important;
+  background: transparent !important;
+}
+
+.btn-outline-primary:hover,
+.btn-outline-primary:focus {
+  color: var(--button-text) !important;
+  background: var(--button-bg) !important;
+  border-color: var(--button-bg) !important;
+}
+
+.btn-outline-secondary {
+  color: var(--text-muted) !important;
+  border-color: var(--text-muted) !important;
+}
+
+.btn-outline-secondary:hover,
+.btn-outline-secondary:focus {
+  color: var(--text-inverted) !important;
+  background: var(--gun-powder-light) !important;
+  border-color: var(--gun-powder-light) !important;
+}
+
+.btn-outline-light {
+  color: var(--text-main) !important;
+  border-color: var(--text-main) !important;
+}
+
+.btn-outline-light:hover,
+.btn-outline-light:focus {
+  color: var(--text-inverted) !important;
+  background: var(--text-main) !important;
+  border-color: var(--text-main) !important;
+}
+
+.btn-success {
+  background: linear-gradient(135deg, var(--success), #2f9a87) !important;
+  border-color: var(--success) !important;
+  color: var(--text-main) !important;
+}
+
+.btn-success:hover,
+.btn-success:focus {
+  background: linear-gradient(135deg, #2f9a87, #257d6d) !important;
+  border-color: #2f9a87 !important;
+}
+
+.btn-danger {
+  background: linear-gradient(135deg, var(--error), #c0475d) !important;
+  border-color: var(--error) !important;
+  color: var(--text-main) !important;
+}
+
+.btn-danger:hover,
+.btn-danger:focus {
+  background: linear-gradient(135deg, #c0475d, #9d3547) !important;
+  border-color: #c0475d !important;
+}
+
+.btn-link {
+  color: var(--text-link) !important;
+}
+
+.btn-link:hover,
+.btn-link:focus {
+  color: var(--text-accent) !important;
+}
+
+.btn-close {
+  filter: invert(80%);
+}
+
+.alert {
+  background: var(--background-alt) !important;
+  color: var(--text-main) !important;
+  border: 1px solid var(--border-color) !important;
+  box-shadow: var(--shadow-sm) !important;
+}
+
+.alert-info {
+  border-color: var(--info) !important;
+  background: rgba(91, 192, 218, 0.1) !important;
+  color: var(--info) !important;
+}
+
+.alert-success {
+  border-color: var(--success) !important;
+  background: rgba(76, 201, 176, 0.12) !important;
+  color: var(--success) !important;
+}
+
+.alert-warning {
+  border-color: var(--warning) !important;
+  background: rgba(243, 201, 105, 0.14) !important;
+  color: var(--warning) !important;
+}
+
+.alert-danger {
+  border-color: var(--error) !important;
+  background: rgba(232, 93, 117, 0.12) !important;
+  color: var(--error) !important;
+}
+
+.theme-table {
+  background: var(--background-alt) !important;
+  color: var(--text-main) !important;
+  border: 1px solid var(--border-color) !important;
+}
+
+.theme-table thead {
+  background: linear-gradient(135deg, var(--bondi-blue-dark), var(--bondi-blue)) !important;
+  color: var(--text-inverted) !important;
+}
+
+.theme-table tbody tr {
+  border-color: var(--border-color) !important;
+}
+
+.theme-table tbody tr:nth-child(even) {
+  background: rgba(72, 74, 98, 0.35) !important;
+}
+
+.theme-table tbody tr:hover {
+  background: rgba(91, 192, 218, 0.12) !important;
+}
+
+img.qr-frame {
+  border: 4px solid rgba(91, 192, 218, 0.35) !important;
+  border-radius: 1rem;
+  padding: 0.5rem;
+  background: var(--background-card) !important;
+  box-shadow: var(--shadow-accent) !important;
+}
+
+code {
+  display: inline-block;
+  background: rgba(28, 30, 44, 0.6) !important;
+  border: 1px solid var(--border-color) !important;
+  color: var(--text-accent) !important;
+  border-radius: 0.5rem;
+  padding: 0.5rem 0.75rem;
+}
+
+pre {
+  background: rgba(28, 30, 44, 0.6) !important;
+  border: 1px solid var(--border-color) !important;
+  color: var(--text-accent) !important;
+  border-radius: 0.75rem;
+  padding: 0.75rem;
+  white-space: pre-wrap;
+}
+
+.text-body-secondary {
+  color: var(--text-main) !important;
+}
+
+a {
+  color: var(--text-link) !important;
+}
+
+a:hover,
+a:focus {
+  color: var(--text-accent) !important;
 }