Bottom White Links

.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# Local Netlify folder
+.netlify

.netlify/state.json

@@ -0,0 +1,3 @@
+{
+	"siteId": "b715d727-bc69-4cea-853f-ac822ee6bea9"
+}

.vscode/launch.json

@@ -0,0 +1,22 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Attach to Chrome",
+            "port": 9222,
+            "request": "attach",
+            "type": "pwa-chrome",
+            "webRoot": "${workspaceFolder}"
+        },
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8000",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

README.md

@@ -1,3 +1,8 @@
+# 2Unstoppable Buddy System Frontend
+Frontend for application to match users going through cancer
+
+Hosted Site: https://elegant-minsky-ed6d47.netlify.app/home
+
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
 ## Available Scripts

netlify.toml

@@ -1,3 +1,9 @@
+[[headers]]
+  # Define which paths this specific [[headers]] block will cover.
+  for = "/*"
+    [headers.values]
+    Access-Control-Allow-Origin = "*"
+
 [build]	
     command = "yarn build"
     build = "build"

package.json

@@ -5,13 +5,18 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@emotion/core": "^10.0.28",
-    "@emotion/styled": "^10.0.27",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/react-fontawesome": "^0.1.16",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@material-ui/pickers": "^3.2.10",
     "@material/elevation": "^7.0.0",
+    "@mui/styled-engine-sc": "^5.0.4",
+    "@popperjs/core": "^2.11.2",
     "@quasar/extras": "^1.9.3",
+    "@react-icons/all-files": "^4.1.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
@@ -26,38 +31,44 @@
     "antd": "^4.5.1",
     "aws-sdk": "^2.728.0",
     "axios": "^0.19.2",
-    "bootstrap": "^4.5.0",
+    "bootstrap": "^5.1.3",
     "cropperjs": "^1.5.7",
     "date-fns": "^2.15.0",
+    "font-awesome": "^4.7.0",
     "formik": "^2.1.5",
     "formik-material-ui": "^2.0.1",
+    "material-ui-popup-state": "^2.0.0",
     "mobx": "^5.15.4",
     "mobx-persist": "^0.4.1",
     "mobx-react": "^6.2.5",
     "moment": "^2.27.0",
-    "node-sass": "^4.14.1",
     "qs": "^6.9.4",
-    "react": "^16.13.1",
+    "react": "^16.14.0",
     "react-autocomplete": "^1.8.1",
     "react-avatar-editor": "^11.0.10",
+    "react-bootstrap": "^2.1.0",
+    "react-collapsible": "^2.8.4",
     "react-datepicker": "^3.1.3",
     "react-dom": "^16.13.1",
     "react-easy-crop": "^3.1.1",
     "react-flexview": "^5.0.0",
     "react-google-recaptcha": "^2.1.0",
+    "react-icons": "^4.3.1",
     "react-js-pagination": "^3.0.3",
+    "react-popupbox": "^2.0.8",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.1",
     "react-spring": "^8.0.27",
+    "sass": "^1.45.0",
     "sass-loader": "^8.0.2",
     "simple-flexbox": "^2.3.1",
-    "styled-components": "^5.1.1",
+    "styled-components": "^5.3.3",
     "timeago-react": "^3.0.1",
     "toasted-notes": "^3.2.0",
     "typescript": "^3.9.7",
     "uuid": "^8.3.0",
-    "yarn": "^1.22.4",
+    "yarn": "^1.22.17",
     "yup": "^0.29.2"
   },
   "workspaces": {
@@ -90,6 +101,7 @@
     ]
   },
   "devDependencies": {
-    "gh-pages": "^3.1.0"
+    "gh-pages": "^3.1.0",
+    "gulp-sass": "^5.0.0"
   }
 }

public/_headers

