From 4429094139fb38aeb4bb06aefbb0a2710051c922 Mon Sep 17 00:00:00 2001
From: jbicker <jan.bicker@typefox.io>
Date: Mon, 8 Jul 2019 13:55:31 +0200
Subject: [PATCH] Styling of select board and port dialog

Signed-off-by: jbicker <jan.bicker@typefox.io>
---
 .../boards/select-board-dialog-widget.tsx     | 38 ++++++++++---------
 .../src/browser/style/arduino.useable.css     |  2 +-
 .../src/browser/style/main.css                | 32 ++++++++++++++++
 3 files changed, 54 insertions(+), 18 deletions(-)

diff --git a/arduino-ide-extension/src/browser/boards/select-board-dialog-widget.tsx b/arduino-ide-extension/src/browser/boards/select-board-dialog-widget.tsx
index 9dee9256..11751a70 100644
--- a/arduino-ide-extension/src/browser/boards/select-board-dialog-widget.tsx
+++ b/arduino-ide-extension/src/browser/boards/select-board-dialog-widget.tsx
@@ -21,7 +21,7 @@ export namespace SelectableBoardsItem {
 export class SelectableBoardsItem extends React.Component<SelectableBoardsItem.Props> {
 
     render(): React.ReactNode {
-        return <div onClick={this.select} className={`item ${this.props.selected ? 'selected': ''}`}>{this.props.board.name}</div>
+        return <div onClick={this.select} className={`item ${this.props.selected ? 'selected' : ''}`}>{this.props.board.name}</div>
     }
 
     protected readonly select = (() => {
@@ -40,7 +40,7 @@ export namespace SelectablePortsItem {
 export class SelectablePortsItem extends React.Component<SelectablePortsItem.Props> {
 
     render(): React.ReactNode {
-        return <div onClick={() => this.props.onClick({ port: this.props.port })} className={`item ${this.props.selected ? 'selected': ''}`}>{this.props.port}</div>
+        return <div onClick={() => this.props.onClick({ port: this.props.port })} className={`item ${this.props.selected ? 'selected' : ''}`}>{this.props.port}</div>
     }
 
     protected readonly select = (() => {
@@ -83,23 +83,27 @@ export class BoardAndPortSelectionComponent extends React.Component<BoardAndPort
     render(): React.ReactNode {
         return <React.Fragment>
             <div className='body'>
-                <div className='left'>
-                    <div className='title'>
-                        BOARDS
+                <div className='left container'>
+                    <div className='content'>
+                        <div className='title'>
+                            BOARDS
                     </div>
-                    <div className='search'>
-                        <input type='search' placeholder='SEARCH BOARD' onChange={this.doFilter} />
-                    </div>
-                    <div className='boards list'>
-                        {this.state.boards.map(board => <SelectableBoardsItem key={board.name} onClick={this.doSelect} board={board} selected={this.isSelectedBoard(board)}/>)}
+                        <div className='search'>
+                            <input type='search' placeholder='SEARCH BOARD' onChange={this.doFilter} />
+                        </div>
+                        <div className='boards list'>
+                            {this.state.boards.map(board => <SelectableBoardsItem key={board.name} onClick={this.doSelect} board={board} selected={this.isSelectedBoard(board)} />)}
+                        </div>
                     </div>
                 </div>
-                <div className='right'>
-                    <div className='title'>
-                        PORTS
+                <div className='right container'>
+                    <div className='content'>
+                        <div className='title'>
+                            PORTS
                     </div>
-                    <div className='ports list'>
-                        {this.state.ports.map(port => <SelectablePortsItem key={port} onClick={this.doSelect} port={port} selected={this.isSelectedPort(port)}/>)}
+                        <div className='ports list'>
+                            {this.state.ports.map(port => <SelectablePortsItem key={port} onClick={this.doSelect} port={port} selected={this.isSelectedPort(port)} />)}
+                        </div>
                     </div>
                 </div>
             </div>
@@ -107,11 +111,11 @@ export class BoardAndPortSelectionComponent extends React.Component<BoardAndPort
     }
 
     protected readonly isSelectedBoard = ((board: Board) => {
-        return (this.state.selection.board && this.state.selection.board === board) || false;       
+        return (this.state.selection.board && this.state.selection.board === board) || false;
     });
 
     protected readonly isSelectedPort = ((port: string) => {
-        return (this.state.selection.port && this.state.selection.port === port) || false;       
+        return (this.state.selection.port && this.state.selection.port === port) || false;
     });
 
     protected readonly doSelect = (boardAndPortSelection: BoardAndPortSelection) => {
diff --git a/arduino-ide-extension/src/browser/style/arduino.useable.css b/arduino-ide-extension/src/browser/style/arduino.useable.css
index 3ad86611..74f9056e 100644
--- a/arduino-ide-extension/src/browser/style/arduino.useable.css
+++ b/arduino-ide-extension/src/browser/style/arduino.useable.css
@@ -169,7 +169,7 @@ is not optimized for dense, information rich UIs.
     /* Dialogs */
     --theia-ui-dialog-header-color: var(--theia-arduino-light);
     --theia-ui-dialog-header-font-color: var(--theia-inverse-ui-font-color0);
-    --theia-ui-dialog-color: var(--theia-layout-color0);
+    --theia-ui-dialog-color: rgb(236, 241, 241);
     --theia-ui-dialog-font-color: var(--theia-ui-font-color1);
     /* Variables */
     --theia-variable-name-color: #9B46B0;
diff --git a/arduino-ide-extension/src/browser/style/main.css b/arduino-ide-extension/src/browser/style/main.css
index 681eb841..cb38cd29 100644
--- a/arduino-ide-extension/src/browser/style/main.css
+++ b/arduino-ide-extension/src/browser/style/main.css
@@ -108,4 +108,36 @@ div#select-board-dialog .selectBoardContainer .head {
 
 div#select-board-dialog .selectBoardContainer .body .list .item.selected {
     background: #aaaaaa;
+}
+
+#select-board-dialog .selectBoardContainer .body .search input, 
+#select-board-dialog .selectBoardContainer .body .boards.list,
+#select-board-dialog .selectBoardContainer .body .search, 
+#select-board-dialog .selectBoardContainer .body .ports.list {
+    background: white;
+}
+
+#select-board-dialog .selectBoardContainer .body .search input {
+    border: none;
+    width: 100%;
+}
+
+#select-board-dialog .selectBoardContainer .body .container {
+    flex: 1;
+}
+
+#select-board-dialog .selectBoardContainer .body .container .content {
+    margin: 0 5px;
+}
+
+#select-board-dialog .selectBoardContainer .body .list .item {
+    padding: 10px 5px 10px 20px;
+}
+
+#select-board-dialog .selectBoardContainer .body .list {
+    max-height: 265px;
+}
+
+#select-board-dialog .selectBoardContainer .body .search {
+    margin-bottom: 10px;
 }
\ No newline at end of file