Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[UI] Add new theme to Admin pages (part 2) #9890

Merged
merged 1 commit into from
Apr 2, 2024
Merged

[UI] Add new theme to Admin pages (part 2) #9890

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions src/Bootstrap/dist/css/bootstrap.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

35 changes: 35 additions & 0 deletions src/Bootstrap/less/buttons.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
20 changes: 13 additions & 7 deletions src/NuGetGallery/Areas/Admin/Views/ChangeUsername/Index.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>)
Expand Down Expand Up @@ -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>
Expand All @@ -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")
Expand Down
4 changes: 2 additions & 2 deletions src/NuGetGallery/Areas/Admin/Views/CorrectIsLatest/Index.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>)
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/NuGetGallery/Areas/Admin/Views/Delete/_ReflowBulk.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
}
2 changes: 1 addition & 1 deletion src/NuGetGallery/Areas/Admin/Views/Delete/_ReflowBulkConfirm.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
}
12 changes: 6 additions & 6 deletions src/NuGetGallery/Areas/Admin/Views/DeleteAccount/_DeleteUserAccountForm.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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." />
<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." />
10 changes: 6 additions & 4 deletions src/NuGetGallery/Areas/Admin/Views/PasswordAuthentication/Index.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()">
Expand Down
10 changes: 5 additions & 5 deletions src/NuGetGallery/Areas/Admin/Views/SecurityPolicy/Index.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
6 changes: 4 additions & 2 deletions src/NuGetGallery/Areas/Admin/Views/SiteAdmins/Index.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
12 changes: 6 additions & 6 deletions src/NuGetGallery/Views/Users/_DeleteUserAccountForm.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
2 changes: 1 addition & 1 deletion src/NuGetGallery/Views/Users/_UserOrganizationsListForDeletedAccount.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/NuGetGallery/Views/Users/_UserPackagesListForDeletedAccount.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down