From 8369d5a6f095e647c121be858b0767086f744796 Mon Sep 17 00:00:00 2001
From: Martin Ruiz <martin.ruiz.mares@gmail.com>
Date: Tue, 26 Mar 2024 14:35:37 -0700
Subject: [PATCH] [UI] Admin pages 2

---
 src/Bootstrap/dist/css/bootstrap.css          | 36 +++++++++++++++++++
 src/Bootstrap/less/buttons.less               | 35 ++++++++++++++++++
 .../Admin/Views/ChangeUsername/Index.cshtml   | 20 +++++++----
 .../Admin/Views/CorrectIsLatest/Index.cshtml  |  4 +--
 .../Admin/Views/Delete/_ReflowBulk.cshtml     |  4 +--
 .../Views/Delete/_ReflowBulkConfirm.cshtml    |  2 +-
 .../_DeleteUserAccountForm.cshtml             | 12 +++----
 .../Views/PasswordAuthentication/Index.cshtml | 10 +++---
 .../Admin/Views/SecurityPolicy/Index.cshtml   | 10 +++---
 .../Areas/Admin/Views/SiteAdmins/Index.cshtml |  6 ++--
 .../Views/Users/_DeleteUserAccountForm.cshtml | 12 +++----
 ...rOrganizationsListForDeletedAccount.cshtml |  2 +-
 .../_UserPackagesListForDeletedAccount.cshtml |  2 +-
 13 files changed, 118 insertions(+), 37 deletions(-)

diff --git a/src/Bootstrap/dist/css/bootstrap.css b/src/Bootstrap/dist/css/bootstrap.css
index 8088c1675c..d0f699f62f 100644
--- a/src/Bootstrap/dist/css/bootstrap.css
+++ b/src/Bootstrap/dist/css/bootstrap.css
@@ -3186,6 +3186,42 @@ fieldset[disabled] .btn-danger.focus {
   box-shadow: inset 0px 0px 0px 1px var(--neutralStrokeFocus1Rest);
   outline: none !important;
 }
+.btn-brand-icon {
+  color: var(--neutralForegroundOnBrandRest);
+  background-color: var(--brandBackground1Rest);
+  border-color: var(--brandBackground1Rest);
+  border-radius: var(--Medium, 4px);
+  padding: 2px 8px;
+  border: 2px solid transparent;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  outline: none;
+}
+.btn-brand-icon:hover {
+  border: 2px solid var(--brandBackground1Hover);
+  color: var(--neutralForegroundOnBrandRest);
+  background-color: var(--brandBackground1Hover);
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  outline: none;
+}
+.btn-brand-icon:active {
+  border: 2px solid var(--brandBackground1Pressed);
+  color: var(--neutralForegroundOnBrandRest);
+  background-color: var(--brandBackground1Pressed);
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  outline: none;
+}
+.btn-brand-icon:focus-within,
+.btn-brand-icon:focus-visible,
+.btn-brand-icon:focus {
+  border: 2px solid var(--neutralStrokeFocus2Rest);
+  color: var(--neutralForegroundOnBrandRest);
+  -webkit-box-shadow: inset 0px 0px 0px 1px var(--neutralStrokeFocus1Rest);
+  box-shadow: inset 0px 0px 0px 1px var(--neutralStrokeFocus1Rest);
+  outline: none !important;
+}
 .brand-button-transparent {
   color: var(--neutralForeground2Rest);
   background-color: var(--transparentBackgroundRest);
diff --git a/src/Bootstrap/less/buttons.less b/src/Bootstrap/less/buttons.less
index b9730af888..3deadca918 100644
--- a/src/Bootstrap/less/buttons.less
+++ b/src/Bootstrap/less/buttons.less
@@ -122,6 +122,41 @@
     outline: none !important; // removes focus from .tab-focus()
   }
 }
