22 Remove module styles (#29)

remove module styles
leanstacks · Jul 27, 2024 · 2331c54 · 2331c54
1 parent 8f2b728
commit 2331c54
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 27 deletions.
diff --git a/.../components/Content/Container.module.scss → src/common/components/Content/Container.scss b/.../components/Content/Container.module.scss → src/common/components/Content/Container.scss
diff --git a/src/common/components/Content/Container.tsx b/src/common/components/Content/Container.tsx
@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react';
 import classNames from 'classnames';
 
 import { BaseComponentProps } from '../types';
-import classes from './Container.module.scss';
+import './Container.scss';
 
 /**
  * Properties for the `Container` component.
@@ -32,10 +32,7 @@ const Container = ({
   testid = 'container',
 }: ContainerProps): JSX.Element => {
   return (
-    <div
-      className={classNames(classes.container, { [classes.fixed]: fixed }, className)}
-      data-testid={testid}
-    >
+    <div className={classNames('container', { fixed: fixed }, className)} data-testid={testid}>
       {children}
     </div>
   );

diff --git a/...components/Content/PageHeader.module.scss → ...common/components/Content/PageHeader.scss b/...components/Content/PageHeader.module.scss → ...common/components/Content/PageHeader.scss
diff --git a/src/common/components/Content/PageHeader.tsx b/src/common/components/Content/PageHeader.tsx
@@ -3,8 +3,7 @@ import { IonButtons, IonRow } from '@ionic/react';
 import classNames from 'classnames';
 
 import { BaseComponentProps } from '../types';
-import classes from './PageHeader.module.scss';
-
+import './PageHeader.scss';
 /**
  * Properties for the `PageHeader` component.
  * @param {ReactNode} title - A title.
@@ -47,8 +46,8 @@ const PageHeader = ({
   title,
 }: PageHeaderProps): JSX.Element => {
   return (
-    <IonRow className={classNames(classes['page-header'], className)} data-testid={testid}>
-      <div className={classes.title} data-testid={`${testid}-title`}>
+    <IonRow className={classNames('page-header', className)} data-testid={testid}>
+      <div className={'title'} data-testid={`${testid}-title`}>
         {title}
       </div>
       {buttons && <IonButtons>{buttons}</IonButtons>}

diff --git a/...nts/UserDetail/UserDetailPage.module.scss → ...components/UserDetail/UserDetailPage.scss b/...nts/UserDetail/UserDetailPage.module.scss → ...components/UserDetail/UserDetailPage.scss
@@ -1,6 +1,6 @@
-.page_user_detail {
-  .page_header {
-    .title_block {
+.page-user-detail {
+  .page-header {
+    .title-block {
       display: flex;
       flex-wrap: nowrap;
       align-items: center;

diff --git a/src/pages/Users/components/UserDetail/UserDetailPage.tsx b/src/pages/Users/components/UserDetail/UserDetailPage.tsx
@@ -3,7 +3,7 @@ import { useParams } from 'react-router';
 import { create } from 'ionicons/icons';
 import classNames from 'classnames';
 
-import classes from './UserDetailPage.module.scss';
+import './UserDetailPage.scss';
 import { useGetUser } from 'pages/Users/api/useGetUser';
 import Header from 'common/components/Header/Header';
 import UserDetail from './UserDetail';
@@ -29,7 +29,7 @@ export const UserDetailPage = (): JSX.Element => {
   const { data: user } = useGetUser({ userId });
 
   return (
-    <IonPage className={classes.page_user_detail} data-testid={testid}>
+    <IonPage className={'page-user-detail'} data-testid={testid}>
       <Header
         backButton
         buttons={
@@ -48,11 +48,11 @@ export const UserDetailPage = (): JSX.Element => {
       <IonContent className="ion-padding">
         <Container fixed>
           <PageHeader
-            className={classNames('ion-hide-md-down', classes.page_header)}
+            className={classNames('ion-hide-md-down', 'page-header')}
             title={
               user ? (
-                <div className={classes.title_block}>
-                  <Avatar value={user.name} className={classes.avatar} />
+                <div className={'title-block'}>
+                  <Avatar value={user.name} />
                   <div>{user.name}</div>
                 </div>
               ) : (

diff --git a/...ponents/UserEdit/UserEditPage.module.scss → ...ers/components/UserEdit/UserEditPage.scss b/...ponents/UserEdit/UserEditPage.module.scss → ...ers/components/UserEdit/UserEditPage.scss
@@ -1,6 +1,6 @@
-.page_user_edit {
-  .page_header {
-    .title_block {
+.page-user-edit {
+  .page-header {
+    .title-block {
       display: flex;
       flex-wrap: nowrap;
       align-items: center;

diff --git a/src/pages/Users/components/UserEdit/UserEditPage.tsx b/src/pages/Users/components/UserEdit/UserEditPage.tsx
@@ -1,8 +1,7 @@
 import { IonContent, IonPage } from '@ionic/react';
 import { useParams } from 'react-router';
-import classNames from 'classnames';
 
-import classes from './UserEditPage.module.scss';
+import './UserEditPage.scss';
 import { useGetUser } from 'pages/Users/api/useGetUser';
 import Header from 'common/components/Header/Header';
 import Container from 'common/components/Content/Container';
@@ -30,21 +29,21 @@ export const UserEditPage = (): JSX.Element => {
   const { data: user } = useGetUser({ userId });
 
   return (
-    <IonPage className={classes.page_user_edit} data-testid={testid}>
+    <IonPage className={'page-user-edit'} data-testid={testid}>
       <Header backButton defaultHref="/tabs/users" title={user && user.name} />
 
       <IonContent className="ion-padding">
         <Container fixed>
           <PageHeader
-            className={classNames('ion-hide-md-down', classes.page_header)}
+            className="ion-hide-md-down"
             title={
               user ? (
-                <div className={classes.title_block} data-testid={`${testid}-title`}>
-                  <Avatar value={user.name} className={classes.avatar} />
+                <div className="title-block" data-testid={`${testid}-title`}>
+                  <Avatar value={user.name} />
                   <div>{user.name}</div>
                 </div>
               ) : (
-                <div className={classes.title_block} data-testid={`${testid}-loader`}>
+                <div className="title-block" data-testid={`${testid}-loader`}>
                   <LoaderSkeleton animated widthStyle="2rem" heightStyle="2rem" />
                   <LoaderSkeleton animated widthStyle="20rem" heightStyle="2rem" />
                 </div>