progress on formatting buttons

app/views/analyse/jsI18n.scala.html

@@ -19,6 +19,7 @@ trans.variantEnding,
 trans.analysis,
 trans.boardEditor,
 trans.continueFromHere,
+trans.createAGame,
 trans.playWithTheMachine,
 trans.playWithAFriend,
 trans.openingExplorer,

public/stylesheets/analyse.css

@@ -632,19 +632,25 @@ body.piece_letter .tablebase td:first-child {
 .lichess_ground .action_menu .button {
   display: block;
   margin: 15px 0;
-  padding: 10px;
   width: 100%;
   box-sizing: border-box;
-  text-align: left;
-}
-.lichess_ground .action_menu .button::before {
-  font-size: 2em;
   text-align: center;
-  position: relative;
+  font: 11px 'Noto Sans', 'Lucida Grande', 'Lucida Grande Unicode', Geneva, Verdana, Sans-Serif;
+  text-transform: uppercase;
 }
-.lichess_ground .action_menu .autoplay {
+.lichess_ground .action_menu .icon {
+  display: block;
+}
+.lichess_ground .action_menu .icon::before {
+  font-size: 2em;
+}
+.lichess_ground .action_menu .autoplay,
+.lichess_ground .action_menu .tools {
   display: flex;
 }
+.lichess_ground .action_menu .tools .col {
+  width: 50%;
+}
 .lichess_ground .action_menu .autoplay .button {
   flex: 1 1 auto;
   text-align: center;
@@ -667,6 +673,7 @@ body.piece_letter .tablebase td:first-child {
 }
 .lichess_ground .action_menu .setting label {
   cursor: pointer;
+  text-transform: uppercase;
 }
 .lichess_ground .action_menu .switch {
   float: right;

ui/analyse/src/actionMenu.js

@@ -89,9 +89,10 @@ function studyButton(ctrl) {
       value: ctrl.tree.root.fen
     }),
     m('button.button.text', {
-      'data-icon': '',
       type: 'submit'
-    }, realGame ? 'Create Study' : 'Save to Study')
+    },
+    m('i.icon', {'data-icon': ''}),
+    realGame ? 'Create Study' : 'Save to Study')
   ]);
 }
 
@@ -157,17 +158,27 @@ module.exports = {
         })('analyse-toggle-gauge')
       ],
       m('div.title', 'TOOLS'),
-      m('a.button.text[data-icon=B]', flipAttrs, ctrl.trans('flipBoard')),
-      ctrl.ongoing ? null : m('a.button.text[data-icon=m]', {
-        href: d.userAnalysis ? '/editor?fen=' + ctrl.vm.node.fen : '/' + d.game.id + '/edit?fen=' + ctrl.vm.node.fen,
-        rel: 'nofollow'
-      }, ctrl.trans('boardEditor')),
-      canContinue ? m('a.button.text[data-icon=U]', {
-        config: util.bindOnce('click', function() {
-          $.modal($('.continue_with.' + d.game.id));
-        })
-      }, ctrl.trans('continueFromHere')) : null,
-      studyButton(ctrl),
+      m('div.tools',
+        m('div.col',
+          m('a.button.text', flipAttrs, m('i.icon[data-icon=B]'), ctrl.trans('flipBoard')),
+          ctrl.ongoing ? null : m('a.button.text', {
+            href: d.userAnalysis ? '/editor?fen=' + ctrl.vm.node.fen : '/' + d.game.id + '/edit?fen=' + ctrl.vm.node.fen,
+            rel: 'nofollow'
+          },
+          m('i.icon[data-icon=m]'),
+          ctrl.trans('boardEditor'))
+        ),
+        m('div.col',
+          canContinue ? m('a.button.text', {
+            config: util.bindOnce('click', function() {
+              $.modal($('.continue_with.' + d.game.id));
+            })
+          },
+          m('i.icon[data-icon=U]'),
+          ctrl.trans('createAGame')) : null,
+          studyButton(ctrl)
+        )
+      ),
       m('div.title', 'REPLAY MODE'),
       ctrl.vm.mainline.length > 4 ? autoplayButtons(ctrl) : null,
       deleteButton(d, ctrl.userId),