Feat: Added the Figma About Page

client/.gitignore

@@ -15,6 +15,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

client/package.json

@@ -13,13 +13,15 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "autoprefixer": "^9",
+    "dotenv": "^10.0.0",
+    "figma-api": "^1.6.2",
     "postcss": "^7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.2.0",
     "react-router-dom": "^5.2.1",
     "react-scripts": "4.0.3",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.9",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

client/src/components/Apps/Figma/Figma.js

@@ -41,5 +41,4 @@ class Figma extends Component{
   }
 }
 
-
-export default Figma;
+export default Figma;

client/src/components/Apps/Figma/about-secttion/FigmaAbout.js

@@ -7,7 +7,28 @@ import './../css/about.css'
 
 const FigmaAbout = () => {
     return <>
-        <p>This is the about section</p>
+    <div className="banner-section">
+
+    <div className="banner-image-container">
+      <img src = {logo} />
+      <button>Configuration</button>
+      <button>App Homepage</button>
+    </div>
+    <div className="description">
+      <h2 className="heading">Figma</h2>
+      <p>Figma is where teams recieve comments and post comments about their teams design success for further collaborations. 
+      The Figma app for Zuri Chat keeps everyone up to date on the latest design work through relevant notifications about file updates and comments.<br></br><br></br>
+
+        With the app, you can receive and reply to file comments directly in Zuri Chat. You’ll also get notified when:<br></br>
+        •  someone replies to one of your comments<br></br>
+        •  You’re tagged in a file<br></br>
+        •  You’re invited to a new file<br></br>
+        •  New comments are made to a file you subscribed to<br></br>
+
+    </p>
+    </div>
+
+  </div>
     </>
 }
 

client/src/components/Apps/Figma/css/about.css

@@ -1,6 +1,47 @@
 @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400&display=swap');
 
-*{
+* {
     font-family: 'Lato', sans-serif;
-
+
+}
+
+.banner-section {
+    display: flex;
+    margin-top: 20px;
+    padding: 20px;
+}
+
+.banner-section .banner-image-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.banner-section .banner-image-container img {
+    width: 250px;
+    border-radius: 8px;
+}
+
+.banner-section .banner-image-container button {
+    padding: 5px 20px;
+    background-color: #F0EFEF;
+    border: 1px solid #cfcfcf;
+    margin-top: 5px;
+    border-radius: 5px;
+    font-size: 15px;
+    font-weight: 900;
+}
+
+.banner-section .description {
+    width: 700px;
+    padding: 0 40px;
+}
+
+.description .heading {
+    font-size: 21px;
+    font-weight: 600;
+}
+
+.description p {
+    font-size: 15px;
+    color: #3A3A3A;
 }

client/src/components/searchbar.component.js

@@ -1,7 +1,7 @@
 import React from "react";
 
 const SearchBar = () => {
-  return <div className="text-center">This is a a search bar</div>;
+  return <div className="text-center">This is a search bar</div>;
 };
 
-export default SearchBar;
+export default SearchBar;