From 80d297b8a43d912740a0c898d99772a705e4e57a Mon Sep 17 00:00:00 2001
From: Maksim Nabokikh <maksim.nabokikh@flant.com>
Date: Thu, 12 Mar 2026 09:18:12 +0100
Subject: [PATCH] feat: update CSS for improved theming and button styles
 (#4634)

---
 examples/config-dev.yaml     |   1 +
 web/static/img/mock-icon.svg |   5 ++
 web/static/main.css          |  61 ++++++++++----------
 web/themes/dark/styles.css   | 105 ++++++++++++++++++-----------------
 web/themes/light/styles.css  |  80 ++++++++++++++------------
 5 files changed, 137 insertions(+), 115 deletions(-)
 create mode 100644 web/static/img/mock-icon.svg

diff --git a/examples/config-dev.yaml b/examples/config-dev.yaml
index 616cbf71..eb48e581 100644
--- a/examples/config-dev.yaml
+++ b/examples/config-dev.yaml
@@ -68,6 +68,7 @@ web:
 #   issuer: dex
 #   logoURL: theme/logo.png
 #   dir: web/
+#   Allowed values: light, dark
 #   theme: light
 
 # Configuration for telemetry
diff --git a/web/static/img/mock-icon.svg b/web/static/img/mock-icon.svg
new file mode 100644
index 00000000..fda905ca
--- /dev/null
+++ b/web/static/img/mock-icon.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9 3V8.5L5.1 15.1C4.1 16.8 5.3 19 7.2 19H16.8C18.7 19 19.9 16.8 18.9 15.1L15 8.5V3" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M9 3H15" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/>
+  <path d="M7 15H17" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/>
+</svg>
diff --git a/web/static/main.css b/web/static/main.css
index f5c61d7f..47e5c9a6 100644
--- a/web/static/main.css
+++ b/web/static/main.css
@@ -8,28 +8,29 @@ body {
 
 .dex-container {
   color: #333;
-  margin: 45px auto;
-  max-width: 500px;
+  margin: 60px auto;
+  max-width: 480px;
   min-width: 320px;
+  padding: 0 16px;
   text-align: center;
 }
 
 .dex-btn {
-  border-radius: 4px;
+  border-radius: 8px;
   border: 0;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.25);
   cursor: pointer;
-  font-size: 16px;
+  font-size: 15px;
   padding: 0;
+  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
 }
 
-.dex-btn:focus {
-  outline: none;
+.dex-btn:focus-visible {
+  outline: 2px solid #4A90D9;
+  outline-offset: 2px;
 }
 
 .dex-btn:active {
-  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  outline: none;
+  transform: scale(0.98);
 }
 
 .dex-btn:disabled {
@@ -40,17 +41,17 @@ body {
 .dex-btn-icon {
   background-position: center;
   background-repeat: no-repeat;
-  background-size: 24px;
-  border-radius: 4px 0 0 4px;
+  background-size: 20px;
+  border-radius: 8px 0 0 8px;
   float: left;
-  height: 36px;
-  margin-right: 5px;
-  width: 36px;
+  height: 40px;
+  margin-right: 4px;
+  width: 40px;
 }
 
 .dex-btn-icon--google {
   background-color: #FFFFFF;
-  background-image: url(../static/img/google-icon.svg);;
+  background-image: url(../static/img/google-icon.svg);
 }
 
 .dex-btn-icon--local {
@@ -115,39 +116,43 @@ body {
   background-image: url(../static/img/microsoft-icon.svg);
 }
 
+.dex-btn-icon--mockCallback,
+.dex-btn-icon--mockPassword {
+  background-color: #6c5ce7;
+  background-image: url(../static/img/mock-icon.svg);
+}
+
 .dex-btn-text {
   font-weight: 600;
-  line-height: 36px;
-  padding: 6px 12px;
+  line-height: 40px;
+  padding: 6px 14px;
   text-align: center;
 }
 
 .dex-subtle-text {
-  color: #999;
-  font-size: 12px;
+  color: #888;
+  font-size: 13px;
 }
 
 .dex-separator {
-  color: #999;
+  color: #aaa;
 }
 
 .dex-list {
-  color: #999;
+  color: #888;
   display: inline-block;
-  font-size: 12px;
+  font-size: 13px;
   list-style: circle;
   text-align: left;
 }
 
 .dex-error-box {
-  background-color: #DD1327;
+  background-color: #e5383b;
+  border-radius: 6px;
   color: #fff;
   font-size: 14px;
   font-weight: normal;
-  max-width: 320px;
-  padding: 4px 0;
-}
-
-.dex-error-box {
   margin: 20px auto;
+  max-width: 320px;
+  padding: 8px 12px;
 }
diff --git a/web/themes/dark/styles.css b/web/themes/dark/styles.css
index edf30412..153f17eb 100644
--- a/web/themes/dark/styles.css
+++ b/web/themes/dark/styles.css
@@ -1,122 +1,127 @@
 .theme-body {
-  background-color: #0f1218;
-  color: #c8d1d9;
-  font-family: 'Source Sans Pro', Helvetica, sans-serif;
+  background-color: #131519;
+  color: #b8bcc4;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 }
 
 .theme-navbar {
-  background-color: #161b22;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
-  color: #161B2B;
+  background-color: #1a1d23;
+  border-bottom: 1px solid #2a2d35;
+  color: #b8bcc4;
   font-size: 13px;
-  font-weight: 100;
-  height: 46px;
+  font-weight: 400;
+  height: 52px;
   overflow: hidden;
-  padding: 0 10px;
+  padding: 0 16px;
 }
 
 .theme-navbar__logo-wrap {
   display: inline-block;
   height: 100%;
   overflow: hidden;
-  padding: 10px 15px;
+  padding: 12px 15px;
   width: 300px;
 }
 
 .theme-navbar__logo {
   height: 100%;
-  max-height: 25px;
+  max-height: 26px;
 }
 
 .theme-heading {
+  color: #dcdfe5;
   font-size: 20px;
-  font-weight: 500;
+  font-weight: 600;
+  margin-bottom: 16px;
   margin-top: 0;
-  color: #c8d1d9;
 }
 
 .theme-panel {
-  background-color: #161b22;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
-  padding: 30px;
+  background-color: #1a1d23;
+  border: 1px solid #2a2d35;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+  padding: 32px;
 }
 
 .theme-btn-provider {
-  background-color: #1e242d;
-  color: #c8d1d9;
-  border: 1px solid #30373c;
-  min-width: 250px;
+  background-color: #22252c;
+  border: 1px solid #33363e;
+  color: #b8bcc4;
+  min-width: 260px;
 }
 
 .theme-btn-provider:hover {
-  background-color: #212731;
-  color: #ffffff;
+  background-color: #2a2d35;
+  border-color: #3e414a;
+  color: #dcdfe5;
 }
 
 .theme-btn--primary {
-  background-color: #1e242d;
+  background-color: #3d3f47;
   border: none;
-  color: #c8d1d9;
+  color: #e8eaed;
   min-width: 200px;
-  padding: 6px 12px;
+  padding: 8px 16px;
 }
 
 .theme-btn--primary:hover {
-  background-color: #212731;
-  color: #e9e9e9;
+  background-color: #4a4c55;
+  color: #fff;
 }
 
 .theme-btn--success {
-  background-color: #1891bb;
-  color: #e9e9e9;
-  width: 250px;
+  background-color: #2d7d9a;
+  color: #e8eaed;
+  width: 260px;
 }
 
 .theme-btn--success:hover {
-  background-color: #1da5d4;
+  background-color: #358fae;
 }
 
 .theme-form-row {
   display: block;
-  margin: 20px auto;
+  margin: 16px auto;
 }
 
 .theme-form-input {
+  background-color: #131519;
+  border: 1px solid #33363e;
+  border-radius: 8px;
+  color: #b8bcc4;
   display: block;
-  height: 36px;
-  padding: 6px 12px;
   font-size: 14px;
-  line-height: 1.42857143;
-  border: 1px solid #515559;
-  border-radius: 4px;
-  color: #c8d1d9;
-  background-color: #0f1218;
-  box-shadow: inset 0 1px 1px rgb(27, 40, 46);
-  width: 250px;
+  height: 40px;
+  line-height: 1.5;
   margin: auto;
+  padding: 8px 12px;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  width: 260px;
 }
 
 .theme-form-input:focus,
 .theme-form-input:active {
+  border-color: #5a9bb5;
+  box-shadow: 0 0 0 3px rgba(90, 155, 181, 0.15);
+  color: #dcdfe5;
   outline: none;
-  border-color: #f8f9f9;
-  color: #c8d1d9;
 }
 
 .theme-form-label {
-  width: 250px;
+  color: #b8bcc4;
+  font-size: 14px;
+  font-weight: 500;
   margin: 4px auto;
-  text-align: left;
   position: relative;
-  font-size: 13px;
-  font-weight: 600;
-  color: #c8d1d9;
+  text-align: left;
+  width: 260px;
 }
 
 .theme-link-back {
-  margin-top: 4px;
+  margin-top: 8px;
 }
 
 .dex-container {
-  color: #c8d1d9;
+  color: #b8bcc4;
 }
diff --git a/web/themes/light/styles.css b/web/themes/light/styles.css
index 2d920571..61586722 100644
--- a/web/themes/light/styles.css
+++ b/web/themes/light/styles.css
@@ -1,113 +1,119 @@
 .theme-body {
-  background-color: #efefef;
-  color: #333;
-  font-family: 'Source Sans Pro', Helvetica, sans-serif;
+  background-color: #f4f5f7;
+  color: #1a1a1a;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 }
 
 .theme-navbar {
   background-color: #fff;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
-  color: #333;
+  border-bottom: 1px solid #e1e4e8;
+  color: #1a1a1a;
   font-size: 13px;
-  font-weight: 100;
-  height: 46px;
+  font-weight: 400;
+  height: 52px;
   overflow: hidden;
-  padding: 0 10px;
+  padding: 0 16px;
 }
 
 .theme-navbar__logo-wrap {
   display: inline-block;
   height: 100%;
   overflow: hidden;
-  padding: 10px 15px;
+  padding: 12px 15px;
   width: 300px;
 }
 
 .theme-navbar__logo {
   height: 100%;
-  max-height: 25px;
+  max-height: 26px;
 }
 
 .theme-heading {
   font-size: 20px;
-  font-weight: 500;
-  margin-bottom: 10px;
+  font-weight: 600;
+  margin-bottom: 16px;
   margin-top: 0;
 }
 
 .theme-panel {
   background-color: #fff;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
-  padding: 30px;
+  border: 1px solid #e1e4e8;
+  border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
+  padding: 32px;
 }
 
 .theme-btn-provider {
   background-color: #fff;
-  color: #333;
-  min-width: 250px;
+  border: 1px solid #d0d5dd;
+  color: #1a1a1a;
+  min-width: 260px;
 }
 
 .theme-btn-provider:hover {
-  color: #999;
+  background-color: #f9fafb;
+  border-color: #b0b5bd;
+  color: #1a1a1a;
 }
 
 .theme-btn--primary {
-  background-color: #333;
+  background-color: #1a1a1a;
   border: none;
   color: #fff;
   min-width: 200px;
-  padding: 6px 12px;
+  padding: 8px 16px;
 }
 
 .theme-btn--primary:hover {
-  background-color: #666;
+  background-color: #333;
   color: #fff;
 }
 
 .theme-btn--success {
-  background-color: #2FC98E;
+  background-color: #16a34a;
   color: #fff;
-  width: 250px;
+  width: 260px;
 }
 
 .theme-btn--success:hover {
-  background-color: #49E3A8;
+  background-color: #15803d;
 }
 
 .theme-form-row {
   display: block;
-  margin: 20px auto;
+  margin: 16px auto;
 }
 
 .theme-form-input {
-  border-radius: 4px;
-  border: 1px solid #CCC;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  color: #666;
+  border-radius: 8px;
+  border: 1px solid #d0d5dd;
+  color: #1a1a1a;
   display: block;
   font-size: 14px;
-  height: 36px;
-  line-height: 1.42857143;
+  height: 40px;
+  line-height: 1.5;
   margin: auto;
-  padding: 6px 12px;
-  width: 250px;
+  padding: 8px 12px;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  width: 260px;
 }
 
 .theme-form-input:focus,
 .theme-form-input:active {
-  border-color: #66AFE9;
+  border-color: #4A90D9;
+  box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.15);
   outline: none;
 }
 
 .theme-form-label {
-  font-size: 13px;
-  font-weight: 600;
+  font-size: 14px;
+  font-weight: 500;
   margin: 4px auto;
   position: relative;
   text-align: left;
-  width: 250px;
+  width: 260px;
 }
 
 .theme-link-back {
-  margin-top: 4px;
+  margin-top: 8px;
 }