Merge pull request #82 from rivernews/feature/081/ui-lib-migration

Feature-081 UI Library Migration
rivernews · Nov 29, 2020 · 8143e6c · 8143e6c
2 parents efc1050 + 5502f08
commit 8143e6c
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -7,6 +7,8 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-brands-svg-icons": "^5.11.2",
     "@fortawesome/react-fontawesome": "^0.1.6",
+    "@material-ui/core": "^4.11.1",
+    "@material-ui/icons": "^4.9.1",
     "@material/react-button": "^0.10.0",
     "@material/react-card": "^0.15.0",
     "@material/react-chips": "^0.15.0",

diff --git a/public/index.html b/public/index.html
@@ -6,7 +6,7 @@
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+      content="minimum-scale=1, initial-scale=1, width=device-width"
     />
     <meta name="theme-color" content="#000000" />
     <!--
@@ -27,6 +27,7 @@
 
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.tsx b/src/App.tsx
@@ -10,6 +10,9 @@ import { RequestedLoginMode } from "./state-management/types/auth-types";
 
 /** Routes & pages */
 import { PageRoutesContainer } from "./pages/page-routes/page-routes";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
+
 
 /** Locals */
 import "./App.css";
@@ -20,6 +23,8 @@ interface IAppProps {
     retrieveLoginAuth: () => void;
 }
 
+const theme = createMuiTheme();
+
 class App extends Component<IAppProps> {
     componentDidMount() {
         this.props.retrieveLoginAuth();
@@ -28,7 +33,10 @@ class App extends Component<IAppProps> {
     render() {
         return (
             <div className="App">
-                <PageRoutesContainer />
+                <CssBaseline />
+                <MuiThemeProvider theme={theme}>
+                    <PageRoutesContainer />
+                </MuiThemeProvider>
             </div>
         );
     }

diff --git a/src/components/company/company-list-item.tsx b/src/components/company/company-list-item.tsx
@@ -5,9 +5,13 @@ import { Company } from "../../data-model/company/company";
 import { Application } from "../../data-model/application/application";
 
 /** Components */
-import Card, { CardPrimaryContent } from "@material/react-card";
 import '@material/react-card/dist/card.css';
 import List, { ListItem, ListItemText } from "@material/react-list";
+import MaterialUIListItem from "@material-ui/core/ListItem";
+import MaterialUIButton from "@material-ui/core/Button";
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import Checkbox from '@material-ui/core/Checkbox';
+
 import '@material/react-list/dist/list.css';
 // mdc-chips
 import { ChipSet, Chip } from '@material/react-chips';
@@ -16,6 +20,7 @@ import "@material/react-chips/dist/chips.css";
 import Skeleton from 'react-loading-skeleton';
 
 import styles from './company-list-item.module.css';
+import { Typography } from "@material-ui/core";
 
 
 interface ICompanyListItemProps {
@@ -25,14 +30,18 @@ interface ICompanyListItemProps {
 }
 
 const CompanyListItem = (props: ICompanyListItemProps) => {
-    const onClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    const onClick = () => {
         props.onClick && props.company && props.onClick(props.company.uuid);
     }
 
     return (
-        <Card className={styles.companyCard} onClick={onClick}>
-            <CardPrimaryContent className={styles.companyCardContent}>
-                <h1>{props.company ? props.company.name : <Skeleton duration={1.1} width={`50vmin`} />}</h1>
+        <MaterialUIListItem className={false ? styles.companyCard : ''}>
+            <div className={styles.companyCardContent}>
+                <MaterialUIButton onClick={onClick}>
+                    <Typography variant="h5">
+                        {props.company ? props.company.name : <Skeleton duration={1.1} width={`50vmin`} />}
+                    </Typography>
+                </MaterialUIButton>
 
                 {props.company ? (
                     props.company.labels.length && props.company.labels[0].text ? (
@@ -63,8 +72,13 @@ const CompanyListItem = (props: ICompanyListItemProps) => {
                             )
                     }
                 </List>
-            </CardPrimaryContent>
-        </Card>
+                <ListItemSecondaryAction>
+                    <Checkbox 
+                        edge="end"
+                    />
+                </ListItemSecondaryAction>
+            </div>
+        </MaterialUIListItem>
     );
 }
 

diff --git a/src/pages/user-app-page/user-app-page.tsx b/src/pages/user-app-page/user-app-page.tsx
@@ -19,6 +19,7 @@ import { Application } from "../../data-model/application/application";
 import MaterialIcon from "@material/react-material-icon";
 // mdc react button
 import "@material/react-button/dist/button.css";
+import MaterialUIList from "@material-ui/core/List";
 import Button from "@material/react-button";
 
 // mdc-react input
@@ -161,7 +162,7 @@ class UserAppPage extends Component<IUserAppPageProps, IUserAppPageState> {
                                     />
                                 </TextField>
                             </div>
-                            <div>
+                            <MaterialUIList>
                                 {
                                     displayingCompanies.map(
                                         (company, index) =>
@@ -173,7 +174,7 @@ class UserAppPage extends Component<IUserAppPageProps, IUserAppPageState> {
                                             />
                                     )
                                 }
-                            </div>
+                            </MaterialUIList>
                         </TabContent>)
 
                         const groupCompanyTabs = Object.values(labelTypes).map((labelText: labelTypes, index) => {