1 files changed, 20 insertions, 21 deletions

diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 7527a0793..2a31f0f2c 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -24,8 +24,8 @@ import React = require('react');
 import { JsxElement } from 'typescript';
 import { FaBraille, FaHighlighter, FaLock, FaLockOpen, FaThumbtack } from 'react-icons/fa';
 import { AiOutlineApple, AiOutlineColumnWidth, AiOutlinePicture } from 'react-icons/ai';
-import { MdClosedCaption, MdClosedCaptionDisabled, MdGridOff, MdGridOn, MdSubtitles, MdSubtitlesOff } from 'react-icons/md';
-import { TbHandOff, TbHandStop, TbHighlight, TbHighlightOff } from 'react-icons/tb';
+import { MdClosedCaption, MdClosedCaptionDisabled, MdGridOff, MdGridOn, MdSubtitles, MdSubtitlesOff, MdTouchApp } from 'react-icons/md';
+import { TbEditCircle, TbEditCircleOff, TbHandOff, TbHandStop, TbHighlight, TbHighlightOff } from 'react-icons/tb';
 import { BiHide, BiShow } from 'react-icons/bi';
 import { BsGrid3X3GapFill } from 'react-icons/bs';
 import { TfiBarChart } from 'react-icons/tfi';
@@ -143,10 +143,10 @@ export class PropertiesButtons extends React.Component<{}, {}> {
 
     @computed get forceActiveButton() { //select text
         return this.propertyToggleBtn(
-            on => 'Active',
+            on => on ? 'INACTIVE INTERACTION' : 'ACTIVE INTERACTION',
             '_forceActive',
             on => `${on ? 'Select to activate' : 'Contents always active'} `,
-            on => 'eye'
+            on => <MdTouchApp/> // 'eye'
         );
     }
 
@@ -196,7 +196,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     }
 
     @computed get captionButton() {
-        return this.propertyToggleBtn(
+        return this.propertyToggleBtn( //DEVELOPER
             on => (on ? 'HIDE CAPTION' : 'SHOW CAPTION'), //'Caption',
             '_layout_showCaption',
             on => `${on ? 'Hide' : 'Show'} caption footer`,
@@ -207,15 +207,15 @@ export class PropertiesButtons extends React.Component<{}, {}> {
 
     @computed get chromeButton() { // developer -- removing UI decoration
         return this.propertyToggleBtn(
-            on => 'Controls',
+            on => on ? 'ENABLE UI CONTROLS' : 'DISABLE UI CONTROLS',
             '_chromeHidden',
             on => `${on ? 'Show' : 'Hide'} editing UI`,
-            on => 'edit',
+            on => on? <TbEditCircle/> :  <TbEditCircleOff/> , // 'edit',
             (dv, doc) => ((dv?.rootDoc || doc)._chromeHidden = !(dv?.rootDoc || doc)._chromeHidden)
         );
     }
 
-    @computed get layout_autoHeightButton() { // shouldn't be here unless you can set it back to its original size
+    @computed get layout_autoHeightButton() { // store previous dimensions to store old values 
         return this.propertyToggleBtn(
             on => 'Auto\xA0Size',
             '_layout_autoHeight',
@@ -233,7 +233,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         );
     }
 
-    // @computed get groupButton() { WHERE ARE YOU
+    // @computed get groupButton() { //developer
     //     return this.propertyToggleBtn(
     //         on => 'Group',
     //         'isGroup',
@@ -266,16 +266,15 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     //         }
     //     );
     // }
-    // @computed get snapButton() { // THESE ARE NOT COMING
-    //     return this.propertyToggleBtn(
-    //         on => (on ? 'HIDE SNAP LINES' : 'SHOW SNAP LINES'),
-    //         'freeform_snapLines',
-    //         on => `Display snapping lines when objects are dragged`,
-    //         on => <TfiBarChart />, //'th',
-    //         undefined,
-    //         true
-    //     );
-    // }
+    @computed get snapButton() { // THESE ARE NOT COMING
+        return this.propertyToggleBtn(
+            on => (on ? 'HIDE SNAP LINES' : 'SHOW SNAP LINES'),
+            'freeform_snapLines',
+            on => `Display snapping lines when objects are dragged`,
+            on => <TfiBarChart />, //'th',
+            undefined,
+        );
+    }
 
     // @computed
     // get onClickButton() {
@@ -295,7 +294,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     //     );
     // }
     // @computed
-    // get perspectiveButton() { //WHERE ARE YOU
+    // get perspectiveButton() { // gone
     //     return !this.selectedDoc ? null : (
     //         <Tooltip title={<div className="dash-tooltip">Choose view perspective</div>} placement="top">
     //             <div>
@@ -456,7 +455,7 @@ 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.perspectiveButton, { display: !isCollection || isNovice ? 'none' : '' })} */}