[UI] Add new theme to Admin pages (part 3) (#9891)

* [UI] Admin pages 3
NuGet · Apr 30, 2024 · 894f2b4 · 894f2b4
1 parent bf2e13a
commit 894f2b4
Show file tree

Hide file tree

Showing 19 changed files with 96 additions and 87 deletions.
diff --git a/src/Bootstrap/dist/css/bootstrap-theme.css b/src/Bootstrap/dist/css/bootstrap-theme.css
diff --git a/src/Bootstrap/dist/css/bootstrap.css b/src/Bootstrap/dist/css/bootstrap.css
diff --git a/src/Bootstrap/less/buttons.less b/src/Bootstrap/less/buttons.less
@@ -223,7 +223,6 @@
   border-radius: var(--Medium, 4px);
   border: 2px solid transparent;
   box-shadow: none !important;
-  padding: 5px 12px;
 
   &:hover,
   &:focus:hover {
@@ -250,7 +249,7 @@
 // Make a button look and behave like a link
 .btn-link {
   font-weight: 400;
-  color: @link-color;
+  color: var(--brandForegroundLinkRest);
   border-radius: 0;
 
   &,
@@ -269,15 +268,15 @@
   }
   &:hover,
   &:focus {
-    color: @link-hover-color;
+    color: var(--brandForegroundLinkHover);
     text-decoration: @link-hover-decoration;
     background-color: transparent;
   }
   &[disabled],
   fieldset[disabled] & {
     &:hover,
     &:focus {
-      color: @btn-link-disabled-color;
+      color: var(--neutralForegroundDisabledRest);
       text-decoration: none;
     }
   }

diff --git a/src/Bootstrap/less/mixins/tab-focus.less b/src/Bootstrap/less/mixins/tab-focus.less
@@ -5,6 +5,8 @@
   // (Initially tried to also force default via `outline: initial`,
   // but that seems to erroneously remove the outline in Firefox altogether.)
   outline: 4px solid -webkit-focus-ring-color;
+  outline: 2px solid var(--neutralStrokeFocus2Rest);
+  border-radius: 4px;
   outline-offset: -2px;
 }
 

diff --git a/src/Bootstrap/less/theme/base.less b/src/Bootstrap/less/theme/base.less
@@ -390,7 +390,7 @@ h2, h3 {
   }
 
   a, a:hover, a:focus, a:active {
-    color: @text-color;
+    color: var(--neutralForeground1Rest);
     text-decoration: none;
   }
 }

diff --git a/src/Bootstrap/less/theme/page-admin-popularity-transfers.less b/src/Bootstrap/less/theme/page-admin-popularity-transfers.less
@@ -21,18 +21,18 @@
     }
 
     .col-group-from-header {
-        background-color: #f2f2f2;
+        background-color: transparent;
     }
 
     .col-group-to-header {
-        background-color: #ebebeb;
+        background-color: var(--neutralBackground1Rest);
     }
 
     .col-group-from-data {
-        background-color: #f2f2f2;
+        background-color: transparent;
     }
 
     .col-group-to-data {
-        background-color: #ebebeb;
+        background-color: var(--neutralBackground1Rest);
     }
 }
diff --git a/src/NuGetGallery/Areas/Admin/Views/ApiKeys/Index.cshtml b/src/NuGetGallery/Areas/Admin/Views/ApiKeys/Index.cshtml
@@ -12,8 +12,8 @@
         {"ApiKey":"oy2apikey2","LeakedUrl":"https://leakedUrl2","RevocationSource":"GitHub"}
     </p>
     <form>
-        <textarea class="form-control" placeholder="Verify API keys to revoke" autocomplete="off" autofocus rows="5" data-bind="value: verifyQuery"></textarea><br />
-        <input type="button" value="Verify" data-bind="click: verify" /><br />
+        <textarea class="form-control textarea-brand" placeholder="Verify API keys to revoke" autocomplete="off" autofocus rows="5" data-bind="value: verifyQuery"></textarea><br />
+        <input type="button" class="btn btn-brand-secondary" value="Verify" data-bind="click: verify" /><br />
     </form>
     <div style="display: none" data-bind="visible: Error">
         @ViewHelpers.AlertDanger(@<text><span data-bind="html: Error"></span></text>)