+.btn-brand-icon {
+  color: var(--neutralForegroundOnBrandRest);
+  background-color: var(--brandBackground1Rest);
+  border-color: var(--brandBackground1Rest);
+  border-radius: var(--Medium, 4px);
+  padding: 2px 8px;
+  border: 2px solid transparent;
+  box-shadow: none;
+  outline: none;
+
+  &:hover {
+    border: 2px solid var(--brandBackground1Hover);
+    color: var(--neutralForegroundOnBrandRest);
+    background-color: var(--brandBackground1Hover);
+    box-shadow: none;
+    outline: none;
+  }
+
+  &:active {
+    border: 2px solid var(--brandBackground1Pressed);
+    color: var(--neutralForegroundOnBrandRest);
+    background-color: var(--brandBackground1Pressed);
+    box-shadow: none;
+    outline: none;
+  }
+
+  &:focus-within,
+  &:focus-visible,
+  &:focus {
+    border: 2px solid var(--neutralStrokeFocus2Rest);
+    color: var(--neutralForegroundOnBrandRest);
+    box-shadow: inset 0px 0px 0px 1px var(--neutralStrokeFocus1Rest);
+    outline: none !important; // removes focus from .tab-focus()
+  }
+}
 .brand-button-transparent {
   color: var(--neutralForeground2Rest);
   background-color: var(--transparentBackgroundRest);
diff --git a/src/NuGetGallery/Areas/Admin/Views/ChangeUsername/Index.cshtml b/src/NuGetGallery/Areas/Admin/Views/ChangeUsername/Index.cshtml
index bf83313769..243c07b9a6 100644
--- a/src/NuGetGallery/Areas/Admin/Views/ChangeUsername/Index.cshtml
+++ b/src/NuGetGallery/Areas/Admin/Views/ChangeUsername/Index.cshtml
@@ -11,8 +11,10 @@
 
         <i>Verify if the requester is a valid owner of the account.</i><br />
 
-        <input type="text" placeholder="Account email or username" autocomplete="off" autofocus style="width: 200px;" rows="1" data-bind="value: accountEmailOrUsername" />
-        <button type="submit" data-bind="click: verifyAccount">Verify</button>
+        <div class="row-checkbox-label">
+            <input type="text" class="input-brand" placeholder="Account email or username" autocomplete="off" autofocus style="width: 200px;" rows="1" data-bind="value: accountEmailOrUsername" />
+            <button type="submit" class="btn btn-brand" data-bind="click: verifyAccount">Verify</button>
+        </div>
 
         <div style="display:none" data-bind="visible: errorAccount">
             @ViewHelpers.AlertDanger(@<text><span data-bind="text: errorAccount"></span></text>)
@@ -57,8 +59,10 @@
 
         <i>Validate if the new username is available and has a valid format.</i><br />
 
-        <input type="text" placeholder="New username" autocomplete="off" autofocus style="width: 200px;" rows="1" data-bind="value: newUsername" />
-        <button type="submit" data-bind="click: validateNewUsername">Validate</button>
+        <div class="row-checkbox-label">
+            <input type="text" class="input-brand" placeholder="New username" autocomplete="off" autofocus style="width: 200px;" rows="1" data-bind="value: newUsername" />
+            <button type="submit" class="btn btn-brand" data-bind="click: validateNewUsername">Validate</button>
+        </div>
         <div style="display:none" data-bind="visible: errorNewUsername">
             @ViewHelpers.AlertDanger(@<text><span data-bind="text: errorNewUsername"></span></text>)
         </div>
@@ -77,9 +81,11 @@
         {
             @Html.AntiForgeryToken()
             <i>Update current account username.</i><br />
-            <input type="text" placeholder="Old username" autocomplete="off" autofocus style="width: 200px;" rows="1" data-bind="value: changeOldUsername" />
-            <input type="text" placeholder="New username" autocomplete="off" autofocus style="width: 200px;" rows="1" data-bind="value: changeNewUsername" />
-            <button type="submit" data-bind="click: changeUsername">Change</button>
+            <div class="row-checkbox-label">
+                <input type="text" class="input-brand" placeholder="Old username" autocomplete="off" autofocus style="width: 200px;" rows="1" data-bind="value: changeOldUsername" />
+                <input type="text" class="input-brand" placeholder="New username" autocomplete="off" autofocus style="width: 200px;" rows="1" data-bind="value: changeNewUsername" />
+                <button type="submit" class="btn btn-brand" data-bind="click: changeUsername">Change</button>
+            </div>
         }
         <div style="display:none" data-bind="visible: changeUsernameSuccessful">
             @ViewHelpers.Alert(@<text><span data-bind="text: changeUsernameSuccessful"></span></text>, "success", "Info")
diff --git a/src/NuGetGallery/Areas/Admin/Views/CorrectIsLatest/Index.cshtml b/src/NuGetGallery/Areas/Admin/Views/CorrectIsLatest/Index.cshtml
index 328c7b09a6..15d1eeccdc 100644
--- a/src/NuGetGallery/Areas/Admin/Views/CorrectIsLatest/Index.cshtml
+++ b/src/NuGetGallery/Areas/Admin/Views/CorrectIsLatest/Index.cshtml
@@ -7,7 +7,7 @@
 <section role="main" class="container main-container">
     <h2>Correct IsLatest packages</h2>
 
-    <button type="submit" data-bind="click: correctIsLatestPackages">Get correct IsLatest packages</button>
+    <button type="submit" class="btn-brand" data-bind="click: correctIsLatestPackages">Get correct IsLatest packages</button>
 
     <div style="display:none" data-bind="visible: loadingCorrectIsLatestPackages">
         @ViewHelpers.AlertInfo(@<text><span>Loading packages...</span></text>)
@@ -55,7 +55,7 @@
             @ViewHelpers.AlertDanger(@<text><span data-bind="text: errorReflowPackages"></span></text>)
         </div>
         <div class="form-group" data-bind="visible: arePackagesSelected()">
-            <input type="submit" class="btn btn-danger form-control" data-bind="click: reflowPackages" value="Reflow packages" />
+            <input type="submit" class="btn btn-brand-danger form-control" data-bind="click: reflowPackages" value="Reflow packages" />
         </div>
     }
 </section>
