Local NTP: brush up doodle sharing dialog

* Remove basically duplicate (X) icon
* Make this dialog look/work(?) better in RTL
* Make the (X) look better in dark mode
* Make tab order more intuitive

Screenshots:
* screen/xyCOXTEUxeX
* screen/7ij36gXapJG
* screen/o1qc5HRYT53
* screen/gAThdeM3i07

R=kmilka@chromium.org
BUG=none

Change-Id: Ia1c3783c9215015c2e63ca3f0e20fb8da26d4105
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1818608
Auto-Submit: Dan Beam <dbeam@chromium.org>
Commit-Queue: Kyle Milka <kmilka@chromium.org>
Reviewed-by: Kyle Milka <kmilka@chromium.org>
Cr-Commit-Position: refs/heads/master@{#699357}

chrome/browser/resources/local_ntp/doodles.css

@@ -263,7 +263,8 @@ body.alternate-logo #logo-non-white {
 #ddlsd-title {
   color: #212121;
   font-size: 22px;
-  padding: 0 40px 16px 0;
+  padding-bottom: 16px;
+  padding-inline-end: 40px;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -273,7 +274,6 @@ body.alternate-logo #logo-non-white {
 }
 
 #ddlsd-close {
-  background: url(icons/close.svg) no-repeat;
   height: 24px;
   position: absolute;
   right: 22px;
@@ -281,6 +281,29 @@ body.alternate-logo #logo-non-white {
   width: 24px;
 }
 
+[dir=rtl] #ddlsd-close {
+  left: 22px;
+  right: auto;
+}
+
+#ddlsd-close::before {
+  -webkit-mask-image: url(../../../../ui/webui/resources/images/icon_clear.svg);
+  -webkit-mask-position: center center;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 32px;
+  background-color: #4d4d4d;
+  content: '';
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+@media (prefers-color-scheme: dark) {
+  #ddlsd-close::before {
+    background-color: rgb(var(--GG500-rgb));
+  }
+}
+
 #ddlsd-fbb {
   background: url(icons/facebook.svg) no-repeat center;
 }
@@ -315,7 +338,6 @@ body.alternate-logo #logo-non-white {
   background: url(icons/copy.svg) no-repeat center;
   background-size: contain;
   display: inline-block;
-  float: right;
   height: 36px;
   margin: 5px;
   width: 36px;
@@ -338,8 +360,8 @@ body.alternate-logo #logo-non-white {
 }
 
 #ddlsd-link {
+  display: flex;
   margin: 6px;
-  overflow: hidden;
 }
 
 #ddlsd-text-ctr {

chrome/browser/resources/local_ntp/icons/close.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><style>.a{fill:none;stroke:#4d4d4d;stroke-miterlimit:10;stroke-width:3px}</style></defs><path class="a" d="M3.5 3.5L21 21M3.5 21L21 3.5"/></svg>
\ No newline at end of file

chrome/browser/resources/local_ntp/local_ntp.html

@@ -157,10 +157,10 @@
       <button id="ddlsd-emb" class="ddlsd-sbtn"></button>
       <hr id="ddlsd-hr">
       <div id="ddlsd-link">
-        <button id="ddlsd-copy"></button>
         <span id="ddlsd-text-ctr">
           <input type="text" id="ddlsd-text" dir="ltr">
         </span>
+        <button id="ddlsd-copy"></button>
       </div>
     </div>
   </dialog>