diff --git a/src/components/url-loader-modal/url-loader-modal.css b/src/components/url-loader-modal/url-loader-modal.css index cb4c7801a64..28ad36bb2d4 100644 --- a/src/components/url-loader-modal/url-loader-modal.css +++ b/src/components/url-loader-modal/url-loader-modal.css @@ -19,16 +19,6 @@ gap: 1.5rem; } -.promptSection { - text-align: left; -} - -.promptText { - font-size: 0.875rem; - color: $text-primary; - line-height: 1.5; -} - .inputSection { display: flex; flex-direction: column; @@ -66,6 +56,43 @@ line-height: 1.4; } +.examplesSection { + display: flex; + flex-direction: column; + margin-top: -0.5rem; +} + +.examplesTitle { + font-size: 0.75rem; + color: $text-primary; + font-weight: bold; + margin-bottom: 0.5rem; +} + +.examplesList { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 0.25rem; +} + +.exampleItem { + font-size: 0.75rem; + color: $text-primary-transparent; + font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace; + padding-left: 1rem; + position: relative; +} + +.exampleItem::before { + content: "•"; + position: absolute; + left: 0; + color: $text-primary-transparent; +} + .buttonSection { display: flex; justify-content: flex-end; diff --git a/src/components/url-loader-modal/url-loader-modal.jsx b/src/components/url-loader-modal/url-loader-modal.jsx index afc330b2ba7..d5479966f83 100644 --- a/src/components/url-loader-modal/url-loader-modal.jsx +++ b/src/components/url-loader-modal/url-loader-modal.jsx @@ -16,16 +16,26 @@ const messages = defineMessages({ description: 'Title for the URL loader modal', id: 'gui.urlLoader.title' }, - prompt: { - defaultMessage: 'Enter a Scratch project URL:', - description: 'Prompt message for URL input', - id: 'gui.urlLoader.urlPrompt' - }, urlPlaceholder: { - defaultMessage: 'https://scratch.mit.edu/projects/1234567890/', + defaultMessage: 'Enter project URL...', description: 'Placeholder text for URL input field', id: 'gui.urlLoader.urlPlaceholder' }, + urlExamplesTitle: { + defaultMessage: 'URL Examples', + description: 'Title for URL examples section', + id: 'gui.urlLoader.urlExamplesTitle' + }, + urlExampleScratch: { + defaultMessage: 'https://scratch.mit.edu/projects/{project_id}/', + description: 'Example URL format for Scratch projects', + id: 'gui.urlLoader.urlExampleScratch' + }, + urlExampleGoogleDrive: { + defaultMessage: 'https://drive.google.com/file/d/{file_id}/view?usp=drive_link', + description: 'Example URL format for Google Drive files', + id: 'gui.urlLoader.urlExampleGoogleDrive' + }, openButton: { defaultMessage: 'Open', description: 'Label for open button', @@ -106,14 +116,6 @@ class URLLoaderModal extends React.Component { onRequestClose={onRequestClose} > - -
- -
-
- + +
+ +
+
    +
  • + +
  • +
  • + +
  • +
+
+