Colorful buttons

.github/workflows/client.yaml

@@ -19,11 +19,6 @@ jobs:
       matrix:
         node-version: [ 12.x ]
 
-    # Run all `run` commands in the cliend directory
-    defaults:
-      run:
-        working-directory: client
-
     steps:
       - uses: actions/checkout@v2
 
@@ -41,5 +36,10 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: Install client dependencies
+        run: npm ci
+        working-directory: client
+
       - name: Lint
         run: npm run lint
+        working-directory: client

client/.env

@@ -1,3 +1,4 @@
 REACT_APP_SSO_CLIENT_ID=vote
 REACT_APP_SSO_AUTHORITY=https://sso.csh.rit.edu/auth/realms/csh
-REACT_APP_BASE_API_URL=https://vote.csh.rit.edu
+REACT_APP_BASE_API_URL=https://vote.csh.rit.edu
+

client/src/components/NavBar/NavBar.tsx

@@ -24,7 +24,6 @@ const NavBar: React.FunctionComponent = () => {
 
   }
 
-
   return (
     <div>
       <Navbar color="primary" dark expand="lg" fixed="top">

client/src/components/Pages/Vote/index.tsx

@@ -11,6 +11,7 @@ type Poll = {
   _id: string,
   title: string,
   choices: Array<string>,
+  type: string,
 }
 
 export const Vote: React.FunctionComponent = () =>{
@@ -88,8 +89,31 @@ export const Vote: React.FunctionComponent = () =>{
           <div className="poll-name-title-panel">{poll.title}</div>
           <div className="poll-options-items">
           {poll.choices.map(function(option, idx){
-            return (<li key={idx}><button onClick={() => setSelected(idx)} className="btn btn-primary poll-option-button">{option}</button></li>)
-            })}
+            if (poll.type === "Conditional") {
+              return (<li key={idx}><button onClick={() => setSelected(idx)} className="btn btn-primary poll-option-button btn-warning">{option}</button></li>);
+            }
+
+            let btnClass = "btn btn-primary poll-option-button ";
+            switch(option) {
+              case "Pass":
+                btnClass += "btn-success";
+                break;
+              case "Conditional":
+                btnClass += "btn-warning";
+                break;
+              case "Fail or Conditional":
+                btnClass += "btn-warning";
+                break;
+              case "Fail":
+                btnClass += "btn-danger";
+                break;
+              case "Abstain":
+                btnClass += "btn-secondary";
+                break;
+            }
+
+            return (<li key={idx}><button onClick={() => setSelected(idx)} className={btnClass}>{option}</button></li>);
+          })}
           </div>
         </div>
         <div>

client/src/components/Pages/Vote/vote.css

@@ -15,11 +15,17 @@
     font-size: 14px;
     padding:12px;
     padding-right: 16px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    flex-flow: wrap;
 }
 
 .poll-options-items li {
     list-style: none;
     padding-top: 12px;
+    padding-left: 12px;
+    padding-right: 12px;
 }
 
 .poll-list-button {
@@ -40,4 +46,4 @@
 
 .submit-button {
     font-size: 14px;
-}
+}

service/index.ts

@@ -85,7 +85,7 @@ app.use(cors());
 let currentPolls = [
   {
     title: "test Poll",
-    choices: ["fail", "conditional", "abstain"],
+    choices: ["Fail", "Conditional", "Abstain"],
     type: "FailConditional",
     _id: "5f9b2d5d601e1c6971430638",
   },