From becb91a0ff1415a041da0ad9505a13ee734c9f73 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Wed, 25 Sep 2024 06:35:10 -0400
Subject: [PATCH 01/57] Block

---
 src/common/components/Block/Block.scss | 6 +++---
 src/common/components/Block/Block.tsx  | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/common/components/Block/Block.scss b/src/common/components/Block/Block.scss
index c6b2529..537d8db 100644
--- a/src/common/components/Block/Block.scss
+++ b/src/common/components/Block/Block.scss
@@ -1,10 +1,10 @@
-.block {
+.ls-block {
   font-size: 0.875rem;
 
   margin: 0.75rem;
   padding: 1rem;
 
-  .block-title {
+  .ls-block-title {
     font-size: 1.25rem;
     font-weight: 500;
     text-transform: uppercase;
@@ -12,7 +12,7 @@
     margin-bottom: 0.5rem;
   }
 
-  .block-content {
+  .ls-block-content {
     color: var(--ion-color-medium);
 
     margin-bottom: 0.5rem;
diff --git a/src/common/components/Block/Block.tsx b/src/common/components/Block/Block.tsx
index efaf833..35e2533 100644
--- a/src/common/components/Block/Block.tsx
+++ b/src/common/components/Block/Block.tsx
@@ -23,14 +23,14 @@ interface BlockProps extends BaseComponentProps {
  */
 const Block = ({ className, content, testid = 'block', title }: BlockProps): JSX.Element => {
   return (
-    <div className={classNames('block', className)} data-testid={testid}>
+    <div className={classNames('ls-block', className)} data-testid={testid}>
       {title && (
-        <div className="block-title" data-testid={`${testid}-title`}>
+        <div className="ls-block-title" data-testid={`${testid}-title`}>
           {title}
         </div>
       )}
       {content && (
-        <div className="block-content" data-testid={`${testid}-content`}>
+        <div className="ls-block-content" data-testid={`${testid}-content`}>
           {content}
         </div>
       )}

From 8c43a53a4d237fef3ce995c1a2277533b75e9ff1 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Wed, 25 Sep 2024 06:35:55 -0400
Subject: [PATCH 02/57] ButtonRow

---
 src/common/components/Button/ButtonRow.scss           | 4 ++--
 src/common/components/Button/ButtonRow.tsx            | 6 +++++-
 src/pages/Account/components/Profile/ProfileForm.scss | 2 +-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/common/components/Button/ButtonRow.scss b/src/common/components/Button/ButtonRow.scss
index 94c83b5..3e1288b 100644
--- a/src/common/components/Button/ButtonRow.scss
+++ b/src/common/components/Button/ButtonRow.scss
@@ -1,5 +1,5 @@
-.button-row {
-  &.button-row-block {
+.ls-button-row {
+  &.ls-button-row-block {
     ion-button {
       flex-grow: 1;
     }
diff --git a/src/common/components/Button/ButtonRow.tsx b/src/common/components/Button/ButtonRow.tsx
index 4b398f6..5baf236 100644
--- a/src/common/components/Button/ButtonRow.tsx
+++ b/src/common/components/Button/ButtonRow.tsx
@@ -30,7 +30,11 @@ const ButtonRow = ({
 }: ButtonRowProps): JSX.Element => {
   return (
     <IonRow
-      className={classNames('button-row', { 'button-row-block': expand === 'block' }, className)}
+      className={classNames(
+        'ls-button-row',
+        { 'ls-button-row-block': expand === 'block' },
+        className,
+      )}
       data-testid={testid}
       {...rowProps}
     />
diff --git a/src/pages/Account/components/Profile/ProfileForm.scss b/src/pages/Account/components/Profile/ProfileForm.scss
index 6a491cd..ac30e2a 100644
--- a/src/pages/Account/components/Profile/ProfileForm.scss
+++ b/src/pages/Account/components/Profile/ProfileForm.scss
@@ -4,7 +4,7 @@
     margin-bottom: 0.5rem;
   }
 
-  .button-row {
+  .ls-button-row {
     margin-top: 2rem;
   }
 }

From 34dc326f6f6a2c120a484d2c8d83ca81352c3d3c Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Wed, 25 Sep 2024 06:45:51 -0400
Subject: [PATCH 03/57] CardRow

---
 src/common/components/Card/CardRow.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/components/Card/CardRow.tsx b/src/common/components/Card/CardRow.tsx
index 0ec1097..6cae38f 100644
--- a/src/common/components/Card/CardRow.tsx
+++ b/src/common/components/Card/CardRow.tsx
@@ -30,7 +30,7 @@ const CardRow = ({
   ...colProps
 }: CardRowProps): JSX.Element => {
   return (
-    <IonGrid className={classNames('row-card', className)} data-testid={testid}>
+    <IonGrid className={classNames('ls-card-row', className)} data-testid={testid}>
       <IonRow>
         <IonCol
           sizeMd={sizeMd}

From ce280a0d153a2d339b44609fcf779b9f95acd977 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Wed, 25 Sep 2024 06:45:57 -0400
Subject: [PATCH 04/57] MessageCard

---
 src/common/components/Card/MessageCard.scss |  9 +++++----
 src/common/components/Card/MessageCard.tsx  | 21 +++++++++++++++------
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/common/components/Card/MessageCard.scss b/src/common/components/Card/MessageCard.scss
index eb05b4c..4d16dd9 100644
--- a/src/common/components/Card/MessageCard.scss
+++ b/src/common/components/Card/MessageCard.scss
@@ -1,14 +1,15 @@
-.card-message {
+.ls-message-card {
   margin: 0;
 
-  .title-block {
+  .ls-message-card-title-block {
     display: flex;
     flex-direction: row;
     align-items: center;
 
-    .icon {
-      font-size: 1.25rem;
+    .ls-message-card-icon {
       margin-right: 0.5rem;
+
+      font-size: 1.25rem;
     }
   }
 }
diff --git a/src/common/components/Card/MessageCard.tsx b/src/common/components/Card/MessageCard.tsx
index dd8e5c6..73d9234 100644
--- a/src/common/components/Card/MessageCard.tsx
+++ b/src/common/components/Card/MessageCard.tsx
@@ -48,17 +48,26 @@ const MessageCard = ({
   title,
 }: MessageCardProps): JSX.Element => {
   return (
-    <IonCard className={classNames('card-message', className)} data-testid={testid} color={color}>
+    <IonCard
+      className={classNames('ls-message-card', className)}
+      data-testid={testid}
+      color={color}
+    >
       {title && (
         <IonCardHeader className="header">
-          <IonCardTitle className="title-block">
-            {icon && <Icon icon={icon} data-testid={`${testid}-icon`} />}
-            <div className="title" data-testid={`${testid}-title`}>
+          <IonCardTitle className="ls-message-card-title-block">
+            {icon && (
+              <Icon className="ls-message-card-icon" icon={icon} data-testid={`${testid}-icon`} />
+            )}
+            <div className="ls-message-card-title" data-testid={`${testid}-title`}>
               {title}
             </div>
           </IonCardTitle>
           {subtitle && (
-            <IonCardSubtitle className="subtitle" data-testid={`${testid}-subtitle`}>
+            <IonCardSubtitle
+              className="ls-message-card-subtitle"
+              data-testid={`${testid}-subtitle`}
+            >
               {subtitle}
             </IonCardSubtitle>
           )}
@@ -66,7 +75,7 @@ const MessageCard = ({
       )}
 
       {content && (
-        <IonCardContent className="content" data-testid={`${testid}-content`}>
+        <IonCardContent className="ls-message-card-content" data-testid={`${testid}-content`}>
           {content}
         </IonCardContent>
       )}

From c84ae5b73e8ee6b009f0d004d9e11ca53c7ffe6f Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Wed, 25 Sep 2024 06:50:17 -0400
Subject: [PATCH 05/57] Container

---
 src/common/components/Content/Container.scss | 8 ++++----
 src/common/components/Content/Container.tsx  | 5 ++++-
 src/pages/Auth/SignIn/SignInPage.scss        | 4 ++--
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/common/components/Content/Container.scss b/src/common/components/Content/Container.scss
index 70e11da..9dfb91f 100644
--- a/src/common/components/Content/Container.scss
+++ b/src/common/components/Content/Container.scss
@@ -1,4 +1,4 @@
-.container {
+.ls-container {
   width: 100%;
 
   margin-left: auto;
@@ -14,21 +14,21 @@
 
   // md
   @media (min-width: 768px) {
-    &.fixed {
+    &.ls-container-fixed {
       width: 720px;
     }
   }
 
   // lg
   @media (min-width: 992px) {
-    &.fixed {
+    &.ls-container-fixed {
       width: 960px;
     }
   }
 
   // xl
   @media (min-width: 1200px) {
-    &.fixed {
+    &.ls-container-fixed {
       width: 1140px;
     }
   }
diff --git a/src/common/components/Content/Container.tsx b/src/common/components/Content/Container.tsx
index 308edad..dae249f 100644
--- a/src/common/components/Content/Container.tsx
+++ b/src/common/components/Content/Container.tsx
@@ -32,7 +32,10 @@ const Container = ({
   testid = 'container',
 }: ContainerProps): JSX.Element => {
   return (
-    <div className={classNames('container', { fixed: fixed }, className)} data-testid={testid}>
+    <div
+      className={classNames('ls-container', { 'ls-container-fixed': fixed }, className)}
+      data-testid={testid}
+    >
       {children}
     </div>
   );
diff --git a/src/pages/Auth/SignIn/SignInPage.scss b/src/pages/Auth/SignIn/SignInPage.scss
index 65b8253..fb29119 100644
--- a/src/pages/Auth/SignIn/SignInPage.scss
+++ b/src/pages/Auth/SignIn/SignInPage.scss
@@ -1,6 +1,6 @@
 .page-signin {
-  .container {
-    &.fixed {
+  .ls-container {
+    &.ls-container-fixed {
       max-width: 576px;
     }
 

From e9942acb5e112929736b6ea977865976860f1f68 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Wed, 25 Sep 2024 07:29:24 -0400
Subject: [PATCH 06/57] PageHeader

---
 src/common/components/Content/PageHeader.scss         | 2 +-
 src/common/components/Content/PageHeader.tsx          | 6 +++++-
 src/pages/Users/components/UserList/UserListPage.scss | 4 ----
 src/pages/Users/components/UserList/UserListPage.tsx  | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/common/components/Content/PageHeader.scss b/src/common/components/Content/PageHeader.scss
index b97a54f..86ce1c1 100644
--- a/src/common/components/Content/PageHeader.scss
+++ b/src/common/components/Content/PageHeader.scss
@@ -1,4 +1,4 @@
-.page-header {
+.ls-page-header {
   &.row-header {
     font-size: 1.5rem;
     line-height: 2rem;
diff --git a/src/common/components/Content/PageHeader.tsx b/src/common/components/Content/PageHeader.tsx
index 23774c6..fc33931 100644
--- a/src/common/components/Content/PageHeader.tsx
+++ b/src/common/components/Content/PageHeader.tsx
@@ -33,7 +33,11 @@ const PageHeader = ({
   ...props
 }: PageHeaderProps): JSX.Element => {
   return (
-    <HeaderRow className={classNames('page-header', className)} data-testid={testid} {...props} />
+    <HeaderRow
+      className={classNames('ls-page-header', className)}
+      data-testid={testid}
+      {...props}
+    />
   );
 };
 
diff --git a/src/pages/Users/components/UserList/UserListPage.scss b/src/pages/Users/components/UserList/UserListPage.scss
index c1246b0..64469f7 100644
--- a/src/pages/Users/components/UserList/UserListPage.scss
+++ b/src/pages/Users/components/UserList/UserListPage.scss
@@ -1,8 +1,4 @@
 .ls-page-user-list {
-  .page-header {
-    margin-top: 1rem;
-  }
-
   .list-user {
     margin-top: 1rem;
     margin-bottom: 5rem;
diff --git a/src/pages/Users/components/UserList/UserListPage.tsx b/src/pages/Users/components/UserList/UserListPage.tsx
index 3cbef3b..64b691d 100644
--- a/src/pages/Users/components/UserList/UserListPage.tsx
+++ b/src/pages/Users/components/UserList/UserListPage.tsx
@@ -70,7 +70,7 @@ export const UserListPage = ({ testid = 'page-user-list' }: PropsWithTestId): JS
           </IonRefresher>
 
           <Container fixed>
-            <PageHeader border inset className="ion-hide-md-down">
+            <PageHeader border inset className="ion-margin-top ion-hide-md-down">
               <div>Users</div>
               <IonButtons>
                 <IonButton

From 3432ee8f240a4a6563d063892f64ee51d412418e Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Wed, 25 Sep 2024 07:51:01 -0400
Subject: [PATCH 07/57] Header

---
 src/common/components/Header/Header.scss |  6 +++---
 src/common/components/Header/Header.tsx  | 14 +++++++++++---
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/common/components/Header/Header.scss b/src/common/components/Header/Header.scss
index 3fa571f..3aad49d 100644
--- a/src/common/components/Header/Header.scss
+++ b/src/common/components/Header/Header.scss
@@ -1,5 +1,5 @@
-.header-app {
-  .logo {
+.ls-header {
+  .ls-header-logo {
     height: 2rem;
     width: 2rem;
 
@@ -8,7 +8,7 @@
     border-radius: 0.25rem;
   }
 
-  .nav-main {
+  .ls-header-nav-main {
     justify-content: center;
     column-gap: 0.5rem;
 
diff --git a/src/common/components/Header/Header.tsx b/src/common/components/Header/Header.tsx
index c8368b9..82ee1c6 100644
--- a/src/common/components/Header/Header.tsx
+++ b/src/common/components/Header/Header.tsx
@@ -52,19 +52,27 @@ const Header = ({
   const { isActive: isActiveProgressBar, progressBar } = useProgress();
 
   return (
-    <IonHeader className="header-app" data-testid="header-app">
+    <IonHeader className="ls-header" data-testid="header-app">
       <IonToolbar>
         <IonButtons slot="start">
           {backButton ? (
             <IonBackButton defaultHref={defaultHref} data-testid={`${testid}-button-back`} />
           ) : (
-            <img className="logo" src={logo} alt="Logo" data-testid={`${testid}-image-logo`} />
+            <img
+              className="ls-header-logo"
+              src={logo}
+              alt="Logo"
+              data-testid={`${testid}-image-logo`}
+            />
           )}
         </IonButtons>
         <IonTitle className="ion-hide-md-up" data-testid={`${testid}-title`}>
           {title}
         </IonTitle>
-        <IonButtons className="nav-main ion-hide-md-down" data-testid={`${testid}-menu-row`}>
+        <IonButtons
+          className="ls-header-nav-main ion-hide-md-down"
+          data-testid={`${testid}-menu-row`}
+        >
           {isAuthenticated && (
             <>
               <IonButton routerLink="/tabs/home">Home</IonButton>

From d5752e76b8cd5801cda82fb70aaf89a5ed62d00d Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Wed, 25 Sep 2024 07:59:53 -0400
Subject: [PATCH 08/57] Icon

---
 src/common/components/Icon/Icon.tsx                   | 2 +-
 src/common/components/Menu/AppMenu.scss               | 2 +-
 src/common/components/Menu/AppMenu.tsx                | 8 ++++----
 src/common/components/Router/TabNavigation.scss       | 2 +-
 src/pages/Users/components/UserAdd/UserAddFab.scss    | 2 +-
 src/pages/Users/components/UserList/UserListItem.scss | 2 +-
 6 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/common/components/Icon/Icon.tsx b/src/common/components/Icon/Icon.tsx
index bd2af6f..2407ff8 100644
--- a/src/common/components/Icon/Icon.tsx
+++ b/src/common/components/Icon/Icon.tsx
@@ -105,7 +105,7 @@ const Icon = ({
   return (
     <IonText color={color} slot={slot} data-testid={testid}>
       <FontAwesomeIcon
-        className={classNames('icon', className)}
+        className={classNames('ls-icon', className)}
         icon={faIcon}
         {...iconProps}
         data-testid={`${testid}-icon`}
diff --git a/src/common/components/Menu/AppMenu.scss b/src/common/components/Menu/AppMenu.scss
index 449ed5c..244acf4 100644
--- a/src/common/components/Menu/AppMenu.scss
+++ b/src/common/components/Menu/AppMenu.scss
@@ -19,7 +19,7 @@
     }
   }
 
-  .icon {
+  .ls-icon {
     margin-right: 1rem;
 
     opacity: 0.5;
diff --git a/src/common/components/Menu/AppMenu.tsx b/src/common/components/Menu/AppMenu.tsx
index 0259a69..2ff7723 100644
--- a/src/common/components/Menu/AppMenu.tsx
+++ b/src/common/components/Menu/AppMenu.tsx
@@ -63,13 +63,13 @@ const AppMenu = ({ className, testid = 'menu-app' }: AppMenuProps): JSX.Element
           <>
             <IonMenuToggle>
               <IonItem routerLink="/tabs/home" lines="full" data-testid={`${testid}-item-home`}>
-                <Icon icon={IconName.House} fixedWidth className="icon" />
+                <Icon icon={IconName.House} fixedWidth />
                 <IonLabel>Home</IonLabel>
               </IonItem>
             </IonMenuToggle>
             <IonMenuToggle>
               <IonItem routerLink="/tabs/users" lines="full" data-testid={`${testid}-item-users`}>
-                <Icon icon={IconName.Users} fixedWidth className="icon" />
+                <Icon icon={IconName.Users} fixedWidth />
                 <IonLabel>Users</IonLabel>
               </IonItem>
             </IonMenuToggle>
@@ -79,7 +79,7 @@ const AppMenu = ({ className, testid = 'menu-app' }: AppMenuProps): JSX.Element
                 lines="full"
                 data-testid={`${testid}-item-account`}
               >
-                <Icon icon={IconName.UserGear} fixedWidth className="icon" />
+                <Icon icon={IconName.UserGear} fixedWidth />
                 <IonLabel>Account</IonLabel>
               </IonItem>
             </IonMenuToggle>
@@ -89,7 +89,7 @@ const AppMenu = ({ className, testid = 'menu-app' }: AppMenuProps): JSX.Element
                 lines="full"
                 data-testid={`${testid}-item-signout`}
               >
-                <Icon icon={IconName.SignOut} fixedWidth className="icon" />
+                <Icon icon={IconName.SignOut} fixedWidth />
                 <IonLabel>Sign Out</IonLabel>
               </IonItem>
             </IonMenuToggle>
diff --git a/src/common/components/Router/TabNavigation.scss b/src/common/components/Router/TabNavigation.scss
index 13f051b..1c66f05 100644
--- a/src/common/components/Router/TabNavigation.scss
+++ b/src/common/components/Router/TabNavigation.scss
@@ -1,6 +1,6 @@
 .tab-navigation {
   ion-tab-button {
-    .icon {
+    .ls-icon {
       margin-top: 0.375rem;
       margin-bottom: 0.125rem;
     }
diff --git a/src/pages/Users/components/UserAdd/UserAddFab.scss b/src/pages/Users/components/UserAdd/UserAddFab.scss
index d30d356..46ff6b3 100644
--- a/src/pages/Users/components/UserAdd/UserAddFab.scss
+++ b/src/pages/Users/components/UserAdd/UserAddFab.scss
@@ -1,5 +1,5 @@
 .ls-fab-user-add {
-  .icon {
+  .ls-icon {
     font-size: 1.125rem;
   }
 }
diff --git a/src/pages/Users/components/UserList/UserListItem.scss b/src/pages/Users/components/UserList/UserListItem.scss
index cc88f9c..44a4cba 100644
--- a/src/pages/Users/components/UserList/UserListItem.scss
+++ b/src/pages/Users/components/UserList/UserListItem.scss
@@ -32,7 +32,7 @@
   }
 
   ion-item-option {
-    .icon {
+    .ls-icon {
       margin-right: 0.375rem;
     }
   }

From 234ed3bd95f1e1c5b8ac809fa498f5fe50bda3aa Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Wed, 25 Sep 2024 08:13:13 -0400
Subject: [PATCH 09/57] Avatar

---
 src/common/components/Icon/Avatar.scss        | 24 ++++++++---------
 src/common/components/Icon/Avatar.tsx         | 26 +++++++++++++------
 src/common/components/Menu/AppMenu.scss       |  3 ++-
 .../Users/components/UserList/UserCard.scss   |  2 +-
 .../components/UserList/UserListItem.scss     |  2 +-
 5 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/src/common/components/Icon/Avatar.scss b/src/common/components/Icon/Avatar.scss
index f278101..0ee2db0 100644
--- a/src/common/components/Icon/Avatar.scss
+++ b/src/common/components/Icon/Avatar.scss
@@ -1,4 +1,4 @@
-.avatar {
+.ls-avatar {
   height: 1.5rem;
   width: 1.5rem;
 
@@ -10,22 +10,22 @@
 
   --border-radius: 0.25rem;
 
-  &.avatar-round {
+  &.ls-avatar-round {
     --border-radius: 50%;
   }
 
-  &.avatar-square {
+  &.ls-avatar-square {
     --border-radius: 0;
   }
 
-  &.avatar-small {
+  &.ls-avatar-small {
     height: 1.25rem;
     width: 1.25rem;
 
     font-size: 0.875rem;
   }
 
-  &.avatar-large {
+  &.ls-avatar-large {
     height: 2rem;
     width: 2rem;
 
@@ -33,7 +33,7 @@
     font-weight: 700;
   }
 
-  .initial {
+  .ls-avatar-initial {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -42,32 +42,32 @@
     width: 100%;
   }
 
-  .primary {
+  .ls-avatar-color-primary {
     background-color: var(--ion-color-primary);
     color: var(--ion-color-primary-contrast);
   }
 
-  .secondary {
+  .ls-avatar-color-secondary {
     background-color: var(--ion-color-secondary);
     color: var(--ion-color-secondary-contrast);
   }
 
-  .tertiary {
+  .ls-avatar-color-tertiary {
     background-color: var(--ion-color-tertiary);
     color: var(--ion-color-tertiary-contrast);
   }
 
-  .success {
+  .ls-avatar-color-success {
     background-color: var(--ion-color-success);
     color: var(--ion-color-success-contrast);
   }
 
-  .warning {
+  .ls-avatar-color-warning {
     background-color: var(--ion-color-warning);
     color: var(--ion-color-warning-contrast);
   }
 
-  .danger {
+  .ls-avatar-color-danger {
     background-color: var(--ion-color-danger);
     color: var(--ion-color-danger-contrast);
   }
diff --git a/src/common/components/Icon/Avatar.tsx b/src/common/components/Icon/Avatar.tsx
index 8d13e60..f490dbe 100644
--- a/src/common/components/Icon/Avatar.tsx
+++ b/src/common/components/Icon/Avatar.tsx
@@ -33,7 +33,14 @@ interface AvatarProps extends BaseComponentProps {
 /**
  * List of possible colors for generated Avatars.
  */
-const COLORS = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger'];
+const COLORS = [
+  'ls-avatar-color-primary',
+  'ls-avatar-color-secondary',
+  'ls-avatar-color-tertiary',
+  'ls-avatar-color-success',
+  'ls-avatar-color-warning',
+  'ls-avatar-color-danger',
+];
 
 /**
  * The `Avatar` component renders an icon which uniquely represents a person or
@@ -62,20 +69,23 @@ const Avatar = ({
   return (
     <IonAvatar
       className={classNames(
-        'avatar',
-        { 'avatar-round': shape === 'round' },
-        { 'avatar-square': shape === 'square' },
-        { 'avatar-small': size === 'small' },
-        { 'avatar-large': size === 'large' },
+        'ls-avatar',
+        { 'ls-avatar-round': shape === 'round' },
+        { 'ls-avatar-square': shape === 'square' },
+        { 'ls-avatar-small': size === 'small' },
+        { 'ls-avatar-large': size === 'large' },
         className,
       )}
       data-testid={testid}
       title={trimmedValue}
     >
       {src ? (
-        <img className="image" src={src} alt={value} data-testid={`${testid}-image`} />
+        <img className="ls-avatar-image" src={src} alt={value} data-testid={`${testid}-image`} />
       ) : (
-        <div className={classNames('initial', colorClass)} data-testid={`${testid}-initial`}>
+        <div
+          className={classNames('ls-avatar-initial', colorClass)}
+          data-testid={`${testid}-initial`}
+        >
           {initial}
         </div>
       )}
diff --git a/src/common/components/Menu/AppMenu.scss b/src/common/components/Menu/AppMenu.scss
index 244acf4..c771ccd 100644
--- a/src/common/components/Menu/AppMenu.scss
+++ b/src/common/components/Menu/AppMenu.scss
@@ -4,6 +4,7 @@
 
     ion-row {
       column-gap: 0.5rem;
+      flex-wrap: nowrap;
 
       > * {
         min-width: 0;
@@ -13,7 +14,7 @@
         text-overflow: ellipsis;
       }
 
-      .avatar {
+      .ls-avatar {
         flex-shrink: 0;
       }
     }
diff --git a/src/pages/Users/components/UserList/UserCard.scss b/src/pages/Users/components/UserList/UserCard.scss
index 9768844..2b04ddd 100644
--- a/src/pages/Users/components/UserList/UserCard.scss
+++ b/src/pages/Users/components/UserList/UserCard.scss
@@ -6,7 +6,7 @@
     align-items: center;
     column-gap: 1rem;
 
-    .avatar {
+    .ls-avatar {
       height: 3rem;
       width: 3rem;
 
diff --git a/src/pages/Users/components/UserList/UserListItem.scss b/src/pages/Users/components/UserList/UserListItem.scss
index 44a4cba..3769e8e 100644
--- a/src/pages/Users/components/UserList/UserListItem.scss
+++ b/src/pages/Users/components/UserList/UserListItem.scss
@@ -3,7 +3,7 @@
     --inner-padding-bottom: 0.5rem;
     --inner-padding-top: 0.5rem;
 
-    .avatar {
+    .ls-avatar {
       margin-right: 1rem;
     }
 

From bd60717e1509f8a19878387944a73539403c0a68 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Wed, 25 Sep 2024 08:42:49 -0400
Subject: [PATCH 10/57] CheckboxInput

---
 src/common/components/Input/CheckboxInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/components/Input/CheckboxInput.tsx b/src/common/components/Input/CheckboxInput.tsx
index bb66e97..4486c49 100644
--- a/src/common/components/Input/CheckboxInput.tsx
+++ b/src/common/components/Input/CheckboxInput.tsx
@@ -35,7 +35,7 @@ const CheckboxInput = ({
   className,
   name,
   onIonChange,
-  testid = 'ls-input-checkbox',
+  testid = 'input-checkbox',
   value,
   ...checkboxProps
 }: CheckboxInputProps): JSX.Element => {

From 08cc2d81f711a065a82ec63aaf5f22962c804c54 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Wed, 25 Sep 2024 08:42:57 -0400
Subject: [PATCH 11/57] Avatar tests

---
 .../components/Icon/__tests__/Avatar.test.tsx | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/common/components/Icon/__tests__/Avatar.test.tsx b/src/common/components/Icon/__tests__/Avatar.test.tsx
index 99dd9a4..529f65d 100644
--- a/src/common/components/Icon/__tests__/Avatar.test.tsx
+++ b/src/common/components/Icon/__tests__/Avatar.test.tsx
@@ -52,8 +52,8 @@ describe('Avatar', () => {
     await screen.findByTestId('avatar');
 
     // ASSERT
-    expect(screen.getByTestId('avatar')).toHaveClass('avatar-small');
-    expect(screen.getByTestId('avatar')).not.toHaveClass('avatar-large');
+    expect(screen.getByTestId('avatar')).toHaveClass('ls-avatar-small');
+    expect(screen.getByTestId('avatar')).not.toHaveClass('ls-avatar-large');
   });
 
   it('should render large size', async () => {
@@ -62,8 +62,8 @@ describe('Avatar', () => {
     await screen.findByTestId('avatar');
 
     // ASSERT
-    expect(screen.getByTestId('avatar')).not.toHaveClass('avatar-small');
-    expect(screen.getByTestId('avatar')).toHaveClass('avatar-large');
+    expect(screen.getByTestId('avatar')).not.toHaveClass('ls-avatar-small');
+    expect(screen.getByTestId('avatar')).toHaveClass('ls-avatar-large');
   });
 
   it('should render default size', async () => {
@@ -72,8 +72,8 @@ describe('Avatar', () => {
     await screen.findByTestId('avatar');
 
     // ASSERT
-    expect(screen.getByTestId('avatar')).not.toHaveClass('avatar-small');
-    expect(screen.getByTestId('avatar')).not.toHaveClass('avatar-large');
+    expect(screen.getByTestId('avatar')).not.toHaveClass('ls-avatar-small');
+    expect(screen.getByTestId('avatar')).not.toHaveClass('ls-avatar-large');
   });
 
   it('should render round shape', async () => {
@@ -82,8 +82,8 @@ describe('Avatar', () => {
     await screen.findByTestId('avatar');
 
     // ASSERT
-    expect(screen.getByTestId('avatar')).toHaveClass('avatar-round');
-    expect(screen.getByTestId('avatar')).not.toHaveClass('avatar-square');
+    expect(screen.getByTestId('avatar')).toHaveClass('ls-avatar-round');
+    expect(screen.getByTestId('avatar')).not.toHaveClass('ls-avatar-square');
   });
 
   it('should render square shape', async () => {
@@ -92,8 +92,8 @@ describe('Avatar', () => {
     await screen.findByTestId('avatar');
 
     // ASSERT
-    expect(screen.getByTestId('avatar')).not.toHaveClass('avatar-round');
-    expect(screen.getByTestId('avatar')).toHaveClass('avatar-square');
+    expect(screen.getByTestId('avatar')).not.toHaveClass('ls-avatar-round');
+    expect(screen.getByTestId('avatar')).toHaveClass('ls-avatar-square');
   });
 
   it('should render default shape', async () => {
@@ -102,7 +102,7 @@ describe('Avatar', () => {
     await screen.findByTestId('avatar');
 
     // ASSERT
-    expect(screen.getByTestId('avatar')).not.toHaveClass('avatar-round');
-    expect(screen.getByTestId('avatar')).not.toHaveClass('avatar-square');
+    expect(screen.getByTestId('avatar')).not.toHaveClass('ls-avatar-round');
+    expect(screen.getByTestId('avatar')).not.toHaveClass('ls-avatar-square');
   });
 });

From d2c35858b8691e0db1f3007fcf73bb8b8f0567bd Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Wed, 25 Sep 2024 08:48:40 -0400
Subject: [PATCH 12/57] DateInput

---
 src/common/components/Input/DateInput.scss | 2 +-
 src/common/components/Input/DateInput.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/common/components/Input/DateInput.scss b/src/common/components/Input/DateInput.scss
index 87cebee..9dab541 100644
--- a/src/common/components/Input/DateInput.scss
+++ b/src/common/components/Input/DateInput.scss
@@ -4,7 +4,7 @@ ion-input.ls-date-input {
   }
 }
 
-ion-modal.ls-date-modal {
+ion-modal.ls-date-input-modal {
   --height: fit-content;
   --width: fit-content;
 
diff --git a/src/common/components/Input/DateInput.tsx b/src/common/components/Input/DateInput.tsx
index 13d5160..4ca971c 100644
--- a/src/common/components/Input/DateInput.tsx
+++ b/src/common/components/Input/DateInput.tsx
@@ -142,7 +142,7 @@ const DateInput = ({
       </IonInput>
 
       <IonModal
-        className="ls-date-modal"
+        className="ls-date-input-modal"
         data-testid={`${testid}-modal`}
         isOpen={isOpen}
         onIonModalDidDismiss={onDidDismiss}

From bd82ab8ec868a71fc353e82ae1319d1a830bc821 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Wed, 25 Sep 2024 08:52:31 -0400
Subject: [PATCH 13/57] DatetimeInput

---
 src/common/components/Input/DatetimeInput.scss | 2 +-
 src/common/components/Input/DatetimeInput.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/common/components/Input/DatetimeInput.scss b/src/common/components/Input/DatetimeInput.scss
index b1f73df..eae1768 100644
--- a/src/common/components/Input/DatetimeInput.scss
+++ b/src/common/components/Input/DatetimeInput.scss
@@ -4,7 +4,7 @@ ion-input.ls-datetime-input {
   }
 }
 
-ion-modal.ls-datetime-modal {
+ion-modal.ls-datetime-input-modal {
   --height: fit-content;
   --width: fit-content;
 
diff --git a/src/common/components/Input/DatetimeInput.tsx b/src/common/components/Input/DatetimeInput.tsx
index 83cfb6b..36d49dc 100644
--- a/src/common/components/Input/DatetimeInput.tsx
+++ b/src/common/components/Input/DatetimeInput.tsx
@@ -156,7 +156,7 @@ const DatetimeInput = ({
       </IonInput>
 
       <IonModal
-        className="ls-datetime-modal"
+        className="ls-datetime-input-modal"
         data-testid={`${testid}-modal`}
         isOpen={isOpen}
         onIonModalDidDismiss={onDidDismiss}

From 18e8312dc73cdef3d5b8cfd7ee48c5ecab9ccb81 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Wed, 25 Sep 2024 08:55:17 -0400
Subject: [PATCH 14/57] Input

---
 src/common/components/Input/Input.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/common/components/Input/Input.tsx b/src/common/components/Input/Input.tsx
index 1c21626..dc0f5e1 100644
--- a/src/common/components/Input/Input.tsx
+++ b/src/common/components/Input/Input.tsx
@@ -34,6 +34,7 @@ const Input = forwardRef<HTMLIonInputElement, InputProps>(
     return (
       <IonInput
         className={classNames(
+          'ls-input',
           className,
           { 'ion-touched': meta.touched },
           { 'ion-invalid': meta.error },

From a31459d0c9ba6a9b92f91d20d9f9aa78b3aea951 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Wed, 25 Sep 2024 09:02:11 -0400
Subject: [PATCH 15/57] RadioGroupInput

---
 src/common/components/Input/RadioGroupInput.scss | 4 ++--
 src/common/components/Input/RadioGroupInput.tsx  | 8 ++++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/common/components/Input/RadioGroupInput.scss b/src/common/components/Input/RadioGroupInput.scss
index f58c543..0abd5f1 100644
--- a/src/common/components/Input/RadioGroupInput.scss
+++ b/src/common/components/Input/RadioGroupInput.scss
@@ -1,7 +1,7 @@
-.ls-radiogroup-wrapper {
+.ls-radiogroup-input-wrapper {
   width: 100%;
 
-  .ls-radiogroup-error {
+  .ls-radiogroup-input-error {
     display: block;
     margin-bottom: 0.5rem;
 
diff --git a/src/common/components/Input/RadioGroupInput.tsx b/src/common/components/Input/RadioGroupInput.tsx
index a2aa652..d3ad8fd 100644
--- a/src/common/components/Input/RadioGroupInput.tsx
+++ b/src/common/components/Input/RadioGroupInput.tsx
@@ -46,7 +46,7 @@ const RadioGroupInput = ({
   };
 
   return (
-    <div className="ls-radiogroup-wrapper" data-testid={`${testid}-wrapper`}>
+    <div className="ls-radiogroup-input-wrapper" data-testid={`${testid}-wrapper`}>
       <IonRadioGroup
         className={classNames('ls-radiogroup-input', className)}
         data-testid={testid}
@@ -55,7 +55,11 @@ const RadioGroupInput = ({
         {...radioGroupProps}
       />
       {!!meta.error && (
-        <IonText className="ls-radiogroup-error" color="danger" data-testid={`${testid}-error`}>
+        <IonText
+          className="ls-radiogroup-input-error"
+          color="danger"
+          data-testid={`${testid}-error`}
+        >
           {meta.error}
         </IonText>
       )}

From 40544322677a7ba0bcec78403afef8658a9622ca Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Wed, 25 Sep 2024 09:09:30 -0400
Subject: [PATCH 16/57] RangeInput

---
 src/common/components/Input/RangeInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/components/Input/RangeInput.tsx b/src/common/components/Input/RangeInput.tsx
index ea4e65b..ea86e32 100644
--- a/src/common/components/Input/RangeInput.tsx
+++ b/src/common/components/Input/RangeInput.tsx
@@ -44,7 +44,7 @@ const RangeInput = ({
 
   return (
     <IonRange
-      className={classNames('ls-input-range', className)}
+      className={classNames('ls-range-input', className)}
       onIonChange={onChange}
       data-testid={testid}
       {...field}

From 9e53a2d4f3d51aad184c38b5669d8162fcc1c5ed Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Wed, 25 Sep 2024 11:29:03 -0400
Subject: [PATCH 17/57] SelectInput

---
 src/common/components/Input/SelectInput.scss | 4 ++--
 src/common/components/Input/SelectInput.tsx  | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/common/components/Input/SelectInput.scss b/src/common/components/Input/SelectInput.scss
index bbe309c..e190ba7 100644
--- a/src/common/components/Input/SelectInput.scss
+++ b/src/common/components/Input/SelectInput.scss
@@ -1,4 +1,4 @@
-.ls-input-select-wrapper {
+.ls-select-input-wrapper {
   width: 100%;
 
   display: flex;
@@ -10,7 +10,7 @@
     }
   }
 
-  .ls-input-select-error {
+  .ls-select-input-error {
     padding: 0.375rem 0 0.375rem 0;
 
     border-top-color: var(--ion-color-danger);
diff --git a/src/common/components/Input/SelectInput.tsx b/src/common/components/Input/SelectInput.tsx
index 23055b7..43725ab 100644
--- a/src/common/components/Input/SelectInput.tsx
+++ b/src/common/components/Input/SelectInput.tsx
@@ -40,10 +40,10 @@ const SelectInput = ({
   };
 
   return (
-    <div className="ls-input-select-wrapper">
+    <div className="ls-select-input-wrapper">
       <IonSelect
         className={classNames(
-          'ls-input-select',
+          'ls-select-input',
           className,
           { 'ion-touched': meta.touched },
           { 'ion-invalid': meta.error },
@@ -55,7 +55,7 @@ const SelectInput = ({
         {...selectProps}
       ></IonSelect>
       {meta.error && (
-        <IonText color="danger" className="ls-input-select-error text-xs font-normal">
+        <IonText color="danger" className="ls-select-input-error text-xs font-normal">
           {meta.error}
         </IonText>
       )}

From 85f23655312a4d678e5a8ef02060c15b474ab9ba Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Wed, 25 Sep 2024 11:30:57 -0400
Subject: [PATCH 18/57] ToggleInput

---
 src/common/components/Input/ToggleInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/components/Input/ToggleInput.tsx b/src/common/components/Input/ToggleInput.tsx
index de79c51..af85984 100644
--- a/src/common/components/Input/ToggleInput.tsx
+++ b/src/common/components/Input/ToggleInput.tsx
@@ -39,7 +39,7 @@ const ToggleInput = ({
 
   return (
     <IonToggle
-      className={classNames('input-toggle', className)}
+      className={classNames('ls-toggle-input', className)}
       checked={field.value}
       onIonChange={onChange}
       data-testid={testid}

From c4264ea2b10fcd7c1464db8a54bce672e915492d Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Wed, 25 Sep 2024 13:18:11 -0400
Subject: [PATCH 19/57] LoaderSkeleton

---
 src/common/components/Loader/LoaderSkeleton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/components/Loader/LoaderSkeleton.tsx b/src/common/components/Loader/LoaderSkeleton.tsx
index 37e35bb..4721004 100644
--- a/src/common/components/Loader/LoaderSkeleton.tsx
+++ b/src/common/components/Loader/LoaderSkeleton.tsx
@@ -35,7 +35,7 @@ const LoaderSkeleton = ({
   return (
     <IonSkeletonText
       animated={animated}
-      className={classNames('loader-skeleton', className)}
+      className={classNames('ls-loader-skeleton', className)}
       data-testid={testid}
       style={styles}
     ></IonSkeletonText>

From 398becb7809dfcbeed8b685bbb9981a7aa7886aa Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Wed, 25 Sep 2024 13:23:23 -0400
Subject: [PATCH 20/57] AddressDetail

---
 .../components/UserDetail/AddressDetail.scss  |  9 --------
 .../components/UserDetail/AddressDetail.tsx   | 21 ++++++++-----------
 2 files changed, 9 insertions(+), 21 deletions(-)
 delete mode 100644 src/pages/Users/components/UserDetail/AddressDetail.scss

diff --git a/src/pages/Users/components/UserDetail/AddressDetail.scss b/src/pages/Users/components/UserDetail/AddressDetail.scss
deleted file mode 100644
index cead5b6..0000000
--- a/src/pages/Users/components/UserDetail/AddressDetail.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.address-detail {
-  margin-bottom: 1rem;
-
-  .content {
-    .primary {
-      font-weight: 700;
-    }
-  }
-}
diff --git a/src/pages/Users/components/UserDetail/AddressDetail.tsx b/src/pages/Users/components/UserDetail/AddressDetail.tsx
index 8be68d6..a86b72d 100644
--- a/src/pages/Users/components/UserDetail/AddressDetail.tsx
+++ b/src/pages/Users/components/UserDetail/AddressDetail.tsx
@@ -1,6 +1,5 @@
 import classNames from 'classnames';
 
-import './AddressDetail.scss';
 import { Address } from 'common/models/user';
 import { BaseComponentProps } from 'common/components/types';
 import LoaderSkeleton from 'common/components/Loader/LoaderSkeleton';
@@ -41,20 +40,18 @@ const AddressDetail = ({
   isLoading = false,
   testid = 'address-detail',
 }: AddressDetailProps): JSX.Element | false => {
-  const baseProps = {
-    className: classNames('address-detail', className),
-    'data-testid': testid,
-  };
-
   if (isLoading) {
     // loading state
     return (
-      <div {...baseProps}>
-        <div className="header">
+      <div
+        className={classNames('ls-address-detail ls-address-detail-loader', className)}
+        data-testid={`${testid}-loader`}
+      >
+        <HeaderRow border>
           <LoaderSkeleton animated heightStyle="1.5rem" widthStyle="1.5rem" />
           <LoaderSkeleton animated heightStyle="1.5rem" widthStyle="10rem" />
-        </div>
-        <div className="content" data-testid={`${testid}-loader`}>
+        </HeaderRow>
+        <div>
           <LoaderSkeleton animated heightStyle="1.25rem" widthStyle="20rem" />
           <LoaderSkeleton animated heightStyle="1.25rem" widthStyle="20rem" />
           <LoaderSkeleton animated heightStyle="1.25rem" widthStyle="20rem" />
@@ -67,12 +64,12 @@ const AddressDetail = ({
   if (address) {
     // success state
     return (
-      <div {...baseProps}>
+      <div className={classNames('ls-address-detail', className)} data-testid={testid}>
         <HeaderRow border>
           <Icon icon={IconName.MapLocationDot} />
           <div>Address</div>
         </HeaderRow>
-        <div className="content">
+        <div className="ls-address-detail-content">
           <div>{address.street}</div>
           <div>{address.suite}</div>
           <div>{address.city}</div>

From 0a95e61b5aae6cbc10b45c36526e6c2369d46a35 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Wed, 25 Sep 2024 13:23:32 -0400
Subject: [PATCH 21/57] CompanyDetail

---
 .../components/UserDetail/CompanyDetail.scss  |  9 --------
 .../components/UserDetail/CompanyDetail.tsx   | 21 ++++++++-----------
 2 files changed, 9 insertions(+), 21 deletions(-)
 delete mode 100644 src/pages/Users/components/UserDetail/CompanyDetail.scss

diff --git a/src/pages/Users/components/UserDetail/CompanyDetail.scss b/src/pages/Users/components/UserDetail/CompanyDetail.scss
deleted file mode 100644
index 686c3aa..0000000
--- a/src/pages/Users/components/UserDetail/CompanyDetail.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.company-detail {
-  margin-bottom: 1rem;
-
-  .content {
-    .primary {
-      font-weight: 700;
-    }
-  }
-}
diff --git a/src/pages/Users/components/UserDetail/CompanyDetail.tsx b/src/pages/Users/components/UserDetail/CompanyDetail.tsx
index 68ac4de..ce94ad8 100644
--- a/src/pages/Users/components/UserDetail/CompanyDetail.tsx
+++ b/src/pages/Users/components/UserDetail/CompanyDetail.tsx
@@ -1,6 +1,5 @@
 import classNames from 'classnames';
 
-import './CompanyDetail.scss';
 import { BaseComponentProps } from 'common/components/types';
 import { Company } from 'common/models/user';
 import LoaderSkeleton from 'common/components/Loader/LoaderSkeleton';
@@ -41,19 +40,17 @@ const CompanyDetail = ({
   isLoading = false,
   testid = 'company-detail',
 }: CompanyDetailProps): JSX.Element | false => {
-  const baseProps = {
-    className: classNames('company-detail', className),
-    'data-testid': testid,
-  };
-
   if (isLoading) {
     // loading state
     return (
-      <div {...baseProps}>
-        <div className="header">
+      <div
+        className={classNames('ls-company-detail ls-company-detail-loader')}
+        data-testid={`${testid}-loader`}
+      >
+        <HeaderRow border>
           <LoaderSkeleton animated heightStyle="1.5rem" widthStyle="1.5rem" />
           <LoaderSkeleton animated heightStyle="1.5rem" widthStyle="10rem" />
-        </div>
+        </HeaderRow>
         <div className="content" data-testid={`${testid}-loader`}>
           <LoaderSkeleton animated heightStyle="1.25rem" widthStyle="20rem" />
           <LoaderSkeleton animated heightStyle="1.25rem" widthStyle="20rem" />
@@ -66,13 +63,13 @@ const CompanyDetail = ({
   if (company) {
     // success state
     return (
-      <div {...baseProps}>
+      <div className={classNames('ls-company-detail', className)} data-testid={testid}>
         <HeaderRow border>
           <Icon icon={IconName.Building} />
           <div>Company</div>
         </HeaderRow>
-        <div className="content">
-          <div className="primary">{company.name}</div>
+        <div className="ls-company-detail-content">
+          <div className="font-bold">{company.name}</div>
           <div>{company.catchPhrase}</div>
           <div>{company.bs}</div>
         </div>

From d093096c451ab6d6f752a2395a7c3c5e664506c4 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Wed, 25 Sep 2024 13:23:40 -0400
Subject: [PATCH 22/57] ContactInfo

---
 .../components/UserDetail/ContactInfo.scss    |  6 ++----
 .../components/UserDetail/ContactInfo.tsx     | 20 +++++++++----------
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/pages/Users/components/UserDetail/ContactInfo.scss b/src/pages/Users/components/UserDetail/ContactInfo.scss
index 1b4bacf..9ccde2f 100644
--- a/src/pages/Users/components/UserDetail/ContactInfo.scss
+++ b/src/pages/Users/components/UserDetail/ContactInfo.scss
@@ -1,7 +1,5 @@
-.contact-info {
-  margin-bottom: 1rem;
-
-  .content {
+.ls-contact-info {
+  .ls-contact-info-content {
     > * {
       display: flex;
       align-items: center;
diff --git a/src/pages/Users/components/UserDetail/ContactInfo.tsx b/src/pages/Users/components/UserDetail/ContactInfo.tsx
index da241c8..38a2029 100644
--- a/src/pages/Users/components/UserDetail/ContactInfo.tsx
+++ b/src/pages/Users/components/UserDetail/ContactInfo.tsx
@@ -44,22 +44,20 @@ const ContactInfo = ({
   testid = 'contact-info',
   user,
 }: ContactInfoProps): JSX.Element | false => {
-  const baseProps = {
-    className: classNames('contact-info', className),
-    'data-testid': testid,
-  };
-
   if (isLoading) {
     // loading state
     return (
-      <div {...baseProps}>
+      <div
+        className={classNames('ls-contact-info ls-contact-info-loader', className)}
+        data-testid={`${testid}-loader`}
+      >
         {showHeader && (
-          <div className="header">
+          <HeaderRow border>
             <LoaderSkeleton animated widthStyle="1.5rem" heightStyle="1.5rem" />
             <LoaderSkeleton animated widthStyle="12rem" heightStyle="1.5rem" />
-          </div>
+          </HeaderRow>
         )}
-        <div className="content" data-testid={`${testid}-loader`}>
+        <div className="ls-contact-info-content" data-testid={`${testid}-loader`}>
           <LoaderSkeleton animated widthStyle="20rem" heightStyle="1.25rem" />
           <LoaderSkeleton animated widthStyle="20rem" heightStyle="1.25rem" />
           <LoaderSkeleton animated widthStyle="20rem" heightStyle="1.25rem" />
@@ -71,14 +69,14 @@ const ContactInfo = ({
   if (user) {
     // success state
     return (
-      <div {...baseProps}>
+      <div className={classNames('ls-contact-info')} data-testid={testid}>
         {showHeader && (
           <HeaderRow border>
             <Icon icon={IconName.User} />
             <div>Contact Info</div>
           </HeaderRow>
         )}
-        <div className="content">
+        <div className="ls-contact-info-content">
           {user.email && (
             <div>
               <Icon icon={IconName.Envelope} />

From 5dbcd7b9f5a76d2bf0a0d83ffc83f1ea41d78166 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Wed, 25 Sep 2024 13:23:46 -0400
Subject: [PATCH 23/57] UserDetail

---
 .../Users/components/UserDetail/UserDetail.scss     |  2 +-
 .../Users/components/UserDetail/UserDetail.tsx      | 13 ++++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/pages/Users/components/UserDetail/UserDetail.scss b/src/pages/Users/components/UserDetail/UserDetail.scss
index 31599ae..7c55634 100644
--- a/src/pages/Users/components/UserDetail/UserDetail.scss
+++ b/src/pages/Users/components/UserDetail/UserDetail.scss
@@ -1,4 +1,4 @@
-.user-detail {
+.ls-user-detail {
   ion-grid {
     --ion-grid-padding: 0;
     --ion-grid-column-padding: 0.25rem;
diff --git a/src/pages/Users/components/UserDetail/UserDetail.tsx b/src/pages/Users/components/UserDetail/UserDetail.tsx
index 59ec91b..c5db0b8 100644
--- a/src/pages/Users/components/UserDetail/UserDetail.tsx
+++ b/src/pages/Users/components/UserDetail/UserDetail.tsx
@@ -39,7 +39,7 @@ const UserDetail = ({
   const { data: user, isError, isLoading } = useGetUser({ userId });
 
   const baseProps = {
-    className: classNames('user-detail', className),
+    className: classNames('ls-user-detail', className),
     'data-testid': testid,
   };
 
@@ -47,7 +47,7 @@ const UserDetail = ({
   if (isError) {
     return (
       <div {...baseProps}>
-        <CardRow className="row-message" testid={`${testid}-error`}>
+        <CardRow testid={`${testid}-error`}>
           <ErrorCard content="We are experiencing problems getting the requested user information." />
         </CardRow>
       </div>
@@ -60,10 +60,16 @@ const UserDetail = ({
       <IonGrid>
         <IonRow>
           <IonCol sizeXs="12" sizeMd="6" sizeXl="4">
-            <ContactInfo isLoading={isLoading} user={user} testid={`${testid}-user-summary`} />
+            <ContactInfo
+              className="ion-margin-bottom"
+              isLoading={isLoading}
+              user={user}
+              testid={`${testid}-user-summary`}
+            />
           </IonCol>
           <IonCol sizeXs="12" sizeMd="6" sizeXl="4">
             <CompanyDetail
+              className="ion-margin-bottom"
               company={user?.company}
               isLoading={isLoading}
               testid={`${testid}-company-detail`}
@@ -71,6 +77,7 @@ const UserDetail = ({
           </IonCol>
           <IonCol sizeXs="12" sizeMd="6" sizeXl="4">
             <AddressDetail
+              className="ion-margin-bottom"
               address={user?.address}
               isLoading={isLoading}
               testid={`${testid}-address-detail`}

From 2c52d807495b8643a5623a4ee7c56ca0ab6669ae Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Wed, 25 Sep 2024 13:30:40 -0400
Subject: [PATCH 24/57] LoaderSpinner

---
 src/common/components/Loader/LoaderSpinner.scss   | 4 ++--
 src/common/components/Loader/LoaderSpinner.tsx    | 4 ++--
 src/common/providers/AuthProvider.scss            | 2 +-
 src/pages/Auth/SignOut/SignOutPage.scss           | 4 ++--
 src/pages/Auth/SignOut/SignOutPage.tsx            | 2 +-
 src/pages/Users/components/UserList/UserList.scss | 2 +-
 src/pages/Users/components/UserList/UserList.tsx  | 4 ++--
 7 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/common/components/Loader/LoaderSpinner.scss b/src/common/components/Loader/LoaderSpinner.scss
index 11bcc53..f075032 100644
--- a/src/common/components/Loader/LoaderSpinner.scss
+++ b/src/common/components/Loader/LoaderSpinner.scss
@@ -1,10 +1,10 @@
-.loader-spinner {
+.ls-loader-spinner {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
 
-  .text {
+  .ls-loader-spinner-text {
     font-size: 1.25rem;
     line-height: 1;
 
diff --git a/src/common/components/Loader/LoaderSpinner.tsx b/src/common/components/Loader/LoaderSpinner.tsx
index 7516343..b6b28cd 100644
--- a/src/common/components/Loader/LoaderSpinner.tsx
+++ b/src/common/components/Loader/LoaderSpinner.tsx
@@ -28,9 +28,9 @@ const LoaderSpinner = ({
   text,
 }: LoaderSpinnerProps): JSX.Element => {
   return (
-    <div className={classNames('loader-spinner', className)} data-testid={testid}>
+    <div className={classNames('ls-loader-spinner', className)} data-testid={testid}>
       <IonSpinner></IonSpinner>
-      {text && <div className="text">{text}</div>}
+      {text && <div className="ls-loader-spinner-text">{text}</div>}
     </div>
   );
 };
diff --git a/src/common/providers/AuthProvider.scss b/src/common/providers/AuthProvider.scss
index 766cc19..576d043 100644
--- a/src/common/providers/AuthProvider.scss
+++ b/src/common/providers/AuthProvider.scss
@@ -1,5 +1,5 @@
 .provider-auth {
-  .loader-spinner {
+  .ls-loader-spinner {
     height: 100%;
 
     ion-spinner {
diff --git a/src/pages/Auth/SignOut/SignOutPage.scss b/src/pages/Auth/SignOut/SignOutPage.scss
index d811973..6da1b57 100644
--- a/src/pages/Auth/SignOut/SignOutPage.scss
+++ b/src/pages/Auth/SignOut/SignOutPage.scss
@@ -1,5 +1,5 @@
-.page-signout {
-  .loader-spinner {
+.ls-page-signout {
+  .ls-loader-spinner {
     height: 100%;
 
     ion-spinner {
diff --git a/src/pages/Auth/SignOut/SignOutPage.tsx b/src/pages/Auth/SignOut/SignOutPage.tsx
index 7f334c6..8e0c2bc 100644
--- a/src/pages/Auth/SignOut/SignOutPage.tsx
+++ b/src/pages/Auth/SignOut/SignOutPage.tsx
@@ -30,7 +30,7 @@ const SignOutPage = ({ testid = 'page-signout' }: PropsWithTestId): JSX.Element
   }, []);
 
   return (
-    <IonPage className="page-signout" data-testid={testid}>
+    <IonPage className="ls-page-signout" data-testid={testid}>
       <IonContent fullscreen>
         <LoaderSpinner />
       </IonContent>
diff --git a/src/pages/Users/components/UserList/UserList.scss b/src/pages/Users/components/UserList/UserList.scss
index 30afe13..5299793 100644
--- a/src/pages/Users/components/UserList/UserList.scss
+++ b/src/pages/Users/components/UserList/UserList.scss
@@ -1,5 +1,5 @@
 .list-user {
-  .loader {
+  .ls-loader-spinner {
     height: 8rem;
   }
 
diff --git a/src/pages/Users/components/UserList/UserList.tsx b/src/pages/Users/components/UserList/UserList.tsx
index fe1a409..4df8291 100644
--- a/src/pages/Users/components/UserList/UserList.tsx
+++ b/src/pages/Users/components/UserList/UserList.tsx
@@ -46,10 +46,10 @@ const UserList = ({
   };
 
   // Loading state
-  if (isLoading) {
+  if (!isLoading) {
     return (
       <div {...baseProps}>
-        <LoaderSpinner className="loader" testid={`${testid}-loader`} text="Loading users..." />
+        <LoaderSpinner testid={`${testid}-loader`} text="Loading users..." />
       </div>
     );
   }

From 0739c9adb755516adfb8041e4d696be3e9f78d25 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Wed, 25 Sep 2024 13:30:58 -0400
Subject: [PATCH 25/57] LoaderSpinner

---
 src/pages/Users/components/UserList/UserList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Users/components/UserList/UserList.tsx b/src/pages/Users/components/UserList/UserList.tsx
index 4df8291..c0552a2 100644
--- a/src/pages/Users/components/UserList/UserList.tsx
+++ b/src/pages/Users/components/UserList/UserList.tsx
@@ -46,7 +46,7 @@ const UserList = ({
   };
 
   // Loading state
-  if (!isLoading) {
+  if (isLoading) {
     return (
       <div {...baseProps}>
         <LoaderSpinner testid={`${testid}-loader`} text="Loading users..." />

From 82c0efa85957034aa920835d3dcab1f0b8392272 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Thu, 26 Sep 2024 06:21:25 -0400
Subject: [PATCH 26/57] AppMenu

---
 src/common/components/Menu/AppMenu.scss | 2 +-
 src/common/components/Menu/AppMenu.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/common/components/Menu/AppMenu.scss b/src/common/components/Menu/AppMenu.scss
index c771ccd..f0aa892 100644
--- a/src/common/components/Menu/AppMenu.scss
+++ b/src/common/components/Menu/AppMenu.scss
@@ -1,4 +1,4 @@
-.menu-app {
+.ls-app-menu {
   ion-title {
     font-size: 1rem;
 
diff --git a/src/common/components/Menu/AppMenu.tsx b/src/common/components/Menu/AppMenu.tsx
index 2ff7723..a63d995 100644
--- a/src/common/components/Menu/AppMenu.tsx
+++ b/src/common/components/Menu/AppMenu.tsx
@@ -38,7 +38,7 @@ const AppMenu = ({ className, testid = 'menu-app' }: AppMenuProps): JSX.Element
 
   return (
     <IonMenu
-      className={classNames('menu-app', className)}
+      className={classNames('ls-app-menu', className)}
       contentId="content-main"
       data-testid={testid}
       menuId="menu-app"

From 84ae9c76be52e98d1d27e7027ec0200924dc49f0 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Thu, 26 Sep 2024 06:24:45 -0400
Subject: [PATCH 27/57] tests

---
 src/pages/Users/components/UserDetail/CompanyDetail.tsx | 2 +-
 src/pages/Users/components/UserDetail/ContactInfo.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Users/components/UserDetail/CompanyDetail.tsx b/src/pages/Users/components/UserDetail/CompanyDetail.tsx
index ce94ad8..19058a6 100644
--- a/src/pages/Users/components/UserDetail/CompanyDetail.tsx
+++ b/src/pages/Users/components/UserDetail/CompanyDetail.tsx
@@ -51,7 +51,7 @@ const CompanyDetail = ({
           <LoaderSkeleton animated heightStyle="1.5rem" widthStyle="1.5rem" />
           <LoaderSkeleton animated heightStyle="1.5rem" widthStyle="10rem" />
         </HeaderRow>
-        <div className="content" data-testid={`${testid}-loader`}>
+        <div className="content">
           <LoaderSkeleton animated heightStyle="1.25rem" widthStyle="20rem" />
           <LoaderSkeleton animated heightStyle="1.25rem" widthStyle="20rem" />
           <LoaderSkeleton animated heightStyle="1.25rem" widthStyle="20rem" />
diff --git a/src/pages/Users/components/UserDetail/ContactInfo.tsx b/src/pages/Users/components/UserDetail/ContactInfo.tsx
index 38a2029..3c5dcdf 100644
--- a/src/pages/Users/components/UserDetail/ContactInfo.tsx
+++ b/src/pages/Users/components/UserDetail/ContactInfo.tsx
@@ -57,7 +57,7 @@ const ContactInfo = ({
             <LoaderSkeleton animated widthStyle="12rem" heightStyle="1.5rem" />
           </HeaderRow>
         )}
-        <div className="ls-contact-info-content" data-testid={`${testid}-loader`}>
+        <div className="ls-contact-info-content">
           <LoaderSkeleton animated widthStyle="20rem" heightStyle="1.25rem" />
           <LoaderSkeleton animated widthStyle="20rem" heightStyle="1.25rem" />
           <LoaderSkeleton animated widthStyle="20rem" heightStyle="1.25rem" />

From 5c5f192df3323f047ab08b39bd0681f77284f6e9 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Thu, 26 Sep 2024 06:28:00 -0400
Subject: [PATCH 28/57] TabNavigation

---
 src/common/components/Router/TabNavigation.scss | 2 +-
 src/common/components/Router/TabNavigation.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/common/components/Router/TabNavigation.scss b/src/common/components/Router/TabNavigation.scss
index 1c66f05..27ba4fc 100644
--- a/src/common/components/Router/TabNavigation.scss
+++ b/src/common/components/Router/TabNavigation.scss
@@ -1,4 +1,4 @@
-.tab-navigation {
+.ls-tab-navigation {
   ion-tab-button {
     .ls-icon {
       margin-top: 0.375rem;
diff --git a/src/common/components/Router/TabNavigation.tsx b/src/common/components/Router/TabNavigation.tsx
index 8843965..d2f6993 100644
--- a/src/common/components/Router/TabNavigation.tsx
+++ b/src/common/components/Router/TabNavigation.tsx
@@ -32,7 +32,7 @@ const TabNavigation = (): JSX.Element => {
     <>
       <AppMenu />
 
-      <IonTabs className="tab-navigation">
+      <IonTabs className="ls-tab-navigation">
         <IonRouterOutlet id="content-main">
           <Redirect exact path="/tabs" to="/tabs/home" />
           <Route exact path="/tabs/home">

From 35f19db2b5f616588f69f610fae61913afc354fb Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Thu, 26 Sep 2024 06:53:01 -0400
Subject: [PATCH 29/57] HeaderRow

---
 src/common/components/Content/PageHeader.scss    | 2 +-
 src/common/components/Text/HeaderRow.scss        | 6 +++---
 src/common/components/Text/HeaderRow.tsx         | 6 +++---
 src/pages/Auth/SignIn/components/SignInForm.scss | 4 ----
 4 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/common/components/Content/PageHeader.scss b/src/common/components/Content/PageHeader.scss
index 86ce1c1..f58546f 100644
--- a/src/common/components/Content/PageHeader.scss
+++ b/src/common/components/Content/PageHeader.scss
@@ -1,5 +1,5 @@
 .ls-page-header {
-  &.row-header {
+  &.ls-header-row {
     font-size: 1.5rem;
     line-height: 2rem;
 
diff --git a/src/common/components/Text/HeaderRow.scss b/src/common/components/Text/HeaderRow.scss
index 902a3db..da6bc2c 100644
--- a/src/common/components/Text/HeaderRow.scss
+++ b/src/common/components/Text/HeaderRow.scss
@@ -1,4 +1,4 @@
-.row-header {
+.ls-header-row {
   font-size: 1.25rem;
   font-weight: 500;
   line-height: 1.75rem;
@@ -8,13 +8,13 @@
   padding-bottom: 0.25rem;
   margin-bottom: 0.25rem;
 
-  &.bordered {
+  &-bordered {
     border-bottom-width: 1px;
     border-bottom-style: solid;
     border-bottom-color: var(--ion-color-light);
   }
 
-  &.inset {
+  &-inset {
     padding-inline: 0.5rem;
   }
 }
diff --git a/src/common/components/Text/HeaderRow.tsx b/src/common/components/Text/HeaderRow.tsx
index 9d35f2c..edb2dbd 100644
--- a/src/common/components/Text/HeaderRow.tsx
+++ b/src/common/components/Text/HeaderRow.tsx
@@ -38,9 +38,9 @@ const HeaderRow = ({
   return (
     <IonRow
       className={classNames(
-        'row-header ion-align-items-center ion-text-uppercase',
-        { bordered: border },
-        { inset: inset },
+        'ls-header-row ion-align-items-center ion-text-uppercase',
+        { 'ls-header-row-bordered': border },
+        { 'ls-header-row-inset': inset },
         className,
       )}
       data-testid={testid}
diff --git a/src/pages/Auth/SignIn/components/SignInForm.scss b/src/pages/Auth/SignIn/components/SignInForm.scss
index 5138db1..9fd85d2 100644
--- a/src/pages/Auth/SignIn/components/SignInForm.scss
+++ b/src/pages/Auth/SignIn/components/SignInForm.scss
@@ -1,8 +1,4 @@
 .form-signin {
-  .row-header {
-    margin-bottom: 0.25rem;
-  }
-
   ion-input,
   ion-checkbox {
     margin-bottom: 1rem;

From 34ac96a63dc944002a1638c7982f307bc6d6c2e5 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Thu, 26 Sep 2024 06:57:56 -0400
Subject: [PATCH 30/57] Toasts

---
 src/common/components/Toast/Toast.tsx   | 2 +-
 src/common/components/Toast/Toasts.scss | 2 +-
 src/common/components/Toast/Toasts.tsx  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/common/components/Toast/Toast.tsx b/src/common/components/Toast/Toast.tsx
index 37dea35..556e1a2 100644
--- a/src/common/components/Toast/Toast.tsx
+++ b/src/common/components/Toast/Toast.tsx
@@ -44,7 +44,7 @@ const Toast = ({ className, dismiss, testid = 'toast', toast }: ToastProps): JSX
   return (
     <IonToast
       buttons={toast.buttons}
-      className={classNames('toast', className)}
+      className={classNames('ls-toast', className)}
       color={toast.color ?? 'medium'}
       data-testid={testid}
       duration={toast.duration}
diff --git a/src/common/components/Toast/Toasts.scss b/src/common/components/Toast/Toasts.scss
index 67c07de..56a5aad 100644
--- a/src/common/components/Toast/Toasts.scss
+++ b/src/common/components/Toast/Toasts.scss
@@ -1,4 +1,4 @@
-.toasts {
+.ls-toasts {
   // anchor point for rendering individual Toast components
   position: absolute;
   bottom: 64px;
diff --git a/src/common/components/Toast/Toasts.tsx b/src/common/components/Toast/Toasts.tsx
index 443a2d2..5f31aaf 100644
--- a/src/common/components/Toast/Toasts.tsx
+++ b/src/common/components/Toast/Toasts.tsx
@@ -30,7 +30,7 @@ const Toasts = ({ className, testid = 'toasts' }: ToastsProps): JSX.Element => {
   const toast = toasts[0];
 
   return (
-    <div id="toasts" className={classNames('toasts', className)} data-testid={testid}>
+    <div id="toasts" className={classNames('ls-toasts', className)} data-testid={testid}>
       {toast && (
         <Toast
           dismiss={() => removeToast(toast.id)}

From c6a23378d36b9123946ad4eda69a6a3b644df077 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Thu, 26 Sep 2024 07:00:19 -0400
Subject: [PATCH 31/57] AuthProvider

---
 src/common/providers/AuthProvider.scss | 2 +-
 src/common/providers/AuthProvider.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/common/providers/AuthProvider.scss b/src/common/providers/AuthProvider.scss
index 576d043..df062a3 100644
--- a/src/common/providers/AuthProvider.scss
+++ b/src/common/providers/AuthProvider.scss
@@ -1,4 +1,4 @@
-.provider-auth {
+.ls-auth-provider {
   .ls-loader-spinner {
     height: 100%;
 
diff --git a/src/common/providers/AuthProvider.tsx b/src/common/providers/AuthProvider.tsx
index e40172c..f62eb33 100644
--- a/src/common/providers/AuthProvider.tsx
+++ b/src/common/providers/AuthProvider.tsx
@@ -49,7 +49,7 @@ const AuthProvider = ({ children }: PropsWithChildren): JSX.Element => {
     <AuthContext.Provider value={value}>
       {isReady && <>{children}</>}
       {!isReady && (
-        <IonPage className="provider-auth">
+        <IonPage className="ls-auth-provider">
           <IonContent fullscreen>
             <LoaderSpinner />
           </IonContent>

From cd41b910cbf35b1d65cf3e45fd6dad3aea4f7133 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Thu, 26 Sep 2024 07:34:48 -0400
Subject: [PATCH 32/57] AccountPage

---
 src/pages/Account/AccountPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Account/AccountPage.tsx b/src/pages/Account/AccountPage.tsx
index a7ed2ad..508435d 100644
--- a/src/pages/Account/AccountPage.tsx
+++ b/src/pages/Account/AccountPage.tsx
@@ -45,7 +45,7 @@ const AccountPage = ({ testid = 'page-account' }: PropsWithTestId): JSX.Element
   };
 
   return (
-    <IonPage className="ls-page-account" data-testid={testid}>
+    <IonPage className="ls-account-page" data-testid={testid}>
       <ProgressProvider>
         <Header title="My Account" />
 

From a343efdc6909e6dae5a7c8156e78c45d5f2cc6fe Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Thu, 26 Sep 2024 08:07:42 -0400
Subject: [PATCH 33/57] AppDiagnostics

---
 src/pages/Account/components/Diagnostics/AppDiagnostics.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Account/components/Diagnostics/AppDiagnostics.tsx b/src/pages/Account/components/Diagnostics/AppDiagnostics.tsx
index daee753..5168855 100644
--- a/src/pages/Account/components/Diagnostics/AppDiagnostics.tsx
+++ b/src/pages/Account/components/Diagnostics/AppDiagnostics.tsx
@@ -24,7 +24,7 @@ const AppDiagnostics = ({
 
   if (isNativePlatform) {
     return (
-      <List className={classNames('app-diagnostics', className)} data-testid={testid}>
+      <List className={classNames('ls-app-diagnostics', className)} data-testid={testid}>
         <IonListHeader lines="full">
           <IonLabel>App</IonLabel>
         </IonListHeader>
@@ -65,7 +65,7 @@ const AppDiagnostics = ({
     );
   } else {
     return (
-      <List className={classNames('app-diagnostics', className)} data-testid={testid}>
+      <List className={classNames('ls-app-diagnostics', className)} data-testid={testid}>
         <IonListHeader lines="full">
           <IonLabel>App</IonLabel>
         </IonListHeader>

From b4a7459db8e82c10520a73a0bf3214fcc63a0f0e Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Thu, 26 Sep 2024 08:15:15 -0400
Subject: [PATCH 34/57] BuildDiagnostics

---
 src/pages/Account/components/Diagnostics/BuildDiagnostics.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Account/components/Diagnostics/BuildDiagnostics.tsx b/src/pages/Account/components/Diagnostics/BuildDiagnostics.tsx
index 1629114..95b0157 100644
--- a/src/pages/Account/components/Diagnostics/BuildDiagnostics.tsx
+++ b/src/pages/Account/components/Diagnostics/BuildDiagnostics.tsx
@@ -21,7 +21,7 @@ const BuildDiagnostics = ({
   const config = useConfig();
 
   return (
-    <List className={classNames('build-diagnostics', className)} data-testid={testid}>
+    <List className={classNames('ls-build-diagnostics', className)} data-testid={testid}>
       <IonListHeader lines="full">
         <IonLabel>Build</IonLabel>
       </IonListHeader>

From 3bbfb9539d9d9eca79a13344eb3e454d3373d844 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Thu, 26 Sep 2024 08:16:04 -0400
Subject: [PATCH 35/57] PlatformDiagnostics

---
 .../Account/components/Diagnostics/PlatformDiagnostics.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Account/components/Diagnostics/PlatformDiagnostics.tsx b/src/pages/Account/components/Diagnostics/PlatformDiagnostics.tsx
index b35882a..6314947 100644
--- a/src/pages/Account/components/Diagnostics/PlatformDiagnostics.tsx
+++ b/src/pages/Account/components/Diagnostics/PlatformDiagnostics.tsx
@@ -21,7 +21,7 @@ const PlatformDiagnostics = ({
   const { isNativePlatform, platforms } = usePlatform();
 
   return (
-    <List className={classNames('platform-diagnostics', className)} data-testid={testid}>
+    <List className={classNames('ls-platform-diagnostics', className)} data-testid={testid}>
       <IonListHeader lines="full">
         <IonLabel>Platform</IonLabel>
       </IonListHeader>

From 270aa2a5cffb26f5bb86c6d9000d07d480779d47 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Thu, 26 Sep 2024 08:24:27 -0400
Subject: [PATCH 36/57] DiagnosticsPage

---
 src/pages/Account/components/Diagnostics/DiagnosticsPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Account/components/Diagnostics/DiagnosticsPage.tsx b/src/pages/Account/components/Diagnostics/DiagnosticsPage.tsx
index b354d44..1ba3ad6 100644
--- a/src/pages/Account/components/Diagnostics/DiagnosticsPage.tsx
+++ b/src/pages/Account/components/Diagnostics/DiagnosticsPage.tsx
@@ -16,7 +16,7 @@ import BuildDiagnostics from './BuildDiagnostics';
  */
 const DiagnosticsPage = ({ testid = 'page-diagnostics' }: PropsWithTestId): JSX.Element => {
   return (
-    <IonPage className="page-diagnostics" data-testid={testid}>
+    <IonPage className="ls-diagnostics-page" data-testid={testid}>
       <Header title="Diagnostics" backButton defaultHref="/tabs/account" />
 
       <IonContent>

From ea6dcfd24fb0fd26b4866ea1d0bba6cfe1297ca4 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Thu, 26 Sep 2024 08:41:46 -0400
Subject: [PATCH 37/57] ProfileForm

---
 src/pages/Account/components/Profile/ProfileForm.scss | 2 +-
 src/pages/Account/components/Profile/ProfileForm.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Account/components/Profile/ProfileForm.scss b/src/pages/Account/components/Profile/ProfileForm.scss
index ac30e2a..4e5f1cc 100644
--- a/src/pages/Account/components/Profile/ProfileForm.scss
+++ b/src/pages/Account/components/Profile/ProfileForm.scss
@@ -1,4 +1,4 @@
-.form-profile {
+.ls-profile-form {
   ion-input,
   ion-textarea {
     margin-bottom: 0.5rem;
diff --git a/src/pages/Account/components/Profile/ProfileForm.tsx b/src/pages/Account/components/Profile/ProfileForm.tsx
index 750608e..10164c7 100644
--- a/src/pages/Account/components/Profile/ProfileForm.tsx
+++ b/src/pages/Account/components/Profile/ProfileForm.tsx
@@ -68,7 +68,7 @@ const ProfileForm = ({
   };
 
   return (
-    <div className={classNames('form-profile', className)} data-testid={testid}>
+    <div className={classNames('ls-profile-form', className)} data-testid={testid}>
       {error && (
         <ErrorCard
           content={`We are experiencing problems processing your request. ${error}`}

From 93a07c5f23ec57fad6528ce74a21f39a09442120 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Thu, 26 Sep 2024 08:44:04 -0400
Subject: [PATCH 38/57] ProfilePage

---
 src/pages/Account/components/Profile/ProfilePage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Account/components/Profile/ProfilePage.tsx b/src/pages/Account/components/Profile/ProfilePage.tsx
index 14c1612..b202eb1 100644
--- a/src/pages/Account/components/Profile/ProfilePage.tsx
+++ b/src/pages/Account/components/Profile/ProfilePage.tsx
@@ -22,7 +22,7 @@ const ProfilePage = ({ testid = 'page-profile' }: PropsWithTestId): JSX.Element
   const { data: profile, isError, isLoading } = useGetProfile();
 
   return (
-    <IonPage className="page-profile" data-testid={testid}>
+    <IonPage className="ls-profile-page" data-testid={testid}>
       <ProgressProvider>
         <Header backButton defaultHref="/tabs/account" title="Profile" />
 

From 80d004989481d8b69464916cc078d5ab7f816a79 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Thu, 26 Sep 2024 08:50:26 -0400
Subject: [PATCH 39/57] SettingsForm

---
 src/pages/Account/components/Settings/SettingsForm.scss | 2 +-
 src/pages/Account/components/Settings/SettingsForm.tsx  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/Account/components/Settings/SettingsForm.scss b/src/pages/Account/components/Settings/SettingsForm.scss
index c66cbe4..8510e6b 100644
--- a/src/pages/Account/components/Settings/SettingsForm.scss
+++ b/src/pages/Account/components/Settings/SettingsForm.scss
@@ -1,4 +1,4 @@
-.ls-form-settings {
+.ls-settings-form {
   .ls-field-fontSize {
     ion-radio {
       min-height: 3rem;
diff --git a/src/pages/Account/components/Settings/SettingsForm.tsx b/src/pages/Account/components/Settings/SettingsForm.tsx
index 00fc01f..9a0fe9c 100644
--- a/src/pages/Account/components/Settings/SettingsForm.tsx
+++ b/src/pages/Account/components/Settings/SettingsForm.tsx
@@ -59,7 +59,7 @@ const SettingsForm = ({
 
   if (isLoading) {
     return (
-      <div className={classNames('form-settings', className)} data-testid={`${testid}-loading`}>
+      <div className={classNames('ls-settings-form', className)} data-testid={`${testid}-loading`}>
         <List>
           <IonListHeader>
             <IonLabel>Settings</IonLabel>
@@ -128,7 +128,7 @@ const SettingsForm = ({
         validationSchema={validationSchema}
       >
         {({ isSubmitting, submitForm }) => (
-          <Form data-testid={testid} className={classNames('ls-form-settings', className)}>
+          <Form data-testid={testid} className={classNames('ls-settings-form', className)}>
             <List>
               <IonListHeader>
                 <IonLabel>Settings</IonLabel>

From 7a656bfd98a401be895f6445900320a9ce70afcf Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Thu, 26 Sep 2024 09:49:43 -0400
Subject: [PATCH 40/57] SignInForm

---
 src/pages/Auth/SignIn/components/SignInForm.scss |  6 +++---
 src/pages/Auth/SignIn/components/SignInForm.tsx  | 10 +++++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/pages/Auth/SignIn/components/SignInForm.scss b/src/pages/Auth/SignIn/components/SignInForm.scss
index 9fd85d2..f926e73 100644
--- a/src/pages/Auth/SignIn/components/SignInForm.scss
+++ b/src/pages/Auth/SignIn/components/SignInForm.scss
@@ -1,4 +1,4 @@
-.form-signin {
+.ls-signin-form {
   ion-input,
   ion-checkbox {
     margin-bottom: 1rem;
@@ -8,12 +8,12 @@
     font-size: 0.75rem;
   }
 
-  ion-button.button-submit {
+  &-button-submit {
     margin-top: 2rem;
   }
 }
 
-.form-signin-popover {
+ion-popover.ls-signin-form-popover {
   .inline-code {
     font-family: monospace;
     font-size: 1rem;
diff --git a/src/pages/Auth/SignIn/components/SignInForm.tsx b/src/pages/Auth/SignIn/components/SignInForm.tsx
index b39d2a6..71191ac 100644
--- a/src/pages/Auth/SignIn/components/SignInForm.tsx
+++ b/src/pages/Auth/SignIn/components/SignInForm.tsx
@@ -69,7 +69,7 @@ const SignInForm = ({ className, testid = 'form-signin' }: SignInFormProps): JSX
   });
 
   return (
-    <div className={classNames('form-signin', className)} data-testid={testid}>
+    <div className={classNames('ls-signin-form', className)} data-testid={testid}>
       {error && (
         <ErrorCard
           content={`We were unable verify your credentials. Please try again. ${error}`}
@@ -145,7 +145,7 @@ const SignInForm = ({ className, testid = 'form-signin' }: SignInFormProps): JSX
             <IonButton
               type="submit"
               color="primary"
-              className="button-submit"
+              className="ls-signin-form-button-submit"
               expand="block"
               disabled={isSubmitting || !dirty}
               data-testid={`${testid}-button-submit`}
@@ -153,7 +153,11 @@ const SignInForm = ({ className, testid = 'form-signin' }: SignInFormProps): JSX
               Sign In
             </IonButton>
 
-            <IonPopover trigger="signinInfo" triggerAction="hover" className="form-signin-popover">
+            <IonPopover
+              trigger="signinInfo"
+              triggerAction="hover"
+              className="ls-signin-form-popover"
+            >
               <IonContent className="ion-padding">
                 <p>
                   This example application uses{' '}

From 56b6cd792c83549d2d7347ce20eecf42ab682da9 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Thu, 26 Sep 2024 11:05:04 -0400
Subject: [PATCH 41/57] SignInPage

---
 src/pages/Auth/SignIn/SignInPage.scss | 6 +++---
 src/pages/Auth/SignIn/SignInPage.tsx  | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/Auth/SignIn/SignInPage.scss b/src/pages/Auth/SignIn/SignInPage.scss
index fb29119..0a78006 100644
--- a/src/pages/Auth/SignIn/SignInPage.scss
+++ b/src/pages/Auth/SignIn/SignInPage.scss
@@ -1,10 +1,10 @@
-.page-signin {
+.ls-signin-page {
   .ls-container {
-    &.ls-container-fixed {
+    &-fixed {
       max-width: 576px;
     }
 
-    .form-signin {
+    .ls-signin-form {
       margin: 2rem 0;
     }
   }
diff --git a/src/pages/Auth/SignIn/SignInPage.tsx b/src/pages/Auth/SignIn/SignInPage.tsx
index 16ac1b9..785f6b6 100644
--- a/src/pages/Auth/SignIn/SignInPage.tsx
+++ b/src/pages/Auth/SignIn/SignInPage.tsx
@@ -19,7 +19,7 @@ interface SignInPageProps extends PropsWithTestId {}
  */
 const SignInPage = ({ testid = 'page-signin' }: SignInPageProps): JSX.Element => {
   return (
-    <IonPage className="page-signin" data-testid={testid}>
+    <IonPage className="ls-signin-page" data-testid={testid}>
       <ProgressProvider>
         <Header title="Ionic Playground" />
 

From b57e4d6cf52eae61fcf7fe0f88e811ea3765b624 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Thu, 26 Sep 2024 11:12:52 -0400
Subject: [PATCH 42/57] HomePage

---
 src/pages/Home/HomePage.scss | 5 -----
 src/pages/Home/HomePage.tsx  | 7 +++----
 2 files changed, 3 insertions(+), 9 deletions(-)
 delete mode 100644 src/pages/Home/HomePage.scss

diff --git a/src/pages/Home/HomePage.scss b/src/pages/Home/HomePage.scss
deleted file mode 100644
index 178d969..0000000
--- a/src/pages/Home/HomePage.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.page-home {
-  ion-grid {
-    --ion-grid-columns: 2;
-  }
-}
diff --git a/src/pages/Home/HomePage.tsx b/src/pages/Home/HomePage.tsx
index 89257b9..21d4dae 100644
--- a/src/pages/Home/HomePage.tsx
+++ b/src/pages/Home/HomePage.tsx
@@ -10,7 +10,6 @@ import {
 } from '@ionic/react';
 import { useQueryClient } from '@tanstack/react-query';
 
-import './HomePage.scss';
 import { QueryKey } from 'common/utils/constants';
 import Header from 'common/components/Header/Header';
 import UserSummaryCard from 'pages/Users/components/UserSummaryCard/UserSummaryCard';
@@ -30,7 +29,7 @@ const HomePage = (): JSX.Element => {
   };
 
   return (
-    <IonPage className="page-home" data-testid="page-home">
+    <IonPage data-testid="page-home">
       <Header title="Ionic Playground" />
 
       <IonContent fullscreen>
@@ -40,10 +39,10 @@ const HomePage = (): JSX.Element => {
 
         <IonGrid fixed>
           <IonRow>
-            <IonCol sizeXs="2" sizeMd="1">
+            <IonCol sizeXs="12" sizeMd="6">
               <WelcomeBlock className="block-welcome" />
             </IonCol>
-            <IonCol sizeXs="2" sizeMd="1">
+            <IonCol sizeXs="12" sizeMd="6">
               <UserSummaryCard />
             </IonCol>
           </IonRow>

From 7a80cac5c69d325768f8f410b5c14c5d98f172fe Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Thu, 26 Sep 2024 11:15:01 -0400
Subject: [PATCH 43/57] UserAddFab

---
 src/pages/Users/components/UserAdd/UserAddFab.scss | 2 +-
 src/pages/Users/components/UserAdd/UserAddFab.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Users/components/UserAdd/UserAddFab.scss b/src/pages/Users/components/UserAdd/UserAddFab.scss
index 46ff6b3..1c049e5 100644
--- a/src/pages/Users/components/UserAdd/UserAddFab.scss
+++ b/src/pages/Users/components/UserAdd/UserAddFab.scss
@@ -1,4 +1,4 @@
-.ls-fab-user-add {
+.ls-user-add-fab {
   .ls-icon {
     font-size: 1.125rem;
   }
diff --git a/src/pages/Users/components/UserAdd/UserAddFab.tsx b/src/pages/Users/components/UserAdd/UserAddFab.tsx
index d5fe77e..b052cdd 100644
--- a/src/pages/Users/components/UserAdd/UserAddFab.tsx
+++ b/src/pages/Users/components/UserAdd/UserAddFab.tsx
@@ -29,7 +29,7 @@ const UserAddFab = ({
 }: UserAddFabProps): JSX.Element => {
   return (
     <IonFab
-      className={classNames('ls-fab-user-add', className)}
+      className={classNames('ls-user-add-fab', className)}
       data-testid={testid}
       slot={slot}
       vertical={vertical}

From 4b4c2a7cf6142b9dfbb93278011019f0bca11061 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Thu, 26 Sep 2024 16:48:46 -0400
Subject: [PATCH 44/57] UserDeleteAlert

---
 src/pages/Users/components/UserDelete/UserDeleteAlert.scss | 2 +-
 src/pages/Users/components/UserDelete/UserDeleteAlert.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Users/components/UserDelete/UserDeleteAlert.scss b/src/pages/Users/components/UserDelete/UserDeleteAlert.scss
index 28b1609..75a669b 100644
--- a/src/pages/Users/components/UserDelete/UserDeleteAlert.scss
+++ b/src/pages/Users/components/UserDelete/UserDeleteAlert.scss
@@ -1,3 +1,3 @@
-ion-alert.alert-user-delete {
+ion-alert.ls-user-delete-alert {
   --backdrop-opacity: 0.5;
 }
diff --git a/src/pages/Users/components/UserDelete/UserDeleteAlert.tsx b/src/pages/Users/components/UserDelete/UserDeleteAlert.tsx
index 0c4f5b8..5c6e38a 100644
--- a/src/pages/Users/components/UserDelete/UserDeleteAlert.tsx
+++ b/src/pages/Users/components/UserDelete/UserDeleteAlert.tsx
@@ -70,7 +70,7 @@ const UserDeleteAlert = ({
 
   return (
     <IonAlert
-      className={classNames('alert-user-delete', className)}
+      className={classNames('ls-user-delete-alert', className)}
       data-testid={testid}
       buttons={[
         {

From 76e278ecc1c950c4f3859e16e1732cb345eb60b7 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Thu, 26 Sep 2024 16:52:28 -0400
Subject: [PATCH 45/57] UserDetailPage

---
 src/pages/Users/components/UserDetail/UserDetailPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Users/components/UserDetail/UserDetailPage.tsx b/src/pages/Users/components/UserDetail/UserDetailPage.tsx
index 4adfee4..bf26086 100644
--- a/src/pages/Users/components/UserDetail/UserDetailPage.tsx
+++ b/src/pages/Users/components/UserDetail/UserDetailPage.tsx
@@ -44,7 +44,7 @@ export const UserDetailPage = ({
   const { data: user } = useGetUser({ userId });
 
   return (
-    <IonPage className={'page-user-detail'} data-testid={testid}>
+    <IonPage data-testid={testid}>
       <ProgressProvider>
         {({ setProgress }) => (
           <>

From 2cfb58481816670f141c6e9d6a7ac5cc3bd16c97 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Fri, 27 Sep 2024 06:47:01 -0400
Subject: [PATCH 46/57] UserEdit

---
 src/pages/Users/components/UserEdit/UserEdit.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Users/components/UserEdit/UserEdit.tsx b/src/pages/Users/components/UserEdit/UserEdit.tsx
index 9af730b..6360a78 100644
--- a/src/pages/Users/components/UserEdit/UserEdit.tsx
+++ b/src/pages/Users/components/UserEdit/UserEdit.tsx
@@ -32,7 +32,7 @@ const UserEdit = ({ className, user, testid = 'user-edit' }: UserEditProps): JSX
   const { setProgress } = useProgress();
 
   return (
-    <div className={classNames('user-edit', className)} data-testid={testid}>
+    <div className={classNames('ls-user-edit', className)} data-testid={testid}>
       <IonGrid>
         <IonRow>
           <IonCol size="12" sizeMd="10" sizeLg="8" sizeXl="6">

From a32554f2729256ab9dbc68fd4abe766a38216361 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Fri, 27 Sep 2024 06:48:36 -0400
Subject: [PATCH 47/57] UserEditPage

---
 src/pages/Users/components/UserEdit/UserEditPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Users/components/UserEdit/UserEditPage.tsx b/src/pages/Users/components/UserEdit/UserEditPage.tsx
index 3fd6b4a..72fce09 100644
--- a/src/pages/Users/components/UserEdit/UserEditPage.tsx
+++ b/src/pages/Users/components/UserEdit/UserEditPage.tsx
@@ -29,7 +29,7 @@ export const UserEditPage = (): JSX.Element => {
   const { data: user } = useGetUser({ userId });
 
   return (
-    <IonPage className={'page-user-edit'} data-testid={testid}>
+    <IonPage data-testid={testid}>
       <ProgressProvider>
         <Header backButton defaultHref="/tabs/users" title={user && user.name} />
 

From 85c3737b98db12ca9119a142c9b55734e1e6435f Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Fri, 27 Sep 2024 06:54:05 -0400
Subject: [PATCH 48/57] UserForm

---
 src/pages/Users/components/UserForm/UserForm.scss | 2 +-
 src/pages/Users/components/UserForm/UserForm.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Users/components/UserForm/UserForm.scss b/src/pages/Users/components/UserForm/UserForm.scss
index 255149a..285cb47 100644
--- a/src/pages/Users/components/UserForm/UserForm.scss
+++ b/src/pages/Users/components/UserForm/UserForm.scss
@@ -1,4 +1,4 @@
-.form-user {
+.ls-user-form {
   ion-input {
     margin-bottom: 0.5rem;
   }
diff --git a/src/pages/Users/components/UserForm/UserForm.tsx b/src/pages/Users/components/UserForm/UserForm.tsx
index c3ac4a8..4f97ae2 100644
--- a/src/pages/Users/components/UserForm/UserForm.tsx
+++ b/src/pages/Users/components/UserForm/UserForm.tsx
@@ -58,7 +58,7 @@ const UserForm = ({
   }, []);
 
   return (
-    <div className={classNames('form-user', className)} data-testid={testid}>
+    <div className={classNames('ls-user-form', className)} data-testid={testid}>
       <Formik<UserFormValues>
         enableReinitialize={true}
         initialValues={{

From 9b7bb47b31521f4dbdd83bb911c087b427781af4 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Fri, 27 Sep 2024 07:12:11 -0400
Subject: [PATCH 49/57] UserCard

---
 .../Users/components/UserList/UserCard.scss   | 42 ++++++++-----------
 .../Users/components/UserList/UserCard.tsx    | 16 ++++---
 2 files changed, 24 insertions(+), 34 deletions(-)

diff --git a/src/pages/Users/components/UserList/UserCard.scss b/src/pages/Users/components/UserList/UserCard.scss
index 2b04ddd..76a8799 100644
--- a/src/pages/Users/components/UserList/UserCard.scss
+++ b/src/pages/Users/components/UserList/UserCard.scss
@@ -1,37 +1,29 @@
-.card-user {
+.ls-card-user {
   padding: 1rem;
 
-  .layout {
+  &__layout {
     display: flex;
     align-items: center;
     column-gap: 1rem;
+  }
 
-    .ls-avatar {
-      height: 3rem;
-      width: 3rem;
-
-      font-size: 2.5rem;
-    }
+  &__avatar.ls-avatar {
+    height: 3rem;
+    width: 3rem;
 
-    .header {
-      font-size: 1.25rem;
-      color: var(--ion-color-dark);
+    font-size: 2.5rem;
+  }
 
-      margin-bottom: 0.25rem;
-    }
+  &__header {
+    font-size: 1.25rem;
+    color: var(--ion-color-dark);
 
-    .content-row {
-      display: flex;
-      align-items: center;
-      column-gap: 1rem;
-      row-gap: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
 
-      > * {
-        display: flex;
-        align-items: center;
-        gap: 0.25rem;
-        text-wrap: nowrap;
-      }
-    }
+  &__content-row {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
   }
 }
diff --git a/src/pages/Users/components/UserList/UserCard.tsx b/src/pages/Users/components/UserList/UserCard.tsx
index 669e51a..562ce88 100644
--- a/src/pages/Users/components/UserList/UserCard.tsx
+++ b/src/pages/Users/components/UserList/UserCard.tsx
@@ -25,19 +25,17 @@ interface UserCardProps extends BaseComponentProps {
 const UserCard = ({ className, testid = 'card-user', user }: UserCardProps): JSX.Element => {
   return (
     <IonCard
-      className={classNames('card-user', className)}
+      className={classNames('ls-card-user', className)}
       routerLink={`/tabs/users/${user.id}`}
       data-testid={testid}
     >
-      <div className="layout">
-        <Avatar value={user.name} size="large" />
+      <div className="ls-card-user__layout">
+        <Avatar className="ls-card-user__avatar" value={user.name} size="large" />
         <div>
-          <div className="header">{user.name}</div>
-          <div className="content-row">
-            <div>
-              <Icon icon={IconName.Envelope} />
-              <div>{user.email}</div>
-            </div>
+          <div className="ls-card-user__header">{user.name}</div>
+          <div className="ls-card-user__content-row">
+            <Icon icon={IconName.Envelope} />
+            <div>{user.email}</div>
           </div>
         </div>
       </div>

From 9d67ff5cab6f2748c9a5719641621a1a3a754590 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Fri, 27 Sep 2024 07:20:59 -0400
Subject: [PATCH 50/57] UserGrid

---
 src/pages/Users/components/UserList/UserGrid.scss |  6 +++---
 src/pages/Users/components/UserList/UserGrid.tsx  | 12 ++++++++----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/pages/Users/components/UserList/UserGrid.scss b/src/pages/Users/components/UserList/UserGrid.scss
index 26c83e1..bd19a83 100644
--- a/src/pages/Users/components/UserList/UserGrid.scss
+++ b/src/pages/Users/components/UserList/UserGrid.scss
@@ -1,9 +1,9 @@
-.grid-user {
-  .loader {
+.ls-user-grid {
+  &__loader {
     height: 8rem;
   }
 
-  .row-message {
+  &__card-row {
     margin: 2rem 0rem;
   }
 }
diff --git a/src/pages/Users/components/UserList/UserGrid.tsx b/src/pages/Users/components/UserList/UserGrid.tsx
index 2f59931..2f7bee8 100644
--- a/src/pages/Users/components/UserList/UserGrid.tsx
+++ b/src/pages/Users/components/UserList/UserGrid.tsx
@@ -32,7 +32,7 @@ const UserGrid = ({ className, filterBy, testid = 'grid-user' }: UserGridProps):
   const { data: users, isError, isLoading } = useGetUsers();
 
   const baseProps = {
-    className: classNames('grid-user', className),
+    className: classNames('ls-user-grid', className),
     'data-testid': testid,
   };
 
@@ -40,7 +40,11 @@ const UserGrid = ({ className, filterBy, testid = 'grid-user' }: UserGridProps):
   if (isLoading) {
     return (
       <div {...baseProps}>
-        <LoaderSpinner className="loader" testid={`${testid}-loader`} text="Loading users..." />
+        <LoaderSpinner
+          className="ls-user-grid__loader"
+          testid={`${testid}-loader`}
+          text="Loading users..."
+        />
       </div>
     );
   }
@@ -49,7 +53,7 @@ const UserGrid = ({ className, filterBy, testid = 'grid-user' }: UserGridProps):
   if (isError) {
     return (
       <div {...baseProps}>
-        <CardRow className="row-message" testid={`${testid}-error`}>
+        <CardRow className="ls-user-grid__card-row" testid={`${testid}-error`}>
           <ErrorCard content="We are experiencing problems getting the users." />
         </CardRow>
       </div>
@@ -62,7 +66,7 @@ const UserGrid = ({ className, filterBy, testid = 'grid-user' }: UserGridProps):
   if (isEmpty(filteredUsers)) {
     return (
       <div {...baseProps}>
-        <CardRow className="row-message" testid={`${testid}-empty`}>
+        <CardRow className="ls-user-grid__card-row" testid={`${testid}-empty`}>
           <EmptyCard content="No users found." />
         </CardRow>
       </div>

From d4a1831b8ec2e90c9511b26cf01e1c9a67394c0c Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Sat, 28 Sep 2024 07:00:24 -0400
Subject: [PATCH 51/57] UserList

---
 src/pages/Users/components/UserList/UserList.scss    |  6 +++---
 src/pages/Users/components/UserList/UserList.tsx     | 12 ++++++++----
 .../Users/components/UserList/UserListPage.scss      |  2 +-
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/pages/Users/components/UserList/UserList.scss b/src/pages/Users/components/UserList/UserList.scss
index 5299793..d9d4306 100644
--- a/src/pages/Users/components/UserList/UserList.scss
+++ b/src/pages/Users/components/UserList/UserList.scss
@@ -1,9 +1,9 @@
-.list-user {
-  .ls-loader-spinner {
+.ls-user-list {
+  &__loader {
     height: 8rem;
   }
 
-  .row-message {
+  &__card-row {
     margin: 2rem 0rem;
   }
 }
diff --git a/src/pages/Users/components/UserList/UserList.tsx b/src/pages/Users/components/UserList/UserList.tsx
index c0552a2..a016dab 100644
--- a/src/pages/Users/components/UserList/UserList.tsx
+++ b/src/pages/Users/components/UserList/UserList.tsx
@@ -41,7 +41,7 @@ const UserList = ({
   const { data: users, isError, isLoading } = useGetUsers();
 
   const baseProps = {
-    className: classNames('list-user', className),
+    className: classNames('ls-user-list', className),
     'data-testid': testid,
   };
 
@@ -49,7 +49,11 @@ const UserList = ({
   if (isLoading) {
     return (
       <div {...baseProps}>
-        <LoaderSpinner testid={`${testid}-loader`} text="Loading users..." />
+        <LoaderSpinner
+          className="ls-user-list__loader"
+          testid={`${testid}-loader`}
+          text="Loading users..."
+        />
       </div>
     );
   }
@@ -58,7 +62,7 @@ const UserList = ({
   if (isError) {
     return (
       <div {...baseProps}>
-        <CardRow className="row-message" testid={`${testid}-error`}>
+        <CardRow className="ls-user-list__card-row" testid={`${testid}-error`}>
           <ErrorCard content="We are experiencing problems getting the users." />
         </CardRow>
       </div>
@@ -71,7 +75,7 @@ const UserList = ({
   if (isEmpty(filteredUsers)) {
     return (
       <div {...baseProps}>
-        <CardRow className="row-message" testid={`${testid}-empty`}>
+        <CardRow className="ls-user-list__card-row" testid={`${testid}-empty`}>
           <EmptyCard content="No users found." />
         </CardRow>
       </div>
diff --git a/src/pages/Users/components/UserList/UserListPage.scss b/src/pages/Users/components/UserList/UserListPage.scss
index 64469f7..c7e0f54 100644
--- a/src/pages/Users/components/UserList/UserListPage.scss
+++ b/src/pages/Users/components/UserList/UserListPage.scss
@@ -1,5 +1,5 @@
 .ls-page-user-list {
-  .list-user {
+  .ls-user-list {
     margin-top: 1rem;
     margin-bottom: 5rem;
   }

From 7971a656e4ab883c9a7f14d5784c1c4b2accac56 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Sat, 28 Sep 2024 07:17:21 -0400
Subject: [PATCH 52/57] UserListItem

---
 .../components/UserList/UserListItem.scss     | 39 ++++++++-----------
 .../components/UserList/UserListItem.tsx      | 18 ++++-----
 2 files changed, 23 insertions(+), 34 deletions(-)

diff --git a/src/pages/Users/components/UserList/UserListItem.scss b/src/pages/Users/components/UserList/UserListItem.scss
index 3769e8e..58b37df 100644
--- a/src/pages/Users/components/UserList/UserListItem.scss
+++ b/src/pages/Users/components/UserList/UserListItem.scss
@@ -1,33 +1,26 @@
-.list-item-user {
+.ls-user-list-item {
   ion-item {
     --inner-padding-bottom: 0.5rem;
     --inner-padding-top: 0.5rem;
+  }
 
-    .ls-avatar {
-      margin-right: 1rem;
-    }
-
-    .content-row {
-      display: flex;
-      align-items: center;
-      column-gap: 1rem;
-      row-gap: 0.25rem;
+  &__avatar {
+    margin-right: 1rem;
+  }
 
-      &.primary {
-        font-weight: 500;
-      }
+  &__content-row {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
 
-      &.secondary {
-        font-size: 0.85rem;
-        color: var(--ion-color-medium);
-      }
+    &--primary {
+      font-weight: 500;
+    }
 
-      > * {
-        display: flex;
-        align-items: center;
-        gap: 0.25rem;
-        text-wrap: nowrap;
-      }
+    &--secondary {
+      font-size: 0.875rem;
+      color: var(--ion-color-medium);
+      text-wrap: nowrap;
     }
   }
 
diff --git a/src/pages/Users/components/UserList/UserListItem.tsx b/src/pages/Users/components/UserList/UserListItem.tsx
index 8d84204..d3da46b 100644
--- a/src/pages/Users/components/UserList/UserListItem.tsx
+++ b/src/pages/Users/components/UserList/UserListItem.tsx
@@ -55,22 +55,18 @@ const UserListItem = ({ className, lines, testid, user }: UserListItemProps): JS
   return (
     <IonItemSliding
       ref={ionSlidingRef}
-      className={classNames('list-item-user', className)}
+      className={classNames('ls-user-list-item', className)}
       data-testid={testIdentifier}
     >
       <IonItem routerLink={`/tabs/users/${user.id}`} lines={lines} detail>
-        <Avatar value={user.name} size="large" />
+        <Avatar className="ls-user-list-item__avatar" value={user.name} size="large" />
         <IonLabel>
-          <div className="content-row primary">
-            <div className="name" data-testid={`${testIdentifier}-name`}>
-              {user.name}
-            </div>
+          <div className="ls-user-list-item__content-row ls-user-list-item__content-row--primary">
+            <div data-testid={`${testIdentifier}-name`}>{user.name}</div>
           </div>
-          <div className="content-row secondary">
-            <div>
-              <Icon icon={IconName.Envelope} />
-              <div data-testid={`${testIdentifier}-email`}>{user.email}</div>
-            </div>
+          <div className="ls-user-list-item__content-row ls-user-list-item__content-row--secondary">
+            <Icon icon={IconName.Envelope} />
+            <div data-testid={`${testIdentifier}-email`}>{user.email}</div>
           </div>
         </IonLabel>
       </IonItem>

From d91d7f44bf00299316664d942fdadd46f268fb16 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Sat, 28 Sep 2024 07:28:00 -0400
Subject: [PATCH 53/57] UserListPage

---
 src/common/components/Searchbar/Searchbar.scss        | 5 -----
 src/pages/Users/components/UserList/UserListPage.scss | 9 +++++++--
 src/pages/Users/components/UserList/UserListPage.tsx  | 6 +++---
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/common/components/Searchbar/Searchbar.scss b/src/common/components/Searchbar/Searchbar.scss
index 2756ad3..9b262c5 100644
--- a/src/common/components/Searchbar/Searchbar.scss
+++ b/src/common/components/Searchbar/Searchbar.scss
@@ -1,8 +1,3 @@
 ion-searchbar.ls-searchbar {
   --border-radius: 0.25rem;
 }
-
-ion-toolbar.ls-toolbar-searchbar {
-  --padding-start: 9px;
-  --padding-end: 9px;
-}
diff --git a/src/pages/Users/components/UserList/UserListPage.scss b/src/pages/Users/components/UserList/UserListPage.scss
index c7e0f54..8158042 100644
--- a/src/pages/Users/components/UserList/UserListPage.scss
+++ b/src/pages/Users/components/UserList/UserListPage.scss
@@ -1,5 +1,10 @@
-.ls-page-user-list {
-  .ls-user-list {
+.ls-user-list-page {
+  &__searchbar {
+    --padding-start: 9px;
+    --padding-end: 9px;
+  }
+
+  &__list {
     margin-top: 1rem;
     margin-bottom: 5rem;
   }
diff --git a/src/pages/Users/components/UserList/UserListPage.tsx b/src/pages/Users/components/UserList/UserListPage.tsx
index 64b691d..83a5c26 100644
--- a/src/pages/Users/components/UserList/UserListPage.tsx
+++ b/src/pages/Users/components/UserList/UserListPage.tsx
@@ -52,14 +52,14 @@ export const UserListPage = ({ testid = 'page-user-list' }: PropsWithTestId): JS
   };
 
   return (
-    <IonPage className="ls-page-user-list" data-testid={testid}>
+    <IonPage className="ls-user-list-page" data-testid={testid}>
       <ProgressProvider>
         <Header
           title="Users"
           toolbars={[
             {
               children: <Searchbar debounce={500} onIonInput={handleInputSearch} />,
-              className: 'ls-toolbar-searchbar',
+              className: 'ls-user-list-page__searchbar',
             },
           ]}
         />
@@ -83,7 +83,7 @@ export const UserListPage = ({ testid = 'page-user-list' }: PropsWithTestId): JS
                 </IonButton>
               </IonButtons>
             </PageHeader>
-            <UserList className="ion-hide-md-up" filterBy={search} />
+            <UserList className="ion-hide-md-up ls-user-list-page__list" filterBy={search} />
             <UserGrid className="ion-hide-md-down" filterBy={search} />
           </Container>
           <UserAddFab className="ion-hide-md-up" onClick={() => setIsOpenModal(true)} />

From b36ac2cf6ffc80ddeb939ad750d2511b23a0ad26 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Sat, 28 Sep 2024 07:31:05 -0400
Subject: [PATCH 54/57] UserSummaryCard

---
 .../Users/components/UserSummaryCard/UserSummaryCard.scss     | 4 ++--
 .../Users/components/UserSummaryCard/UserSummaryCard.tsx      | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/Users/components/UserSummaryCard/UserSummaryCard.scss b/src/pages/Users/components/UserSummaryCard/UserSummaryCard.scss
index 4ebc984..9168a25 100644
--- a/src/pages/Users/components/UserSummaryCard/UserSummaryCard.scss
+++ b/src/pages/Users/components/UserSummaryCard/UserSummaryCard.scss
@@ -1,5 +1,5 @@
-.card-user-summary {
-  .badge {
+.ls-user-summary-card {
+  &__badge {
     margin-left: 0.5rem;
   }
 }
diff --git a/src/pages/Users/components/UserSummaryCard/UserSummaryCard.tsx b/src/pages/Users/components/UserSummaryCard/UserSummaryCard.tsx
index 11d30b8..afc66ea 100644
--- a/src/pages/Users/components/UserSummaryCard/UserSummaryCard.tsx
+++ b/src/pages/Users/components/UserSummaryCard/UserSummaryCard.tsx
@@ -35,14 +35,14 @@ const UserSummaryCard = ({
     <IonCard
       button
       routerLink="/tabs/users"
-      className={classNames('card-user-summary', className)}
+      className={classNames('ls-user-summary-card', className)}
       data-testid={testid}
     >
       <IonCardHeader>
         <IonCardTitle className="ion-text-uppercase">
           Users
           {users && (
-            <IonBadge className="badge" data-testid={`${testid}-badge`}>
+            <IonBadge className="ls-user-summary-card__badge" data-testid={`${testid}-badge`}>
               {users.length}
             </IonBadge>
           )}

From b84fed8dd79c95f0a86bc13a018cab09cba96ce9 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Mon, 30 Sep 2024 09:43:07 -0400
Subject: [PATCH 55/57] bem

---
 src/common/components/Block/Block.scss        |  4 +--
 src/common/components/Block/Block.tsx         |  4 +--
 src/common/components/Button/ButtonRow.scss   |  2 +-
 src/common/components/Button/ButtonRow.tsx    |  2 +-
 src/common/components/Card/MessageCard.scss   |  4 +--
 src/common/components/Card/MessageCard.tsx    | 14 +++++---
 src/common/components/Content/Container.scss  |  6 ++--
 src/common/components/Content/Container.tsx   |  2 +-
 src/common/components/Content/PageHeader.scss | 18 +++++-----
 src/common/components/Header/Header.scss      |  6 ++--
 src/common/components/Header/Header.tsx       |  6 ++--
 src/common/components/Icon/Avatar.scss        | 22 ++++++-------
 src/common/components/Icon/Avatar.tsx         | 24 +++++++-------
 .../components/Icon/__tests__/Avatar.test.tsx | 24 +++++++-------
 src/common/components/Input/DateInput.scss    |  2 +-
 .../components/Input/DatetimeInput.scss       |  2 +-
 .../components/Input/RadioGroupInput.scss     |  8 +++--
 .../components/Input/RadioGroupInput.tsx      |  9 +++--
 src/common/components/Input/SelectInput.scss  | 12 ++++---
 src/common/components/Input/SelectInput.tsx   |  6 ++--
 src/common/components/List/List.scss          |  2 +-
 .../components/Loader/LoaderSpinner.scss      |  2 +-
 .../components/Loader/LoaderSpinner.tsx       |  4 +--
 src/common/components/Menu/AppMenu.scss       | 10 +++---
 src/common/components/Menu/AppMenu.tsx        | 12 +++----
 .../components/Router/TabNavigation.scss      | 10 +++---
 .../components/Router/TabNavigation.tsx       | 33 +++++++++++++++----
 .../components/Searchbar/Searchbar.scss       |  2 +-
 src/common/components/Text/HeaderRow.scss     |  4 +--
 src/common/components/Text/HeaderRow.tsx      |  4 +--
 src/pages/Auth/SignIn/SignInPage.scss         |  2 +-
 .../components/UserDetail/ContactInfo.tsx     |  2 +-
 .../components/UserEdit/UserEditPage.tsx      |  2 +-
 .../components/UserList/UserListPage.tsx      |  3 +-
 34 files changed, 150 insertions(+), 119 deletions(-)

diff --git a/src/common/components/Block/Block.scss b/src/common/components/Block/Block.scss
index 537d8db..5495165 100644
--- a/src/common/components/Block/Block.scss
+++ b/src/common/components/Block/Block.scss
@@ -4,7 +4,7 @@
   margin: 0.75rem;
   padding: 1rem;
 
-  .ls-block-title {
+  &__title {
     font-size: 1.25rem;
     font-weight: 500;
     text-transform: uppercase;
@@ -12,7 +12,7 @@
     margin-bottom: 0.5rem;
   }
 
-  .ls-block-content {
+  &__content {
     color: var(--ion-color-medium);
 
     margin-bottom: 0.5rem;
diff --git a/src/common/components/Block/Block.tsx b/src/common/components/Block/Block.tsx
index 35e2533..abad9ed 100644
--- a/src/common/components/Block/Block.tsx
+++ b/src/common/components/Block/Block.tsx
@@ -25,12 +25,12 @@ const Block = ({ className, content, testid = 'block', title }: BlockProps): JSX
   return (
     <div className={classNames('ls-block', className)} data-testid={testid}>
       {title && (
-        <div className="ls-block-title" data-testid={`${testid}-title`}>
+        <div className="ls-block__title" data-testid={`${testid}-title`}>
           {title}
         </div>
       )}
       {content && (
-        <div className="ls-block-content" data-testid={`${testid}-content`}>
+        <div className="ls-block__content" data-testid={`${testid}-content`}>
           {content}
         </div>
       )}
diff --git a/src/common/components/Button/ButtonRow.scss b/src/common/components/Button/ButtonRow.scss
index 3e1288b..848e0f1 100644
--- a/src/common/components/Button/ButtonRow.scss
+++ b/src/common/components/Button/ButtonRow.scss
@@ -1,5 +1,5 @@
 .ls-button-row {
-  &.ls-button-row-block {
+  &--block {
     ion-button {
       flex-grow: 1;
     }
diff --git a/src/common/components/Button/ButtonRow.tsx b/src/common/components/Button/ButtonRow.tsx
index 5baf236..8bc61ae 100644
--- a/src/common/components/Button/ButtonRow.tsx
+++ b/src/common/components/Button/ButtonRow.tsx
@@ -32,7 +32,7 @@ const ButtonRow = ({
     <IonRow
       className={classNames(
         'ls-button-row',
-        { 'ls-button-row-block': expand === 'block' },
+        { 'ls-button-row--block': expand === 'block' },
         className,
       )}
       data-testid={testid}
diff --git a/src/common/components/Card/MessageCard.scss b/src/common/components/Card/MessageCard.scss
index 4d16dd9..771a8be 100644
--- a/src/common/components/Card/MessageCard.scss
+++ b/src/common/components/Card/MessageCard.scss
@@ -1,12 +1,12 @@
 .ls-message-card {
   margin: 0;
 
-  .ls-message-card-title-block {
+  &__header {
     display: flex;
     flex-direction: row;
     align-items: center;
 
-    .ls-message-card-icon {
+    &-icon {
       margin-right: 0.5rem;
 
       font-size: 1.25rem;
diff --git a/src/common/components/Card/MessageCard.tsx b/src/common/components/Card/MessageCard.tsx
index 73d9234..c281c8a 100644
--- a/src/common/components/Card/MessageCard.tsx
+++ b/src/common/components/Card/MessageCard.tsx
@@ -55,17 +55,21 @@ const MessageCard = ({
     >
       {title && (
         <IonCardHeader className="header">
-          <IonCardTitle className="ls-message-card-title-block">
+          <IonCardTitle className="ls-message-card__header">
             {icon && (
-              <Icon className="ls-message-card-icon" icon={icon} data-testid={`${testid}-icon`} />
+              <Icon
+                className="ls-message-card__header-icon"
+                icon={icon}
+                data-testid={`${testid}-icon`}
+              />
             )}
-            <div className="ls-message-card-title" data-testid={`${testid}-title`}>
+            <div className="ls-message-card__header-title" data-testid={`${testid}-title`}>
               {title}
             </div>
           </IonCardTitle>
           {subtitle && (
             <IonCardSubtitle
-              className="ls-message-card-subtitle"
+              className="ls-message-card__subtitle"
               data-testid={`${testid}-subtitle`}
             >
               {subtitle}
@@ -75,7 +79,7 @@ const MessageCard = ({
       )}
 
       {content && (
-        <IonCardContent className="ls-message-card-content" data-testid={`${testid}-content`}>
+        <IonCardContent className="ls-message-card__content" data-testid={`${testid}-content`}>
           {content}
         </IonCardContent>
       )}
diff --git a/src/common/components/Content/Container.scss b/src/common/components/Content/Container.scss
index 9dfb91f..3b40b20 100644
--- a/src/common/components/Content/Container.scss
+++ b/src/common/components/Content/Container.scss
@@ -14,21 +14,21 @@
 
   // md
   @media (min-width: 768px) {
-    &.ls-container-fixed {
+    &--fixed {
       width: 720px;
     }
   }
 
   // lg
   @media (min-width: 992px) {
-    &.ls-container-fixed {
+    &--fixed {
       width: 960px;
     }
   }
 
   // xl
   @media (min-width: 1200px) {
-    &.ls-container-fixed {
+    &--fixed {
       width: 1140px;
     }
   }
diff --git a/src/common/components/Content/Container.tsx b/src/common/components/Content/Container.tsx
index dae249f..bbbcb45 100644
--- a/src/common/components/Content/Container.tsx
+++ b/src/common/components/Content/Container.tsx
@@ -33,7 +33,7 @@ const Container = ({
 }: ContainerProps): JSX.Element => {
   return (
     <div
-      className={classNames('ls-container', { 'ls-container-fixed': fixed }, className)}
+      className={classNames('ls-container', { 'ls-container--fixed': fixed }, className)}
       data-testid={testid}
     >
       {children}
diff --git a/src/common/components/Content/PageHeader.scss b/src/common/components/Content/PageHeader.scss
index f58546f..b57b73f 100644
--- a/src/common/components/Content/PageHeader.scss
+++ b/src/common/components/Content/PageHeader.scss
@@ -1,17 +1,15 @@
 .ls-page-header {
-  &.ls-header-row {
-    font-size: 1.5rem;
-    line-height: 2rem;
+  font-size: 1.5rem;
+  line-height: 2rem;
 
-    ion-buttons {
-      margin-left: auto;
+  ion-buttons {
+    margin-left: auto;
 
-      ion-button {
-        height: 3rem;
-        width: 3rem;
+    ion-button {
+      height: 3rem;
+      width: 3rem;
 
-        margin: 0;
-      }
+      margin: 0;
     }
   }
 }
diff --git a/src/common/components/Header/Header.scss b/src/common/components/Header/Header.scss
index 3aad49d..2dd303d 100644
--- a/src/common/components/Header/Header.scss
+++ b/src/common/components/Header/Header.scss
@@ -1,5 +1,5 @@
 .ls-header {
-  .ls-header-logo {
+  &__logo {
     height: 2rem;
     width: 2rem;
 
@@ -8,7 +8,7 @@
     border-radius: 0.25rem;
   }
 
-  .ls-header-nav-main {
+  &__nav-main {
     justify-content: center;
     column-gap: 0.5rem;
 
@@ -17,7 +17,7 @@
     }
   }
 
-  ion-buttons[slot='end'] {
+  &__nav-end {
     ion-button {
       height: 3rem;
       width: 3rem;
diff --git a/src/common/components/Header/Header.tsx b/src/common/components/Header/Header.tsx
index 82ee1c6..004313f 100644
--- a/src/common/components/Header/Header.tsx
+++ b/src/common/components/Header/Header.tsx
@@ -59,7 +59,7 @@ const Header = ({
             <IonBackButton defaultHref={defaultHref} data-testid={`${testid}-button-back`} />
           ) : (
             <img
-              className="ls-header-logo"
+              className="ls-header__logo"
               src={logo}
               alt="Logo"
               data-testid={`${testid}-image-logo`}
@@ -70,7 +70,7 @@ const Header = ({
           {title}
         </IonTitle>
         <IonButtons
-          className="ls-header-nav-main ion-hide-md-down"
+          className="ls-header__nav-main ion-hide-md-down"
           data-testid={`${testid}-menu-row`}
         >
           {isAuthenticated && (
@@ -80,7 +80,7 @@ const Header = ({
             </>
           )}
         </IonButtons>
-        <IonButtons slot="end">
+        <IonButtons className="ls-header__nav-end" slot="end">
           {isAuthenticated && (
             <IonMenuButton
               autoHide={false}
diff --git a/src/common/components/Icon/Avatar.scss b/src/common/components/Icon/Avatar.scss
index 0ee2db0..9845183 100644
--- a/src/common/components/Icon/Avatar.scss
+++ b/src/common/components/Icon/Avatar.scss
@@ -10,22 +10,22 @@
 
   --border-radius: 0.25rem;
 
-  &.ls-avatar-round {
+  &--round {
     --border-radius: 50%;
   }
 
-  &.ls-avatar-square {
+  &--square {
     --border-radius: 0;
   }
 
-  &.ls-avatar-small {
+  &--small {
     height: 1.25rem;
     width: 1.25rem;
 
     font-size: 0.875rem;
   }
 
-  &.ls-avatar-large {
+  &--large {
     height: 2rem;
     width: 2rem;
 
@@ -33,7 +33,7 @@
     font-weight: 700;
   }
 
-  .ls-avatar-initial {
+  &__initial {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -42,32 +42,32 @@
     width: 100%;
   }
 
-  .ls-avatar-color-primary {
+  &--primary {
     background-color: var(--ion-color-primary);
     color: var(--ion-color-primary-contrast);
   }
 
-  .ls-avatar-color-secondary {
+  &--secondary {
     background-color: var(--ion-color-secondary);
     color: var(--ion-color-secondary-contrast);
   }
 
-  .ls-avatar-color-tertiary {
+  &--tertiary {
     background-color: var(--ion-color-tertiary);
     color: var(--ion-color-tertiary-contrast);
   }
 
-  .ls-avatar-color-success {
+  &--success {
     background-color: var(--ion-color-success);
     color: var(--ion-color-success-contrast);
   }
 
-  .ls-avatar-color-warning {
+  &--warning {
     background-color: var(--ion-color-warning);
     color: var(--ion-color-warning-contrast);
   }
 
-  .ls-avatar-color-danger {
+  &--danger {
     background-color: var(--ion-color-danger);
     color: var(--ion-color-danger-contrast);
   }
diff --git a/src/common/components/Icon/Avatar.tsx b/src/common/components/Icon/Avatar.tsx
index f490dbe..aa7b373 100644
--- a/src/common/components/Icon/Avatar.tsx
+++ b/src/common/components/Icon/Avatar.tsx
@@ -34,12 +34,12 @@ interface AvatarProps extends BaseComponentProps {
  * List of possible colors for generated Avatars.
  */
 const COLORS = [
-  'ls-avatar-color-primary',
-  'ls-avatar-color-secondary',
-  'ls-avatar-color-tertiary',
-  'ls-avatar-color-success',
-  'ls-avatar-color-warning',
-  'ls-avatar-color-danger',
+  'ls-avatar--primary',
+  'ls-avatar--secondary',
+  'ls-avatar--tertiary',
+  'ls-avatar--success',
+  'ls-avatar--warning',
+  'ls-avatar--danger',
 ];
 
 /**
@@ -70,20 +70,20 @@ const Avatar = ({
     <IonAvatar
       className={classNames(
         'ls-avatar',
-        { 'ls-avatar-round': shape === 'round' },
-        { 'ls-avatar-square': shape === 'square' },
-        { 'ls-avatar-small': size === 'small' },
-        { 'ls-avatar-large': size === 'large' },
+        { 'ls-avatar--round': shape === 'round' },
+        { 'ls-avatar--square': shape === 'square' },
+        { 'ls-avatar--small': size === 'small' },
+        { 'ls-avatar--large': size === 'large' },
         className,
       )}
       data-testid={testid}
       title={trimmedValue}
     >
       {src ? (
-        <img className="ls-avatar-image" src={src} alt={value} data-testid={`${testid}-image`} />
+        <img className="ls-avatar__image" src={src} alt={value} data-testid={`${testid}-image`} />
       ) : (
         <div
-          className={classNames('ls-avatar-initial', colorClass)}
+          className={classNames('ls-avatar__initial', colorClass)}
           data-testid={`${testid}-initial`}
         >
           {initial}
diff --git a/src/common/components/Icon/__tests__/Avatar.test.tsx b/src/common/components/Icon/__tests__/Avatar.test.tsx
index 529f65d..7e60ec0 100644
--- a/src/common/components/Icon/__tests__/Avatar.test.tsx
+++ b/src/common/components/Icon/__tests__/Avatar.test.tsx
@@ -52,8 +52,8 @@ describe('Avatar', () => {
     await screen.findByTestId('avatar');
 
     // ASSERT
-    expect(screen.getByTestId('avatar')).toHaveClass('ls-avatar-small');
-    expect(screen.getByTestId('avatar')).not.toHaveClass('ls-avatar-large');
+    expect(screen.getByTestId('avatar')).toHaveClass('ls-avatar--small');
+    expect(screen.getByTestId('avatar')).not.toHaveClass('ls-avatar--large');
   });
 
   it('should render large size', async () => {
@@ -62,8 +62,8 @@ describe('Avatar', () => {
     await screen.findByTestId('avatar');
 
     // ASSERT
-    expect(screen.getByTestId('avatar')).not.toHaveClass('ls-avatar-small');
-    expect(screen.getByTestId('avatar')).toHaveClass('ls-avatar-large');
+    expect(screen.getByTestId('avatar')).not.toHaveClass('ls-avatar--small');
+    expect(screen.getByTestId('avatar')).toHaveClass('ls-avatar--large');
   });
 
   it('should render default size', async () => {
@@ -72,8 +72,8 @@ describe('Avatar', () => {
     await screen.findByTestId('avatar');
 
     // ASSERT
-    expect(screen.getByTestId('avatar')).not.toHaveClass('ls-avatar-small');
-    expect(screen.getByTestId('avatar')).not.toHaveClass('ls-avatar-large');
+    expect(screen.getByTestId('avatar')).not.toHaveClass('ls-avatar--small');
+    expect(screen.getByTestId('avatar')).not.toHaveClass('ls-avatar--large');
   });
 
   it('should render round shape', async () => {
@@ -82,8 +82,8 @@ describe('Avatar', () => {
     await screen.findByTestId('avatar');
 
     // ASSERT
-    expect(screen.getByTestId('avatar')).toHaveClass('ls-avatar-round');
-    expect(screen.getByTestId('avatar')).not.toHaveClass('ls-avatar-square');
+    expect(screen.getByTestId('avatar')).toHaveClass('ls-avatar--round');
+    expect(screen.getByTestId('avatar')).not.toHaveClass('ls-avatar--square');
   });
 
   it('should render square shape', async () => {
@@ -92,8 +92,8 @@ describe('Avatar', () => {
     await screen.findByTestId('avatar');
 
     // ASSERT
-    expect(screen.getByTestId('avatar')).not.toHaveClass('ls-avatar-round');
-    expect(screen.getByTestId('avatar')).toHaveClass('ls-avatar-square');
+    expect(screen.getByTestId('avatar')).not.toHaveClass('ls-avatar--round');
+    expect(screen.getByTestId('avatar')).toHaveClass('ls-avatar--square');
   });
 
   it('should render default shape', async () => {
@@ -102,7 +102,7 @@ describe('Avatar', () => {
     await screen.findByTestId('avatar');
 
     // ASSERT
-    expect(screen.getByTestId('avatar')).not.toHaveClass('ls-avatar-round');
-    expect(screen.getByTestId('avatar')).not.toHaveClass('ls-avatar-square');
+    expect(screen.getByTestId('avatar')).not.toHaveClass('ls-avatar--round');
+    expect(screen.getByTestId('avatar')).not.toHaveClass('ls-avatar--square');
   });
 });
diff --git a/src/common/components/Input/DateInput.scss b/src/common/components/Input/DateInput.scss
index 9dab541..e6cf686 100644
--- a/src/common/components/Input/DateInput.scss
+++ b/src/common/components/Input/DateInput.scss
@@ -1,4 +1,4 @@
-ion-input.ls-date-input {
+.ls-date-input {
   input {
     cursor: pointer;
   }
diff --git a/src/common/components/Input/DatetimeInput.scss b/src/common/components/Input/DatetimeInput.scss
index eae1768..af89dbb 100644
--- a/src/common/components/Input/DatetimeInput.scss
+++ b/src/common/components/Input/DatetimeInput.scss
@@ -1,4 +1,4 @@
-ion-input.ls-datetime-input {
+.ls-datetime-input {
   input {
     cursor: pointer;
   }
diff --git a/src/common/components/Input/RadioGroupInput.scss b/src/common/components/Input/RadioGroupInput.scss
index 0abd5f1..3c71b58 100644
--- a/src/common/components/Input/RadioGroupInput.scss
+++ b/src/common/components/Input/RadioGroupInput.scss
@@ -1,7 +1,9 @@
-.ls-radiogroup-input-wrapper {
-  width: 100%;
+.ls-radiogroup-input {
+  &--expand-full {
+    width: 100%;
+  }
 
-  .ls-radiogroup-input-error {
+  &__error {
     display: block;
     margin-bottom: 0.5rem;
 
diff --git a/src/common/components/Input/RadioGroupInput.tsx b/src/common/components/Input/RadioGroupInput.tsx
index d3ad8fd..6dcf964 100644
--- a/src/common/components/Input/RadioGroupInput.tsx
+++ b/src/common/components/Input/RadioGroupInput.tsx
@@ -46,9 +46,12 @@ const RadioGroupInput = ({
   };
 
   return (
-    <div className="ls-radiogroup-input-wrapper" data-testid={`${testid}-wrapper`}>
+    <div
+      className="ls-radiogroup-input ls-radiogroup-input--expand-full"
+      data-testid={`${testid}-wrapper`}
+    >
       <IonRadioGroup
-        className={classNames('ls-radiogroup-input', className)}
+        className={classNames('ls-radiogroup-input__radiogroup', className)}
         data-testid={testid}
         onIonChange={onChange}
         {...field}
@@ -56,7 +59,7 @@ const RadioGroupInput = ({
       />
       {!!meta.error && (
         <IonText
-          className="ls-radiogroup-input-error"
+          className="ls-radiogroup-input__error"
           color="danger"
           data-testid={`${testid}-error`}
         >
diff --git a/src/common/components/Input/SelectInput.scss b/src/common/components/Input/SelectInput.scss
index e190ba7..f96514b 100644
--- a/src/common/components/Input/SelectInput.scss
+++ b/src/common/components/Input/SelectInput.scss
@@ -1,16 +1,18 @@
-.ls-select-input-wrapper {
-  width: 100%;
-
+.ls-select-input {
   display: flex;
   flex-direction: column;
 
-  ion-select {
+  &--expand-full {
+    width: 100%;
+  }
+
+  &__select {
     &.ion-invalid {
       color: var(--ion-color-danger);
     }
   }
 
-  .ls-select-input-error {
+  &__error {
     padding: 0.375rem 0 0.375rem 0;
 
     border-top-color: var(--ion-color-danger);
diff --git a/src/common/components/Input/SelectInput.tsx b/src/common/components/Input/SelectInput.tsx
index 43725ab..e776e5a 100644
--- a/src/common/components/Input/SelectInput.tsx
+++ b/src/common/components/Input/SelectInput.tsx
@@ -40,10 +40,10 @@ const SelectInput = ({
   };
 
   return (
-    <div className="ls-select-input-wrapper">
+    <div className="ls-select-input ls-select-input--expand-full">
       <IonSelect
         className={classNames(
-          'ls-select-input',
+          'ls-select-input__select',
           className,
           { 'ion-touched': meta.touched },
           { 'ion-invalid': meta.error },
@@ -55,7 +55,7 @@ const SelectInput = ({
         {...selectProps}
       ></IonSelect>
       {meta.error && (
-        <IonText color="danger" className="ls-select-input-error text-xs font-normal">
+        <IonText color="danger" className="ls-select-input__error text-xs font-normal">
           {meta.error}
         </IonText>
       )}
diff --git a/src/common/components/List/List.scss b/src/common/components/List/List.scss
index 99cd68a..92492f6 100644
--- a/src/common/components/List/List.scss
+++ b/src/common/components/List/List.scss
@@ -1,4 +1,4 @@
-ion-list.ls-list {
+.ls-list {
   ion-list-header {
     --border-width: 0 0 2px 0;
 
diff --git a/src/common/components/Loader/LoaderSpinner.scss b/src/common/components/Loader/LoaderSpinner.scss
index f075032..c2ff826 100644
--- a/src/common/components/Loader/LoaderSpinner.scss
+++ b/src/common/components/Loader/LoaderSpinner.scss
@@ -4,7 +4,7 @@
   justify-content: center;
   align-items: center;
 
-  .ls-loader-spinner-text {
+  &__text {
     font-size: 1.25rem;
     line-height: 1;
 
diff --git a/src/common/components/Loader/LoaderSpinner.tsx b/src/common/components/Loader/LoaderSpinner.tsx
index b6b28cd..b515ae8 100644
--- a/src/common/components/Loader/LoaderSpinner.tsx
+++ b/src/common/components/Loader/LoaderSpinner.tsx
@@ -1,4 +1,4 @@
-import { IonSpinner } from '@ionic/react';
+import { IonSpinner, IonText } from '@ionic/react';
 import classNames from 'classnames';
 
 import './LoaderSpinner.scss';
@@ -30,7 +30,7 @@ const LoaderSpinner = ({
   return (
     <div className={classNames('ls-loader-spinner', className)} data-testid={testid}>
       <IonSpinner></IonSpinner>
-      {text && <div className="ls-loader-spinner-text">{text}</div>}
+      {text && <IonText className="ls-loader-spinner__text">{text}</IonText>}
     </div>
   );
 };
diff --git a/src/common/components/Menu/AppMenu.scss b/src/common/components/Menu/AppMenu.scss
index f0aa892..9dd9333 100644
--- a/src/common/components/Menu/AppMenu.scss
+++ b/src/common/components/Menu/AppMenu.scss
@@ -1,5 +1,5 @@
 .ls-app-menu {
-  ion-title {
+  &__title {
     font-size: 1rem;
 
     ion-row {
@@ -13,14 +13,14 @@
         overflow: hidden;
         text-overflow: ellipsis;
       }
+    }
 
-      .ls-avatar {
-        flex-shrink: 0;
-      }
+    &-avatar {
+      flex-shrink: 0;
     }
   }
 
-  .ls-icon {
+  &__toggle-icon {
     margin-right: 1rem;
 
     opacity: 0.5;
diff --git a/src/common/components/Menu/AppMenu.tsx b/src/common/components/Menu/AppMenu.tsx
index a63d995..ebec716 100644
--- a/src/common/components/Menu/AppMenu.tsx
+++ b/src/common/components/Menu/AppMenu.tsx
@@ -46,10 +46,10 @@ const AppMenu = ({ className, testid = 'menu-app' }: AppMenuProps): JSX.Element
     >
       <IonHeader>
         <IonToolbar>
-          <IonTitle data-testid={`${testid}-title`}>
+          <IonTitle className="ls-app-menu__title" data-testid={`${testid}-title`}>
             {showUserHeader ? (
               <IonRow className="ion-align-items-center">
-                <Avatar value={currentUser.name} />
+                <Avatar className="ls-app-menu__title-avatar" value={currentUser.name} />
                 <div>{currentUser.name}</div>
               </IonRow>
             ) : (
@@ -63,13 +63,13 @@ const AppMenu = ({ className, testid = 'menu-app' }: AppMenuProps): JSX.Element
           <>
             <IonMenuToggle>
               <IonItem routerLink="/tabs/home" lines="full" data-testid={`${testid}-item-home`}>
-                <Icon icon={IconName.House} fixedWidth />
+                <Icon className="ls-app-menu__toggle-icon" icon={IconName.House} fixedWidth />
                 <IonLabel>Home</IonLabel>
               </IonItem>
             </IonMenuToggle>
             <IonMenuToggle>
               <IonItem routerLink="/tabs/users" lines="full" data-testid={`${testid}-item-users`}>
-                <Icon icon={IconName.Users} fixedWidth />
+                <Icon className="ls-app-menu__toggle-icon" icon={IconName.Users} fixedWidth />
                 <IonLabel>Users</IonLabel>
               </IonItem>
             </IonMenuToggle>
@@ -79,7 +79,7 @@ const AppMenu = ({ className, testid = 'menu-app' }: AppMenuProps): JSX.Element
                 lines="full"
                 data-testid={`${testid}-item-account`}
               >
-                <Icon icon={IconName.UserGear} fixedWidth />
+                <Icon className="ls-app-menu__toggle-icon" icon={IconName.UserGear} fixedWidth />
                 <IonLabel>Account</IonLabel>
               </IonItem>
             </IonMenuToggle>
@@ -89,7 +89,7 @@ const AppMenu = ({ className, testid = 'menu-app' }: AppMenuProps): JSX.Element
                 lines="full"
                 data-testid={`${testid}-item-signout`}
               >
-                <Icon icon={IconName.SignOut} fixedWidth />
+                <Icon className="ls-app-menu__toggle-icon" icon={IconName.SignOut} fixedWidth />
                 <IonLabel>Sign Out</IonLabel>
               </IonItem>
             </IonMenuToggle>
diff --git a/src/common/components/Router/TabNavigation.scss b/src/common/components/Router/TabNavigation.scss
index 27ba4fc..d75032d 100644
--- a/src/common/components/Router/TabNavigation.scss
+++ b/src/common/components/Router/TabNavigation.scss
@@ -1,8 +1,10 @@
 .ls-tab-navigation {
-  ion-tab-button {
-    .ls-icon {
-      margin-top: 0.375rem;
-      margin-bottom: 0.125rem;
+  &__bar {
+    &-button {
+      &-icon {
+        margin-top: 0.375rem;
+        margin-bottom: 0.125rem;
+      }
     }
   }
 }
diff --git a/src/common/components/Router/TabNavigation.tsx b/src/common/components/Router/TabNavigation.tsx
index d2f6993..c5480f0 100644
--- a/src/common/components/Router/TabNavigation.tsx
+++ b/src/common/components/Router/TabNavigation.tsx
@@ -61,17 +61,36 @@ const TabNavigation = (): JSX.Element => {
           </Route>
         </IonRouterOutlet>
 
-        <IonTabBar slot="bottom" className="ion-hide-md-up">
-          <IonTabButton tab="home" href="/tabs/home">
-            <Icon icon={IconName.House} size="xl" fixedWidth />
+        <IonTabBar slot="bottom" className="ls-tab-navigation__bar ion-hide-md-up">
+          <IonTabButton className="ls-tab-navigation__bar-button" tab="home" href="/tabs/home">
+            <Icon
+              className="ls-tab-navigation__bar-button-icon"
+              icon={IconName.House}
+              size="xl"
+              fixedWidth
+            />
             <IonLabel>Home</IonLabel>
           </IonTabButton>
-          <IonTabButton tab="users" href="/tabs/users">
-            <Icon icon={IconName.Users} size="xl" fixedWidth />
+          <IonTabButton className="ls-tab-navigation__bar-button" tab="users" href="/tabs/users">
+            <Icon
+              className="ls-tab-navigation__bar-button-icon"
+              icon={IconName.Users}
+              size="xl"
+              fixedWidth
+            />
             <IonLabel>Users</IonLabel>
           </IonTabButton>
-          <IonTabButton tab="account" href="/tabs/account">
-            <Icon icon={IconName.UserGear} size="xl" fixedWidth />
+          <IonTabButton
+            className="ls-tab-navigation__bar-button"
+            tab="account"
+            href="/tabs/account"
+          >
+            <Icon
+              className="ls-tab-navigation__bar-button-icon"
+              icon={IconName.UserGear}
+              size="xl"
+              fixedWidth
+            />
             <IonLabel>Account</IonLabel>
           </IonTabButton>
         </IonTabBar>
diff --git a/src/common/components/Searchbar/Searchbar.scss b/src/common/components/Searchbar/Searchbar.scss
index 9b262c5..f54aa14 100644
--- a/src/common/components/Searchbar/Searchbar.scss
+++ b/src/common/components/Searchbar/Searchbar.scss
@@ -1,3 +1,3 @@
-ion-searchbar.ls-searchbar {
+.ls-searchbar {
   --border-radius: 0.25rem;
 }
diff --git a/src/common/components/Text/HeaderRow.scss b/src/common/components/Text/HeaderRow.scss
index da6bc2c..e311344 100644
--- a/src/common/components/Text/HeaderRow.scss
+++ b/src/common/components/Text/HeaderRow.scss
@@ -8,13 +8,13 @@
   padding-bottom: 0.25rem;
   margin-bottom: 0.25rem;
 
-  &-bordered {
+  &--bordered {
     border-bottom-width: 1px;
     border-bottom-style: solid;
     border-bottom-color: var(--ion-color-light);
   }
 
-  &-inset {
+  &--inset {
     padding-inline: 0.5rem;
   }
 }
diff --git a/src/common/components/Text/HeaderRow.tsx b/src/common/components/Text/HeaderRow.tsx
index edb2dbd..38c384d 100644
--- a/src/common/components/Text/HeaderRow.tsx
+++ b/src/common/components/Text/HeaderRow.tsx
@@ -39,8 +39,8 @@ const HeaderRow = ({
     <IonRow
       className={classNames(
         'ls-header-row ion-align-items-center ion-text-uppercase',
-        { 'ls-header-row-bordered': border },
-        { 'ls-header-row-inset': inset },
+        { 'ls-header-row--bordered': border },
+        { 'ls-header-row--inset': inset },
         className,
       )}
       data-testid={testid}
diff --git a/src/pages/Auth/SignIn/SignInPage.scss b/src/pages/Auth/SignIn/SignInPage.scss
index 0a78006..4801d52 100644
--- a/src/pages/Auth/SignIn/SignInPage.scss
+++ b/src/pages/Auth/SignIn/SignInPage.scss
@@ -1,6 +1,6 @@
 .ls-signin-page {
   .ls-container {
-    &-fixed {
+    &--fixed {
       max-width: 576px;
     }
 
diff --git a/src/pages/Users/components/UserDetail/ContactInfo.tsx b/src/pages/Users/components/UserDetail/ContactInfo.tsx
index 3c5dcdf..d0d464e 100644
--- a/src/pages/Users/components/UserDetail/ContactInfo.tsx
+++ b/src/pages/Users/components/UserDetail/ContactInfo.tsx
@@ -69,7 +69,7 @@ const ContactInfo = ({
   if (user) {
     // success state
     return (
-      <div className={classNames('ls-contact-info')} data-testid={testid}>
+      <div className={classNames('ls-contact-info', className)} data-testid={testid}>
         {showHeader && (
           <HeaderRow border>
             <Icon icon={IconName.User} />
diff --git a/src/pages/Users/components/UserEdit/UserEditPage.tsx b/src/pages/Users/components/UserEdit/UserEditPage.tsx
index 72fce09..1366298 100644
--- a/src/pages/Users/components/UserEdit/UserEditPage.tsx
+++ b/src/pages/Users/components/UserEdit/UserEditPage.tsx
@@ -37,7 +37,7 @@ export const UserEditPage = (): JSX.Element => {
           <Container fixed>
             {user ? (
               <>
-                <PageHeader border inset className="ion-hide-md-down">
+                <PageHeader border inset className="ion-margin-top ion-hide-md-down">
                   <Avatar value={user.name} size="large" />
                   <IonText data-testid={`${testid}-title`}>{user.name}</IonText>
                 </PageHeader>
diff --git a/src/pages/Users/components/UserList/UserListPage.tsx b/src/pages/Users/components/UserList/UserListPage.tsx
index 83a5c26..edbfc0a 100644
--- a/src/pages/Users/components/UserList/UserListPage.tsx
+++ b/src/pages/Users/components/UserList/UserListPage.tsx
@@ -5,6 +5,7 @@ import {
   IonPage,
   IonRefresher,
   IonRefresherContent,
+  IonText,
   RefresherEventDetail,
   SearchbarCustomEvent,
 } from '@ionic/react';
@@ -71,7 +72,7 @@ export const UserListPage = ({ testid = 'page-user-list' }: PropsWithTestId): JS
 
           <Container fixed>
             <PageHeader border inset className="ion-margin-top ion-hide-md-down">
-              <div>Users</div>
+              <IonText>Users</IonText>
               <IonButtons>
                 <IonButton
                   shape="round"

From 33ad1eba809badcefd77db04a9b5829ae0e41fb3 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Mon, 30 Sep 2024 17:08:46 -0400
Subject: [PATCH 56/57] bem

---
 src/common/providers/AuthProvider.scss        |  2 +-
 src/common/providers/AuthProvider.tsx         |  2 +-
 .../components/Profile/ProfileForm.scss       |  5 ++---
 .../components/Profile/ProfileForm.tsx        |  6 +++++-
 .../components/Settings/SettingsForm.scss     |  6 ++----
 .../components/Settings/SettingsForm.tsx      | 19 +++++++++++++++----
 src/pages/Auth/SignIn/SignInPage.scss         | 12 +++++-------
 src/pages/Auth/SignIn/SignInPage.tsx          |  4 ++--
 .../Auth/SignIn/components/SignInForm.scss    |  7 +++----
 .../Auth/SignIn/components/SignInForm.tsx     | 10 ++++++++--
 src/pages/Auth/SignOut/SignOutPage.scss       |  2 +-
 src/pages/Auth/SignOut/SignOutPage.tsx        |  2 +-
 src/pages/Home/HomePage.tsx                   |  2 +-
 .../Users/components/UserAdd/UserAddFab.scss  |  2 +-
 .../Users/components/UserAdd/UserAddFab.tsx   |  2 +-
 .../components/UserDetail/AddressDetail.tsx   |  2 +-
 .../components/UserDetail/CompanyDetail.tsx   |  2 +-
 .../components/UserDetail/ContactInfo.scss    |  2 +-
 .../components/UserDetail/ContactInfo.tsx     |  6 +++---
 .../Users/components/UserForm/UserForm.scss   |  6 +++++-
 .../Users/components/UserForm/UserForm.tsx    |  7 ++++++-
 21 files changed, 66 insertions(+), 42 deletions(-)

diff --git a/src/common/providers/AuthProvider.scss b/src/common/providers/AuthProvider.scss
index df062a3..e347cd3 100644
--- a/src/common/providers/AuthProvider.scss
+++ b/src/common/providers/AuthProvider.scss
@@ -1,5 +1,5 @@
 .ls-auth-provider {
-  .ls-loader-spinner {
+  &__spinner {
     height: 100%;
 
     ion-spinner {
diff --git a/src/common/providers/AuthProvider.tsx b/src/common/providers/AuthProvider.tsx
index f62eb33..93fe692 100644
--- a/src/common/providers/AuthProvider.tsx
+++ b/src/common/providers/AuthProvider.tsx
@@ -51,7 +51,7 @@ const AuthProvider = ({ children }: PropsWithChildren): JSX.Element => {
       {!isReady && (
         <IonPage className="ls-auth-provider">
           <IonContent fullscreen>
-            <LoaderSpinner />
+            <LoaderSpinner className="ls-auth-provider__spinner" />
           </IonContent>
         </IonPage>
       )}
diff --git a/src/pages/Account/components/Profile/ProfileForm.scss b/src/pages/Account/components/Profile/ProfileForm.scss
index 4e5f1cc..20913b4 100644
--- a/src/pages/Account/components/Profile/ProfileForm.scss
+++ b/src/pages/Account/components/Profile/ProfileForm.scss
@@ -1,10 +1,9 @@
 .ls-profile-form {
-  ion-input,
-  ion-textarea {
+  &__input {
     margin-bottom: 0.5rem;
   }
 
-  .ls-button-row {
+  &__button-row {
     margin-top: 2rem;
   }
 }
diff --git a/src/pages/Account/components/Profile/ProfileForm.tsx b/src/pages/Account/components/Profile/ProfileForm.tsx
index 10164c7..fe94da7 100644
--- a/src/pages/Account/components/Profile/ProfileForm.tsx
+++ b/src/pages/Account/components/Profile/ProfileForm.tsx
@@ -119,6 +119,7 @@ const ProfileForm = ({
               labelPlacement="stacked"
               disabled={isSubmitting}
               autocomplete="off"
+              className="ls-profile-form__input"
               ref={focusInput}
               data-testid={`${testid}-field-name`}
             />
@@ -130,6 +131,7 @@ const ProfileForm = ({
               labelPlacement="stacked"
               disabled={isSubmitting}
               autocomplete="off"
+              className="ls-profile-form__input"
               data-testid={`${testid}-field-email`}
             />
 
@@ -141,6 +143,7 @@ const ProfileForm = ({
               counter
               maxlength={500}
               disabled={isSubmitting}
+              className="ls-profile-form__input"
               data-testid={`${testid}-field-bio`}
             />
 
@@ -149,13 +152,14 @@ const ProfileForm = ({
               label="Birthday"
               labelPlacement="stacked"
               disabled={isSubmitting}
+              className="ls-profile-form__input"
               showClearButton
               showDefaultButtons
               showDefaultTitle
               testid={`${testid}-field-dateofbirth`}
             />
 
-            <ButtonRow expand="block">
+            <ButtonRow className="ls-profile-form__button-row" expand="block">
               <IonButton
                 type="button"
                 color="secondary"
diff --git a/src/pages/Account/components/Settings/SettingsForm.scss b/src/pages/Account/components/Settings/SettingsForm.scss
index 8510e6b..b8e96c8 100644
--- a/src/pages/Account/components/Settings/SettingsForm.scss
+++ b/src/pages/Account/components/Settings/SettingsForm.scss
@@ -1,7 +1,5 @@
 .ls-settings-form {
-  .ls-field-fontSize {
-    ion-radio {
-      min-height: 3rem;
-    }
+  &__input-fontsize-radio {
+    min-height: 3rem;
   }
 }
diff --git a/src/pages/Account/components/Settings/SettingsForm.tsx b/src/pages/Account/components/Settings/SettingsForm.tsx
index 9a0fe9c..9d89b92 100644
--- a/src/pages/Account/components/Settings/SettingsForm.tsx
+++ b/src/pages/Account/components/Settings/SettingsForm.tsx
@@ -182,18 +182,29 @@ const SettingsForm = ({
 
               <IonItem>
                 <RadioGroupInput
-                  className="ls-field-fontSize"
                   name="fontSize"
                   onIonChange={() => submitForm()}
                   testid={`${testid}-field-fontSize`}
                 >
-                  <IonRadio className="text-xs" disabled={isSubmitting} value="smaller">
+                  <IonRadio
+                    className="ls-settings-form__input-fontsize-radio text-xs"
+                    disabled={isSubmitting}
+                    value="smaller"
+                  >
                     Smaller
                   </IonRadio>
-                  <IonRadio disabled={isSubmitting} value="default">
+                  <IonRadio
+                    className="ls-settings-form__input-fontsize-radio"
+                    disabled={isSubmitting}
+                    value="default"
+                  >
                     Default
                   </IonRadio>
-                  <IonRadio className="text-xl" disabled={isSubmitting} value="larger">
+                  <IonRadio
+                    className="ls-settings-form__input-fontsize-radio text-xl"
+                    disabled={isSubmitting}
+                    value="larger"
+                  >
                     Larger
                   </IonRadio>
                 </RadioGroupInput>
diff --git a/src/pages/Auth/SignIn/SignInPage.scss b/src/pages/Auth/SignIn/SignInPage.scss
index 4801d52..18af07d 100644
--- a/src/pages/Auth/SignIn/SignInPage.scss
+++ b/src/pages/Auth/SignIn/SignInPage.scss
@@ -1,11 +1,9 @@
 .ls-signin-page {
-  .ls-container {
-    &--fixed {
-      max-width: 576px;
-    }
+  &__container {
+    max-width: 576px;
+  }
 
-    .ls-signin-form {
-      margin: 2rem 0;
-    }
+  &__form {
+    margin: 2rem 0;
   }
 }
diff --git a/src/pages/Auth/SignIn/SignInPage.tsx b/src/pages/Auth/SignIn/SignInPage.tsx
index 785f6b6..5f561f1 100644
--- a/src/pages/Auth/SignIn/SignInPage.tsx
+++ b/src/pages/Auth/SignIn/SignInPage.tsx
@@ -24,8 +24,8 @@ const SignInPage = ({ testid = 'page-signin' }: SignInPageProps): JSX.Element =>
         <Header title="Ionic Playground" />
 
         <IonContent fullscreen className="ion-padding">
-          <Container fixed>
-            <SignInForm />
+          <Container className="ls-signin-page__container" fixed>
+            <SignInForm className="ls-signin-page__form" />
           </Container>
         </IonContent>
       </ProgressProvider>
diff --git a/src/pages/Auth/SignIn/components/SignInForm.scss b/src/pages/Auth/SignIn/components/SignInForm.scss
index f926e73..9f0dc83 100644
--- a/src/pages/Auth/SignIn/components/SignInForm.scss
+++ b/src/pages/Auth/SignIn/components/SignInForm.scss
@@ -1,14 +1,13 @@
 .ls-signin-form {
-  ion-input,
-  ion-checkbox {
+  &__input {
     margin-bottom: 1rem;
   }
 
-  ion-checkbox {
+  &__input-checkbox {
     font-size: 0.75rem;
   }
 
-  &-button-submit {
+  &__button {
     margin-top: 2rem;
   }
 }
diff --git a/src/pages/Auth/SignIn/components/SignInForm.tsx b/src/pages/Auth/SignIn/components/SignInForm.tsx
index 71191ac..4a22c57 100644
--- a/src/pages/Auth/SignIn/components/SignInForm.tsx
+++ b/src/pages/Auth/SignIn/components/SignInForm.tsx
@@ -123,6 +123,7 @@ const SignInForm = ({ className, testid = 'form-signin' }: SignInFormProps): JSX
               labelPlacement="stacked"
               maxlength={30}
               autocomplete="off"
+              className="ls-signin-form__input"
               ref={focusInput}
               data-testid={`${testid}-field-username`}
             />
@@ -133,19 +134,24 @@ const SignInForm = ({ className, testid = 'form-signin' }: SignInFormProps): JSX
               labelPlacement="stacked"
               maxlength={30}
               autocomplete="off"
+              className="ls-signin-form__input"
               data-testid={`${testid}-field-password`}
             >
               <IonInputPasswordToggle slot="end"></IonInputPasswordToggle>
             </Input>
 
-            <CheckboxInput name="rememberMe" testid={`${testid}-field-rememberme`}>
+            <CheckboxInput
+              name="rememberMe"
+              className="ls-signin-form__input ls-signin-form__input-checkbox"
+              testid={`${testid}-field-rememberme`}
+            >
               Remember me
             </CheckboxInput>
 
             <IonButton
               type="submit"
               color="primary"
-              className="ls-signin-form-button-submit"
+              className="ls-signin-form__button"
               expand="block"
               disabled={isSubmitting || !dirty}
               data-testid={`${testid}-button-submit`}
diff --git a/src/pages/Auth/SignOut/SignOutPage.scss b/src/pages/Auth/SignOut/SignOutPage.scss
index 6da1b57..811de43 100644
--- a/src/pages/Auth/SignOut/SignOutPage.scss
+++ b/src/pages/Auth/SignOut/SignOutPage.scss
@@ -1,5 +1,5 @@
 .ls-page-signout {
-  .ls-loader-spinner {
+  &__loader-spinner {
     height: 100%;
 
     ion-spinner {
diff --git a/src/pages/Auth/SignOut/SignOutPage.tsx b/src/pages/Auth/SignOut/SignOutPage.tsx
index 8e0c2bc..524603f 100644
--- a/src/pages/Auth/SignOut/SignOutPage.tsx
+++ b/src/pages/Auth/SignOut/SignOutPage.tsx
@@ -32,7 +32,7 @@ const SignOutPage = ({ testid = 'page-signout' }: PropsWithTestId): JSX.Element
   return (
     <IonPage className="ls-page-signout" data-testid={testid}>
       <IonContent fullscreen>
-        <LoaderSpinner />
+        <LoaderSpinner className="ls-page-signout__loader-spinner" />
       </IonContent>
     </IonPage>
   );
diff --git a/src/pages/Home/HomePage.tsx b/src/pages/Home/HomePage.tsx
index 21d4dae..e970b8b 100644
--- a/src/pages/Home/HomePage.tsx
+++ b/src/pages/Home/HomePage.tsx
@@ -40,7 +40,7 @@ const HomePage = (): JSX.Element => {
         <IonGrid fixed>
           <IonRow>
             <IonCol sizeXs="12" sizeMd="6">
-              <WelcomeBlock className="block-welcome" />
+              <WelcomeBlock />
             </IonCol>
             <IonCol sizeXs="12" sizeMd="6">
               <UserSummaryCard />
diff --git a/src/pages/Users/components/UserAdd/UserAddFab.scss b/src/pages/Users/components/UserAdd/UserAddFab.scss
index 1c049e5..2efb740 100644
--- a/src/pages/Users/components/UserAdd/UserAddFab.scss
+++ b/src/pages/Users/components/UserAdd/UserAddFab.scss
@@ -1,5 +1,5 @@
 .ls-user-add-fab {
-  .ls-icon {
+  &__icon {
     font-size: 1.125rem;
   }
 }
diff --git a/src/pages/Users/components/UserAdd/UserAddFab.tsx b/src/pages/Users/components/UserAdd/UserAddFab.tsx
index b052cdd..8d5875d 100644
--- a/src/pages/Users/components/UserAdd/UserAddFab.tsx
+++ b/src/pages/Users/components/UserAdd/UserAddFab.tsx
@@ -37,7 +37,7 @@ const UserAddFab = ({
       {...fabProps}
     >
       <IonFabButton>
-        <Icon icon={IconName.Plus} />
+        <Icon className="ls-user-add-fab__icon" icon={IconName.Plus} />
       </IonFabButton>
     </IonFab>
   );
diff --git a/src/pages/Users/components/UserDetail/AddressDetail.tsx b/src/pages/Users/components/UserDetail/AddressDetail.tsx
index a86b72d..c8a1ffe 100644
--- a/src/pages/Users/components/UserDetail/AddressDetail.tsx
+++ b/src/pages/Users/components/UserDetail/AddressDetail.tsx
@@ -44,7 +44,7 @@ const AddressDetail = ({
     // loading state
     return (
       <div
-        className={classNames('ls-address-detail ls-address-detail-loader', className)}
+        className={classNames('ls-address-detail ls-address-detail--loading', className)}
         data-testid={`${testid}-loader`}
       >
         <HeaderRow border>
diff --git a/src/pages/Users/components/UserDetail/CompanyDetail.tsx b/src/pages/Users/components/UserDetail/CompanyDetail.tsx
index 19058a6..bde4009 100644
--- a/src/pages/Users/components/UserDetail/CompanyDetail.tsx
+++ b/src/pages/Users/components/UserDetail/CompanyDetail.tsx
@@ -44,7 +44,7 @@ const CompanyDetail = ({
     // loading state
     return (
       <div
-        className={classNames('ls-company-detail ls-company-detail-loader')}
+        className={classNames('ls-company-detail ls-company-detail--loading')}
         data-testid={`${testid}-loader`}
       >
         <HeaderRow border>
diff --git a/src/pages/Users/components/UserDetail/ContactInfo.scss b/src/pages/Users/components/UserDetail/ContactInfo.scss
index 9ccde2f..8c65a0b 100644
--- a/src/pages/Users/components/UserDetail/ContactInfo.scss
+++ b/src/pages/Users/components/UserDetail/ContactInfo.scss
@@ -1,5 +1,5 @@
 .ls-contact-info {
-  .ls-contact-info-content {
+  &__content {
     > * {
       display: flex;
       align-items: center;
diff --git a/src/pages/Users/components/UserDetail/ContactInfo.tsx b/src/pages/Users/components/UserDetail/ContactInfo.tsx
index d0d464e..bfeb053 100644
--- a/src/pages/Users/components/UserDetail/ContactInfo.tsx
+++ b/src/pages/Users/components/UserDetail/ContactInfo.tsx
@@ -48,7 +48,7 @@ const ContactInfo = ({
     // loading state
     return (
       <div
-        className={classNames('ls-contact-info ls-contact-info-loader', className)}
+        className={classNames('ls-contact-info ls-contact-info--loading', className)}
         data-testid={`${testid}-loader`}
       >
         {showHeader && (
@@ -57,7 +57,7 @@ const ContactInfo = ({
             <LoaderSkeleton animated widthStyle="12rem" heightStyle="1.5rem" />
           </HeaderRow>
         )}
-        <div className="ls-contact-info-content">
+        <div className="ls-contact-info__content">
           <LoaderSkeleton animated widthStyle="20rem" heightStyle="1.25rem" />
           <LoaderSkeleton animated widthStyle="20rem" heightStyle="1.25rem" />
           <LoaderSkeleton animated widthStyle="20rem" heightStyle="1.25rem" />
@@ -76,7 +76,7 @@ const ContactInfo = ({
             <div>Contact Info</div>
           </HeaderRow>
         )}
-        <div className="ls-contact-info-content">
+        <div className="ls-contact-info__content">
           {user.email && (
             <div>
               <Icon icon={IconName.Envelope} />
diff --git a/src/pages/Users/components/UserForm/UserForm.scss b/src/pages/Users/components/UserForm/UserForm.scss
index 285cb47..2582f8c 100644
--- a/src/pages/Users/components/UserForm/UserForm.scss
+++ b/src/pages/Users/components/UserForm/UserForm.scss
@@ -1,5 +1,9 @@
 .ls-user-form {
-  ion-input {
+  &__input {
     margin-bottom: 0.5rem;
   }
+
+  &__button {
+    margin-top: 2rem;
+  }
 }
diff --git a/src/pages/Users/components/UserForm/UserForm.tsx b/src/pages/Users/components/UserForm/UserForm.tsx
index 4f97ae2..c3102b4 100644
--- a/src/pages/Users/components/UserForm/UserForm.tsx
+++ b/src/pages/Users/components/UserForm/UserForm.tsx
@@ -78,6 +78,7 @@ const UserForm = ({
               label="Name"
               labelPlacement="stacked"
               disabled={isSubmitting}
+              className="ls-user-form__input"
               ref={focusInput}
               data-testid={`${testid}-field-name`}
             ></Input>
@@ -87,6 +88,7 @@ const UserForm = ({
               labelPlacement="stacked"
               disabled={isSubmitting}
               maxlength={30}
+              className="ls-user-form__input"
               data-testid={`${testid}-field-username`}
             ></Input>
             <Input
@@ -95,6 +97,7 @@ const UserForm = ({
               label="Email"
               labelPlacement="stacked"
               disabled={isSubmitting}
+              className="ls-user-form__input"
               data-testid={`${testid}-field-email`}
             ></Input>
             <Input
@@ -102,6 +105,7 @@ const UserForm = ({
               label="Phone"
               labelPlacement="stacked"
               disabled={isSubmitting}
+              className="ls-user-form__input"
               data-testid={`${testid}-field-phone`}
             ></Input>
             <Input
@@ -109,13 +113,14 @@ const UserForm = ({
               label="Website"
               labelPlacement="stacked"
               disabled={isSubmitting}
+              className="ls-user-form__input"
               data-testid={`${testid}-field-website`}
             ></Input>
 
             <IonButton
               type="submit"
               color="primary"
-              className="ion-margin-top"
+              className="ls-user-form__button"
               expand="block"
               disabled={isSubmitting || !dirty}
               data-testid={`${testid}-button-submit`}

From 9757391c39e25cde0974ccab9d461d1378324df0 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Tue, 1 Oct 2024 06:09:24 -0400
Subject: [PATCH 57/57] bem

---
 .../Users/components/UserList/UserCard.scss   |  2 +-
 .../components/UserList/UserListItem.scss     |  6 +++---
 .../components/UserList/UserListItem.tsx      | 19 ++++++++++++++-----
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/pages/Users/components/UserList/UserCard.scss b/src/pages/Users/components/UserList/UserCard.scss
index 76a8799..dc55772 100644
--- a/src/pages/Users/components/UserList/UserCard.scss
+++ b/src/pages/Users/components/UserList/UserCard.scss
@@ -7,7 +7,7 @@
     column-gap: 1rem;
   }
 
-  &__avatar.ls-avatar {
+  &__avatar {
     height: 3rem;
     width: 3rem;
 
diff --git a/src/pages/Users/components/UserList/UserListItem.scss b/src/pages/Users/components/UserList/UserListItem.scss
index 58b37df..7b6c1d1 100644
--- a/src/pages/Users/components/UserList/UserListItem.scss
+++ b/src/pages/Users/components/UserList/UserListItem.scss
@@ -1,5 +1,5 @@
 .ls-user-list-item {
-  ion-item {
+  &__item {
     --inner-padding-bottom: 0.5rem;
     --inner-padding-top: 0.5rem;
   }
@@ -24,8 +24,8 @@
     }
   }
 
-  ion-item-option {
-    .ls-icon {
+  &__sliding-option {
+    &-icon {
       margin-right: 0.375rem;
     }
   }
diff --git a/src/pages/Users/components/UserList/UserListItem.tsx b/src/pages/Users/components/UserList/UserListItem.tsx
index d3da46b..1026d7e 100644
--- a/src/pages/Users/components/UserList/UserListItem.tsx
+++ b/src/pages/Users/components/UserList/UserListItem.tsx
@@ -58,7 +58,12 @@ const UserListItem = ({ className, lines, testid, user }: UserListItemProps): JS
       className={classNames('ls-user-list-item', className)}
       data-testid={testIdentifier}
     >
-      <IonItem routerLink={`/tabs/users/${user.id}`} lines={lines} detail>
+      <IonItem
+        className="ls-user-list-item__item"
+        routerLink={`/tabs/users/${user.id}`}
+        lines={lines}
+        detail
+      >
         <Avatar className="ls-user-list-item__avatar" value={user.name} size="large" />
         <IonLabel>
           <div className="ls-user-list-item__content-row ls-user-list-item__content-row--primary">
@@ -72,12 +77,16 @@ const UserListItem = ({ className, lines, testid, user }: UserListItemProps): JS
       </IonItem>
 
       <IonItemOptions>
-        <IonItemOption onClick={() => doEdit()}>
-          <Icon icon={IconName.PenToSquare} />
+        <IonItemOption className="ls-user-list-item__sliding-option" onClick={() => doEdit()}>
+          <Icon className="ls-user-list-item__sliding-option-icon" icon={IconName.PenToSquare} />
           Edit
         </IonItemOption>
-        <IonItemOption color="danger" onClick={() => setShowConfirmDelete(true)}>
-          <Icon icon={IconName.Trash} />
+        <IonItemOption
+          className="ls-user-list-item__sliding-option"
+          color="danger"
+          onClick={() => setShowConfirmDelete(true)}
+        >
+          <Icon className="ls-user-list-item__sliding-option-icon" icon={IconName.Trash} />
           Delete
         </IonItemOption>
       </IonItemOptions>