Merge pull request #98 from ethifylabs/develop

Merge Develop to Master patch-1.1
ethify · Jul 1, 2020 · 83dde31 · 83dde31
2 parents c7dd75a + 7cdd58c
commit 83dde31
Show file tree

Hide file tree

Showing 17 changed files with 1,349 additions and 813 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -12,22 +12,26 @@
     "@types/node": "^14.0.14",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
+    "@types/react-loader-spinner": "^3.1.0",
     "@types/react-router-dom": "^5.1.5",
     "clipboard-copy": "^3.1.0",
     "eslint": "6.8.0",
     "eslint-config-prettier": "6.11.0",
     "eslint-plugin-prettier": "3.1.4",
+    "firebase": "^7.14.6",
     "husky": "4.2.5",
     "lint-staged": "10.2.10",
-    "firebase": "^7.14.6",
     "lodash": "^4.17.15",
     "node-sass": "^4.14.1",
+    "prettier": "^2.0.5",
     "react": "^16.13.1",
     "react-alert": "^7.0.1",
     "react-alert-template-basic": "^1.0.0",
     "react-dom": "^16.13.1",
     "react-feather": "^2.0.8",
+    "react-loader-spinner": "^3.1.14",
     "react-meta-tags": "^0.7.4",
+    "react-number-format": "^4.4.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
     "react-share": "^4.2.0",

diff --git a/frontend/src/components/BusinessItem/BusinessItem.tsx b/frontend/src/components/BusinessItem/BusinessItem.tsx
@@ -4,6 +4,7 @@ import { Link } from "react-router-dom";
 import { ActionContext } from "../../hooks";
 import slugify from "react-slugify";
 import Truncate from "react-truncate";
+import NumberFormat from "react-number-format";
 
 function BusinessItem({ business }: any) {
   const { selectBusiness } = useContext(ActionContext);
@@ -40,11 +41,23 @@ function BusinessItem({ business }: any) {
       </p>
       <p className="top-margin-set business-donation-widget-donation-details">
         <span className="business-donation-widget-donation-details-amount">
-          ${Number.parseFloat(business.donation_received).toFixed(2)}
+          <NumberFormat
+            value={Number.parseFloat(business.donation_received).toFixed(2)}
+            displayType={"text"}
+            thousandSeparator={true}
+            prefix={"$"}
+          />
         </span>{" "}
         donated +{" "}
         <span className="business-donation-widget-donation-details-amount">
-          ${Number.parseFloat(business.current_clr_matching_amount).toFixed(2)}
+          <NumberFormat
+            value={Number.parseFloat(business.current_clr_matching_amount).toFixed(
+              2,
+            )}
+            displayType={"text"}
+            thousandSeparator={true}
+            prefix={"$"}
+          />
         </span>{" "}
         estimated match
       </p>
@@ -63,15 +76,25 @@ function BusinessItem({ business }: any) {
       </div>
       <div className="business-item-progress-labels-container">
         <span className="business-item-progress-label">
-          $
-          {(
-            Number.parseFloat(business.donation_received) +
-            Number.parseFloat(business.current_clr_matching_amount)
-          ).toFixed(0)}{" "}
+          <NumberFormat
+            value={(
+              Number.parseFloat(business.donation_received) +
+              Number.parseFloat(business.current_clr_matching_amount)
+            ).toFixed(0)}
+            displayType={"text"}
+            thousandSeparator={true}
+            prefix={"$"}
+          />{" "}
           estimated total
         </span>
         <span className="business-item-progress-label">
-          ${business.goal_amount} goal
+          <NumberFormat
+            value={business.goal_amount}
+            displayType={"text"}
+            thousandSeparator={true}
+            prefix={"$"}
+          />{" "}
+          goal
         </span>
       </div>
       <div className="business-item-button-container">

diff --git a/frontend/src/components/BusinessPage/BusinessPage.scss b/frontend/src/components/BusinessPage/BusinessPage.scss
@@ -171,6 +171,7 @@
             position: relative;
             text-align: center;
             transition: all 0.2s linear;
+            cursor: pointer;
             &:hover {
               background: #ffffff;
               border: 0.857157px solid #ff8a00;
@@ -180,6 +181,11 @@
               .business-donation-suggestion-best-match {
                 box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.25);
               }
+
+              .business-donation-suggestion-button {
+                background: var(--primaryColor) !important;
+                color: var(--whiteColor) !important;
+              }
             }
             .business-donation-suggestion-best-match {
               position: absolute;
@@ -239,10 +245,10 @@
                 text-align: center;
                 cursor: pointer;
                 // transition: all 0.2s linear;
-                &:hover {
-                  background: var(--primaryColor);
-                  color: var(--whiteColor);
-                }
+                // &:hover {
+                //   background: var(--primaryColor);
+                //   color: var(--whiteColor);
+                // }
               }
             }
           }
@@ -453,7 +459,9 @@
           width: 100%;
           .business-details-floating-icon {
             width: 200px;
-            border-radius: 4px;
+            border-radius: 6px;
+            padding: 0.5rem;
+            background: white;
           }
           .business-details-floating-title {
             color: var(--whiteColor) !important;
@@ -601,6 +609,11 @@
               .business-donation-suggestion-best-match {
                 box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.25);
               }
+
+              .business-donation-suggestion-button {
+                background: var(--primaryColor) !important;
+                color: var(--whiteColor) !important;
+              }
             }
             .business-donation-suggestion-best-match {
               position: absolute;
@@ -659,10 +672,10 @@
                 background: var(--whiteColor);
                 outline: none;
                 cursor: pointer;
-                &:hover {
-                  border: 2px solid #e66026;
-                  color: #e66026;
-                }
+                // &:hover {
+                //   border: 2px solid #e66026;
+                //   color: #e66026;
+                // }
               }
             }
           }

diff --git a/frontend/src/components/BusinessPage/BusinessPage.tsx b/frontend/src/components/BusinessPage/BusinessPage.tsx
@@ -95,6 +95,7 @@ function BusinessPage() {
         getCustomClrMatchingAmount(matchingArr2);
       }
     }
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id, user]);
-Original file line number
+Diff line change
@@ Expand Up / @@ -95,6 +95,7 @@ function BusinessPage() { @@
             getCustomClrMatchingAmount(matchingArr2);
           }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
       }, [id, user]);
@@ Expand Down @@