diff --git a/src/NuGetGallery/Areas/Admin/Views/Delete/_ReflowBulk.cshtml b/src/NuGetGallery/Areas/Admin/Views/Delete/_ReflowBulk.cshtml
index 90620eabba..49060e4216 100644
--- a/src/NuGetGallery/Areas/Admin/Views/Delete/_ReflowBulk.cshtml
+++ b/src/NuGetGallery/Areas/Admin/Views/Delete/_ReflowBulk.cshtml
@@ -15,11 +15,11 @@
     </p>
 
     <div>
-        @Html.TextAreaFor(m => m.BulkList, 10, 50, new { style = "width: 100%;" })
+        @Html.TextAreaFor(m => m.BulkList, 10, 50, new { style = "width: 100%;", @class = "textarea-brand" })
         @Html.ValidationMessageFor(m => m.BulkList)
     </div>
 
     <br />
 
-    <input type="submit" value="Reflow these hard-deleted packages" title="Reflow these hard-deleted packages" />
+    <input type="submit" class="btn-brand-secondary" value="Reflow these hard-deleted packages" title="Reflow these hard-deleted packages" />
 }
\ No newline at end of file
diff --git a/src/NuGetGallery/Areas/Admin/Views/Delete/_ReflowBulkConfirm.cshtml b/src/NuGetGallery/Areas/Admin/Views/Delete/_ReflowBulkConfirm.cshtml
index cb2765582f..b0c9a05d43 100644
--- a/src/NuGetGallery/Areas/Admin/Views/Delete/_ReflowBulkConfirm.cshtml
+++ b/src/NuGetGallery/Areas/Admin/Views/Delete/_ReflowBulkConfirm.cshtml
@@ -26,5 +26,5 @@
 
     <br />
 
-    <input type="submit" value="Reflow these hard-deleted packages" title="Reflow these hard-deleted packages" />
+    <input type="submit" class="btn-brand-secondary" value="Reflow these hard-deleted packages" title="Reflow these hard-deleted packages" />
 }
