[Ready for review] bug bash (#5098)

ts/webui/src/components/experiment/overview/table/SuccessTable.tsx

@@ -122,7 +122,7 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
                             transform: `rotate(${this.props.expandRowIDs.has(item.id) ? 90 : 0}deg)`
                         }
                     }}
-                    className='cursor'
+                    className='cursor bold positionTop'
                     onClick={this.expandTrialId.bind(this, Event, item.id)}
                 />
             ),

ts/webui/src/components/experiment/trialdetail/table/TableList.tsx

@@ -306,7 +306,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         <Icon
                             aria-hidden={true}
                             iconName='ChevronRight'
-                            className='cursor'
+                            className='cursor bold positionTop'
                             styles={{
                                 root: {
                                     transition: 'all 0.2s',

ts/webui/src/components/experiment/trialdetail/table/tableFunction/CompareIndex.tsx

@@ -264,7 +264,7 @@ function CompareIndex(props: CompareProps): any {
                     />
                 </div>
                 {intermediateAllKeysList.length > 1 ||
-                (intermediateAllKeysList.length === 1 && intermediateAllKeysList !== ['default']) ? (
+                (intermediateAllKeysList.length === 1 && intermediateAllKeysList[0] !== 'default') ? (
                     <Stack horizontalAlign='end' className='selectKeys'>
                         <Dropdown
                             className='select'

ts/webui/src/static/model/searchspace.ts

@@ -47,6 +47,7 @@ class SimpleOrdinalAxis implements SingleAxis {
     type: string;
     baseName: string;
     fullName: string;
+    // eslint-disable-next-line @typescript-eslint/prefer-as-const
     scale: 'ordinal' = 'ordinal';
     domain: any[];
     nested = false;
@@ -62,6 +63,7 @@ class NestedOrdinalAxis implements SingleAxis {
     type: string;
     baseName: string;
     fullName: string;
+    // eslint-disable-next-line @typescript-eslint/prefer-as-const
     scale: 'ordinal' = 'ordinal';
     domain = new Map<string, MultipleAxes>();
     nested = true;

ts/webui/src/static/style/common/common.scss

@@ -74,6 +74,11 @@ $themeBlue: #0071bc;
     font-weight: bold;
 }
 
+.positionTop {
+    position: relative;
+    top: 2px;
+}
+
 .input-padding {
     padding-left: 10px;
 }
@@ -87,3 +92,7 @@ $themeBlue: #0071bc;
         color: #333;
     }
 }
+
+.ms-DetailsRow-cell {
+    padding-top: 8px;
+}

ts/webui/src/static/style/experiment/overview/count.scss

@@ -32,6 +32,7 @@ $margin: 24px;
 
 .maxTrialNum {
     margin-bottom: 10px;
+
     .editparam {
         position: relative;
         top: -7px;
@@ -48,7 +49,7 @@ $margin: 24px;
     top: -4px;
 }
 
-.editExpDuration{
+.editExpDuration {
     box-sizing: border-box;
     width: 31%;
     position: relative;

ts/webui/src/static/style/nav/nav.scss

@@ -85,7 +85,6 @@ $barHeight: 56px;
     border-bottom: 1px solid #fff;
 }
 
-
 .left-right-margin {
     margin-left: 20px;
     margin-right: 20px;

ts/webui/src/static/style/nav/slideNavBtns.scss

 $buttonBorderRadius: 23px;
-$errorseriscolor: #FC615C;
+$errorseriscolor: #fc615c;
+
 .config {
     position: fixed;
     right: 0;
@@ -87,17 +88,18 @@ $errorseriscolor: #FC615C;
     right: 20px;
     max-width: 455px;
     min-width: 300px;
-    padding: 28px 32px;
+    padding: 24px;
     border-radius: 8px;
-    box-shadow: 0px 4px 16px rgba(78, 97, 123, 0.2);
+    border: 1px solid #f8f8f8;
+    box-shadow: 0 4px 16px rgba(78, 97, 123, 0.2);
     background-color: #fff;
 
     .head {
         height: 27px;
         line-height: 27px;
-        font-size: 20px;
+        font-size: 18px;
         font-weight: 700;
-        margin-bottom: 15px;
+        margin-bottom: 12px;
 
         .title {
             color: $errorseriscolor;
@@ -108,17 +110,22 @@ $errorseriscolor: #FC615C;
             right: 30px;
         }
 
-        .icon{
-            width: 25px;
-            height: 25px;
+        .icon {
+            width: 24px;
+            height: 24px;
             background-color: $errorseriscolor;
             border-radius: 50%;
-            margin-right: 15px;
+            margin-right: 10px;
+            margin-top: 1px;
 
-            i{
-                font-size: 21px;
+            i {
+                display: block;
+                text-align: center;
+                font-size: 14px;
+                font-weight: 600;
                 color: #fff;
-                margin-left: 2px;
+                position: relative;
+                top: -1px;
             }
         }
     }
@@ -128,15 +135,20 @@ $errorseriscolor: #FC615C;
     }
 
     &-buttons {
-        margin-top: 10px;
+        margin-top: 16px;
     }
 
     .detailsBtn {
-        width: 113px;
-        height: 32px;
+        height: 30px;
+        font-size: 12px;
         color: #fff;
         background: $errorseriscolor;
         border: none;
         border-radius: 6px;
+        padding: 0 12px;
+
+        .ms-Button-label {
+            font-size: 12px;
+        }
     }
 }

ts/webui/src/static/style/table.scss

@@ -55,12 +55,13 @@
     overflow-y: auto;
 }
 
-$checkboxwidth: 17px;
+$checkboxwidth: 18px;
 
 .detail-check {
     .ms-Checkbox-checkbox {
         width: $checkboxwidth;
         height: $checkboxwidth;
+        margin-top: 3px;
         border-radius: 50%;
         border: none;
 
@@ -69,7 +70,8 @@ $checkboxwidth: 17px;
         }
 
         i {
-            width: 12px;
+            font-size: 8px;
+            font-weight: 600;
         }
     }
 }
@@ -88,4 +90,3 @@ $checkboxwidth: 17px;
         color: #cb4b16;
     }
 }
-