Improve options menu styling

Change CSS style of options-menu so that we can re-use theia styles for it

fixes #751

Author: hriday-panchasara

packages/react-components/src/components/abstract-output-component.tsx

@@ -161,8 +161,12 @@ export abstract class AbstractOutputComponent<P extends AbstractOutputProps, S e
     protected showOptions(): React.ReactNode {
         return <React.Fragment>
             <ul>
-                {this.props.pinned === undefined && <li className='drop-down-list-item' onClick={() => this.pinView()}>Pin View</li>}
-                {this.props.pinned === true && <li className='drop-down-list-item' onClick={() => this.unPinView()}>Unpin View</li>}
+                {this.props.pinned === undefined && <li className='drop-down-list-item' onClick={() => this.pinView()}>
+                    <div className='drop-down-list-item-text'>Pin View</div>
+                </li>}
+                {this.props.pinned === true && <li className='drop-down-list-item' onClick={() => this.unPinView()}>
+                    <div className='drop-down-list-item-text'>Unpin View</div>
+                </li>}
             </ul>
             {this.state.additionalOptions && this.showAdditionalOptions()}
         </React.Fragment>;

packages/react-components/src/components/datatree-output-component.tsx

@@ -233,7 +233,9 @@ export class DataTreeOutputComponent extends AbstractOutputComponent<AbstractOut
     protected showAdditionalOptions(): React.ReactNode {
         return <React.Fragment>
             <ul>
-                <li className='drop-down-list-item' key={0} onClick={() => this.exportOutput()}>Export to csv</li>
+                <li className='drop-down-list-item' key={0} onClick={() => this.exportOutput()}>
+                    <div className='drop-down-list-item-text'>Export to csv</div>
+                </li>
             </ul>
         </React.Fragment>;
     }

packages/react-components/src/components/table-output-component.tsx

@@ -783,7 +783,9 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
             <ul>
                 <li className='drop-down-list-item' onClick={() => {
                     this.setState({showToggleColumns: !this.state.showToggleColumns});
-                }}>Toggle Columns</li>
+                }}>
+                    <div className='drop-down-list-item-text'>Toggle Columns</div>
+                </li>
             </ul>
             {this.state.showToggleColumns && <div className='toggle-columns-table'>{this.renderToggleColumnsTable()}</div>}
         </React.Fragment>;

packages/react-components/style/output-components-style.css

@@ -41,55 +41,6 @@
 .title-bar-label:hover {
     background-color: var(--theia-list-hoverBackground); 
 }
-.remove-component-button:hover {
-    cursor: pointer;
-    background-color: var(--theia-list-hoverBackground); 
-}
-.share-component-container {
-    align-self: start;
-    justify-self: center;
-    position: relative;
-    display: inline-block;
-}
-.share-component-button {
-    background: none;
-    border: none;
-    color: var(--theia-ui-font-color0)
-}
-.share-component-button:hover {
-    cursor: pointer;
-    background-color: var(--theia-list-hoverBackground); 
-}
-.share-component-drop-down {
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    padding: 0;
-    z-index: 2;
-    min-width: 180px;
-    background: var(--theia-menu-background);
-    color: var(--theia-menu-foreground);
-    font-size: var(--theia-ui-font-size1);
-    box-shadow: 0px 1px 6px var(--theia-widget-shadow);
-    border: 1px solid var(--theia-menu-border);
-}
-.share-component-drop-down > ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    display: table;
-    width: 100%;
-}
-.drop-down-list-item {
-    padding: 8px 12px;
-    background-color: var(--theia-menu-background);
-    color: var(--theia-menu-foreground);
-}
-.drop-down-list-item:hover {
-    background: var(--theia-menu-selectionBackground);
-    color: var(--theia-menu-selectionForeground);
-    opacity: 1;
-}
 .remove-component-button {
     background: none;
     border: none;
@@ -353,14 +304,16 @@ canvas {
     position: absolute;
     top: 0%;
     left: 100%;
-    padding: 0;
+    padding: 4px 0px;
     z-index: 2;
-    min-width: 180px;
+    min-width: 170px;
     background: var(--theia-menu-background);
     color: var(--theia-menu-foreground);
     font-size: var(--theia-ui-font-size1);
-    box-shadow: 0px 1px 6px var(--theia-widget-shadow);
+    box-shadow: 0px 0px 12px var(--theia-widget-shadow);
     border: 1px solid var(--theia-menu-border);
+    outline: none;
+    user-select: none;
 }
 .options-menu-drop-down > ul {
     list-style-type: none;
@@ -370,24 +323,30 @@ canvas {
     width: 100%;
 }
 .drop-down-list-item {
-    padding: 8px 12px;
-    background-color: var(--theia-menu-background);
-    color: var(--theia-menu-foreground);
+    min-height: var(--theia-private-menu-item-height);
+    max-height: var(--theia-private-menu-item-height);
+    padding: 0px;
+    line-height: var(--theia-private-menu-item-height);
+    display: table-row;
 }
 .drop-down-list-item:hover {
     background: var(--theia-menu-selectionBackground);
     color: var(--theia-menu-selectionForeground);
+    border: thin solid var(--theia-menu-selectionBorder);
     opacity: 1;
 }
+.drop-down-list-item-text {
+    padding-left: 18%;
+}
 .toggle-columns-table {
     height: 150px;
     overflow: scroll;
     z-index: 999 !important;
     background: var(--theia-menu-background);
     color: var(--theia-menu-foreground);
     font-size: var(--theia-ui-font-size1);
-    box-shadow: 0px 1px 6px var(--theia-widget-shadow);
-    border: 1px solid var(--theia-tree-inactiveIndentGuidesStroke);
+    box-shadow: 0px 0px 15px var(--theia-widget-shadow);
+    border: 1px solid var(--theia-menu-border);
 }
 
 .react-grid-item:hover {