@@ -34,7 +34,7 @@
             <tbody data-bind="foreach: verifiedResults">
                 <tr>
                     <td class="col-sm-1" style="vertical-align: middle">
-                        <input type="checkbox" name="SelectedApiKeys" data-bind="visible: IsRevocable, checked: Selected, value: ko.toJSON($data)" />
+                        <input type="checkbox" class="brand-checkbox" name="SelectedApiKeys" data-bind="visible: IsRevocable, checked: Selected, value: ko.toJSON($data)" />
                     </td>
                     <td class="col-sm-5" style="vertical-align: middle">
                         <span data-bind="text: ApiKey"></span>
@@ -84,7 +84,7 @@
                 This will expire and revoke the selected API keys, and send the emails to notify customers!
             </p>
             <hr />
-            <input type="submit" class="btn btn-danger form-control" value="I understand the consequences, revoke the API keys" />
+            <input type="submit" class="btn btn-brand-danger form-control" value="I understand the consequences, revoke the API keys" />
         </div>
     }
 </section>

diff --git a/src/NuGetGallery/Areas/Admin/Views/Features/Index.cshtml b/src/NuGetGallery/Areas/Admin/Views/Features/Index.cshtml
@@ -104,8 +104,10 @@
                 </li>
             </ul>
 
-            <input type="text" data-bind="value: toAdd" />
-            <input type="submit" class="btn btn-primary" data-bind="click: add" value="Add" />
+            <div class="row-checkbox-label">
+                <input type="text" class="input-brand" data-bind="value: toAdd" />
+                <input type="submit" class="btn btn-brand" data-bind="click: add" value="Add" />
+            </div>
         </div>
     </script>
     <script type="text/javascript">

diff --git a/src/NuGetGallery/Areas/Admin/Views/Features/_AddFeature.cshtml b/src/NuGetGallery/Areas/Admin/Views/Features/_AddFeature.cshtml
@@ -13,19 +13,19 @@
     <div class="row">
         <div class="col-sm-6 form-group @Html.HasErrorFor(m => m.Name)">
             @Html.ShowLabelFor(m => m.Name)<br />
-            @Html.ShowTextBoxFor(m => m.Name)
+            @Html.ShowTextBoxFor(m => m.Name, customClass: "input-brand")
             @Html.ShowValidationMessagesFor(m => m.Name)
         </div>
 
         <div class="col-sm-3 form-group @Html.HasErrorFor(m => m.Status)">
             @Html.ShowLabelFor(m => m.Status)<br />
-            @Html.EnumDropDownListFor(m => m.Status)
+            @Html.EnumDropDownListFor(m => m.Status, new { @class = "select-brand" })
             @Html.ShowValidationMessagesFor(m => m.Status)
         </div>
 
         <div class="col-sm-3">
             <br />
-            <input id="Add" type="submit" class="btn btn-primary form-control" value="Add" />
+            <input id="Add" type="submit" class="btn btn-brand form-control" value="Add" />
         </div>
     </div>
 }
diff --git a/src/NuGetGallery/Areas/Admin/Views/Features/_AddFlight.cshtml b/src/NuGetGallery/Areas/Admin/Views/Features/_AddFlight.cshtml
@@ -17,20 +17,20 @@
     <div class="row">
         <div class="col-sm-3 form-group @Html.HasErrorFor(m => m.Name)">
             @Html.ShowLabelFor(m => m.Name)<br />
