chore: add frontend section to dev config (#1913)

* chore: add frontend section to dev config

Signed-off-by: m.nabokikh <maksim.nabokikh@flant.com>

examples/config-dev.yaml

@@ -50,6 +50,13 @@ web:
   # tlsCert: /etc/dex/tls.crt
   # tlsKey: /etc/dex/tls.key
 
+# Configuration for dex appearance
+# frontend:
+#   issuer: dex
+#   logoURL: theme/logo.png
+#   dir: web/
+#   theme: light
+
 # Configuration for telemetry
 telemetry:
   http: 0.0.0.0:5558
@@ -58,9 +65,9 @@ telemetry:
 # from the HTTP endpoints.
 # grpc:
 #   addr: 127.0.0.1:5557
-#  tlsCert: examples/grpc-client/server.crt
-#  tlsKey: examples/grpc-client/server.key
-#  tlsClientCA: examples/grpc-client/ca.crt
+#   tlsCert: examples/grpc-client/server.crt
+#   tlsKey: examples/grpc-client/server.key
+#   tlsClientCA: examples/grpc-client/ca.crt
 
 # Uncomment this block to enable configuration for the expiration time durations.
 # expiry:
@@ -84,7 +91,7 @@ telemetry:
     # go directly to it. For connected IdPs, this redirects the browser away
     # from application to upstream provider such as the Google login page
 #   alwaysShowLoginScreen: false
-    # Uncommend the passwordConnector to use a specific connector for password grants
+    # Uncomment the passwordConnector to use a specific connector for password grants
 #   passwordConnector: local
 
 # Instead of reading from an external storage, use this list of clients.

server/server.go

@@ -96,9 +96,6 @@ type Config struct {
 }
 
 // WebConfig holds the server's frontend templates and asset configuration.
-//
-// These are currently very custom to CoreOS and it's not recommended that
-// outside users attempt to customize these.
 type WebConfig struct {
 	// A filepath to web static.
 	//
@@ -116,7 +113,7 @@ type WebConfig struct {
 	// Defaults to "dex"
 	Issuer string
 
-	// Defaults to "coreos"
+	// Defaults to "light"
 	Theme string
 
 	// Map of extra values passed into the templates

web/themes/dark/styles.css

@@ -49,7 +49,7 @@
 }
 
 .theme-btn-provider:hover {
-  background-color: #25343a;
+  background-color: #212731;
   color: #ffffff;
 }
 
@@ -62,18 +62,18 @@
 }
 
 .theme-btn--primary:hover {
-  background-color: #425f69;
+  background-color: #212731;
   color: #e9e9e9;
 }
 
 .theme-btn--success {
-  background-color: #233239;
+  background-color: #1891bb;
   color: #e9e9e9;
   width: 250px;
 }
 
 .theme-btn--success:hover {
-  background-color: #46add0;
+  background-color: #1da5d4;
 }
 
 .theme-form-row {
@@ -87,8 +87,10 @@
   padding: 6px 12px;
   font-size: 14px;
   line-height: 1.42857143;
-  border: 1px solid #c8d1d9;
+  border: 1px solid #515559;
   border-radius: 4px;
+  color: #c8d1d9;
+  background-color: #0f1218;
   box-shadow: inset 0 1px 1px rgb(27, 40, 46);
   width: 250px;
   margin: auto;
@@ -97,7 +99,8 @@
 .theme-form-input:focus,
 .theme-form-input:active {
   outline: none;
-  border-color: #1b282e;
+  border-color: #f8f9f9;
+  color: #c8d1d9;
 }
 
 .theme-form-label {