Apply styling and icons to resize anchors.

Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>
Signed-off-by: Alex Culliere <alozhkin@mirantis.com>

src/renderer/components/item-object-list/item-list-layout.scss

@@ -29,6 +29,21 @@
     min-height: 200px;
   }
 
+  .TableHead {
+    .TableCell {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    &:hover {
+      .TableCell {
+        .resize-anchor {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
   .TableCell {
     position: relative;
 
@@ -36,14 +51,17 @@
       @include table-cell-action;
     }
     .resize-anchor {
-      position: absolute;
+      transition: opacity 0.3s;
-      top: 0;
+      opacity: 0;
       right: 0;
-      min-width: 5px;
       user-select: none;
       cursor: col-resize;
-      background-color: gray;
+      transform: rotate(90deg);
-      height: -webkit-fill-available;
+      color: var(--textColorPrimary);
+
+      &:hover {
+        color: white;
+      }
     }
   }
 }

src/renderer/components/table/table-cell.tsx

@@ -202,9 +202,16 @@ export class TableCell extends React.Component<TableCellProps> {
     return (
       <div ref={this.cellContainer} style={cellStyle} {...cellProps} className={classNames} onClick={this.onClick}>
         {this.renderCheckbox()}
-        {_nowrap ? <div className="content">{content}</div> : content}
+        <div className="flex align-center">
-        {this.renderSortIcon()}
+          {_nowrap ? <div className="content">{content}</div> : content}
-        {resizable && <span {...resizeHandlers} className="resize-anchor"></span>}
+          {this.renderSortIcon()}
+        </div>
+
+        {resizable && (
+          <span {...resizeHandlers} className="resize-anchor">
+            <Icon material="unfold_more" />
+          </span>
+        )}
       </div>
     );
   }