style: class for <a>-like form submit buttons

core/static/core/colors.scss

@@ -21,6 +21,8 @@ $secondary-neutral-dark-color: hsl(40, 57.6%, 17%);
 
 $white-color: hsl(219.6, 20.8%, 98%);
 $black-color: hsl(0, 0%, 17%);
+$red-text-color: #eb2f06;
+$hovered-red-text-color: #ff4d4d;
 
 $faceblue: hsl(221, 44%, 41%);
 $twitblue: hsl(206, 82%, 63%);

core/static/core/forms.scss

@@ -745,4 +745,32 @@ form {
     background-repeat: no-repeat;
     background-size: var(--nf-input-size);
   }
+
+  &.no-margin {
+    margin:0;
+  }
+
+  // a submit input that should look like a regular <a>
+  input[type="submit"], button {
+    &.link-like {
+      color: $primary-dark-color;
+      &:hover {
+        color: $primary-light-color;
+      }
+
+      &.link-red {
+        color: $red-text-color;
+        &:hover {
+          color: $hovered-red-text-color;
+        }
+      }
+      font-weight: normal;
+      font-size: 100%;
+      margin: auto;
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 0;
+    }
+  }
 }

core/static/core/header.scss

@@ -5,9 +5,6 @@ $text-color: white;
 
 $background-color-hovered: #283747;
 
-$red-text-color: #eb2f06;
-$hovered-red-text-color: #ff4d4d;
-
 .header {
   box-sizing: border-box;
   background-color: $deepblue;
@@ -251,12 +248,15 @@ $hovered-red-text-color: #ff4d4d;
               justify-content: flex-start;
             }
 
+            a {
+              color: $text-color;
+            }
+
             a,
             button {
               font-size: 100%;
               margin: 0;
               text-align: right;
-              color: $text-color;
               margin-top: auto;
 
               &:hover {
@@ -268,19 +268,6 @@ $hovered-red-text-color: #ff4d4d;
               margin: 0;
               display: inline;
             }
-
-            #logout-form button {
-              color: $red-text-color;
-
-              &:hover {
-                color: $hovered-red-text-color;
-              }
-
-              background: none;
-              border: none;
-              cursor: pointer;
-              padding: 0;
-            }
           }
         }
       }

core/static/core/style.scss

@@ -519,7 +519,6 @@ th {
 td {
   margin: 5px;
   border-collapse: collapse;
-  vertical-align: top;
   overflow: hidden;
   text-overflow: ellipsis;
 

core/templates/core/base/header.jinja

@@ -61,7 +61,9 @@
               <a href="{{ url('core:user_tools') }}">{% trans %}Tools{% endtrans %}</a>
               <form id="logout-form" method="post" action="{{ url("core:logout") }}">
                 {% csrf_token %}
-                <button type="submit">{% trans %}Logout{% endtrans %}</button>
+                <button type="submit" class="link-like link-red">
+                  {% trans %}Logout{% endtrans %}
+                </button>
               </form>
             </div>
           </div>