[GM3Restyling] Update Network custom headers dialog

Screenshot: https://imgur.com/a/wadkEnS

Bug: 325442935
Change-Id: Ifaa55a4e2c136d52958f8b51c7a4ee042db539b1
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6249517
Reviewed-by: Kim-Anh Tran <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>
Commit-Queue: Kateryna Prokopenko <[email protected]>
Auto-Submit: Kateryna Prokopenko <[email protected]>

Author: Kateryna Prokopenko

front_end/panels/network/NetworkManageCustomHeadersView.ts

@@ -54,7 +54,6 @@ export class NetworkManageCustomHeadersView extends UI.Widget.VBox implements UI
     super(true);
     this.registerRequiredCSS(networkManageCustomHeadersViewStyles);
 
-    this.contentElement.classList.add('custom-headers-wrapper');
     this.contentElement.createChild('div', 'header').textContent = i18nString(UIStrings.manageHeaderColumns);
 
     this.list = new UI.ListWidget.ListWidget(this);

front_end/panels/network/networkManageCustomHeadersView.css

@@ -6,17 +6,14 @@
 
 .custom-headers-list {
   height: 272px;
-  width: 250px;
-}
-
-.custom-headers-wrapper {
-  margin: 10px;
+  width: var(--sys-size-29);
+  margin: 0 var(--sys-size-8);
 }
 
 .header {
-  padding: 0 0 6px;
-  font-size: 18px;
-  font-weight: normal;
+  margin: var(--sys-size-5) var(--sys-size-5) var(--sys-size-5) var(--sys-size-8);
+  padding-top: var(--sys-size-3);
+  font: var(--sys-typescale-body2-medium);
   flex: none;
 }
 
@@ -33,7 +30,6 @@
 }
 
 .add-button {
-  width: 150px;
-  margin: auto;
-  margin-top: 5px;
+  margin: var(--sys-size-6) auto var(--sys-size-8) var(--sys-size-8);
+  align-items: flex-start;
 }

front_end/ui/legacy/dialog.css

@@ -5,7 +5,8 @@
  */
 
 .widget {
-  box-shadow: var(--drop-shadow);
+  border-radius: var(--sys-shape-corner-small);
+  box-shadow: var(--sys-elevation-level3);
   background: var(--sys-color-cdt-base-container);
   justify-content: flex-start;
   align-items: stretch;