From 2e30d349aa42712f558025ff23ab9e2c0f61c0c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C4=93teris=20Caune?= <cuu508@gmail.com>
Date: Wed, 4 Mar 2020 11:42:50 +0200
Subject: [PATCH] Tweak CSS for form controls in focused state.

---
 static/css/bootstrap.css                 | 19 ++++++++-----------
 stuff/bootstrap/forms.less               |  1 -
 stuff/bootstrap/mixins/forms.less        |  7 ++++---
 templates/integrations/add_matrix.html   |  2 +-
 templates/integrations/add_opsgenie.html |  2 +-
 5 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/static/css/bootstrap.css b/static/css/bootstrap.css
index 174291cd..87bf1a3d 100644
--- a/static/css/bootstrap.css
+++ b/static/css/bootstrap.css
@@ -1742,15 +1742,12 @@ output {
   border-radius: 2px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 }
 .form-control:focus {
   border-color: #66afe9;
   outline: 0;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 0 4px rgba(102, 175, 233, 0.2);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 0 4px rgba(102, 175, 233, 0.2);
 }
 .form-control::-moz-placeholder {
   color: #999999;
@@ -2011,8 +2008,8 @@ select[multiple].input-lg {
 }
 .has-success .form-control:focus {
   border-color: #2b542c;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 4px rgba(60, 118, 61, 0.2);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 4px rgba(60, 118, 61, 0.2);
 }
 .has-success .input-group-addon {
   color: #3c763d;
@@ -2041,8 +2038,8 @@ select[multiple].input-lg {
 }
 .has-warning .form-control:focus {
   border-color: #66512c;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 4px rgba(138, 109, 59, 0.2);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 4px rgba(138, 109, 59, 0.2);
 }
 .has-warning .input-group-addon {
   color: #8a6d3b;
@@ -2071,8 +2068,8 @@ select[multiple].input-lg {
 }
 .has-error .form-control:focus {
   border-color: #843534;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 4px rgba(169, 68, 66, 0.2);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 4px rgba(169, 68, 66, 0.2);
 }
 .has-error .input-group-addon {
   color: #a94442;
diff --git a/stuff/bootstrap/forms.less b/stuff/bootstrap/forms.less
index e8b071a1..906e63af 100644
--- a/stuff/bootstrap/forms.less
+++ b/stuff/bootstrap/forms.less
@@ -124,7 +124,6 @@ output {
   border: 1px solid @input-border;
   border-radius: @input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
   .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
-  .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
 
   // Customize the `:focus` state to imitate native WebKit styles.
   .form-control-focus();
diff --git a/stuff/bootstrap/mixins/forms.less b/stuff/bootstrap/mixins/forms.less
index 6f55ed96..27a6eb6f 100755
--- a/stuff/bootstrap/mixins/forms.less
+++ b/stuff/bootstrap/mixins/forms.less
@@ -22,8 +22,9 @@
     border-color: @border-color;
     .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
     &:focus {
+      @color-rgba: rgba(red(@border-color), green(@border-color), blue(@border-color), .2);
       border-color: darken(@border-color, 10%);
-      @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
+      @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 0 4px @color-rgba;
       .box-shadow(@shadow);
     }
   }
@@ -53,11 +54,11 @@
 // Example usage: change the default blue border and shadow to white for better
 // contrast against a dark gray background.
 .form-control-focus(@color: @input-border-focus) {
-  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
+  @color-rgba: rgba(red(@color), green(@color), blue(@color), .2);
   &:focus {
     border-color: @color;
     outline: 0;
-    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
+    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 0 4px @{color-rgba}");
   }
 }
 
diff --git a/templates/integrations/add_matrix.html b/templates/integrations/add_matrix.html
index 324aeb52..536681c0 100644
--- a/templates/integrations/add_matrix.html
+++ b/templates/integrations/add_matrix.html
@@ -80,7 +80,7 @@
     <form method="post" class="form-horizontal">
         {% csrf_token %}
 
-        <div class="form-group {{ form.room_id.css_classes }}">
+        <div class="form-group {{ form.alias.css_classes }}">
             <label for="alias" class="col-sm-2 control-label">Room Alias or ID</label>
             <div class="col-sm-6">
                 <input
diff --git a/templates/integrations/add_opsgenie.html b/templates/integrations/add_opsgenie.html
index f0f83baa..3235c665 100644
--- a/templates/integrations/add_opsgenie.html
+++ b/templates/integrations/add_opsgenie.html
@@ -66,7 +66,7 @@
 
     <form method="post" class="form-horizontal">
         {% csrf_token %}
-        <div class="form-group {{ form.value.css_classes }}">
+        <div class="form-group {{ form.key.css_classes }}">
             <label for="api-key" class="col-sm-2 control-label">API Key</label>
             <div class="col-sm-4">
                 <input