More hunt optimizer UI improvements.

src/index.less

@@ -1,4 +1,5 @@
 @import '~antd/dist/antd.less';
+@import 'ui/theme.less';
 
 #phantasmal-world-root {
     position: absolute;
@@ -8,9 +9,6 @@
     right: 0;
 }
 
-@scrollbar-color: darken(@component-background, 3%);
-@scrollbar-thumb-color: lighten(@component-background, 3%);
-
 * {
     scrollbar-color: @scrollbar-thumb-color @scrollbar-color;
 }
@@ -30,3 +28,13 @@
 ::-webkit-scrollbar-corner {
     background-color: @scrollbar-color;
 }
+
+#phantasmal-world-root {
+    & .ReactVirtualized__Grid {
+        outline: none;
+    }
+
+    & .ReactVirtualized__Table__headerRow {
+        text-transform: none;
+    }
+}

src/ui/hunt-optimizer/OptimizationResultComponent.less

@@ -1,3 +1,5 @@
+@import "../theme.less";
+
 .ho-OptimizationResultComponent {
     display: flex;
     flex-direction: column;
@@ -6,10 +8,33 @@
 .ho-OptimizationResultComponent-table {
     flex: 1;
     overflow: hidden;
+    border: solid 1px @border-color-base;
+    background-color: lighten(@component-background, 3%);
+    
+    & * {
+        scrollbar-color: @table-scrollbar-thumb-color @table-scrollbar-color;
+    }
+
+    & ::-webkit-scrollbar {
+        background-color: @table-scrollbar-color;
+    }
+
+    & ::-webkit-scrollbar-track {
+        background-color: @table-scrollbar-color;
+    }
+
+    & ::-webkit-scrollbar-thumb {
+        background-color: @table-scrollbar-thumb-color;
+    }
+
+    & ::-webkit-scrollbar-corner {
+        background-color: @table-scrollbar-color;
+    }
 }
 
-.ho-OptimizationResultComponent-table div {
+.ho-OptimizationResultComponent-table-top-right {
-    outline: none;
+    background-color: lighten(@component-background, 12%);
+    font-weight: bold;
 }
 
 .ho-OptimizationResultComponent-cell {
@@ -18,7 +43,6 @@
     box-sizing: border-box;
     padding: 0 5px;
     border-bottom: solid 1px @border-color-base;
-    // border-right: solid 1px @border-color-base;
 }
 
 .ho-OptimizationResultComponent-cell > span {
@@ -27,20 +51,10 @@
     text-overflow: ellipsis;
 }
 
-.ho-OptimizationResultComponent-cell.first-in-row {
-    border-left: solid 1px @border-color-base;
-}
-
 .ho-OptimizationResultComponent-cell.last-in-row {
     border-right: solid 1px @border-color-base;
 }
 
-.ho-OptimizationResultComponent-cell.header {
-    background-color: darken(@border-color-base, 10%);
-    font-weight: bold;
-    border-top: solid 1px @border-color-base;
-}
-
 .ho-OptimizationResultComponent-cell.number {
     justify-content: flex-end;
 }

src/ui/hunt-optimizer/OptimizationResultComponent.tsx

@@ -75,11 +75,12 @@ export class OptimizationResultComponent extends React.Component {
                                 fixedRowCount={1}
                                 width={width}
                                 height={height}
-                                rowHeight={28}
+                                rowHeight={26}
                                 rowCount={1 + huntOptimizerStore.result.length}
                                 columnWidth={this.columnWidth}
                                 columnCount={this.standardColumns.length + this.items.length}
                                 cellRenderer={this.cellRenderer}
+                                classNameTopRightGrid="ho-OptimizationResultComponent-table-top-right"
                                 noContentRenderer={() =>
                                     <div className="ho-OptimizationResultComponent-no-result">
                                         Add some items and click "Optimize" to see the result here.
@@ -104,9 +105,7 @@ export class OptimizationResultComponent extends React.Component {
         let title: string | undefined;
         const classes = ['ho-OptimizationResultComponent-cell'];
 
-        if (columnIndex === 0) {
+        if (columnIndex === this.standardColumns.length + this.items.length - 1) {
-            classes.push('first-in-row');
-        } else if (columnIndex === this.standardColumns.length + this.items.length - 1) {
             classes.push('last-in-row');
         }
 
@@ -115,8 +114,6 @@ export class OptimizationResultComponent extends React.Component {
             text = title = column
                 ? column.title
                 : this.items[columnIndex - this.standardColumns.length].name;
-
-            classes.push('header');
         } else {
             // Method row
             const result = huntOptimizerStore.result[rowIndex - 1];

src/ui/hunt-optimizer/WantedItemsComponent.css

@@ -7,5 +7,5 @@
 .ho-WantedItemsComponent-table {
     position: relative;
     flex: 1;
-    margin-top: 10px;
+    margin: 10px 0 0 -10px;
 }

src/ui/hunt-optimizer/WantedItemsComponent.tsx

@@ -31,7 +31,12 @@ export class WantedItemsComponent extends React.Component {
                             </Select.Option>
                         ))}
                     </Select>
-                    <Button onClick={huntOptimizerStore.optimize}>Optimize</Button>
+                    <Button
+                        onClick={huntOptimizerStore.optimize}
+                        style={{ marginLeft: 10 }}
+                    >
+                        Optimize
+                     </Button>
                 </div>
                 <div className="ho-WantedItemsComponent-table">
                     <AutoSizer>
@@ -56,6 +61,7 @@ export class WantedItemsComponent extends React.Component {
                                     label="Item"
                                     dataKey="item"
                                     width={150}
+                                    flexGrow={1}
                                     cellDataGetter={({ rowData }) => rowData.item.name}
                                 />
                                 <Column

src/ui/theme.less

@@ -0,0 +1,5 @@
+@scrollbar-color: darken(@component-background, 3%);
+@scrollbar-thumb-color: lighten(@component-background, 3%);
+
+@table-scrollbar-color: lighten(@scrollbar-color, 1%);
+@table-scrollbar-thumb-color: lighten(@scrollbar-thumb-color, 5%);