Update styling for Manage Users

CDCgov · Jan 27, 2025 · c7c7652 · c7c7652
1 parent 0e083ec
commit c7c7652
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 12 deletions.
diff --git a/frontend/src/app/Settings/Users/ManageUsers.scss b/frontend/src/app/Settings/Users/ManageUsers.scss
@@ -39,6 +39,10 @@
     width: 75%;
   }
 
+  .clear-filter-button {
+    width: auto !important;
+  }
+
   .usa-sidenav__item.users-sidenav-item button {
     width: 100%;
   }

diff --git a/frontend/src/app/Settings/Users/ManageUsers.tsx b/frontend/src/app/Settings/Users/ManageUsers.tsx
@@ -434,19 +434,10 @@ const ManageUsers: React.FC<Props> = ({
             {localUsers.length <= 0 ? (
               <div
                 className={
-                  "display-flex flex-column flex-align-center margin-top-2 no-results-found"
+                  "display-flex flex-column flex-align-center margin-top-8 no-results-found"
                 }
               >
                 <div className="margin-bottom-105">No results found.</div>
-                <div>
-                  Check for spelling errors or
-                  <Button
-                    className={"margin-left-1"}
-                    id={`no-results-clear-filter-button`}
-                    onClick={() => setDebouncedQueryString("")}
-                    label={"Clear search filter"}
-                  ></Button>
-                </div>
               </div>
             ) : null}
             {activeUser ? (

diff --git a/frontend/src/app/Settings/Users/UsersSideNav.tsx b/frontend/src/app/Settings/Users/UsersSideNav.tsx
@@ -8,6 +8,7 @@ import { formatUserStatus } from "../../utils/text";
 import { OktaUserStatus } from "../../utils/user";
 import "./ManageUsers.scss";
 import SearchInput from "../../testQueue/addToQueue/SearchInput";
+import Button from "../../commonComponents/Button/Button";
 
 import { LimitedUser } from "./ManageUsersContainer";
 
@@ -34,14 +35,15 @@ const UsersSideNav: React.FC<Props> = ({
     <div className="display-block users-sidenav">
       <h2 className="users-sidenav-header">Users</h2>
       <SearchInput
+        className="padding-right-2"
         onInputChange={(e) => setDebouncedQueryString(e.target.value)}
         disabled={true}
         queryString={debouncedQueryString}
         placeholder={`Search by name`}
         showSubmitButton={false}
       />
       <nav
-        className="prime-secondary-nav maxh-tablet-lg overflow-y-scroll"
+        className="prime-secondary-nav maxh-tablet-lg"
         aria-label="Tertiary navigation"
       >
         <div
@@ -51,9 +53,20 @@ const UsersSideNav: React.FC<Props> = ({
         >
           {users.length === 0 && (
             <div className={"usa-sidenav__item users-sidenav-item"}>
-              <div className={"padding-105 padding-right-2 padding-left-3"}>
+              <div className={"padding-2 padding-left-3 padding-top-3"}>
                 No results found.
               </div>
+              <div className={"padding-105 padding-left-3 padding-y-0"}>
+                Check for spelling errors or
+              </div>
+              <div className={"padding-1 padding-left-3 padding-bottom-4"}>
+                <Button
+                  className={"clear-filter-button"}
+                  id={`clear-filter-button`}
+                  onClick={() => setDebouncedQueryString("")}
+                  label={"Clear search filter"}
+                ></Button>
+              </div>
             </div>
           )}
           {users.map((user: LimitedUser) => {