-            @Html.ShowTextBoxFor(m => m.Name)
+            @Html.ShowTextBoxFor(m => m.Name, customClass: "input-brand")
             @Html.ShowValidationMessagesFor(m => m.Name)
         </div>
 
         <div class="col-sm-1 form-group @Html.HasErrorFor(m => m.All)" onchange="FlightFormToggleAll('@formNotAllId', '@formAddId')">
             @Html.ShowLabelFor(m => m.All)<br />
-            @Html.ShowCheckboxFor(m => m.All)
+            @Html.ShowCheckboxFor(m => m.All, customClass: "brand-checkbox")
             @Html.ShowValidationMessagesFor(m => m.All)
         </div>
 
         <div id="@formNotAllId" style="@(Model.All ? "display: none" : "")">
             <div class="col-sm-1 form-group @Html.HasErrorFor(m => m.SiteAdmins)">
                 @Html.ShowLabelFor(m => m.SiteAdmins)<br />
-                @Html.ShowCheckboxFor(m => m.SiteAdmins)
+                @Html.ShowCheckboxFor(m => m.SiteAdmins, customClass: "brand-checkbox")
                 @Html.ShowValidationMessagesFor(m => m.SiteAdmins)
             </div>
 
@@ -40,7 +40,7 @@
 
         <div class="col-sm-1 @(Model.All ? "col-sm-offset-7" : "")" id="@formAddId">
             <br />
-            <input id="Add" type="submit" class="btn btn-primary form-control" value="Add" />
+            <input id="Add" type="submit" class="btn btn-brand form-control" value="Add" />
         </div>
     </div>
 }
diff --git a/src/NuGetGallery/Areas/Admin/Views/Features/_EditFeature.cshtml b/src/NuGetGallery/Areas/Admin/Views/Features/_EditFeature.cshtml
@@ -12,11 +12,11 @@
             @Html.Hidden("Name", Model.Name)
 
             <div class="row">
-                <div class="col-sm-6 form-group">
-                    @Html.EnumDropDownListFor(m => m.Status)
+                <div class="col-md-6 form-group">
+                    @Html.EnumDropDownListFor(m => m.Status, new { @class = "select-brand"})
                 </div>
-                <div class="col-sm-6 form-group">
-                    <input id="Update" type="submit" class="btn btn-primary" value="Update" />
+                <div class="col-md-6 form-group">
+                    <input id="Update" type="submit" class="btn btn-brand" value="Update" />
                 </div>
             </div>
         }
@@ -28,7 +28,7 @@
             @Html.Hidden("ContentId", Model.ContentId)
             @Html.Hidden("Name", Model.Name)
 
-            <input id="Delete" type="submit" class="btn btn-danger" value="Delete" onclick="return FormDeleteConfirmation(event, '@Model.Name', 'feature')" />
+            <input id="Delete" type="submit" class="btn btn-brand-danger" value="Delete" onclick="return FormDeleteConfirmation(event, '@Model.Name', 'feature')" />
         }
     </td>
 </tr>
diff --git a/src/NuGetGallery/Areas/Admin/Views/Features/_EditFlight.cshtml b/src/NuGetGallery/Areas/Admin/Views/Features/_EditFlight.cshtml
@@ -28,39 +28,38 @@
         </ul>
     </td>
     <td class="@rowClass">
