Browser Profile Warning & Dialog Style Updates (#1243)

* Give protocol selection box smaller max-width

* Add warning and docs link to browser profile creation

- Updates dialog styling to btrix dialog
- Updates button sizes
- Updates button placement in dialog
- Updates button labels for consistency with other buttons in app
- Updates docs page with new button labels

* Update browser profile edit metadata dialog. Matches updated dialog shown on profile creation

* Open docs page in new tab

docs/user-guide/browser-profiles.md

@@ -2,7 +2,7 @@
 
 Browser profiles are saved instances of a web browsing session that can be reused to crawl websites as they were configued, with any cookies or saved login sessions. Using a pre-configured profile also means that content that can only be viewed by logged in users can be archived, without archiving the actual login credentials.
 
-!!! tip "Best practice: Create and use web archiving-specific accounts for crawling with browser profiles"
+!!! tip "Best practice — Create and use web archiving-specific accounts for crawling with browser profiles"
 
     For the following reasons, we recommend creating dedicated accounts for archiving anything that is locked behind login credentials but otherwise public, especially on social media platforms.
 
@@ -20,7 +20,7 @@ Browser profiles are saved instances of a web browsing session that can be reuse
 
 New browser profiles can be created on the Browser Profiles page by pressing the _New Browser Profile_ button and providing a starting URL. Once in the profile creator, log in to any websites that should behave as logged in while crawling and accept any pop-ups that require interaction from the user to proceed with using the website.
 
-Press the _Next_ button to save the browser profile with a _Name_ and _Description_ of what is logged in or otherwise notable about this browser session.
+Press the _Finish Browsing_ button to save the browser profile with a _Name_ and _Description_ of what is logged in or otherwise notable about this browser session.
 
 ## Editing Existing Browser Profiles
 

frontend/src/pages/org/browser-profiles-detail.ts

@@ -215,15 +215,15 @@ export class BrowserProfilesDetail extends LiteElement {
         )}
       </div>
 
-      <sl-dialog
+      <btrix-dialog
         label=${msg(str`Edit Profile`)}
         ?open=${this.isEditDialogOpen}
         @sl-request-close=${() => (this.isEditDialogOpen = false)}
         @sl-show=${() => (this.isEditDialogContentVisible = true)}
         @sl-after-hide=${() => (this.isEditDialogContentVisible = false)}
       >
         ${this.isEditDialogContentVisible ? this.renderEditProfile() : ""}
-      </sl-dialog> `;
+      </btrix-dialog> `;
   }
 
   private renderVisitedSites = () => {
@@ -352,14 +352,16 @@ export class BrowserProfilesDetail extends LiteElement {
           ></sl-textarea>
         </div>
 
-        <div class="text-right">
+        <div class="flex justify-between">
           <sl-button
-            variant="text"
+            variant="default"
+            size="small"
             @click=${() => (this.isEditDialogOpen = false)}
             >${msg("Cancel")}</sl-button
           >
           <sl-button
             variant="primary"
+            size="small"
             type="submit"
             ?disabled=${this.isSubmittingProfileChange}
             ?loading=${this.isSubmittingProfileChange}

frontend/src/pages/org/browser-profiles-new.ts

@@ -90,19 +90,26 @@ export class BrowserProfilesNew extends LiteElement {
 
       <div class="h-screen flex flex-col">
         <div
-          class="flex-0 flex items-center justify-between mb-3 p-2 bg-slate-50"
+          class="flex-0 flex items-center justify-between mb-3 p-2 bg-slate-100 rounded-lg"
         >
           <p class="text-sm text-slate-600 mr-3 p-1">
             ${msg(
-              "Interact with the browsing tool to record your browser profile. You will complete and save your profile in the next step."
+              "Interact with the browsing tool to record your browser profile. It is highly recommended to create dedicated accounts to use when crawling. For details refer to the best practices on the "
             )}
+            <a
+              class="text-primary hover:text-indigo-400"
+              href="https://docs.browsertrix.cloud/user-guide/browser-profiles/"
+              target="_blank"
+              >${msg("browser profiles documentation page.")}</a
+            >
           </p>
 
           <sl-button
             variant="primary"
+            size="small"
             @click=${() => (this.isDialogVisible = true)}
           >
-            ${msg("Next")}
+            ${msg("Finish Browsing")}
           </sl-button>
         </div>
 
@@ -115,13 +122,13 @@ export class BrowserProfilesNew extends LiteElement {
         ></btrix-profile-browser>
       </div>
 
-      <sl-dialog
+      <btrix-dialog
         label=${msg(str`Save Browser Profile`)}
         ?open=${this.isDialogVisible}
         @sl-request-close=${() => (this.isDialogVisible = false)}
       >
         ${this.renderForm()}
-      </sl-dialog>
+      </btrix-dialog>
     `;
   }
 
@@ -153,21 +160,23 @@ export class BrowserProfilesNew extends LiteElement {
           value=${this.params.description || ""}
         ></sl-textarea>
 
-        <div class="text-right">
+        <div class="flex justify-between">
           <sl-button
-            variant="text"
+            variant="default"
+            size="small"
             @click=${() => (this.isDialogVisible = false)}
           >
             ${msg("Back")}
           </sl-button>
 
           <sl-button
             variant="primary"
+            size="small"
             type="submit"
             ?disabled=${this.isSubmitting}
             ?loading=${this.isSubmitting}
           >
-            ${msg("Create Profile")}
+            ${msg("Save Profile")}
           </sl-button>
         </div>
       </div>

frontend/src/pages/org/components/new-browser-profile-dialog.ts

@@ -53,7 +53,7 @@ export class NewBrowserProfileDialog extends LiteElement {
 
             <div class="flex">
               <sl-select
-                class="grow-0 mr-1"
+                class="grow-0 mr-1 max-w-[8rem]"
                 name="urlPrefix"
                 value="https://"
                 hoist