Merge pull request #766 from Northeastern-Electric-Racing/#765-remove…

…-empty-css-files

#765 remove empty css files

package.json

@@ -163,6 +163,7 @@
     "@types/react-dom": "^16.9.10",
     "@types/react-router-dom": "^5.1.7",
     "axios": "^0.21.1",
+    "classnames": "^2.3.1",
     "bootstrap": "^4.6.0",
     "google-auth-library": "^7.5.0",
     "react": "^17.0.1",

src/frontend/app/app-authenticated/app-authenticated.tsx

@@ -13,15 +13,21 @@ import NavTopBar from '../../layouts/nav-top-bar/nav-top-bar';
 import Settings from '../../pages/SettingsPage/settings';
 import HelpPage from '../../pages/HelpPage/HelpPage';
 import Sidebar from '../../layouts/sidebar/sidebar';
-import styles from './app-authenticated.module.css';
+
+const styles = {
+  content: {
+    marginTop: '4rem',
+    marginLeft: '85px'
+  }
+};
 
 const AppAuthenticated: React.FC = () => {
   return (
     <>
       <NavTopBar />
       <div>
         <Sidebar />
-        <div className={styles.content}>
+        <div style={styles.content}>
           <Switch>
             <Route path={routes.PROJECTS} component={Projects} />
             <Redirect from={routes.CR_BY_ID} to={routes.CHANGE_REQUESTS_BY_ID} />

src/frontend/app/app-context-auth/app-context-auth.tsx

@@ -6,7 +6,6 @@
 import { createContext } from 'react';
 import { useProvideAuth } from '../../../services/auth.hooks';
 import { Auth } from '../../../shared/types';
-import './app-context-auth.module.css';
 
 export const AuthContext = createContext<Auth | undefined>(undefined);
 

src/frontend/app/app-context-query/app-context-query.tsx

@@ -4,7 +4,6 @@
  */
 
 import { QueryClient, QueryClientProvider } from 'react-query';
-import './app-context-query.module.css';
 
 const AppContextQuery: React.FC = (props) => {
   const queryClient = new QueryClient();

src/frontend/app/app-context-theme/app-context-theme.tsx

@@ -6,7 +6,6 @@
 import { createContext } from 'react';
 import { useProvideTheme } from '../../../services/theme.hooks';
 import { Theme } from '../../../shared/types';
-import './app-context-theme.module.css';
 
 export const ThemeContext = createContext<Theme | undefined>(undefined);
 

src/frontend/app/app-context/app-context.tsx

@@ -6,7 +6,6 @@
 import AppContextAuth from '../app-context-auth/app-context-auth';
 import AppContextQuery from '../app-context-query/app-context-query';
 import AppContextTheme from '../app-context-theme/app-context-theme';
-import './app-context.module.css';
 
 const AppContext: React.FC = (props) => {
   return (

src/frontend/app/app-main/app-main.tsx

@@ -6,7 +6,6 @@
 import { BrowserRouter } from 'react-router-dom';
 import AppContext from '../app-context/app-context';
 import AppPublic from '../app-public/app-public';
-import './app-main.module.css';
 
 const AppMain: React.FC = () => {
   return (

src/frontend/app/app-public/app-public.tsx

@@ -9,7 +9,6 @@ import { useTheme } from '../../../services/theme.hooks';
 import { routes } from '../../../shared/routes';
 import Login from '../../pages/LoginPage/login';
 import AppAuthenticated from '../app-authenticated/app-authenticated';
-import './app-public.module.css';
 
 const AppPublic: React.FC = () => {
   const auth = useAuth();

src/frontend/components/action-button/action-button.tsx

@@ -7,8 +7,15 @@ import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Button } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
-import styles from './action-button.module.css';
 
+const styles = {
+  button: {
+    display: 'flex'
+  },
+  buttonText: {
+    color: 'white'
+  }
+};
 interface ActionButtonProps {
   link: string;
   icon: IconDefinition;
@@ -20,9 +27,11 @@ const ActionButton: React.FC<ActionButtonProps> = ({ link, icon, text }) => {
   return (
     <Link className={'row py-auto px-3 '} to={link} style={{ textDecoration: 'none' }}>
       <Button>
-        <div className={styles.button}>
+        <div style={styles.button}>
           <FontAwesomeIcon className="mr-2 my-auto" icon={icon} size="1x" color="white" />
-          <p className={'mb-0 ' + styles.buttonText}>{text}</p>
+          <p className="mb-0" style={styles.buttonText}>
+            {text}
+          </p>
         </div>
       </Button>
     </Link>

src/frontend/components/bullet-list/bullet-list.tsx

@@ -5,7 +5,6 @@
 
 import { ReactNode } from 'react';
 import PageBlock from '../../layouts/page-block/page-block';
-import styles from './bullet-list.module.css';
 
 interface BulletListProps {
   title: string;
@@ -16,11 +15,18 @@ interface BulletListProps {
   fieldName?: string;
 }
 
+const styles = {
+  bulletList: {
+    paddingLeft: '200px',
+    marginBottom: '0em'
+  }
+};
+
 const BulletList: React.FC<BulletListProps> = ({ title, headerRight, list, ordered }) => {
   const listPrepared = list.map((bullet, idx) => <li key={idx}>{bullet}</li>);
-  let builtList = <ul className={styles.bulletList}>{listPrepared}</ul>;
+  let builtList = <ul style={styles.bulletList}>{listPrepared}</ul>;
   if (ordered) {
-    builtList = <ol className={styles.bulletList}>{listPrepared}</ol>;
+    builtList = <ol style={styles.bulletList}>{listPrepared}</ol>;
   }
   return (
     <PageBlock title={title} headerRight={headerRight}>

src/frontend/components/changes-list/changes-list.tsx

@@ -9,7 +9,6 @@ import { ImplementedChange } from 'utils';
 import { fullNamePipe, datePipe } from '../../../shared/pipes';
 import { routes } from '../../../shared/routes';
 import BulletList from '../bullet-list/bullet-list';
-import './changes-list.module.css';
 
 interface ChangesListProps {
   changes: ImplementedChange[];

src/frontend/components/description-list/description-list.tsx

@@ -5,7 +5,6 @@
 
 import { DescriptionBullet } from 'utils';
 import BulletList from '../bullet-list/bullet-list';
-import './description-list.module.css';
 
 interface DescriptionListProps {
   title: string;

src/frontend/components/external-link/external-link.tsx

@@ -5,7 +5,6 @@
 
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import './external-link.module.css';
 
 interface ExternalLinkProps {
   icon: IconProp;

src/frontend/components/wbs-status/wbs-status.tsx

@@ -5,7 +5,6 @@
 
 import { Badge } from 'react-bootstrap';
 import { WbsElementStatus } from 'utils';
-import './wbs-status.module.css';
 
 interface WbsStatusProps {
   status: WbsElementStatus;

src/frontend/layouts/nav-top-bar/nav-notifications-menu/nav-notifications-menu.tsx

@@ -6,7 +6,6 @@
 import { NavDropdown } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faBell } from '@fortawesome/free-solid-svg-icons';
-import './nav-notifications-menu.module.css';
 
 const NavNotificationsMenu: React.FC = () => {
   return (

src/frontend/layouts/page-block/page-block.tsx

@@ -6,13 +6,18 @@
 import { ReactNode } from 'react';
 import { Card } from 'react-bootstrap';
 import { useTheme } from '../../../services/theme.hooks';
-import styles from './page-block.module.css';
 
 interface PageBlockProps {
   title: string;
   headerRight?: ReactNode;
 }
 
+const styles = {
+  header: {
+    overflow: 'hidden'
+  }
+};
+
 /**
  * Custom component for a consistent page-building block.
  * @param title The title of the block on the page
@@ -24,7 +29,7 @@ const PageBlock: React.FC<PageBlockProps> = ({ title, headerRight, children }) =
   return (
     <Card className={'mb-3'} border={theme.cardBorder} bg={theme.cardBg}>
       <Card.Body>
-        <Card.Title className={styles.header}>
+        <Card.Title style={styles.header}>
           <h5 className={'float-left mb-0'}>{title}</h5>
           <div className={'float-right'}>{headerRight}</div>
         </Card.Title>

src/frontend/layouts/page-title/page-title.tsx

@@ -6,14 +6,19 @@
 import { ReactNode } from 'react';
 import { LinkItem } from '../../../shared/types';
 import PageBreadcrumbs from './page-breadcrumbs/page-breadcrumbs';
-import styles from './page-title.module.css';
 
 interface PageTitleProps {
   title: string;
   previousPages: LinkItem[];
   actionButton?: ReactNode;
 }
 
+const styles = {
+  titleText: {
+    marginBottom: 0
+  }
+};
+
 /**
  * Build the page title section for a page.
  * @param title The title of the page
@@ -25,7 +30,7 @@ const PageTitle: React.FC<PageTitleProps> = ({ title, previousPages, actionButto
     <div className={'pt-3 mb-2 d-flex justify-content-between align-items-center'}>
       <div>
         <PageBreadcrumbs currentPageTitle={title} previousPages={previousPages} />
-        <h3 className={styles.titleText}>{title}</h3>
+        <h3 style={styles.titleText}>{title}</h3>
       </div>
       <div>{actionButton}</div>
     </div>

src/frontend/pages/ChangeRequestDetailPage/change-request-details.tsx

@@ -9,7 +9,6 @@ import { useAuth } from '../../../services/auth.hooks';
 import ChangeRequestDetailsView from './change-request-details/change-request-details';
 import LoadingIndicator from '../../components/loading-indicator/loading-indicator';
 import ErrorPage from '../../pages/ErrorPage/error-page';
-import './change-request-details.module.css';
 
 const ChangeRequestDetails: React.FC = () => {
   interface ParamTypes {