diff --git a/frontend/src/App.js b/frontend/src/App.js index e9e88446..19cae5a8 100644 --- a/frontend/src/App.js +++ b/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

salesforce

; + return ( +
+ +
+ + +
+
+ ); } export default App; diff --git a/frontend/src/components/ErrorBoard/ErrorBoard.stories.js b/frontend/src/components/ErrorBoard/ErrorBoard.stories.js new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/components/ErrorBoard/ErrorBoard.test.js b/frontend/src/components/ErrorBoard/ErrorBoard.test.js new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/components/ErrorBoard/index.js b/frontend/src/components/ErrorBoard/index.js new file mode 100644 index 00000000..7e50f5f2 --- /dev/null +++ b/frontend/src/components/ErrorBoard/index.js @@ -0,0 +1,28 @@ +export const ErrorBoard = () => { + return ( +
+
+ +

+ Oh no! An error occurred while processing that request. Please try + again. +

+
+ +
+
+ +
+
+ ); +}; diff --git a/frontend/src/components/SideNav/Side.stories.js b/frontend/src/components/SideNav/Side.stories.js new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/components/SideNav/Sidenav.test.js b/frontend/src/components/SideNav/Sidenav.test.js new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/components/SideNav/index.js b/frontend/src/components/SideNav/index.js new file mode 100644 index 00000000..c933451a --- /dev/null +++ b/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 ( + + ); +}; diff --git a/frontend/src/components/Topnav/Topnav.stories.js b/frontend/src/components/Topnav/Topnav.stories.js new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/components/Topnav/Topnav.test.js b/frontend/src/components/Topnav/Topnav.test.js new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/components/Topnav/index.js b/frontend/src/components/Topnav/index.js new file mode 100644 index 00000000..b15b0e4a --- /dev/null +++ b/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 ( +
+
+
+ menu +
+
+ logo +
+
+ +
+
+ + Search + + +
+ +
+
+ Bell icon +
+
+ Moon icon +
+
+ Grid icon +
+
+
+
+ ); +}; diff --git a/frontend/src/components/assets/Search.png b/frontend/src/components/assets/Search.png new file mode 100644 index 00000000..3d2fbe04 Binary files /dev/null and b/frontend/src/components/assets/Search.png differ diff --git a/frontend/src/components/assets/accountPal.png b/frontend/src/components/assets/accountPal.png new file mode 100644 index 00000000..f74ee73e Binary files /dev/null and b/frontend/src/components/assets/accountPal.png differ diff --git a/frontend/src/components/assets/addFile.png b/frontend/src/components/assets/addFile.png new file mode 100644 index 00000000..d6703504 Binary files /dev/null and b/frontend/src/components/assets/addFile.png differ diff --git a/frontend/src/components/assets/bell.png b/frontend/src/components/assets/bell.png new file mode 100644 index 00000000..acd0a7f2 Binary files /dev/null and b/frontend/src/components/assets/bell.png differ diff --git a/frontend/src/components/assets/dashboard.png b/frontend/src/components/assets/dashboard.png new file mode 100644 index 00000000..e11f7c1a Binary files /dev/null and b/frontend/src/components/assets/dashboard.png differ diff --git a/frontend/src/components/assets/grid-view.png b/frontend/src/components/assets/grid-view.png new file mode 100644 index 00000000..6570ca38 Binary files /dev/null and b/frontend/src/components/assets/grid-view.png differ diff --git a/frontend/src/components/assets/helpQuestion.png b/frontend/src/components/assets/helpQuestion.png new file mode 100644 index 00000000..603976fe Binary files /dev/null and b/frontend/src/components/assets/helpQuestion.png differ diff --git a/frontend/src/components/assets/history.png b/frontend/src/components/assets/history.png new file mode 100644 index 00000000..15aa004e Binary files /dev/null and b/frontend/src/components/assets/history.png differ diff --git a/frontend/src/components/assets/logo.png b/frontend/src/components/assets/logo.png new file mode 100644 index 00000000..f2940ff4 Binary files /dev/null and b/frontend/src/components/assets/logo.png differ diff --git a/frontend/src/components/assets/menu.png b/frontend/src/components/assets/menu.png new file mode 100644 index 00000000..aee3c72c Binary files /dev/null and b/frontend/src/components/assets/menu.png differ diff --git a/frontend/src/components/assets/moon.png b/frontend/src/components/assets/moon.png new file mode 100644 index 00000000..35a3d413 Binary files /dev/null and b/frontend/src/components/assets/moon.png differ diff --git a/frontend/src/components/assets/notifyAlert.png b/frontend/src/components/assets/notifyAlert.png new file mode 100644 index 00000000..42c020e9 Binary files /dev/null and b/frontend/src/components/assets/notifyAlert.png differ diff --git a/frontend/src/components/assets/settings.png b/frontend/src/components/assets/settings.png new file mode 100644 index 00000000..2760acf9 Binary files /dev/null and b/frontend/src/components/assets/settings.png differ diff --git a/frontend/src/components/assets/shield.png b/frontend/src/components/assets/shield.png new file mode 100644 index 00000000..9a7c7519 Binary files /dev/null and b/frontend/src/components/assets/shield.png differ diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 37cc6514..7376bfb3 100644 --- a/frontend/tailwind.config.js +++ b/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: [], };