From ec04ec76d78bcd06ac85c5e76ad7dfcf7219331d Mon Sep 17 00:00:00 2001
From: Chandrasekhar Ramakrishnan <cramakri@ethz.ch>
Date: Wed, 15 Apr 2020 18:03:43 +0200
Subject: [PATCH] feat: provide UI for hiding/showing code cells (#870)

Use outline buttons and semi-bold for the label.

Fix #838
---
 src/file/File.present.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/file/File.present.js b/src/file/File.present.js
index 879e21ed4b..109a2faab5 100644
--- a/src/file/File.present.js
+++ b/src/file/File.present.js
@@ -259,12 +259,13 @@ function StyledNotebook(props) {
     <ListGroup key="controls" flush>
       <ListGroupItem>
         <div>
-          <span>
-            <b>Code Visibility &nbsp;</b>
+          <span style={{ fontWeight: "500" }}>
+            Code Visibility &nbsp;&nbsp;
           </span>
           <ButtonGroup key="controls" size="sm">
             <Button
               color="primary"
+              outline={displayMode !== NotebookSourceDisplayMode.DEFAULT}
               onClick={() => setDisplayMode(NotebookSourceDisplayMode.DEFAULT)}
               active={displayMode === NotebookSourceDisplayMode.DEFAULT}
             >
@@ -272,6 +273,7 @@ function StyledNotebook(props) {
             </Button>
             <Button
               color="primary"
+              outline={displayMode !== NotebookSourceDisplayMode.SHOWN}
               onClick={() => setDisplayMode(NotebookSourceDisplayMode.SHOWN)}
               active={displayMode === NotebookSourceDisplayMode.SHOWN}
             >
@@ -279,6 +281,7 @@ function StyledNotebook(props) {
             </Button>
             <Button
               color="primary"
+              outline={displayMode !== NotebookSourceDisplayMode.HIDDEN}
               onClick={() => setDisplayMode(NotebookSourceDisplayMode.HIDDEN)}
               active={displayMode === NotebookSourceDisplayMode.HIDDEN}
             >