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); +}