Updated buttons, fonts and collapse

src/web/ControlsWaiter.js

@@ -105,9 +105,9 @@ ControlsWaiter.prototype.autoBakeChange = function() {
 
     if (autoBakeCheckbox.checked) {
         autoBakeLabel.classList.add("btn-success");
-        autoBakeLabel.classList.remove("btn-default");
+        autoBakeLabel.classList.remove("btn-secondary");
     } else {
-        autoBakeLabel.classList.add("btn-default");
+        autoBakeLabel.classList.add("btn-secondary");
         autoBakeLabel.classList.remove("btn-success");
     }
 };

src/web/HTMLCategory.js

@@ -33,13 +33,12 @@ HTMLCategory.prototype.addOperation = function(operation) {
  */
 HTMLCategory.prototype.toHtml = function() {
     const catName = "cat" + this.name.replace(/[\s/-:_]/g, "");
-    let html = "<div class='panel category'>\
-        <a class='category-title' data-toggle='collapse'\
-            data-parent='#categories' href='#" + catName + "'>\
-            " + this.name + "\
-        </a>\
-        <div id='" + catName + "' class='panel-collapse collapse\
-        " + (this.selected ? " in" : "") + "'><ul class='op-list'>";
+    let html = `<div class="panel category">
+        <a class="category-title" data-toggle="collapse" data-parent="#categories" href="#${catName}">
+            ${this.name}
+        </a>
+        <div id="${catName}" class="panel-collapse collapse ${(this.selected ? " show" : "")}">
+            <ul class="op-list">`;
 
     for (let i = 0; i < this.opList.length; i++) {
         html += this.opList[i].toStubHtml();

src/web/HTMLIngredient.js

@@ -62,7 +62,7 @@ HTMLIngredient.prototype.toHtml = function() {
             break;
         case "toggleString":
             html += "<div class='input-group'><div class='input-group-btn'>\
-                <button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown'\
+                <button type='button' class='btn btn-secondary dropdown-toggle' data-toggle='dropdown'\
                 aria-haspopup='true' aria-expanded='false'" +
                 (this.disabled ? " disabled='disabled'" : "") + ">" + this.toggleValues[0] +
                 " <span class='caret'></span></button><ul class='dropdown-menu'>";

src/web/OperationsWaiter.js

@@ -78,7 +78,7 @@ OperationsWaiter.prototype.searchOperations = function(e) {
             searchResultsEl.removeChild(searchResultsEl.firstChild);
         }
 
-        $("#categories .in").collapse("hide");
+        $("#categories .show").collapse("hide");
         if (str) {
             const matchedOps = this.filterOperations(str, true);
             const matchedOpsHtml = matchedOps

src/web/html/index.html

@@ -102,7 +102,7 @@
             <div id="preloader-msg" class="loading-msg"></div>
         </div>
         <!-- End preloader overlay -->
-        <span id="edit-favourites" class="btn btn-default btn-sm"><img aria-hidden="true" src="<%- require('../static/images/favourite-16x16.png') %>" alt="Star Icon"/> Edit</span>
+        <span id="edit-favourites" class="btn btn-secondary btn-sm"><img aria-hidden="true" src="<%- require('../static/images/favourite-16x16.png') %>" alt="Star Icon"/> Edit</span>
         <div id="alert" class="alert alert-danger">
             <button type="button" class="close" id="alert-close">&times;</button>
             <span id="alert-content"></span>
@@ -159,15 +159,15 @@
                             </div>
 
                             <div class="btn-group" style="padding-top: 10px;">
-                                <button type="button" class="btn btn-default" id="step"><img aria-hidden="true" src="<%- require('../static/images/step-16x16.png') %>" alt="Footstep Icon"/> Step through</button>
-                                <button type="button" class="btn btn-default" id="clr-breaks"><img aria-hidden="true" src="<%- require('../static/images/erase-16x16.png') %>" alt="Eraser Icon"/> Clear breakpoints</button>
+                                <button type="button" class="btn btn-secondary" id="step"><img aria-hidden="true" src="<%- require('../static/images/step-16x16.png') %>" alt="Footstep Icon"/> Step through</button>
+                                <button type="button" class="btn btn-secondary" id="clr-breaks"><img aria-hidden="true" src="<%- require('../static/images/erase-16x16.png') %>" alt="Eraser Icon"/> Clear breakpoints</button>
                             </div>
                         </div>
 
                         <div class="btn-group-vertical" id="extra-controls">
-                            <button type="button" class="btn btn-default" id="save"><img aria-hidden="true" src="<%- require('../static/images/save-16x16.png') %>" alt="Save Icon"/> Save recipe</button>
-                            <button type="button" class="btn btn-default" id="load"><img aria-hidden="true" src="<%- require('../static/images/open_yellow-16x16.png') %>" alt="Open Icon"/> Load recipe</button>
-                            <button type="button" class="btn btn-default" id="clr-recipe"><img aria-hidden="true" src="<%- require('../static/images/clean-16x16.png') %>" alt="Broom Icon"/> Clear recipe</button>
+                            <button type="button" class="btn btn-secondary" id="save"><img aria-hidden="true" src="<%- require('../static/images/save-16x16.png') %>" alt="Save Icon"/> Save recipe</button>
+                            <button type="button" class="btn btn-secondary" id="load"><img aria-hidden="true" src="<%- require('../static/images/open_yellow-16x16.png') %>" alt="Open Icon"/> Load recipe</button>
+                            <button type="button" class="btn btn-secondary" id="clr-recipe"><img aria-hidden="true" src="<%- require('../static/images/clean-16x16.png') %>" alt="Broom Icon"/> Clear recipe</button>
                         </div>
                     </div>
                 </div>
@@ -177,8 +177,8 @@
                         <div class="title no-select">
                             <label for="input-text">Input</label>
                             <div class="btn-group io-btn-group">
-                                <button type="button" class="btn btn-default btn-sm" id="clr-io"><img aria-hidden="true" src="<%- require('../static/images/recycle-16x16.png') %>" alt="Recycle Icon"/> Clear I/O</button>
-                                <button type="button" class="btn btn-default btn-sm" id="reset-layout"><img aria-hidden="true" src="<%- require('../static/images/layout-16x16.png') %>" alt="Grid Icon"/> Reset layout</button>
+                                <button type="button" class="btn btn-secondary btn-sm" id="clr-io"><img aria-hidden="true" src="<%- require('../static/images/recycle-16x16.png') %>" alt="Recycle Icon"/> Clear I/O</button>
+                                <button type="button" class="btn btn-secondary btn-sm" id="reset-layout"><img aria-hidden="true" src="<%- require('../static/images/layout-16x16.png') %>" alt="Grid Icon"/> Reset layout</button>
                             </div>
                             <div class="io-info" id="input-info"></div>
                             <div class="io-info" id="input-selection-info"></div>
@@ -208,11 +208,11 @@
                         <div class="title no-select">
                             <label for="output-text">Output</label>
                             <div class="btn-group io-btn-group">
-                                <button type="button" class="btn btn-default btn-sm" id="save-to-file" title="Save to file"><img aria-hidden="true" src="<%- require('../static/images/save_as-16x16.png') %>" alt="Save Icon"/> Save to file</button>
-                                <button type="button" class="btn btn-default btn-sm" id="copy-output" title="Copy output"><img aria-hidden="true" src="<%- require('../static/images/copy-16x16.png') %>" alt="Copy Icon"/> Copy raw output</button>
-                                <button type="button" class="btn btn-default btn-sm" id="switch" title="Move output to input"><img aria-hidden="true" src="<%- require('../static/images/switch-16x16.png') %>" alt="Switch Icon"/> Move output to input</button>
-                                <button type="button" class="btn btn-default btn-sm" id="undo-switch" title="Undo move" disabled="disabled"><img aria-hidden="true" src="<%- require('../static/images/undo-16x16.png') %>" alt="Undo Icon"/> Undo</button>
-                                <button type="button" class="btn btn-default btn-sm" id="maximise-output" title="Maximise"><img aria-hidden="true" src="<%- require('../static/images/maximise-16x16.png') %>" alt="Maximise Icon"/> Max</button>
+                                <button type="button" class="btn btn-secondary btn-sm" id="save-to-file" title="Save to file"><img aria-hidden="true" src="<%- require('../static/images/save_as-16x16.png') %>" alt="Save Icon"/> Save to file</button>
+                                <button type="button" class="btn btn-secondary btn-sm" id="copy-output" title="Copy output"><img aria-hidden="true" src="<%- require('../static/images/copy-16x16.png') %>" alt="Copy Icon"/> Copy raw output</button>
+                                <button type="button" class="btn btn-secondary btn-sm" id="switch" title="Move output to input"><img aria-hidden="true" src="<%- require('../static/images/switch-16x16.png') %>" alt="Switch Icon"/> Move output to input</button>
+                                <button type="button" class="btn btn-secondary btn-sm" id="undo-switch" title="Undo move" disabled="disabled"><img aria-hidden="true" src="<%- require('../static/images/undo-16x16.png') %>" alt="Undo Icon"/> Undo</button>
+                                <button type="button" class="btn btn-secondary btn-sm" id="maximise-output" title="Maximise"><img aria-hidden="true" src="<%- require('../static/images/maximise-16x16.png') %>" alt="Maximise Icon"/> Max</button>
                             </div>
                             <div class="io-info" id="output-info"></div>
                             <div class="io-info" id="output-selection-info"></div>
@@ -233,7 +233,7 @@
                                             <button id="output-file-download" type="button" class="btn btn-primary">Download</button>
                                             <div class="input-group">
                                                 <span class="input-group-btn">
-                                                    <button id="output-file-slice" type="button" class="btn btn-default" title="View slice">&#x1f50d;</button>
+                                                    <button id="output-file-slice" type="button" class="btn btn-secondary" title="View slice">&#x1f50d;</button>
                                                 </span>
                                                 <input type="number" class="form-control" id="output-file-slice-from" placeholder="From" value="0" step="1024" min="0">
                                                 <div class="input-group-addon">to</div>
@@ -287,7 +287,7 @@
                     </div>
                     <div class="modal-footer" id="save-footer">
                         <button type="button" class="btn btn-primary" id="save-button" data-dismiss="modal">Save</button>
-                        <button type="button" class="btn btn-default" data-dismiss="modal">Done</button>
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Done</button>
                     </div>
                     <div class="modal-body">
                         <div class="form-group" id="save-link-group">
@@ -324,7 +324,7 @@
                     <div class="modal-footer">
                         <button type="button" class="btn btn-primary" id="load-button" data-dismiss="modal">Load</button>
                         <button type="button" class="btn btn-danger" id="load-delete-button">Delete</button>
-                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                     </div>
                 </div>
             </div>
@@ -392,8 +392,8 @@
                         </div>
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-default" id="reset-options">Reset options to default</button>
-                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                        <button type="button" class="btn btn-secondary" id="reset-options">Reset options to default</button>
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                     </div>
                 </div>
             </div>
@@ -418,7 +418,7 @@
                         </div>
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-default" data-dismiss="modal" id="reset-favourites">Reset favourites to default</button>
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal" id="reset-favourites">Reset favourites to default</button>
                         <button type="button" class="btn btn-success" data-dismiss="modal" id="save-favourites">Save</button>
                         <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                     </div>
@@ -549,7 +549,7 @@
                         </div>
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                     </div>
                     <a href="https://github.com/gchq/CyberChef">
                         <img aria-hidden="true" style="position: absolute; top: 0; right: 0; border: 0;" src="<%- require('../static/images/fork_me.png') %>" alt="Fork me on GitHub">

src/web/stylesheets/layout/_controls.css

@@ -7,7 +7,7 @@
  */
 
 :root {
-    --controls-height: 120px;
+    --controls-height: 130px;
     --controls-division: 65%;
 }
 

src/web/stylesheets/themes/_classic.css

@@ -8,12 +8,14 @@
 
 :root,
 :root.classic {
-    --primary-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    --primary-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
+        Roboto, "Helvetica Neue", Arial, sans-serif;
     --primary-font-colour: #333;
     --primary-font-size: 14px;
     --primary-line-height: 20px;
 
-    --fixed-width-font-family: "Consolas", monospace;
+    --fixed-width-font-family: SFMono-Regular, Menlo, Monaco, Consolas,
+        "Liberation Mono", "Courier New", monospace;
     --fixed-width-font-colour: inherit;
     --fixed-width-font-size: inherit;
 

src/web/stylesheets/utils/_overrides.css

@@ -13,30 +13,30 @@ a:focus {
     outline: none;
 }
 
-.btn-default {
+.btn-secondary {
     color: var(--btn-default-font-colour);
     background-color: var(--btn-default-bg-colour);
     border-color: var(--btn-default-border-colour);
 }
 
-.btn-default:hover,
-.btn-default:active,
-.btn-default:hover:active,
-.open>.dropdown-toggle.btn-default {
+.btn-secondary:hover,
+.btn-secondary:active,
+.btn-secondary:hover:active,
+.open>.dropdown-toggle.btn-secondary {
     color: var(--btn-default-hover-font-colour);
     background-color: var(--btn-default-hover-bg-colour);
     border-color: var(--btn-default-hover-border-colour);
 }
 
-.btn-default:focus,
-.open>.dropdown-toggle.btn-default:hover,
-.open>.dropdown-toggle.btn-default:focus {
+.btn-secondary:focus,
+.open>.dropdown-toggle.btn-secondary:hover,
+.open>.dropdown-toggle.btn-secondary:focus {
     color: var(--btn-default-font-colour);
     background-color: var(--btn-default-bg-colour);
     border-color: var(--btn-default-hover-border-colour);
 }
 
-.btn-default[disabled]:hover {
+.btn-secondary[disabled]:hover {
     background-color: var(--primary-background-colour);
     border-color: var(--primary-border-colour);
 }