1 files changed, 19 insertions, 17 deletions
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 2c88eacc6..247368685 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -22,7 +22,7 @@ import { pasteImageBitmap } from './nodes/WebBoxRenderer';
 import './PropertiesButtons.scss';
 import React = require('react');
 import { JsxElement } from 'typescript';
-import { FaThumbtack } from 'react-icons/fa';
+import { FaBraille, FaThumbtack } from 'react-icons/fa';
 import { AiOutlineApple } from 'react-icons/ai';
 const higflyout = require('@hig/flyout');
 export const { anchorPoints } = higflyout;
@@ -50,7 +50,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         const onPropToggle = (dv: Opt<DocumentView>, doc: Doc, prop: string) => ((dv?.layoutDoc || doc)[prop] = (dv?.layoutDoc || doc)[prop] ? false : true);
         return !targetDoc ? null : (
             <Tooltip title={<div className={`dash-tooltip`}>{tooltip(targetDoc?.[property])} </div>} placement="top">
-                <div>
+                <div className = 'propertiesButtons-iconAndText' >
                     <div
                         className={`propertiesButtons-linkButton-empty toggle-${StrCast(targetDoc[property]).includes(':hover') ? 'hover' : targetDoc[property] ? 'on' : 'off'}`}
                         onPointerDown={e => e.stopPropagation()}
@@ -59,11 +59,13 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                                 SelectionManager.Views().forEach(dv => (onClick ?? onPropToggle)(dv, dv.rootDoc, property));
                             } else if (targetDoc) (onClick ?? onPropToggle)(undefined, targetDoc, property);
                         }, property)}>
-                        {icon((BoolCast(targetDoc?.[property])) as any)}
-                    
+                            <div className = "propertiesButtons-icon">  {icon((BoolCast(targetDoc?.[property])) as any)} </div>
+                      
+                          <div className="propertiesButtons-label">  {label}</div>
                         {/* <FontAwesomeIcon className="documentdecorations-icon" size="lg" icon={icon(BoolCast(targetDoc?.[property])) as any} /> */}
                     </div>
-                    <div className="propertiesButtons-title">{label}</div>
+                  
+                   
                 </div>
             </Tooltip>
         );
@@ -94,14 +96,14 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     //         on => 'portrait'
     //     );
     // }
-    // @computed get clustersButton() {
-    //     return this.propertyToggleBtn(
-    //         'Clusters',
-    //         '_freeform_useClusters',
-    //         on => `${on ? 'Hide' : 'Show'} clusters`,
-    //         on => 'braille'
-    //     );
-    // }
+    @computed get clustersButton() {
+        return this.propertyToggleBtn(
+            'Clusters',
+            '_freeform_useClusters',
+            on => `${on ? 'Hide' : 'Show'} clusters`,
+            on => <FaBraille/>
+        );
+    }
     // @computed get panButton() {
     //     return this.propertyToggleBtn(
     //         'Lock\xA0View',
@@ -416,8 +418,8 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             <div className="propertiesButtons">
                 {/* {toggle(this.titleButton)}
                 {toggle(this.captionButton)} */}
-                {toggle(this.lockButton)}
-                {/* {toggle(this.onClickButton)}
+                 {toggle(this.lockButton)}
+                {/*{toggle(this.onClickButton)}
                 {toggle(this.layout_fitWidthButton)}
                 {toggle(this.freezeThumb)}
                 {toggle(this.forceActiveButton)}
@@ -429,9 +431,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                 {toggle(this.chromeButton, { display: !isCollection || isNovice ? 'none' : '' })}
                 {toggle(this.gridButton, { display: !isCollection ? 'none' : '' })}
                 {toggle(this.groupButton, { display: isTabView || !isCollection ? 'none' : '' })}
-                {toggle(this.snapButton, { display: !isCollection ? 'none' : '' })}
+                {toggle(this.snapButton, { display: !isCollection ? 'none' : '' })} */}
                 {toggle(this.clustersButton, { display: !isFreeForm ? 'none' : '' })}
-                {toggle(this.panButton, { display: !isFreeForm ? 'none' : '' })}
+                {/* {toggle(this.panButton, { display: !isFreeForm ? 'none' : '' })}
                 {toggle(this.perspectiveButton, { display: !isCollection || isNovice ? 'none' : '' })} */}
             </div>
         );