Style Migration (#50)

* added support for semantic ui react

* removed support for bridge

* migrated login page to semantic ui

* replaced all bridge components with semantic, minor styling edits

* yarn format

* add husky

* yarn add husky to root

* removed css comments and fixed package.json

client/package.json

@@ -4,7 +4,6 @@
   "homepage": "https://pineapple.lol/",
   "license": "MIT",
   "dependencies": {
-    "@hack4impact-uiuc/bridge": "^1.1.0",
     "ag-grid-community": "^25.0.0",
     "ag-grid-enterprise": "^25.0.0",
     "ag-grid-react": "^25.0.0",
@@ -16,7 +15,9 @@
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
-    "react-select": "^3.2.0"
+    "react-select": "^3.2.0",
+    "semantic-ui-css": "^2.4.1",
+    "semantic-ui-react": "^2.0.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.6.2",

client/src/components/EditableAttribute/DateAttribute.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import DatePicker from 'react-datepicker';
+import { startCase } from 'lodash';
 import 'react-datepicker/dist/react-datepicker.css';
 import '../../css/DateAttribute.css';
 
@@ -17,7 +18,7 @@ const DateAttribute = ({
 
   return (
     <div className={className}>
-      <p>{attributeLabel}</p>
+      <p>{startCase(attributeLabel)}</p>
       <DatePicker
         className="datePicker"
         onChange={onValueChange}

client/src/components/EditableAttribute/EnumAttribute.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Select from 'react-select';
+import { startCase } from 'lodash';
 
 const defaultDropdownOption = { label: '', value: '' };
 
@@ -24,7 +25,7 @@ const EnumAttribute = ({
 
   return (
     <div className={className}>
-      <p>{attributeLabel}</p>
+      <p>{startCase(attributeLabel)}</p>
       <Select
         value={getOptionFromValue(value)}
         isDisabled={isDisabled}

client/src/components/EditableAttribute/TextAttribute.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { TextField } from '@hack4impact-uiuc/bridge';
+import { startCase } from 'lodash';
+import { Form } from 'semantic-ui-react';
 
 const TextAttribute = ({
   type = 'text',
@@ -16,8 +17,8 @@ const TextAttribute = ({
 
   return (
     <div className={className}>
-      <p>{attributeLabel}</p>
-      <TextField
+      <p>{startCase(attributeLabel)}</p>
+      <Form.Input
         type={type}
         value={value}
         onChange={onValueChange}

client/src/components/table/Table.js

@@ -12,7 +12,9 @@ const Table = () => {
   useEffect(() => {
     const getAllMembers = async () => {
       const allMembers = await getMembers();
-      setMembers(allMembers.data.result);
+      if (allMembers.data) {
+        setMembers(allMembers.data.result);
+      }
     };
     getAllMembers();
   }, []);

client/src/css/Login.css

@@ -18,7 +18,6 @@
 }
 
 .login-btn {
-  background-color: #dd4b39;
   color: white;
   font-weight: 500;
   font-family: inherit;
@@ -39,8 +38,3 @@
   border-radius: 5rem;
   margin: 2px 5px 2px 5px;
 }
-
-.login-btn:hover {
-  cursor: pointer;
-  background-color: #ed7465;
-}

client/src/css/Navbar.css

@@ -1,5 +1,6 @@
 .nav {
   display: flex;
+  margin: 1.5rem;
 }
 
 .nav #nav-title {
@@ -16,9 +17,10 @@
 .nav .profile-item {
   display: flex;
   align-items: center;
-  padding: 1rem 3rem 0rem 0rem;
+  margin-right: 2rem;
 }
 
 .nav .profile-item #welcome-text {
+  margin-top: 1rem;
   margin-right: 1rem;
 }

client/src/css/Profile.css

@@ -3,13 +3,18 @@
   margin-left: 2.5%;
   margin-right: 2.5%;
   display: inline-block;
+  margin-bottom: 1rem;
 }
 
 .profile-alert {
-  margin-top: 30px;
+  margin: 3rem;
 }
 
 #submit-button {
-  margin: 50px auto;
+  margin: 3rem auto 3rem auto;
   display: block;
 }
+
+.profile-form {
+  margin-left: 10%;
+}

client/src/css/Table.css

@@ -1,5 +1,4 @@
 .table-wrapper {
-  padding-top: 1rem;
   height: 85vh;
   width: 95%;
   margin: auto;

client/src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter as Router } from 'react-router-dom';
-import '@hack4impact-uiuc/bridge/dist/styles.css';
+import 'semantic-ui-css/semantic.min.css';
 
 import App from './App';
 

client/src/pages/Login.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useLocation } from 'react-router-dom';
-import { Alert, Icon } from '@hack4impact-uiuc/bridge';
+import { Button, Header, Icon, Image, Message } from 'semantic-ui-react';
 
 import googleIcon from '../assets/google-logo.png';
 import '../css/Login.css';
@@ -9,7 +9,7 @@ import buildURI from '../utils/apiHelpers';
 
 const LOGIN_FAILURE_QUERY_PARAM = 'failure';
 const LOGIN_FAILURE_TEXT =
-  'First time logging in? Your email isn't verified. Please contact an admin.';
+  "First time logging in? Your email isn't verified. Please contact an admin.";
 
 // A custom hook that builds on useLocation to parse
 // the query string for you.
@@ -28,23 +28,29 @@ const Login = () => {
       <div className="login-card">
         <h2>Member Database Login</h2>
         {didLoginFail && (
-          <Alert variant="error" mb="8px">
-            <Icon type="errorAlert" />
-            {LOGIN_FAILURE_TEXT}
-          </Alert>
+          <Message color="red">
+            <Header as="h4">
+              <Icon name="warning circle" />
+              <Header.Content>Login Failed!</Header.Content>
+            </Header>
+            <Message.Content>{LOGIN_FAILURE_TEXT}</Message.Content>
+          </Message>
         )}
-        <a
-          type="button"
-          href={buildURI(
-            'auth/login',
-            FRONTEND_BASE_URL,
-            `${FRONTEND_BASE_URL}/login?${LOGIN_FAILURE_QUERY_PARAM}=1`,
-          )}
-          className="login-btn"
-        >
-          <img className="google-icon" src={googleIcon} alt="Google Icon" />
-          Sign in with Google
-        </a>
+        <Button className="login-btn" color="orange">
+          <a
+            href={buildURI(
+              'auth/login',
+              FRONTEND_BASE_URL,
+              `${FRONTEND_BASE_URL}/login?${LOGIN_FAILURE_QUERY_PARAM}=1`,
+            )}
+          >
+            <Header as="h5">
+              <Image circular src={googleIcon} /> Sign in with Google
+            </Header>
+            {/* <img className="google-icon" src={googleIcon} alt="Google Icon" />
+          Sign in with Google */}
+          </a>
+        </Button>
       </div>
     </div>
   );