-        <button class="btn btn-primary" onclick="$('.@rowClass').hide(); $('#@rowFormId').show()">Update</button>
+        <button class="btn btn-brand" onclick="$('.@rowClass').hide(); $('#@rowFormId').show()">Update</button>
     </td>
     <td colspan="5" id="@rowFormId" style="display: none">
         @using (Html.BeginForm("EditFlight", "Features", FormMethod.Post))
         {
             @Html.AntiForgeryToken()
             @Html.Hidden("ContentId", Model.ContentId)
             @Html.Hidden("Name", Model.Name)
-
-            <div class="row">
-                <div class="col-sm-2 form-group @Html.HasErrorFor(m => m.All)" onchange="FlightFormToggleAll('@rowFormNotAllId', '@rowFormSubmitId')">
+            <div class="row-checkbox-label">
+                <div class="form-group @Html.HasErrorFor(m => m.All)" onchange="FlightFormToggleAll('@rowFormNotAllId', '@rowFormSubmitId')">
                     @Html.ShowLabelFor(m => m.All)
-                    @Html.ShowCheckboxFor(m => m.All)
+                    @Html.ShowCheckboxFor(m => m.All, customClass: "brand-checkbox")
                     @Html.ShowValidationMessagesFor(m => m.All)
                 </div>
 
-                <div id="@rowFormNotAllId" style="@(Model.All ? "display: none" : "")">
-                    <div class="col-sm-2 form-group @Html.HasErrorFor(m => m.SiteAdmins)">
+                <div id="@rowFormNotAllId" style="@(Model.All ? "display: none" : "flex-grow: 1")">
+                    <div class="form-group @Html.HasErrorFor(m => m.SiteAdmins)">
                         @Html.ShowLabelFor(m => m.SiteAdmins)
-                        @Html.ShowCheckboxFor(m => m.SiteAdmins)
+                        @Html.ShowCheckboxFor(m => m.SiteAdmins, customClass: "brand-checkbox")
                         @Html.ShowValidationMessagesFor(m => m.SiteAdmins)
                     </div>
 
-                    <div class="flight-array col-sm-3" name="Accounts" data-items="@string.Join(";", Model.Accounts ?? new string[0])" data-bind="template: { name: 'flight-array', data: $data }"></div>
-                    <div class="flight-array col-sm-3" name="Domains" data-items="@string.Join(";", Model.Domains ?? new string[0])" data-bind="template: { name: 'flight-array', data: $data }"></div>
+                    <div class="flight-array" name="Accounts" data-items="@string.Join(";", Model.Accounts ?? new string[0])" data-bind="template: { name: 'flight-array', data: $data }"></div>
+                    <div class="flight-array" name="Domains" data-items="@string.Join(";", Model.Domains ?? new string[0])" data-bind="template: { name: 'flight-array', data: $data }"></div>
                 </div>
 
-                <div class="col-sm-2 @(Model.All ? "col-sm-offset-7" : "")" id="@rowFormSubmitId">
+                <div style="margin-left: auto" id="@rowFormSubmitId">
                     <div class="form-group">
-                        <input id="Update" type="submit" class="btn btn-primary form-control" value="Update" />
+                        <input id="Update" type="submit" class="btn btn-brand form-control" value="Update" />
                     </div>
                     <div class="form-group">
-                        <button type="button" class="btn btn-default form-control" onclick="$('.@rowClass').show(); $('#@rowFormId').hide()">Cancel</button>
+                        <button type="button" class="btn btn-brand-secondary form-control" onclick="$('.@rowClass').show(); $('#@rowFormId').hide()">Cancel</button>
                     </div>
                 </div>
             </div>
@@ -74,7 +73,7 @@
             @Html.Hidden("Name", Model.Name)
 
             <div class="form-group">
-                <input id="Delete" type="submit" class="btn btn-danger form-control" value="Delete" onclick="return FormDeleteConfirmation(event, '@Model.Name', 'flight')" />
+                <input id="Delete" type="submit" class="btn btn-brand-danger form-control" value="Delete" onclick="return FormDeleteConfirmation(event, '@Model.Name', 'flight')" />
             </div>
         }
     </td>

diff --git a/src/NuGetGallery/Areas/Admin/Views/Lucene/Index.cshtml b/src/NuGetGallery/Areas/Admin/Views/Lucene/Index.cshtml
@@ -39,7 +39,7 @@
         {
             @Html.AntiForgeryToken()
             <fieldset class="form">
-                <input type="submit" value="Rebuild Now" />
+                <input type="submit" class="btn-brand" value="Rebuild Now" />
                 <p>NOTE: This will only affect the current instance!</p>
             </fieldset>
         }