Update Welcome panel assets and styling (#208)

Author: huntie

front_end/Images/react_native/learn-debugging-basics.jpg

@@ -173,12 +173,14 @@ export class RNWelcomeImpl extends UI.Widget.VBox implements
             </x-link>
           </div>
           ${launchId ? html`
-            <div class="rn-session-id-message">
-              ${i18nString(UIStrings.sessionIdMessage)}
-              <div class="rn-session-id">
+            <aside>
+              <div class="rn-session-id-message">
+                ${i18nString(UIStrings.sessionIdMessage)}
+              </div>
+              <div class="code-block rn-session-id">
                 ${launchId}
               </div>
-            </div>
+            </aside>
           ` : ''}
           ${this.#reactNativeVersion !== null && this.#reactNativeVersion !== undefined ? html`
               <p class="rn-welcome-version">React Native: <code>${this.#reactNativeVersion}</code></p>

front_end/Images/react_native/learn-native-debugging.jpg

@@ -52,7 +52,7 @@
 .rn-welcome-icon {
   width: 30px;
   height: 30px;
-  border-radius: 4px;
+  border-radius: 7px;
   margin-right: 12px;
 }
 
@@ -65,7 +65,7 @@
 .rn-welcome-title-accessory {
   margin-left: 12px;
   padding: 4px 8px;
-  border-radius: 4px;
+  border-radius: 6px;
   background-color: var(--sys-color-green-bright);
   font-size: 12px;
   color: var(--sys-color-primary);
@@ -101,23 +101,14 @@
   border-right: 1px solid var(--sys-color-on-base-divider);
 }
 
-.rn-session-id-message {
-  display: block;
-  margin-top: 24px;
-}
-
-.rn-session-id-message > .rn-session-id {
-  user-select: all;
-}
-
 .rn-welcome-version {
   position: fixed;
   top: 8px;
   right: 8px;
   margin-top: 24px;
   padding: 4px 12px;
-  border-radius: 6px;
-  background-color: var(--sys-color-surface-variant);
+  border-radius: 8px;
+  background: var(--sys-color-surface2);
   color: var(--color-text-secondary);
   font-size: 11px;
 }
@@ -158,9 +149,9 @@
   margin-bottom: 8px;
   padding: 8px;
   padding-right: 16px;
-  border: 1px solid var(--input-outline);
-  border-radius: 4px;
-  background-color: var(--color-background);
+  border: 1px solid var(--sys-color-divider);
+  border-radius: 10px;
+  background-color: var(--sys-color-base);
   text-align: left;
   font-size: 14px;
   cursor: pointer;
@@ -187,10 +178,29 @@
 .rn-welcome-image {
   flex-shrink: 0;
   aspect-ratio: calc(16 / 9);
-  height: 64px;
+  height: 70px;
   margin-right: 16px;
-  border-radius: 2px;
+  border-radius: 6px;
   background-color: var(--sys-color-on-surface-subtle);
   background-position: center;
   background-size: cover;
 }
+
+.rn-session-id-message {
+  display: block;
+  margin-top: 64px;
+  margin-bottom: 8px;
+}
+
+.rn-session-id {
+  user-select: all;
+  cursor: text;
+}
+
+.code-block {
+  background: var(--sys-color-surface2);
+  padding: 8px;
+  border-radius: 8px;
+  color: var(--sys-color-on-surface);
+  font-family: var(--monospace-font-family);
+}