small ui fixes

Nexus-Mods · Jun 1, 2017 · 4b38b3f · 4b38b3f
1 parent 9e2d015
commit 4b38b3f
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 21 deletions.
diff --git a/src/extensions/gamemode_management/views/Settings.tsx b/src/extensions/gamemode_management/views/Settings.tsx
@@ -4,7 +4,7 @@ import { IComponentContext } from '../../../types/IComponentContext';
 import { IState } from '../../../types/IState';
 import { isNullOrWhitespace } from '../../../util/util';
 import Icon from '../../../views/Icon';
-import { Button } from '../../../views/TooltipControls';
+import { IconButton } from '../../../views/TooltipControls';
 
 import { addSearchPath, removeSearchPath } from '../actions/settings';
 
@@ -21,30 +21,29 @@ interface IPathProps {
 
 /**
  * entry of the game search path list
- * 
+ *
  * @class SearchPathEntry
  * @extends {ComponentEx<IPathProps, {}>}
  */
 class SearchPathEntry extends ComponentEx<IPathProps, {}> {
   public render() {
-    let { searchPath, t } = this.props;
+    const { searchPath, t } = this.props;
     return (
       <ListGroupItem>
         {searchPath}
-        <Button
-          className='btn-embed pull-right'
+        <IconButton
+          className='btn-embed btn-line-right'
           id='remove'
           tooltip={ t('Remove') }
           onClick={ this.removePath }
-        >
-          <Icon name='remove' />
-        </Button>
+          icon='remove'
+        />
       </ListGroupItem>
     );
   }
 
   private removePath = () => {
-    let { searchPath, onRemovePath } = this.props;
+    const { searchPath, onRemovePath } = this.props;
     onRemovePath(searchPath);
   }
 }
@@ -61,7 +60,7 @@ interface IActionProps {
 /**
  * settings dialog for game modes
  * Contains the list of paths to search when looking for installed games
- * 
+ *
  * @class Settings
  * @extends {(ComponentEx<IActionProps & IConnectedProps, {}>)}
  */
@@ -78,14 +77,13 @@ class Settings extends ComponentEx<IActionProps & IConnectedProps, {}> {
           <ListGroup>
           { searchPaths.map(this.renderPath) }
           <ListGroupItem>
-            <Button
+            <IconButton
               className='btn-embed'
               id='add'
               tooltip={ t('Add') }
               onClick={ this.addSearchPath }
-            >
-              <Icon name='plus' />
-            </Button>
+              icon='plus'
+            />
           </ListGroupItem>
           </ListGroup>
           <HelpBlock>{ t('Directories to search when looking for games.') }</HelpBlock>
@@ -107,7 +105,7 @@ class Settings extends ComponentEx<IActionProps & IConnectedProps, {}> {
   }
 
   private renderPath = (searchPath: string) => {
-    let { t, onRemovePath } = this.props;
+    const { t, onRemovePath } = this.props;
     return (
       <SearchPathEntry
         key={searchPath}
@@ -126,7 +124,7 @@ function mapStateToProps(state: IState): IConnectedProps {
   };
 }
 
-function mapDispatchToProps(dispatch: Function): IActionProps {
+function mapDispatchToProps(dispatch: Redux.Dispatch<any>): IActionProps {
   return {
     onAddPath: (path: string): void => {
       dispatch(addSearchPath(path));
@@ -139,5 +137,5 @@ function mapDispatchToProps(dispatch: Function): IActionProps {
 
 export default
   translate(['common'], { wait: false })(
-    connect(mapStateToProps, mapDispatchToProps)(Settings)
-  ) as React.ComponentClass<{}>;
+    connect(mapStateToProps, mapDispatchToProps)(
+      Settings)) as React.ComponentClass<{}>;
diff --git a/src/extensions/mod_management/views/ModList.tsx b/src/extensions/mod_management/views/ModList.tsx
@@ -242,13 +242,13 @@ class ModList extends ComponentEx<IProps, {}> {
     this.modActions = [
       {
         icon: 'check-square-o',
-        title: 'Enable selected',
+        title: 'Enable',
         action: this.enableSelected,
         singleRowAction: false,
       },
       {
         icon: 'square-o',
-        title: 'Disable selected',
+        title: 'Disable',
         action: this.disableSelected,
         singleRowAction: false,
       },

diff --git a/src/stylesheets/style.scss b/src/stylesheets/style.scss
@@ -1301,6 +1301,22 @@ a[role=menuitem] svg {
   stroke: $brand-success;
 }
 
+.menu-separator-line > a {
+  border-top: 1px solid $gray;
+  padding-left: 10px !important;
+}
+
+.input-group-btn > .btn {
+  border: 0px;
+  padding-bottom: 4px;
+}
+
+.btn-line-right {
+  position: absolute;
+  right: 10px;
+  top: 5px;
+}
+
 ::-webkit-scrollbar {
   width: $scrollbar-width;
   height: $scrollbar-width;

diff --git a/src/views/IconBar.tsx b/src/views/IconBar.tsx
@@ -183,7 +183,7 @@ class IconBar extends React.Component<IProps, { open: boolean }> {
 
     if ((icon.icon === null) && (icon.component === undefined)) {
       return (
-        <MenuItem key={id} disabled={true}>
+        <MenuItem className='menu-separator-line' key={id} disabled={true}>
           {icon.title}
         </MenuItem>
       );