Changed some styles.

Author: mirastroie

meetsy/package-lock.json

@@ -4,6 +4,9 @@
   "private": true,
   "proxy": "http://localhost:3001",
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@fortawesome/react-fontawesome": "^0.1.14",
     "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.11.2",
     "@testing-library/jest-dom": "^5.11.10",
@@ -15,14 +18,17 @@
     "bootstrap": "^4.6.0",
     "faker": "^5.5.3",
     "firebase": "^8.4.1",
+    "font-awesome": "^4.7.0",
     "jquery": "^3.6.0",
+    "jss": "^10.6.0",
     "nodemon": "^2.0.7",
     "npm-run-all": "^4.1.5",
     "peer": "^0.6.1",
     "peerjs": "^1.3.2",
     "react": "^17.0.2",
     "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.2",
+    "react-jss": "^10.6.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "recompose": "^0.30.0",

meetsy/package.json

@@ -1,13 +1,14 @@
 import React from 'react';
+import '../../node_modules/font-awesome/css/font-awesome.min.css'; 
 
 const icon =  {
-     height: '23px',
+     height: '20px',
      fill: '#efefef'
    };
 
 
 export default (props) => (
-<svg style={icon} xmlns="http://www.w3.org/2000/svg" class="bi bi-person-fill" viewBox="0 0 16 16">
-  <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
-</svg>
+ <div>
+   <i className ="fas fa-calendar"></i>
+ </div>
 );

meetsy/src/assets/bg.png

@@ -0,0 +1,25 @@
+import React from 'react';
+
+export default (props) => (
+    <svg
+        id={props.id}
+        width={props.height || '15'}
+        height={props.height || '15'}
+        viewBox='0 0 640 640'
+        fill='none'
+        xmlns='http://www.w3.org/2000/svg'
+    >
+        <path
+            d='M319.99 640L21.87 640L170.92 320L319.99 32.21L469.07 320L618.13 640L618.13 640L319.99 640Z'
+            opacity='1'
+            fill='#dfe0eb'
+            fillOpacity='1'
+        />
+        <path
+            d='M469.07 478.15L544.52 640L335.64 640L93.64 640L170.92 478.15L319.99 158.15L469.07 478.15Z'
+            opacity='1'
+            fill='#ffffff'
+            fillOpacity='1'
+        />
+    </svg>
+);

meetsy/src/assets/bg2.jpg

@@ -1,8 +1,11 @@
 import React from 'react';
 
 const icon =  {
-     height: '23px',
-     fill: '#efefef'
+     height: '18px',
+     fill: 'gray',
+     ':hover': {
+       fill: '#efefef !important',
+     }
    };
 
 

meetsy/src/assets/bg3.jpg

@@ -0,0 +1,14 @@
+import React from 'react';
+import '../../node_modules/font-awesome/css/font-awesome.min.css'; 
+
+const icon =  {
+     height: '20px',
+     fill: '#efefef'
+   };
+
+
+export default (props) => (
+ <div>
+   <i class ="fa fa-calendar"></i>
+ </div>
+);

meetsy/src/assets/bg4.jpg

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const icon =  {
+     height: '20px',
+     fill: 'gray'
+   };
+
+
+export default (props) => (
+<svg xmlns="http://www.w3.org/2000/svg" style={icon} class="bi bi-telephone-fill" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"/>
+</svg>
+);

meetsy/src/assets/icon-account.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const icon =  {
-  height: '23px',
+  height: '18px',
    fill: '#efefef'
 };
 

meetsy/src/assets/icon-arrow-up.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const icon =  {
+     height: '15px',
+     fill: 'gray'
+   };
+
+
+export default (props) => (
+<svg xmlns="http://www.w3.org/2000/svg" style ={icon} class="bi bi-bell-fill" viewBox="0 0 16 16">
+  <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zm.995-14.901a1 1 0 1 0-1.99 0A5.002 5.002 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901z"/>
+</svg>
+);