Select Board Dialog Style and Layout

Signed-off-by: jbicker <jan.bicker@typefox.io>

arduino-ide-extension/src/browser/style/arduino.useable.css

@@ -86,7 +86,7 @@ is not optimized for dense, information rich UIs.
     --theia-brand-color3: var(--md-blue-100);
     /* Secondary Brand colors */
     --theia-secondary-brand-color0: var(--md-grey-700);
-    --theia-secondary-brand-color1: var(--md-grey-500);
+    --theia-secondary-brand-color1: #b5c8c9;
     --theia-secondary-brand-color2: var(--md-grey-300);
     --theia-secondary-brand-color3: var(--md-grey-100);
     /* Accent colors (dark to bright): Use these to create contrast to layout colors. */
@@ -147,7 +147,7 @@ is not optimized for dense, information rich UIs.
     /* Menu */
     --theia-menu-color0: var(--theia-layout-color3);
     --theia-menu-color1: var(--theia-layout-color0);
-    --theia-menu-color2: var(--theia-layout-color3);
+    --theia-menu-color2: #dae3e3;
     /* Statusbar */
     --theia-statusbar-color: var(--theia-arduino-light);
     --theia-statusBar-font-color: var(--theia-inverse-ui-font-color0);
@@ -157,7 +157,7 @@ is not optimized for dense, information rich UIs.
     --theia-ui-button-color-hover: var(--theia-arduino-light1);
     --theia-ui-button-font-color: var(--theia-inverse-ui-font-color0);
     --theia-ui-button-color-secondary: var(--theia-secondary-brand-color1);
-    --theia-ui-button-color-secondary-hover: var(--theia-secondary-brand-color0);
+    --theia-ui-button-color-secondary-hover: var(--theia-menu-color2);
     --theia-ui-button-font-color-secondary: var(--theia-inverse-ui-font-color0);
     --theia-ui-button-color-disabled: var(--theia-accent-color3);
     --theia-ui-button-font-color-disabled: var(--theia-ui-font-color2);
@@ -170,7 +170,7 @@ is not optimized for dense, information rich UIs.
     --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: rgb(236, 241, 241);
-    --theia-ui-dialog-font-color: var(--theia-ui-font-color1);
+    --theia-ui-dialog-font-color: black;
     /* Variables */
     --theia-variable-name-color: #9B46B0;
     --theia-variable-value-color: rgba(108, 108, 108, 0.8);

arduino-ide-extension/src/browser/style/board-select-dialog.css

@@ -0,0 +1,152 @@
+div#select-board-dialog {
+    margin: 5px 20px 50px 20px;
+}
+
+div#select-board-dialog .selectBoardContainer .body {
+    display: flex;
+    overflow: hidden;
+}
+
+div#select-board-dialog .selectBoardContainer .head {
+    margin-bottom: 10px;
+}
+
+div#select-board-dialog .selectBoardContainer .head .title {
+    font-weight: 400;
+    letter-spacing: .02em;
+    font-size: 1.2em;
+    color: #00979d;
+    margin: 17px 0;
+}
+
+div#select-board-dialog .selectBoardContainer .head .text {
+    margin-bottom: 21px;
+}
+
+div#select-board-dialog .selectBoardContainer .body .list .item.selected {
+    background: var(--theia-ui-button-color-secondary-hover);
+}
+
+div#select-board-dialog .selectBoardContainer .body .list .item.selected i{
+    color: var(--theia-arduino-light);
+}
+
+#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%;
+    height: auto;
+    max-height: 37px;
+    padding: 10px 8px;
+    margin: 0;
+    vertical-align: top;
+    display: flex;
+    color: var(--theia-content-font-color0);
+}
+
+#select-board-dialog .selectBoardContainer .body .search input:focus {
+    box-shadow: none;
+}
+
+#select-board-dialog .selectBoardContainer .body .container {
+    flex: 1;
+}
+
+#select-board-dialog .selectBoardContainer .body .left.container .content {
+    margin: 0 5px 0 0;
+}
+
+#select-board-dialog .selectBoardContainer .body .right.container .content {
+    margin: 0 0 0 5px;
+}
+
+#select-board-dialog .selectBoardContainer .body .container .content .title{
+    color: #7f8c8d;
+    margin-bottom: 10px;
+}
+
+#select-board-dialog .selectBoardContainer .body .list .item {
+    padding: 10px 5px 10px 20px;
+    display: flex;
+    justify-content: space-between;
+}
+#select-board-dialog .selectBoardContainer .body .list .item:hover {
+    background: var(--theia-ui-button-color-secondary-hover);
+}
+
+#select-board-dialog .selectBoardContainer .body .list {
+    max-height: 265px;
+    overflow-y: auto;
+}
+
+#select-board-dialog .selectBoardContainer .body .search {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    padding-right: 5px;
+}
+
+.p-Widget.dialogOverlay .dialogBlock {
+    width: 740px;
+}
+
+button.theia-button {
+    height: 31px;
+}
+
+button.theia-button.secondary {
+    background-color: #b5c8c9;
+    color: #000;
+    box-shadow: 0 4px #95a5a6;
+}
+
+button.theia-button.main {
+    color: #fff;
+    background-color: #00979c;
+    box-shadow: 0 4px #005c5f;
+}
+
+.dialogControl {
+    margin: 0 20px 30px 0;
+}
+
+.arduino-boards-toolbar-item-container {
+    margin-left: 3px;
+}
+
+.arduino-boards-toolbar-item-container .arduino-boards-toolbar-item .inner-container {
+    display: flex;
+    align-items: baseline;
+    margin: 0 5px;
+}
+                    
+.arduino-boards-toolbar-item-container .arduino-boards-toolbar-item .inner-container .notAttached {
+    width: 10px;
+    height: 10px;
+    color: red;
+    margin-right: 5px;
+}
+
+.arduino-boards-toolbar-item-container {
+    display: flex;
+    align-items: center;
+}
+
+.arduino-boards-toolbar-item .label {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    margin-right: 5px;
+}
+
+.arduino-boards-toolbar-item {
+    background: white;
+    height: 18px;
+}
+                    

arduino-ide-extension/src/browser/style/index.css

@@ -1,3 +1,3 @@
 @import './list-widget.css';
-@import './select-board-dialog.css';
-@import './main.css';
+@import './board-select-dialog.css';
+@import './main.css';

arduino-ide-extension/src/browser/style/main.css

@@ -53,25 +53,10 @@
     opacity: 1;
 }
 
-.arduino-boards-toolbar-item-container {
-    display: flex;
-    align-items: center;
-}
-
-.arduino-boards-toolbar-item .label {
-    height: 100%;
-    display: flex;
-    align-items: center;
-}
-
 .arduino-open-boards-button {
     background: white;
 }
 
-.arduino-boards-toolbar-item {
-    background: white;
-    height: 18px;
-}
 
 .arduino-tool-item.item.connected-boards  select {
     line-height: var(--theia-content-line-height);
@@ -96,48 +81,4 @@
     display: flex;
     align-items: center;
     color: var(--theia-ui-font-color3);
-}
-
-div#select-board-dialog .selectBoardContainer .body {
-    display: flex;
-}
-
-div#select-board-dialog .selectBoardContainer .head {
-    margin-bottom: 10px;
-}
-
-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;
 }

arduino-ide-extension/src/browser/style/select-board-dialog.css

@@ -1,13 +0,0 @@
-
-.select-board-dialog {
-    width: 600px;
-}
-
-.select-board-dialog input {
-    width: calc(100% - 8px);
-    margin-bottom: 5px;
-}
-
-.select-board-dialog select {
-    width: 100%;
-}