Use a CSS module for the FirstUserForm component

agama-project · Jan 9, 2025 · c3cbe8e · c3cbe8e
1 parent 496dae3
commit c3cbe8e
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 16 deletions.
diff --git a/web/src/assets/styles/app.scss b/web/src/assets/styles/app.scss
@@ -26,16 +26,6 @@ button.remove-link:hover {
   color: var(--pf-v5-c-button--m-danger--BackgroundColor);
 }
 
-.first-username-dropdown {
-  position: absolute;
-  width: 100%;
-}
-
-.first-username-wrapper {
-  position: relative;
-  width: 100%;
-}
-
 #productSelectionForm {
   input[type="radio"] {
     align-self: center;

diff --git a/web/src/components/users/FirstUserForm.module.scss b/web/src/components/users/FirstUserForm.module.scss
@@ -0,0 +1,9 @@
+.dropdown {
+  position: absolute;
+  width: 100%;
+}
+
+.wrapper {
+  position: relative;
+  width: 100%;
+}
diff --git a/web/src/components/users/FirstUserForm.tsx b/web/src/components/users/FirstUserForm.tsx
@@ -43,6 +43,7 @@ import { _ } from "~/i18n";
 import { suggestUsernames } from "~/components/users/utils";
 import { useFirstUser, useFirstUserMutation } from "~/queries/users";
 import { FirstUser } from "~/types/users";
+import * as styles from "./FirstUserForm.module.scss";
 
 const UsernameSuggestions = ({
   isOpen = false,
@@ -56,7 +57,7 @@ const UsernameSuggestions = ({
   return (
     <Menu
       aria-label={_("Username suggestion dropdown")}
-      className="first-username-dropdown"
+      className={styles.dropdown}
       onMouseEnter={() => setInsideDropDown(true)}
       onMouseLeave={() => setInsideDropDown(false)}
     >
@@ -233,11 +234,7 @@ export default function FirstUserForm() {
                     />
                   </FormGroup>
 
-                  <FormGroup
-                    className="first-username-wrapper"
-                    fieldId="userName"
-                    label={_("Username")}
-                  >
+                  <FormGroup className={styles.wrapper} fieldId="userName" label={_("Username")}>
                     <TextInput
                       id="userName"
                       name="userName"