@@ -0,0 +1 @@
+/* Access-Control-Allow-Origin: *

src/App.tsx

@@ -25,7 +25,7 @@ const App: React.FC = () => {
             <div className="App">
               <Switch>
                 <Route path="/user/:id" component={User} />
-                <Route path="/wizard/:stepId" component={About} />
+                <Route path="/complete-profile/:stepId" component={About} />
                 <Route path="/userMessage/:user_id" component={Inbox} />
                 <Route path="/forgotPassword/:tokenId" component={ForgotPasswordForm} />
                 <Route path="/chatroomDetails/:chatroomId" component={ChatroomMessagesList} />

src/UserStore.ts

@@ -24,10 +24,13 @@ export class UniqueListStore {
   unique_zipcodes: string[];
   unique_state_codes: string[];
   unique_cities: string[];
+  unique_personalities: string[];
+
   constructor(){
     this.unique_zipcodes = [];
     this.unique_state_codes=[];
     this.unique_cities=[];
+    this.unique_personalities = [];
   }
 }
 
@@ -69,6 +72,10 @@ export class SearchParamsStore {
   newestMemberOrder: string;
   activeUsers: boolean;
 
+  // activities: string;
+  personality: string;
+  prefered_exercise_location: string;
+
   constructor(){
     this.filter = "";
     this.ageRange = AGE_RANGE_CONSTANT;
@@ -82,6 +89,8 @@ export class SearchParamsStore {
     this.lastOnlineOrder = "";
     this.newestMemberOrder = "";
     this.activeUsers = false;
+    this.personality = "";
+    this.prefered_exercise_location = "";
   }
 }
 

src/assets/colors.js

@@ -1,6 +1,7 @@
 const colors = {
   primary: "#6429B9",
-  buttonBackground: `#6429B9 linear-gradient(330deg, #6429B9 0,#5e31da 25.55%)`
+  activeButtonBackground: '#f0658c',
+  buttonBackground: "#F1658C"
 }
 
 export default colors;

src/assets/scss/_variables.scss

@@ -2,9 +2,18 @@ $text-link: #2997ff;
 $text-color: #444;
 
 // 2Unstoppable Colors
-$primaryPurple: rgba(#6429B9, 0.95); //#9462a6;
-$bg: rgba(#6429B9, 0.30);
+$primaryPurple: rgba(#491a68, 0.95); //#9462a6;
+$bg: #F1658C;
+
 $actionPink: #ed698e;
+$actionText: #fff;
+
+$disabledBackground: #ECECEC;
+$disabledText: #000;
+
+$focusBackground: #FFE7ED;
+$focusText: #F1658C;
+
 $mutedPurple: #dfd1e4;
 $sidenav: #FCF8FD;
 $purpleHover: #9f72e0;
@@ -13,13 +22,12 @@ $pinkNav: #b929a2;
 
 $background: #ffffff; //#f8f9fa;
 $border: #ccc;
-$defaultBackground: $bg linear-gradient(330deg, $bg 0,#5e31da 122.55%);
+$defaultBackground: #F165FD;
 
 
 // Colors for App
 $secondary: #c843d5;
 
-
 //
 $card: rgba(#eacaed, 0.2);
 

src/assets/scss/base.scss

@@ -15,4 +15,3 @@ html body {
 
 
 
-

src/assets/scss/global.scss

@@ -19,4 +19,20 @@
 
 .primary-grey-text {
   color: #9a91a6; 
+}
+
+.active-button {
+    padding: 10px 20px;
+    background: #ffe7ed;
+    color: #f0658c;
+}
+
+.button-active {
+  background: #F1658C;
+  color: #FFFFFF;
+}
+
+.button-inactive {
+  background: #FFE7ED;
+  color: #F1658C;
 }

src/assets/submit.js

@@ -0,0 +1,6 @@
+const forgot_password = {
+  primary: "#F1658C",
+  buttonBackground: `#F1658C linear-gradient(330deg, #F1658C 0,#F1658C 25.55%)`,
+};
+
+export default forgot_password;