2 files changed, 22 insertions, 18 deletions
diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss
index 348b9e6ea..0da78df9f 100644
--- a/src/client/views/collections/CollectionMenu.scss
+++ b/src/client/views/collections/CollectionMenu.scss
@@ -16,7 +16,7 @@
 
     .antimodeMenu-button {
         padding:0;
-        width:40px;
+        width:30px;
         display: flex;
         svg {
             margin:auto;
@@ -37,13 +37,11 @@
 
             .collectionViewBaseChrome-viewPicker {
                 font-size: 75%;
-                //text-transform: uppercase;
-                //letter-spacing: 2px;
                 background: #121721;
-                color: white;
                 outline-color: black;
+                color: white;
                 border: none;
-                //padding: 12px 10px 11px 10px;
+                border-right: solid gray 1px;
             }
 
             .collectionViewBaseChrome-viewPicker:active {
@@ -67,8 +65,9 @@
                 margin-right: 0px;
                 font-size: 75%;
                 background: #121721;
-                border: none;
                 color: white;
+                border: none;
+                border-right: solid gray 1px;
             }
 
             .commandEntry-outerDiv {
@@ -89,7 +88,7 @@
             .collectionViewBaseChrome-collapse {
                 transition: all .5s, opacity 0.3s;
                 position: absolute;
-                width: 40px;
+                width: 30px;
                 transform-origin: top left;
                 pointer-events: all;
                 // margin-top: 10px;
@@ -112,6 +111,8 @@
             .collectionViewBaseChrome-viewSpecs {
                 margin-left: 5px;
                 display: grid;
+                border: none;
+                border-right: solid gray 1px;
 
                 .collectionViewBaseChrome-filterIcon {
                     position: relative;
@@ -123,6 +124,8 @@
                     height: 30px;
                     align-items: center;
                     justify-content: center;
+                    border: none;
+                    border-right: solid gray 1px;
                 }
 
                 .collectionViewBaseChrome-viewSpecsInput {
@@ -201,8 +204,9 @@
                 background: #121721;
                 color: white;
                 outline-color: black;
+                color: white;
                 border: none;
-                //padding: 12px 10px 11px 10px;
+                border-right: solid gray 1px;
             }
 
             .collectionGridViewChrome-viewPicker:active {
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 84e5d56cb..f3ad21949 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -211,9 +211,9 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
     @computed get templateChrome() {
         return <div className="collectionViewBaseChrome-template" ref={this.createDropTarget} >
             <div className="commandEntry-outerDiv" title="drop document to apply or drag to create button" ref={this._commandRef} onPointerDown={this.dragCommandDown}>
-                <div className="commandEntry-drop">
-                    <FontAwesomeIcon icon="bullseye" size="2x" />
-                </div>
+                <button className={"antimodeMenu-button"} >
+                    <FontAwesomeIcon icon="bullseye" size="lg" />
+                </button>
                 <select
                     className="collectionViewBaseChrome-cmdPicker" onPointerDown={stopPropagation} onChange={this.commandChanged} value={this._currentKey}>
                     <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} key={"empty"} value={""} />
@@ -228,9 +228,9 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
     @computed get viewModes() {
         return <div className="collectionViewBaseChrome-viewModes" >
             <div className="commandEntry-outerDiv" title="drop document to apply or drag to create button" ref={this._viewRef} onPointerDown={this.dragViewDown}>
-                <div className="commandEntry-drop">
-                    <FontAwesomeIcon icon="bullseye" size="2x" />
-                </div>
+                <button className={"antimodeMenu-button"}>
+                    <FontAwesomeIcon icon="bullseye" size="lg" />
+                </button>
                 <select
                     className="collectionViewBaseChrome-viewPicker"
                     onPointerDown={stopPropagation}
@@ -256,12 +256,12 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
                 <div className="collectionMenu">
                     <div className="collectionViewBaseChrome">
                         {this.viewModes}
+                        {this.templateChrome}
                         <div className="collectionViewBaseChrome-viewSpecs" title="filter documents to show" style={{ display: "grid" }}>
-                            <div className="collectionViewBaseChrome-filterIcon" onPointerDown={this.toggleViewSpecs} >
-                                <FontAwesomeIcon icon="filter" size="2x" />
-                            </div>
+                            <button className={"antimodeMenu-button"} onClick={this.toggleViewSpecs} >
+                                <FontAwesomeIcon icon="filter" size="lg" />
+                            </button>
                         </div>
-                        {this.templateChrome}
                     </div>
                     {this.subChrome}
                 </div>