fixed fuzzy search button

3 files changed, 28 insertions, 98 deletions

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 867a5a304..a3b2741d1 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -280,6 +280,7 @@ export class MainView extends ObservableReactComponent<object> {
         library.add(
             ...[
                 fa.faMinimize,
+                fa.faMagic,
                 fa.faArrowsRotate,
                 fa.faFloppyDisk,
                 fa.faRepeat,
diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss
index c9edb2180..5c2da2b09 100644
--- a/src/client/views/nodes/PDFBox.scss
+++ b/src/client/views/nodes/PDFBox.scss
@@ -101,6 +101,7 @@
             }
         }
 
+        .pdfBox-fuzzy,
         .pdfBox-nextIcon,
         .pdfBox-prevIcon {
             background: #121721;
@@ -116,6 +117,19 @@
             padding: 0px;
         }
 
+        .pdfBox-fuzzy {
+            background-color: #4a4a4a;
+
+            &.active {
+                background-color: #3498db;
+                color: white;
+            }
+
+            &:hover {
+                background-color: #2980b9;
+            }
+        }
+
         .pdfBox-overlayButton:hover {
             background: none;
         }
@@ -198,7 +212,7 @@
             pointer-events: all;
 
             .pdfBox-searchBar {
-                width: calc(100% - 120px); // less size of search buttons
+                width: calc(100% - 140px); // less size of search buttons
                 font-size: 14px;
             }
         }
@@ -276,94 +290,3 @@
         }
     }
 }
-
-// CSS adjusted for mobile devices
-@media only screen and (max-device-width: 480px) {
-    .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton,
-    .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton {
-        height: 60px;
-
-        .pdfBox-settingsButton-iconCont {
-            height: 60px;
-            width: 75px;
-            font-size: 30px;
-        }
-
-        .pdfBox-settingsButton-arrow {
-            height: 60px;
-            border-top: 30px solid transparent;
-            border-bottom: 30px solid transparent;
-            border-right: 30px solid #121721;
-        }
-    }
-
-    .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsFlyout,
-    .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsFlyout {
-        font-size: 30px;
-    }
-
-    .pdfBox .pdfBox-ui .pdfBox-overlayCont,
-    .pdfBox-interactive .pdfBox-ui .pdfBox-overlayCont {
-        height: 60px;
-
-        .pdfBox-searchBar {
-            font-size: 40px;
-        }
-    }
-
-    .pdfBox .pdfBox-ui .pdfBox-overlayButton,
-    .pdfBox-interactive .pdfBox-ui .pdfBox-overlayButton {
-        height: 60px;
-
-        .pdfBox-overlayButton-iconCont {
-            height: 60px;
-            width: 75px;
-            font-size: 30;
-        }
-
-        .pdfBox-overlayButton-arrow {
-            border-top: 30px solid transparent;
-            border-bottom: 30px solid transparent;
-            border-right: 30px solid #121721;
-        }
-    }
-
-    button.pdfBox-search {
-        font-size: 30px;
-        width: 50px;
-        height: 50px;
-        color: white;
-    }
-
-    .pdfBox .pdfBox-ui .pdfBox-nextIcon,
-    .pdfBox .pdfBox-ui .pdfBox-prevIcon,
-    .pdfBox-interactive .pdfBox-ui .pdfBox-nextIcon,
-    .pdfBox-interactive .pdfBox-ui .pdfBox-prevIcon {
-        height: 50px;
-        width: 50px;
-        font-size: 30px;
-    }
-}
-
-.pdfBox-fuzzy {
-    border: none;
-    background-color: #4a4a4a;
-    color: white;
-    padding: 0 8px;
-    height: 24px;
-    cursor: pointer;
-    margin-right: 4px;
-    border-radius: 3px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &.active {
-        background-color: #3498db;
-        color: white;
-    }
-
-    &:hover {
-        background-color: #2980b9;
-    }
-}
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 9fb1b07c4..55440b028 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -1,3 +1,4 @@
+import { Toggle, ToggleType, Type } from '@dash/components';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -9,15 +10,18 @@ import { Doc, DocListCast, Opt } from '../../../fields/Doc';
 import { DocData } from '../../../fields/DocSymbols';
 import { Id } from '../../../fields/FieldSymbols';
 import { InkTool } from '../../../fields/InkField';
+import { List } from '../../../fields/List';
 import { ComputedField } from '../../../fields/ScriptField';
 import { Cast, DocCast, FieldValue, NumCast, StrCast, toList } from '../../../fields/Types';
 import { ImageField, PdfField } from '../../../fields/URLField';
 import { TraceMobx } from '../../../fields/util';
 import { emptyFunction } from '../../../Utils';
+import { gptAPICall, GPTCallType } from '../../apis/gpt/GPT';
 import { Docs } from '../../documents/Documents';
 import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes';
 import { DocUtils } from '../../documents/DocUtils';
 import { KeyCodes } from '../../util/KeyCodes';
+import { SnappingManager } from '../../util/SnappingManager';
 import { undoBatch, UndoManager } from '../../util/UndoManager';
 import { CollectionFreeFormView } from '../collections/collectionFreeForm';
 import { CollectionStackingView } from '../collections/CollectionStackingView';
@@ -33,9 +37,6 @@ import { ImageBox } from './ImageBox';
 import { OpenWhere } from './OpenWhere';
 import './PDFBox.scss';
 import { CreateImage } from './WebBoxRenderer';
-import { gptAPICall } from '../../apis/gpt/GPT';
-import { List } from '../../../fields/List';
-import { GPTCallType } from '../../apis/gpt/GPT';
 
 @observer
 export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
@@ -456,9 +457,14 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     <button type="button" className="pdfBox-search" title="Search" onClick={e => this.search(this._searchString, e.shiftKey)}>
                         <FontAwesomeIcon icon="search" size="sm" />
                     </button>
-                    <button type="button" className={`pdfBox-fuzzy ${this._fuzzySearchEnabled ? 'active' : ''}`} title={`${this._fuzzySearchEnabled ? 'Disable' : 'Enable'} Fuzzy Search`} onClick={this.toggleFuzzySearch}>
-                        <FontAwesomeIcon icon="magic" size="sm" />
-                    </button>
+                    <Toggle
+                        type={Type.TERT}
+                        toggleType={ToggleType.BUTTON}
+                        icon={<FontAwesomeIcon icon={'magic'} onClick={this.toggleFuzzySearch} color={SnappingManager.userColor} />}
+                        color={SnappingManager.userColor}
+                        background={SnappingManager.userColor}
+                        toggleStatus={this._fuzzySearchEnabled}
+                    />
                     <button type="button" className="pdfBox-prevIcon" title="Previous Annotation" onClick={this.prevAnnotation}>
                         <FontAwesomeIcon icon="arrow-up" size="lg" />
                     </button>