diff --git a/src/NuGetGallery/Areas/Admin/Views/DeleteAccount/_DeleteUserAccountForm.cshtml b/src/NuGetGallery/Areas/Admin/Views/DeleteAccount/_DeleteUserAccountForm.cshtml
index 7450a7905a..4efd5b664e 100644
--- a/src/NuGetGallery/Areas/Admin/Views/DeleteAccount/_DeleteUserAccountForm.cshtml
+++ b/src/NuGetGallery/Areas/Admin/Views/DeleteAccount/_DeleteUserAccountForm.cshtml
@@ -6,17 +6,17 @@
 <div>
     <div class="form-group">
         @Html.LabelFor(m => m.Signature)
-        @Html.EditorFor(m => m.Signature)
+        @Html.ShowTextBoxFor(m => m.Signature, customClass: "input-brand")
         @Html.ValidationMessageFor(m => m.Signature)
     </div>
 
     @if (Model.HasPackagesThatWillBeOrphaned)
     {
         <div class="form-group">
-            @Html.EditorFor(m => m.ShouldUnlist)
-            <label class="checkbox-inline">
-                <b>Unlist the packages without any owner.</b>
-            </label>
+            <div class="row-checkbox-label">
+                @Html.CheckBoxFor(m => m.ShouldUnlist, new { @class = "brand-checkbox" })
+                <label><b>Unlist the packages without any owner.</b></label>
+            </div>
             <p>
                 One or more packages do not have co-owners. If you choose to proceed without fixing this issue, these packages will be orphaned and a warning message will be displayed under owners on the package page.
             </p>
@@ -31,4 +31,4 @@
 @Html.HiddenFor(m => m.Signature)
 @Html.HiddenFor(m => m.ShouldUnlist)
 @Html.HiddenFor(m => m.AccountName)
-<input id="btn-delete" type="submit" class="btn btn-danger form-control" value="I understand the consequences, delete this account" title="I understand the consequences, delete this account." />
\ No newline at end of file
+<input id="btn-delete" type="submit" class="btn btn-brand-danger form-control" value="I understand the consequences, delete this account" title="I understand the consequences, delete this account." />
\ No newline at end of file
diff --git a/src/NuGetGallery/Areas/Admin/Views/PasswordAuthentication/Index.cshtml b/src/NuGetGallery/Areas/Admin/Views/PasswordAuthentication/Index.cshtml
index 379e3e7ae6..6e4b9b9f2c 100644
--- a/src/NuGetGallery/Areas/Admin/Views/PasswordAuthentication/Index.cshtml
+++ b/src/NuGetGallery/Areas/Admin/Views/PasswordAuthentication/Index.cshtml
@@ -28,15 +28,17 @@
     @using (Html.BeginForm("AddEmailAddress", "PasswordAuthentication"))
     {
         @Html.AntiForgeryToken()
-        <input type="text" placeholder="emailAddress" name="emailAddress" />
-        <button type="submit">Add</button>
+        <div class="row-checkbox-label">
+            <input type="text" class="input-brand" placeholder="emailAddress" name="emailAddress" />
+            <button type="submit" class="btn btn-brand">Add</button>
+        </div>
     }
 
     <h2>Search a user for credential</h2>
 
     <form>
-        <textarea placeholder="Search for a user if has linked MSA/(Microsoft Entra ID) credential by entering email address or username" autocomplete="off" autofocus style="width: 100%;" rows="5" data-bind="value: searchQuery"></textarea><br />
-        <input type="button" value="Search" data-bind="click: search" />
+        <textarea placeholder="Search for a user if has linked MSA/(Microsoft Entra ID) credential by entering email address or username" autocomplete="off" autofocus style="width: 100%;" rows="5" class="textarea-brand" data-bind="value: searchQuery"></textarea><br />
+        <input type="button" class="btn-brand-secondary" value="Search" data-bind="click: search" />
     </form>
 
     <div style="display: none" data-bind="visible: searchResults().length === 0 && doneSearching()">
diff --git a/src/NuGetGallery/Areas/Admin/Views/SecurityPolicy/Index.cshtml b/src/NuGetGallery/Areas/Admin/Views/SecurityPolicy/Index.cshtml
index 96fa8c1fbe..5ab6200f4a 100644
--- a/src/NuGetGallery/Areas/Admin/Views/SecurityPolicy/Index.cshtml
+++ b/src/NuGetGallery/Areas/Admin/Views/SecurityPolicy/Index.cshtml
@@ -14,8 +14,8 @@
     <h2>User Security Policies</h2>
 
     <form>
-        <textarea placeholder="Search for usernames (comma-separated)" autocomplete="off" autofocus style="width: 100%;" rows="5" data-bind="value: searchQuery"></textarea><br />
-        <input type="button" value="Search" title="Search" data-bind="click: search" />
+        <textarea placeholder="Search for usernames (comma-separated)" autocomplete="off" autofocus style="width: 100%;" rows="5" class="textarea-brand" data-bind="value: searchQuery"></textarea><br />
+        <input type="button" class="btn-brand-secondary" value="Search" title="Search" data-bind="click: search" />
     </form><br />
 
     <div data-bind="visible: searchResults().length > 0">
@@ -34,7 +34,7 @@
                             <th>Username</th>
                             @foreach (var subscription in Model.SubscriptionNames)
                             {
-                                <th><input type="checkbox" data-bind="click: toggleSelectAll, checked: selectAllState.@subscription" />@subscription</th>
+                                <th><input type="checkbox" class="brand-checkbox" data-bind="click: toggleSelectAll, checked: selectAllState.@subscription" />@subscription</th>
                             }
                         </tr>
                     </thead>
@@ -43,7 +43,7 @@
                             <td><a href="#" data-bind="text: Username, attr: { href: $parent.generateUserUrl($data) }"></a></td>
                             @foreach (var subscription in Model.SubscriptionNames)
                             {
-                                <td><input type="checkbox" data-bind="checked: $data.Selected.@subscription, value: $parent.generateValue($data, '@subscription')" /></td>
+                                <td><input type="checkbox" class="brand-checkbox" data-bind="checked: $data.Selected.@subscription, value: $parent.generateValue($data, '@subscription')" /></td>
                             }
                         </tr>
                     </tbody>
@@ -57,7 +57,7 @@
                         Onboarding users to security policy subscriptions could result in changes which <strong>CANNOT</strong> be undone.
                     </p>
 
-                    <input type="submit" value="I understand, update policies." title="I understand, update policies." data-bind="click: update" />
+                    <input type="submit" class="btn-brand-secondary" value="I understand, update policies." title="I understand, update policies." data-bind="click: update" />
                     <a class="cancel" href="@Url.Action("Index", "Home")" title="Cancel changes">Cancel</a>
                 </fieldset>
             </div>
diff --git a/src/NuGetGallery/Areas/Admin/Views/SiteAdmins/Index.cshtml b/src/NuGetGallery/Areas/Admin/Views/SiteAdmins/Index.cshtml
index aeb9258f14..e79df58527 100644
--- a/src/NuGetGallery/Areas/Admin/Views/SiteAdmins/Index.cshtml
+++ b/src/NuGetGallery/Areas/Admin/Views/SiteAdmins/Index.cshtml
@@ -33,7 +33,9 @@
     @using (Html.BeginForm("AddAdmin", "SiteAdmins"))
     {
         @Html.AntiForgeryToken()
-        <input type="text" name="username" />
-        <button type="submit">Add</button>
+        <div class="row-checkbox-label">
+            <input type="text" class="form-control input-brand" name="username" />
+            <button type="submit" class="btn btn-brand">Add</button>
+        </div>
     }
 </section>
\ No newline at end of file
diff --git a/src/NuGetGallery/Views/Users/_DeleteUserAccountForm.cshtml b/src/NuGetGallery/Views/Users/_DeleteUserAccountForm.cshtml
index 8183ab68d0..40837e7ff3 100644
--- a/src/NuGetGallery/Views/Users/_DeleteUserAccountForm.cshtml
+++ b/src/NuGetGallery/Views/Users/_DeleteUserAccountForm.cshtml
@@ -10,17 +10,17 @@
         <div>
             <div class="form-group">
                 @Html.LabelFor(m => m.Signature)
-                @Html.EditorFor(m => m.Signature)
+                @Html.ShowTextBoxFor(m => m.Signature, customClass: "input-brand")
                 @Html.ValidationMessageFor(m => m.Signature)
             </div>
 
             @if (Model.HasPackagesThatWillBeOrphaned)
             {
                 <div class="form-group">
-                    @Html.EditorFor(m => m.ShouldUnlist)
-                    <label class="checkbox-inline">
-                        <b>Unlist the packages without any owner.</b>
-                    </label>
+                    <div class="row-checkbox-label">
+                        @Html.CheckBoxFor(m => m.ShouldUnlist, new { @class = "brand-checkbox" })
+                        <label><b>Unlist the packages without any owner.</b></label>
+                    </div>
                     <p>
                         One or more packages do not have co-owners. If you choose to proceed without fixing this issue, these packages will be orphaned and a warning message will be displayed under owners on the package page.
                     </p>
@@ -35,6 +35,6 @@
         @Html.HiddenFor(m => m.Signature)
         @Html.HiddenFor(m => m.ShouldUnlist)
         @Html.HiddenFor(m => m.AccountName)
-        <input id="btn-delete" type="submit" class="btn btn-danger form-control" value="I understand the consequences, delete this account" title="I understand the consequences, delete this account." />
+        <input id="btn-delete" type="submit" class="btn btn-brand-danger form-control" value="I understand the consequences, delete this account" title="I understand the consequences, delete this account." />
     }
 </div>
\ No newline at end of file
diff --git a/src/NuGetGallery/Views/Users/_UserOrganizationsListForDeletedAccount.cshtml b/src/NuGetGallery/Views/Users/_UserOrganizationsListForDeletedAccount.cshtml
index 38d99c3009..f6aa6442ec 100644
--- a/src/NuGetGallery/Views/Users/_UserOrganizationsListForDeletedAccount.cshtml
+++ b/src/NuGetGallery/Views/Users/_UserOrganizationsListForDeletedAccount.cshtml
@@ -59,7 +59,7 @@
                                     @organization.PackagesCount
                                 </td>
                                 <td class="text-right align-middle package-controls">
-                                    <a class="btn" href="@Url.ManageMyOrganization(organization.OrganizationName)" title="Edit Organization" aria-label="@("Edit Organization " + organization.OrganizationName)">
+                                    <a class="btn-brand-icon" href="@Url.ManageMyOrganization(organization.OrganizationName)" title="Edit Organization" aria-label="@("Edit Organization " + organization.OrganizationName)">
                                         <i class="ms-Icon ms-Icon--Edit" aria-hidden="true"></i>
                                     </a>
                                 </td>
diff --git a/src/NuGetGallery/Views/Users/_UserPackagesListForDeletedAccount.cshtml b/src/NuGetGallery/Views/Users/_UserPackagesListForDeletedAccount.cshtml
index d80b19b7f8..3fcfb8c7d4 100644
--- a/src/NuGetGallery/Views/Users/_UserPackagesListForDeletedAccount.cshtml
+++ b/src/NuGetGallery/Views/Users/_UserPackagesListForDeletedAccount.cshtml
@@ -77,7 +77,7 @@
                             <td class="align-middle text-nowrap">@package.TotalDownloadCount.ToNuGetNumberString()</td>
                             <td class="align-middle text-nowrap">@package.FullVersion.Abbreviate(15)</td>
                             <td class="text-right align-middle package-controls">
-                                <a href="@Url.ManagePackage(package)" class="btn" title="Manage" aria-label="Manage Package @package.Id">
+                                <a href="@Url.ManagePackage(package)" class="btn-brand-icon" title="Manage" aria-label="Manage Package @package.Id">
                                     <i class="ms-Icon ms-Icon--People" aria-hidden="true"></i>
                                 </a>
                             </td>