diff --git a/front_end/Images/react_native/learn-debugging-basics.jpg b/front_end/Images/react_native/learn-debugging-basics.jpg
index c0bc0a25784..02fe75b825a 100644
Binary files a/front_end/Images/react_native/learn-debugging-basics.jpg and b/front_end/Images/react_native/learn-debugging-basics.jpg differ
diff --git a/front_end/Images/react_native/learn-native-debugging.jpg b/front_end/Images/react_native/learn-native-debugging.jpg
index ea73f9d8a9c..85666894a73 100644
Binary files a/front_end/Images/react_native/learn-native-debugging.jpg and b/front_end/Images/react_native/learn-native-debugging.jpg differ
diff --git a/front_end/Images/react_native/welcomeIcon.png b/front_end/Images/react_native/welcomeIcon.png
index 6a010604d83..1e36e07feac 100644
Binary files a/front_end/Images/react_native/welcomeIcon.png and b/front_end/Images/react_native/welcomeIcon.png differ
diff --git a/front_end/panels/rn_welcome/RNWelcome.ts b/front_end/panels/rn_welcome/RNWelcome.ts
index 968173ba414..093de35df4d 100644
--- a/front_end/panels/rn_welcome/RNWelcome.ts
+++ b/front_end/panels/rn_welcome/RNWelcome.ts
@@ -173,12 +173,14 @@ export class RNWelcomeImpl extends UI.Widget.VBox implements
${launchId ? html`
-
- ${i18nString(UIStrings.sessionIdMessage)}
-
+
` : ''}
${this.#reactNativeVersion !== null && this.#reactNativeVersion !== undefined ? html`
React Native: ${this.#reactNativeVersion}
diff --git a/front_end/panels/rn_welcome/rnWelcome.css b/front_end/panels/rn_welcome/rnWelcome.css
index ab8329f3ab6..fafa4ee68ef 100644
--- a/front_end/panels/rn_welcome/rnWelcome.css
+++ b/front_end/panels/rn_welcome/rnWelcome.css
@@ -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);
+}