🖍 [Attachment Forms] Update the style of the attachment header text (a…

…mpproject#35862)

* Make the publisher domain text lighter than the attachment's title text

* Uncomment out changes

* Increase the size of the attachment's title font

* Make the attachment title and domain URL bolder, and decrease the distance between them

* Place the domain label above the title so that the title doesn't conceal part of the domain

* Increase bottom padding of header to ensure domain label doesn't overlap attachment content

extensions/amp-story/1.0/amp-story-draggable-drawer-header.css

@@ -17,14 +17,14 @@
   --i-amphtml-draggable-drawer-text-color: #202125 !important;
   --i-amphtml-draggable-drawer-handle-color: rgba(0, 0, 0, .2) !important;
   --i-amphtml-draggable-drawer-header-font-family: 'Roboto', sans-serif !important;
-  --i-amphtml-draggable-drawer-header-font-size: 14px !important;
+  --i-amphtml-draggable-drawer-header-font-size: 18px !important;
   --i-amphtml-draggable-drawer-header-title-height: 44px !important;
   background: var(--i-amphtml-draggable-drawer-background-color) !important;
 }
 
 .i-amphtml-story-draggable-drawer-header.i-amphtml-story-page-attachment-with-form {
   /* Additional space upon which the domain label can appear in an absolute position. */
-  padding-bottom: 50px !important;
+  padding-bottom: 40px !important;
 }
 
 /* Draggable handle UI */
@@ -73,12 +73,13 @@
   color: var(--i-amphtml-draggable-drawer-text-color) !important;
   display: block !important;
   font-family: var(--i-amphtml-draggable-drawer-header-font-family) !important;
-  font-size: var(--i-amphtml-draggable-drawer-header-font-size) !important;
+  font-size: calc(var(--i-amphtml-draggable-drawer-header-font-size) - 3px) !important;
+  font-weight: 300 !important;
   overflow: hidden !important;
   position: absolute !important;
   text-align: center !important;
   text-overflow: ellipsis !important;
-  top: var(--i-amphtml-draggable-drawer-header-title-height) !important;
+  top: 35px !important;
   white-space: nowrap !important;
 }
 
@@ -112,6 +113,7 @@
   width: calc(100% - 80px) !important;
   color: var(--i-amphtml-draggable-drawer-text-color) !important;
   font-size: var(--i-amphtml-draggable-drawer-header-font-size) !important;
+  font-weight: 500 !important;
   line-height: 40px !important;
   overflow: hidden !important;
   text-align: center !important;

extensions/amp-story/1.0/amp-story-page-attachment.js

@@ -119,14 +119,6 @@ export class AmpStoryPageAttachment extends DraggableDrawer {
    * @private
    */
   buildInline_() {
-    if (this.doesContainFormElement_()) {
-      // Page attachments that contain forms must display the page's publisher
-      // domain above the attachment's contents. This enables users to gauge
-      // the trustworthiness of publishers before sending data to them.
-      this.headerEl.append(this.createDomainLabelElement_());
-      this.headerEl.classList.add('i-amphtml-story-page-attachment-with-form');
-    }
-
     const closeButtonEl = htmlFor(this.element)`
           <button class="i-amphtml-story-page-attachment-close-button" aria-label="close"
               role="button">
@@ -156,6 +148,14 @@ export class AmpStoryPageAttachment extends DraggableDrawer {
       titleAndCloseWrapperEl.appendChild(titleEl);
     }
 
+    if (this.doesContainFormElement_()) {
+      // Page attachments that contain forms must display the page's publisher
+      // domain above the attachment's contents. This enables users to gauge
+      // the trustworthiness of publishers before sending data to them.
+      this.headerEl.append(this.createDomainLabelElement_());
+      this.headerEl.classList.add('i-amphtml-story-page-attachment-with-form');
+    }
+
     const templateEl = this.element.querySelector(
       '.i-amphtml-story-draggable-drawer'
     );