From 99ccdf2de8910a97175365fa552daa9686f578ac Mon Sep 17 00:00:00 2001
From: Henry Wilkinson <henry@wilkinson.graphics>
Date: Tue, 3 Oct 2023 21:59:19 -0400
Subject: [PATCH] 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           |  4 +--
 .../src/pages/org/browser-profiles-detail.ts  | 10 +++++---
 .../src/pages/org/browser-profiles-new.ts     | 25 +++++++++++++------
 .../components/new-browser-profile-dialog.ts  |  2 +-
 4 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/docs/user-guide/browser-profiles.md b/docs/user-guide/browser-profiles.md
index be8fcd35cb..9bb136412b 100644
--- a/docs/user-guide/browser-profiles.md
+++ b/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
 
diff --git a/frontend/src/pages/org/browser-profiles-detail.ts b/frontend/src/pages/org/browser-profiles-detail.ts
index 347e3e4c69..740b3cddce 100644
--- a/frontend/src/pages/org/browser-profiles-detail.ts
+++ b/frontend/src/pages/org/browser-profiles-detail.ts
@@ -215,7 +215,7 @@ export class BrowserProfilesDetail extends LiteElement {
         )}
       </div>
 
-      <sl-dialog
+      <btrix-dialog
         label=${msg(str`Edit Profile`)}
         ?open=${this.isEditDialogOpen}
         @sl-request-close=${() => (this.isEditDialogOpen = false)}
@@ -223,7 +223,7 @@ export class BrowserProfilesDetail extends LiteElement {
         @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}
diff --git a/frontend/src/pages/org/browser-profiles-new.ts b/frontend/src/pages/org/browser-profiles-new.ts
index 09275b711b..57f556c6a5 100644
--- a/frontend/src/pages/org/browser-profiles-new.ts
+++ b/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,9 +160,10 @@ 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")}
@@ -163,11 +171,12 @@ export class BrowserProfilesNew extends LiteElement {
 
           <sl-button
             variant="primary"
+            size="small"
             type="submit"
             ?disabled=${this.isSubmitting}
             ?loading=${this.isSubmitting}
           >
-            ${msg("Create Profile")}
+            ${msg("Save Profile")}
           </sl-button>
         </div>
       </div>
diff --git a/frontend/src/pages/org/components/new-browser-profile-dialog.ts b/frontend/src/pages/org/components/new-browser-profile-dialog.ts
index a1c11488cb..8137c32b5b 100644
--- a/frontend/src/pages/org/components/new-browser-profile-dialog.ts
+++ b/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