Improve scrape url button UX (#1903)

* change button label to icon
* add URLField component

ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx

@@ -28,6 +28,7 @@ import {
   Icon,
   LoadingIndicator,
   ImageInput,
+  URLField,
 } from "src/components/Shared";
 import { useToast } from "src/hooks";
 import { ImageUtils, FormUtils, TextUtils, getStashIDs } from "src/utils";
@@ -574,21 +575,6 @@ export const SceneEditPanel: React.FC<IProps> = ({
     }
   }
 
-  function maybeRenderScrapeButton() {
-    if (!formik.values.url || !urlScrapable(formik.values.url)) {
-      return undefined;
-    }
-    return (
-      <Button
-        className="minimal scrape-url-button"
-        onClick={onScrapeSceneURL}
-        title="Scrape"
-      >
-        <Icon className="fa-fw" icon="file-download" />
-      </Button>
-    );
-  }
-
   function renderTextField(field: string, title: string, placeholder?: string) {
     return (
       <Form.Group controlId={title} as={Row}>
@@ -652,15 +638,12 @@ export const SceneEditPanel: React.FC<IProps> = ({
                 <Form.Label className="col-form-label">
                   <FormattedMessage id="url" />
                 </Form.Label>
-                <div className="float-right scrape-button-container">
-                  {maybeRenderScrapeButton()}
-                </div>
               </Col>
               <Col xs={9}>
-                <Form.Control
-                  className="text-input"
-                  placeholder={intl.formatMessage({ id: "url" })}
+                <URLField
                   {...formik.getFieldProps("url")}
+                  onScrapeClick={onScrapeSceneURL}
+                  urlScrapable={urlScrapable}
                   isInvalid={!!formik.getFieldMeta("url").error}
                 />
               </Col>