Unify (button) styles over the platform

commentaries/templates/commentaries/commentary_list.html

@@ -26,7 +26,7 @@
                 <h2 class="card-title">Search SciPost Commentaries:</h2>
                 <form action="{% url 'commentaries:commentaries' %}" class="small" method="get">
                     {{ form|bootstrap:'4,8,sm' }}
-                <input class="btn btn-sm btn-secondary" type="submit"/>
+                <input class="btn btn-sm btn-secondary" type="submit"  value="Search"/>
                 </form>
             </div>
         </div>

scipost/static/scipost/assets/config/preconfig.scss

@@ -8,6 +8,11 @@
 $base-border-radius: 2px;
 $border-radius: 2px;
 
+// Alert
+//
+$alert-padding-y: 0;
+$alert-padding-x: 0.75rem;
+
 // Grid
 //
 $grid-gutter-width: 20px;
@@ -69,6 +74,9 @@ $breadcrumb-divider-color: $scipost-orange;
 $input-btn-padding-x: .5rem;
 $input-btn-padding-y: .25rem;
 $input-btn-padding-y-sm: .15rem;
+$input-border-radius-sm: $base-border-radius;
+$input-border-radius: $base-border-radius;
+$input-border-radius-lg: $base-border-radius;
 $btn-transition: none;
 
 $input-height: calc(1.5rem + 2px);

scipost/static/scipost/assets/css/_alert.scss

@@ -4,6 +4,7 @@
     position: relative;
     clear: both;
     float: left;
+    min-width: 20%;
 
     form &,
     .form & {
@@ -17,10 +18,12 @@
 
 .alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0.
 .alert-dismissible {
-  // Adjust close link position
-  .close {
-      position: absolute;
-    top: 0;
-    right: 0;
-  }
+    // Adjust close link position
+    .close {
+        position: absolute;
+        top: 0;
+        right: 0;
+        height: 100%;
+        cursor: pointer;
+    }
 }

scipost/static/scipost/assets/css/_buttons.scss

@@ -5,12 +5,30 @@
 .btn {
     cursor: pointer;
     font-family: inherit;
+
+    &:focus,
+    &.focus {
+        box-shadow: 0 0 0 3px rgba(104, 133, 195, 0.3);
+    }
 }
 
 .btn-secondary {
     color: $scipost-darkblue;
     background-color: $white;
     border-color: $gray-600;
+
+    &:hover,
+    &.hover {
+        color: $scipost-darkblue;
+        background-color: #ddd;
+        border-color: $gray-600;
+    }
+
+    &:active,
+    &.active {
+        background-color: #d4d4d4;
+        border-color: $gray-600;
+    }
 }
 
 .category-group,

scipost/static/scipost/assets/css/_form.scss

@@ -54,28 +54,27 @@ input[type="file"] {
 
 .search-nav-form {
     input {
-        // border-top-right-radius: 0;
-        // border-bottom-right-radius: 0;
         margin-right: 0 !important;
+        outline: 0;
+        line-height: 1.75;
+    }
+
+    input[name="q"] {
         border-right: 0;
-        // border-color: #ddd;
         min-width: 200px;
+        border-radius: $base-border-radius 0 0 $base-border-radius;
     }
 
-    > * {
-        border-color: #ddd !important;
-        outline: 0;
-        line-height: 1.75;
+    input[type="submit"] {
+        background: #f4f4f4;
+        border-radius: 0 $base-border-radius $base-border-radius 0;
 
         &:hover {
-            border-color: #ccc !important;
+            background: #ddd;
         }
     }
-
-    button:hover {
-        background-color: #f0f0f0;
-    }
 }
+
 // Formset
 //
 .delete-form-group {

scipost/static/scipost/assets/css/_navbar.scss

@@ -53,14 +53,6 @@
         display: flex !important;
         width: 100%;
     }
-
-    .form-inline {
-        min-width: 280px;
-
-        .form-control {
-            width: auto !important;
-        }
-    }
 }
 
 .navbar-brand {

scipost/templates/scipost/navbar.html

@@ -50,8 +50,8 @@
 
         </ul>
         <form action="{% url 'scipost:search' %}" method="get" class="form-inline search-nav-form">
-            <input class="form-control mr-2 mb-0" id="id_q" maxlength="100" name="q" type="text" required="required" value="{{search_query}}">
-          <button class="btn btn-outline-secondary text-muted" type="submit">Search</button>
+            <input class="form-control" id="id_q" maxlength="100" name="q" type="text" required="required" value="{{search_query}}">
+            <input class="btn btn-secondary" type="submit" value="Search">
         </form>
     </div>
 </nav>

submissions/templates/submissions/new_submission.html

@@ -58,7 +58,7 @@ $(document).ready(function(){
                     <p>
                         By clicking on Submit, you state that you have read and agree with the <a href="{% url 'journals:journals_terms_and_conditions' %}">SciPost Journals Terms and Conditions</a>, the <a href="{% url 'journals:journals_terms_and_conditions' %}#license_and_copyright_agreement">license and copyright agreement</a> and the <a href="{% url 'journals:journals_terms_and_conditions' %}#author_obligations">author obligations</a>.
                     </p>
-                    <input type="submit" class="btn btn-secondary" value="Submit manuscript"/>
+                    <input type="submit" class="btn btn-primary" value="Submit manuscript"/>
                 </form>
             {% endif %}
 

theses/templates/theses/thesislink_list.html

@@ -26,7 +26,7 @@
               <h2 class="card-title">Search SciPost Theses:</h2>
               <form class="small" action="{% url 'theses:theses' %}" method="get">
                   {{ form|bootstrap:'4,8,sm' }}
-                <input class="btn btn-sm btn-secondary" type="submit" name="Submit" />
+                <input class="btn btn-sm btn-secondary" type="submit" value="Search" />
               </form>
           </div>
         </div>