feat (FE-TEA-106): Add error popup page

frontend/src/App.js

@@ -1,6 +1,17 @@
+import { ErrorBoard } from './components/ErrorBoard';
+import { SideNav } from './components/SideNav';
+import { Topnav } from './components/Topnav';
 
 function App() {
-  return <h2 className="text-3xl font-bold underline">salesforce</h2>;
+  return (
+    <div>
+      <Topnav />
+      <div className='flex'>
+        <SideNav />
+        <ErrorBoard />
+      </div>
+    </div>
+  );
 }
 
 export default App;

frontend/src/components/ErrorBoard/index.js

@@ -0,0 +1,28 @@
+export const ErrorBoard = () => {
+  return (
+    <section className='my-6 mx-auto w-4/5 md:w-1/2 '>
+      <div>
+        <ul className='flex justify-evenly '>
+          <li className='text-grey-600'>Dashboard</li>
+          <span className='text-grey-600'>&#62;</span>
+          <li className='text-grey-600'>Upload</li>
+          <span className='text-grey-600'>&#62;</span>
+          <li className='text-grey-600'>Match</li>
+          <span className='text-grey-600'>&#62;</span>
+          <li>Results</li>
+        </ul>
+        <p data-test-id="error" className='text-grey-700 mt-4 text-center text-2xl'>
+          Oh no! An error occurred while processing that request. Please try
+          again.
+        </p>
+      </div>
+
+      <div className='w-11 h-10 bg-blue-500 mt-36 mx-auto'></div>
+      <div className='mx-auto text-center'>
+        <button className='bg-blue-500 mt-32 rounded-lg text-white-500 w-52 h-14'>
+          See more details
+        </button>
+      </div>
+    </section>
+  );
+};

frontend/src/components/SideNav/index.js

@@ -0,0 +1,54 @@
+import DashboardIcon from '../assets/dashboard.png';
+import FilePlus from '../assets/addFile.png';
+import Time from '../assets/history.png';
+import Setting from '../assets/settings.png';
+import Privacy from '../assets/shield.png';
+import Help from '../assets/helpQuestion.png';
+
+export const SideNav = () => {
+  return (
+    <aside className='w-1/4 bg-blue-500 h-screen hidden md:block relative bottom-0'>
+      <div className=' absolute mt-9 ml-5 md:ml-24'>
+        <button className='bg-white-500 flex gap-2 text-blue-500 items-center rounded-lg px-2.5 py-4 mb-4'>
+          <span>
+            <img src={DashboardIcon} alt='Dashboard' />
+          </span>
+          Dashboard
+        </button>
+        <button className=' flex gap-2 text-white-500 items-center rounded-lg px-2.5 py-4 mb-4'>
+          <span>
+            <img src={FilePlus} alt='add file icon' />
+          </span>
+          Import Data
+        </button>
+        <button className=' flex gap-2 text-white-500 items-center rounded-lg px-2.5 py-4 mb-4'>
+          <span>
+            <img src={Time} alt='Time icon' />
+          </span>
+          History
+        </button>
+        <button className=' flex gap-2 text-white-500 items-center rounded-lg px-2.5 py-4 mb-4'>
+          <span>
+            <img src={Setting} alt='Setting icon' />
+          </span>
+          Setting
+        </button>
+      </div>
+
+      <div className=' ml-5 md:ml-24 absolute bottom-0'>
+        <button className=' flex gap-2 text-white-500 items-center rounded-lg px-2.5 py-4 mb-4'>
+          <span>
+            <img src={Privacy} alt='Pricacy icon' />
+          </span>
+          Privacy
+        </button>
+        <button className=' flex gap-2 text-white-500 items-center rounded-lg px-2.5 py-4 mb-4'>
+          <span>
+            <img src={Help} alt='Ask questions icon' />
+          </span>
+          Help
+        </button>
+      </div>
+    </aside>
+  );
+};

frontend/src/components/Topnav/index.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import Menu from '../assets/menu.png';
+import AccountPal from '../assets/accountPal.png';
+import Search from '../assets/Search.png';
+import Bell from '../assets/bell.png';
+import Moon from '../assets/moon.png';
+import Grid from '../assets/grid-view.png';
+
+export const Topnav = () => {
+  return (
+    <header className='bg-blue-500 w-full py-6 px-24 flex justify-between items-center shadow-3xl'>
+      <div className=' flex justify-between items-center'>
+        <div className='w-12'>
+          <img src={Menu} alt='menu' />
+        </div>
+        <div className='hidden md:block'>
+          <img src={AccountPal} alt='logo' />
+        </div>
+      </div>
+
+      <div className='flex justify-between w-3/4 mr-11'>
+        <div className='relative md:flex items-center hidden'>
+          <span className='absolute left-2'>
+            <img src={Search} alt='Search' />
+          </span>
+          <input
+            placeholder='Search'
+            className='bg-grey-500 rounded-lg w-full pl-8 h-11'
+          />
+        </div>
+
+        <div className='flex w-36 ml-auto'>
+          <div className='bg-white-500  w-10 h-10 flex mr-2 items-center justify-center rounded-lg'>
+            <img src={Bell} alt='Bell icon ' />
+          </div>
+          <div className='bg-white-500 w-10 h-10 flex mr-2 items-center justify-center rounded-lg'>
+            <img src={Moon} alt='Moon icon ' />
+          </div>
+          <div className='bg-white-500 w-10 h-10 flex mr-2 items-center justify-center rounded-lg'>
+            <img src={Grid} alt='Grid icon' />
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};

frontend/tailwind.config.js

@@ -1,8 +1,25 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        blue: {
+          500: '#1570EF',
+        },
+        grey: {
+          500: '#EFF8FF',
+          600: '#4E4E4E',
+          700: '#444444',
+        },
+        white: {
+          500: '#F9FAFB',
+        },
+      },
+      boxShadow: {
+        '3xl': '0px 2px 8px -1px rgba(0, 0, 0, 0.1)',
+      },
+    },
   },
   plugins: [],
 };