diff --git a/__tests__/integration/dashboard.spec.js b/__tests__/integration/dashboard.spec.js new file mode 100644 index 0000000..a2c1c82 --- /dev/null +++ b/__tests__/integration/dashboard.spec.js @@ -0,0 +1,211 @@ +describe('visiting /dashboard', () => { + before(() => { + cy.visit('/dashboard'); + }); + + it('checks if url is pointing to dashboard route', () => { + cy.location('pathname').should('eq', '/dashboard'); + }); + + it('checks if sidebar is rendered', () => { + const sidebarMenuOptions = [ + { + name: 'Home', + iconPath: '/assets/Home.svg', + urlPath: '/', + }, + { + name: 'Dashboard', + iconPath: '/assets/Dashboard.svg', + urlPath: 'dashboard', + }, + { + name: 'Currency Exchange', + iconPath: '/assets/Swap.svg', + urlPath: 'currency-exchange', + }, + { + name: 'Auction', + iconPath: '/assets/Auction.svg', + urlPath: 'auction', + }, + { + name: 'Stocks', + iconPath: '/assets/Stocks.svg', + urlPath: 'trading', + }, + { + name: 'Balance', + iconPath: '/assets/Balance.svg', + urlPath: 'wallet', + }, + ]; + + cy.get('[data-testid="sidebar-logo"]').should('exist'); + cy.get('[data-testid="sidebar-title"]').should('have.text', 'RealDevSquad'); + + sidebarMenuOptions.forEach((option) => { + cy.get(`[data-testid="sidebar-menu-icon=${option.iconPath}"]`).should( + 'exist' + ); + cy.get(`[data-testid="sidebar-menu-title-${option.name}"]`).should( + 'have.text', + option.name + ); + }); + + cy.get('[data-testid="sidebar-trade-button"]').should( + 'have.text', + 'Trade Now' + ); + cy.get('[data-testid="sidebar-trade-button-icon"]').should('exist'); + cy.get('[data-testid="sidebar-guide-button"]').should('exist'); + cy.get('[data-testid="sidebar-guide-button-icon"]').should('exist'); + }); + + it('checks if breadcrumbs are rendered', () => { + const links = ['home', 'dashboard']; + + cy.get('[data-testid="breadcrumbs-separator"]').should('exist'); + + links.forEach((link) => { + cy.get(`[data-testid="breadcrumbs-link-${link}"]`).should( + 'have.text', + link + ); + }); + }); + + it('checks if wallets section is rendered', () => { + const currencyData = [ + { + name: 'Gold', + value: 110, + color: ' #f39c12', + borderColor: '#A58F20', + }, + { + name: 'Silver', + value: 120, + color: ' #bdc3c7', + borderColor: '#7F7F7F', + }, + { + name: 'Brass', + value: 150, + color: '#e67e22', + borderColor: '#885A01', + }, + ]; + + cy.get('[data-testid="wallets-title"]').should('have.text', 'Wallets'); + cy.get('[data-testid="wallets-more-assets-btn"]').should( + 'have.text', + 'More Assets →' + ); + cy.get(`[data-testid="wallets-add-currency-btn"]`).should( + 'have.text', + '+ Add Currency' + ); + + currencyData.forEach((currency) => { + cy.get(`[data-testid="currency-card-name-${currency.name}"]`).should( + 'have.text', + currency.name + ); + cy.get(`[data-testid="currency-card-value-${currency.value}"]`).should( + 'have.text', + currency.value + ); + }); + }); + + it('checks if rds transaction graph is visible', () => { + const monthsList = [ + 'January', + 'February', + 'March', + 'April', + 'May', + 'June', + 'July', + 'August', + 'Sepetember', + 'October', + 'November', + 'December', + ]; + + cy.get('[data-testid="trasaction-title"]').should( + 'have.text', + 'RDS Transaction' + ); + cy.get('[data-testid="latest-transaction-btn"]').should( + 'have.text', + 'Latest Transaction' + ); + cy.get('[data-testid="transaction-select-month"]').should('exist'); + cy.get('[data-testid="transaction-chart"]').should('exist'); + + monthsList.forEach((month) => { + cy.get(`[data-testid="transaction-select-month-${month}"]`).should( + 'have.text', + month + ); + }); + }); + + it('checks if profile sidebar is rendered', () => { + const personData = { + name: 'Ankush Dharkar', + email: 'some.gmail.com', + joined: '23 August, 2022', + type: 'Active', + coins: { + brass: 200, + gold: 100, + silver: 300, + }, + }; + + cy.get('[data-testid="profile-sidebar-img"]').should('exist'); + cy.get('[data-testid="profile-sidebar-name"]').should( + 'have.text', + personData.name + ); + cy.get('[data-testid="profile-sidebar-email"]').should( + 'have.text', + personData.email + ); + cy.get('[data-testid="profile-sidebar-account-title"]').should( + 'have.text', + 'Account' + ); + cy.get('[data-testid="profile-sidebar-joined-title"]').should( + 'have.text', + 'Joined' + ); + cy.get('[data-testid="profile-sidebar-joined-detail"]').should( + 'have.text', + personData.joined + ); + cy.get('[data-testid="profile-sidebar-assets-title"]').should( + 'have.text', + 'Assets' + ); + cy.get('[data-testid="profile-sidebar-more-asset-btn"]').should( + 'have.text', + 'More Assets...' + ); + + for (let coin in personData.coins) { + cy.get(`[data-testid=profile-sidebar-asset-${coin}]`).should( + 'have.text', + coin + ); + cy.get( + `[data-testid=profile-sidebar-asset-${personData.coins[coin]}]` + ).should('have.text', personData.coins[coin]); + } + }); +}); diff --git a/components/Sidebar/index.jsx b/components/Sidebar/index.jsx new file mode 100644 index 0000000..d0becf0 --- /dev/null +++ b/components/Sidebar/index.jsx @@ -0,0 +1,106 @@ +import { useState } from 'react'; +import { useRouter } from 'next/router'; +import Image from 'next/image'; +import sidebarMenuOptions from 'constants/sidebarMenuOptions'; +import { MENU_ICON_HEIGHT, MENU_ICON_WIDTH } from 'constants/sidebarImgDetails'; +import sidebarIconPaths from 'constants/sidebarMenuIconPaths'; +import styles from './sidebar.module.css'; + +const Sidebar = () => { + const [mobileToggle, setMobileToggle] = useState(false); + const router = useRouter(); + const navigateTo = (url) => router.push(url); + const { ICON_PATH_LOGO, ICON_PATH_ARROW, ICON_PATH_INFO } = sidebarIconPaths; + + const basePath = router.pathname; + const pagePath = router.pathname.split('/')[1]; + + const addActiveOptionClass = (optionURL) => + pagePath === optionURL || (basePath === '/' && '/' === optionURL) + ? ' ' + styles.option_active + : ''; + + return ( +
+
setMobileToggle((prev) => !prev)} + > +

Menu

+ +
+ + +
+ ); +}; + +export default Sidebar; diff --git a/components/Sidebar/sidebar.module.css b/components/Sidebar/sidebar.module.css new file mode 100644 index 0000000..1a4bf32 --- /dev/null +++ b/components/Sidebar/sidebar.module.css @@ -0,0 +1,153 @@ +.wrapper { + font: 700 16px 'DM Sans', sans-serif; + margin-bottom: 1.5rem; + width: 20vw; + height: max-content; + margin-right: auto; +} + +.sidebar { + height: calc(100vh - 78px); + overflow-y: scroll; + background-color: var(--bg-light); + display: flex; + justify-content: flex-start; + align-items: center; + flex-direction: column; +} + +.sidebar::-webkit-scrollbar { + width: 0.5px; +} +.sidebar::-webkit-scrollbar-thumb { + visibility: hidden; +} + +.sidebar > * { + padding: 1.6rem; + width: 100%; +} + +.heading { + display: flex; + justify-content: flex-start; + align-items: center; + gap: 10px; +} + +.options { + gap: 1rem; + display: flex; + flex-direction: column; +} + +.option { + position: relative; + display: flex; + justify-content: flex-start; + align-items: center; + padding: 6px 9px; + gap: 10px; + color: var(--clr-light-200); + cursor: pointer; +} + +.option:hover { + color: var(--clr-dark-200); +} + +.option_image { + position: static; + color: var(--clr-dark-100); +} + +.option_active { + color: var(--clr-dark-100); +} + +.option_bar { + width: 3px; + aspect-ratio: 1/6; + background-color: var(--bg-blue-100); + border-radius: 1px 0px 0px 1px; + right: -1.2rem; + position: absolute; + display: none; +} + +.option_active .option_bar { + display: block; +} + +.buttonWrapper { + width: 100%; + margin-top: auto; +} + +.button { + width: 100%; + background-color: var(--bg-blue-200); + height: 4rem; + border-radius: 8px; + border: none; + color: var(--clr-light-100); + display: flex; + justify-content: center; + align-items: center; + gap: 10px; + font: 500 16px 'DM Sans', sans-serif; + margin-top: 1rem; +} + +.mobileToggle { + display: none; +} + +/* Responsive CSS */ +@media screen and (max-width: 970px) { + .wrapper { + width: 100vw; + } + + .mobileToggle { + display: flex; + justify-content: space-between; + padding: 1.6rem; + background-color: var(---bg-blue-300); + color: var(--clr-light-100); + } + + .mobileToggle img { + transform: rotateZ(180deg); + transition: all 300ms ease-in; + } + + .mobileToggle--active img { + transform: rotateZ(0deg); + } + + .sidebar { + height: 0px; + transition: all 300ms ease-in; + } + + .mobileToggle--active ~ .sidebar { + height: max-content; + margin-top: 0rem; + animation: MobileMenuAnimation 300ms forwards; + } + + .buttonWrapper { + margin-top: 1rem; + } +} + +/* custom animations */ +@keyframes MobileMenuAnimation { + 0% { + margin-top: -5rem; + } + 100% { + margin-top: 0rem; + } +} diff --git a/components/breadcrumbs/breadcrumb.js b/components/breadcrumbs/breadcrumb.js new file mode 100644 index 0000000..2fdb86a --- /dev/null +++ b/components/breadcrumbs/breadcrumb.js @@ -0,0 +1,17 @@ +import Link from 'next/link'; +import styles from './breadcrumbs.module.css'; + +const Breadcrumb = ({ link, index, links }) => { + return ( +
+ + {link} + + + {index !== links.length - 1 && <>  >  } + +
+ ); +}; + +export default Breadcrumb; diff --git a/components/breadcrumbs/breadcrumbs.module.css b/components/breadcrumbs/breadcrumbs.module.css new file mode 100644 index 0000000..eb49005 --- /dev/null +++ b/components/breadcrumbs/breadcrumbs.module.css @@ -0,0 +1,6 @@ +.links { + color: #a5a2b8; + text-transform: capitalize; + display: inline; + user-select: none; +} diff --git a/components/breadcrumbs/index.js b/components/breadcrumbs/index.js new file mode 100644 index 0000000..33ef2db --- /dev/null +++ b/components/breadcrumbs/index.js @@ -0,0 +1,15 @@ +import Breadcrumb from './breadcrumb'; + +const Breadcrumbs = ({ links }) => { + return ( +
+ {links.map((link, index) => { + return ( + + ); + })} +
+ ); +}; + +export default Breadcrumbs; diff --git a/components/chart-actions/chartActions.module.css b/components/chart-actions/chartActions.module.css new file mode 100644 index 0000000..c28cc8d --- /dev/null +++ b/components/chart-actions/chartActions.module.css @@ -0,0 +1,42 @@ +.chart_actions { + background-color: #f8f7ff; + padding: 0.8rem 1rem; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + margin-top: 1rem; + display: flex; + gap: 2rem; +} + +.button { + padding: 0.4rem 0.4rem; + color: white; + background-color: #2196f3; + border-radius: 4px; +} + +.sr_only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} + +.month_select { + height: 100%; + padding: 0 0.4rem; + color: white; + background-color: #2196f3; + border-radius: 4px; +} + +@media (min-width: 600px) { + .month_select, + .button { + padding: 0.4rem 0.9rem; + } +} diff --git a/components/chart-actions/index.js b/components/chart-actions/index.js new file mode 100644 index 0000000..4310e79 --- /dev/null +++ b/components/chart-actions/index.js @@ -0,0 +1,36 @@ +import styles from './chartActions.module.css'; +import monthsList from '../../constants/months'; + +const ChartActions = () => { + return ( +
+
+ + +
+ +
+ ); +}; + +export default ChartActions; diff --git a/components/currency-card/currencyCard.module.css b/components/currency-card/currencyCard.module.css new file mode 100644 index 0000000..d30c5c4 --- /dev/null +++ b/components/currency-card/currencyCard.module.css @@ -0,0 +1,35 @@ +.currency { + display: flex; + align-items: center; + justify-content: space-around; + border: 1px solid #c1bdd44a; + border-radius: 10px; + padding: 1rem 0; + max-width: 150px; +} + +.logo { + font-size: 1.25rem; +} + +.value { + font-weight: bold; + font-size: 1.5rem; +} + +.value > span { + font-weight: 400; + font-size: 0.8rem; +} + +.rate { + font-size: 0.7rem; + text-align: right; + margin-left: auto; + margin-top: 0.5rem; +} + +.rate > span { + color: green; + font-weight: bold; +} diff --git a/components/currency-card/index.js b/components/currency-card/index.js new file mode 100644 index 0000000..55f51dd --- /dev/null +++ b/components/currency-card/index.js @@ -0,0 +1,21 @@ +import styles from './currencyCard.module.css'; + +const CurrencyCard = ({ name, value }) => { + return ( +
+

+ {name} +

+
+

+ {value} +

+
+
+ ); +}; + +export default CurrencyCard; diff --git a/components/profile-sidebar/AssetsList.js b/components/profile-sidebar/AssetsList.js new file mode 100644 index 0000000..1d24ea9 --- /dev/null +++ b/components/profile-sidebar/AssetsList.js @@ -0,0 +1,25 @@ +import React from 'react'; +import convertObjToArray from 'utils/convertObjToArray'; +import styles from './profileSidebar.module.css'; + +const AssetsList = ({ personData }) => { + return ( + <> + {convertObjToArray(personData.coins).map(([name, amount]) => { + return ( +
+

+ {name} +

+

{amount}

+
+ ); + })} + + ); +}; + +export default AssetsList; diff --git a/components/profile-sidebar/index.js b/components/profile-sidebar/index.js new file mode 100644 index 0000000..70a4a1c --- /dev/null +++ b/components/profile-sidebar/index.js @@ -0,0 +1,67 @@ +import AssetsList from './AssetsList'; +import styles from './profileSidebar.module.css'; + +const ProfileSidebar = ({ personData }) => { + return ( +
+
+
+ profile +

+ {personData.name ?? ''} +

+

+ {personData.email ?? ''} +

+
+
+

+ Account +

+
+

+ Joined +

+

+ {personData.joined ?? ''} +

+
+
+
+

+ Assets +

+ + +
+
+
+ ); +}; + +export default ProfileSidebar; diff --git a/components/profile-sidebar/profileSidebar.module.css b/components/profile-sidebar/profileSidebar.module.css new file mode 100644 index 0000000..e744858 --- /dev/null +++ b/components/profile-sidebar/profileSidebar.module.css @@ -0,0 +1,85 @@ +.dashboard_profile { + padding: 2rem 1.5rem 0; + display: grid; + grid-template-columns: minmax(0, 1fr); + height: calc(100vh - 78px); + position: sticky; + top: 0; +} + +.profile_img { + width: 70px; + height: 70px; + border-radius: 50%; + background-color: #c4c4c4; + margin: 0 auto; +} + +.profile_name, +.profile_email { + text-align: center; +} + +.profile_name { + font-weight: 500; + margin-top: 1rem; +} + +.profile_email { + color: #9381ff; + font-size: 0.9rem; +} + +.profile_header { + font-weight: 700; +} + +.account { + margin-top: 3rem; + padding-bottom: 3rem; + border-bottom: 1px solid #c1bdd427; +} + +.assets { + padding-top: 1.5rem; +} + +.row { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 1.5rem; + font-size: 0.9rem; +} + +.more_assets { + margin-top: 1.5rem; + font-weight: 700; +} + +.button { + width: 100%; + background-color: #041187; + height: 48px; + border-radius: 8px; + border: none; + color: white; + display: flex; + justify-content: center; + align-items: center; + gap: 10px; + font: 500 16px 'DM Sans', sans-serif; + margin-top: 1rem; +} + +.cta { + margin-top: auto; +} + +.subHeading { + font-weight: 500; +} + +.row > p { + color: #9381ff; +} diff --git a/components/transaction-chart/index.js b/components/transaction-chart/index.js index 61ca055..55bde51 100644 --- a/components/transaction-chart/index.js +++ b/components/transaction-chart/index.js @@ -48,7 +48,7 @@ const TransactionChart = ({ transactionChartData }) => { }, [transactionChartData]); return ( -
+
{ options={{ responsive: true, maintainAspectRatio: false, - title: { text: 'RDS Transaction', display: true }, + title: { text: 'RDS Transaction', display: false }, scales: { yAxes: [ { diff --git a/components/transaction-chart/transaction-chart.module.css b/components/transaction-chart/transaction-chart.module.css index d76785a..292a1c0 100644 --- a/components/transaction-chart/transaction-chart.module.css +++ b/components/transaction-chart/transaction-chart.module.css @@ -1,15 +1,29 @@ .transactionCard { display: flex; justify-content: center; - width: calc(50em/2); + width: 100%; background-color: #fdfbfb; border: 1px solid #f4f1f1; cursor: pointer; - font-size: 20px; + font-size: 12px; +} + +.transactionCard > canvas { + height: 500px !important; } @media only screen and (max-width: 600px) { .transactionCard { font-size: 12px; } -} \ No newline at end of file + + .transactionCard > canvas { + height: 200px !important; + } +} + +@media only screen and (max-width: 900px) { + .transactionCard > canvas { + height: 400px !important; + } +} diff --git a/components/wallets/index.js b/components/wallets/index.js new file mode 100644 index 0000000..1e3fee4 --- /dev/null +++ b/components/wallets/index.js @@ -0,0 +1,25 @@ +import CurrencyCard from '@components/currency-card'; +import styles from './wallets.module.css'; + +const Wallets = ({ currencyData }) => { + return ( +
+
+

Wallets

+ +
+
+
+ {currencyData.map((currency) => { + return ; + })} +
+
+ +
+
+
+ ); +}; + +export default Wallets; diff --git a/components/wallets/wallets.module.css b/components/wallets/wallets.module.css new file mode 100644 index 0000000..bb77ef5 --- /dev/null +++ b/components/wallets/wallets.module.css @@ -0,0 +1,45 @@ +.wallets { + margin-top: 2.5rem; +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.header > h3 { + text-transform: uppercase; + font-size: 0.9rem; +} + +.header > button { + color: #a5a2b8; +} + +.currency_list { + display: grid; + grid-template-columns: minmax(0, 1fr) 150px; + margin-top: 1.25rem; + gap: 1.5rem; +} + +.add_currency { + display: flex; + align-items: center; + justify-content: center; + border: 1px dashed #c1bdd44a; + border-radius: 10px; + padding: 1rem 0; + max-width: 150px; + color: #a5a2b8; +} + +.currencyCardsContainer { + display: flex; + gap: 1rem; +} + +.currencyCardsContainer > * { + flex: 1; +} diff --git a/constants/months.js b/constants/months.js new file mode 100644 index 0000000..9807b26 --- /dev/null +++ b/constants/months.js @@ -0,0 +1,14 @@ +export default [ + 'January', + 'February', + 'March', + 'April', + 'May', + 'June', + 'July', + 'August', + 'Sepetember', + 'October', + 'November', + 'December', +]; diff --git a/constants/sidebarImgDetails.js b/constants/sidebarImgDetails.js new file mode 100644 index 0000000..4faa4c8 --- /dev/null +++ b/constants/sidebarImgDetails.js @@ -0,0 +1,2 @@ +export const MENU_ICON_HEIGHT = 25; +export const MENU_ICON_WIDTH = 25; diff --git a/constants/sidebarMenuIconPaths.js b/constants/sidebarMenuIconPaths.js new file mode 100644 index 0000000..68efc76 --- /dev/null +++ b/constants/sidebarMenuIconPaths.js @@ -0,0 +1,5 @@ +export default { + ICON_PATH_ARROW: '/assets/rrow.svg', + ICON_PATH_LOGO: '/assets/Real-Dev-Squad1x.png', + ICON_PATH_INFO: '/assets/InfoSquare.svg', +}; diff --git a/constants/sidebarMenuOptions.js b/constants/sidebarMenuOptions.js new file mode 100644 index 0000000..3f441d7 --- /dev/null +++ b/constants/sidebarMenuOptions.js @@ -0,0 +1,32 @@ +export default [ + { + name: 'Home', + iconPath: '/assets/Home.svg', + urlPath: '/', + }, + { + name: 'Dashboard', + iconPath: '/assets/Dashboard.svg', + urlPath: 'dashboard', + }, + { + name: 'Currency Exchange', + iconPath: '/assets/Swap.svg', + urlPath: 'currency-exchange', + }, + { + name: 'Auction', + iconPath: '/assets/Auction.svg', + urlPath: 'auction', + }, + { + name: 'Stocks', + iconPath: '/assets/Stocks.svg', + urlPath: 'trading', + }, + { + name: 'Balance', + iconPath: '/assets/Balance.svg', + urlPath: 'wallet', + }, +]; diff --git a/mock/person.json b/mock/person.json index 78e6787..85f6497 100644 --- a/mock/person.json +++ b/mock/person.json @@ -1,5 +1,7 @@ { "name": "Ankush Dharkar", + "email": "some.gmail.com", + "joined": "23 August, 2022", "type": "Active", "photo": "https://raw.githubusercontent.com/Real-Dev-Squad/website-static/main/members/ankush/img.png", "coins": { diff --git a/package.json b/package.json index 514b2db..937b906 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "test:unit": "jest --coverage __tests__/unit", "test:watch": "jest --watch", "test:cy": "cypress run", - "test": "npm run test:jest && npm run test:cy", + "test": "npm run test:cy", "lint": "eslint --fix . && echo 'Lint complete.'", "format": "prettier --write \"./**/*.{js,jsx,ts,tsx,scss,md,json}\"", "storybook": "start-storybook -p 6006", diff --git a/pages/_app.js b/pages/_app.js index 949b63b..30d7f38 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -4,11 +4,15 @@ import personData from '../mock/person.json'; import { wrapper } from '../redux/store'; import '../styles/globals.css'; +import Sidebar from '@components/Sidebar'; const MyApp = ({ Component, pageProps }) => ( <> - ; +
+ + +
); diff --git a/pages/dashboard/dashboard.module.css b/pages/dashboard/dashboard.module.css new file mode 100644 index 0000000..d03587d --- /dev/null +++ b/pages/dashboard/dashboard.module.css @@ -0,0 +1,34 @@ +.container { + flex: 1; + background-color: #fff; +} + +.dashboard { + display: grid; + grid-template-columns: minmax(0, 1fr) 20%; +} + +.dashboard_main { + border-right: 1px solid #c1bdd427; + padding: 2rem 1.5rem; +} + +.chart { + margin-top: 3rem; +} + +.chart > h2 { + font-size: 1.5rem; + font-weight: 600; + text-transform: uppercase; +} + +.home_transaction { + margin-top: 1rem; +} + +@media (max-width: 1400px) { + .dashboard { + grid-template-columns: minmax(0, 1fr); + } +} diff --git a/pages/dashboard/index.js b/pages/dashboard/index.js new file mode 100644 index 0000000..ac31583 --- /dev/null +++ b/pages/dashboard/index.js @@ -0,0 +1,38 @@ +import React from 'react'; +import Head from 'next/head'; +import TransactionChart from '@components/transaction-chart'; +import Breadcrumbs from '@components/breadcrumbs'; +import ProfileSidebar from '@components/profile-sidebar'; +import Wallets from '@components/wallets'; +import ChartActions from '@components/chart-actions'; +import transactionChartData from '../../mock/transaction-graph-data.json'; +import personData from '../../mock/person.json'; +import currencyData from '../../mock/coins.json'; +import styles from './dashboard.module.css'; + +const links = ['home', 'dashboard']; + +export default function Bank() { + return ( +
+ + Dashboard + + +
+
+ + +
+

RDS Transaction

+ +
+ +
+
+
+ +
+
+ ); +} diff --git a/public/assets/Auction.svg b/public/assets/Auction.svg new file mode 100644 index 0000000..f86e7da --- /dev/null +++ b/public/assets/Auction.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/assets/Balance.svg b/public/assets/Balance.svg new file mode 100644 index 0000000..3568f7f --- /dev/null +++ b/public/assets/Balance.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/Dashboard.svg b/public/assets/Dashboard.svg new file mode 100644 index 0000000..f4db1c4 --- /dev/null +++ b/public/assets/Dashboard.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/Home.svg b/public/assets/Home.svg new file mode 100644 index 0000000..1e903e6 --- /dev/null +++ b/public/assets/Home.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/InfoSquare.svg b/public/assets/InfoSquare.svg new file mode 100644 index 0000000..e6df337 --- /dev/null +++ b/public/assets/InfoSquare.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/MenuArrow.svg b/public/assets/MenuArrow.svg new file mode 100644 index 0000000..389f308 --- /dev/null +++ b/public/assets/MenuArrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/Stocks.svg b/public/assets/Stocks.svg new file mode 100644 index 0000000..068a428 --- /dev/null +++ b/public/assets/Stocks.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/Swap.svg b/public/assets/Swap.svg new file mode 100644 index 0000000..32ccd79 --- /dev/null +++ b/public/assets/Swap.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/assets/trade.svg b/public/assets/trade.svg new file mode 100644 index 0000000..fa70513 --- /dev/null +++ b/public/assets/trade.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/styles/globals.css b/styles/globals.css index 81510cb..b51a36c 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -2,6 +2,18 @@ @tailwind components; @tailwind utilities; +:root { + --bg-light: #f8f7ff; + --bg-blue-100: #9381ff; + --bg-blue-200: #041187; + --bg-blue-300: #1d1283; + + --clr-light-100: #fff; + --clr-light-200: #a5a2b8; + --clr-dark-100: #352e5b; + --clr-dark-200: #352e5bd0; +} + html, body { padding: 0; @@ -74,3 +86,13 @@ footer a { .d-none { display: none !important; } +.main_app { + display: flex; +} + +/* Responsive CSS */ +@media screen and (max-width: 970px) { + .main_app { + flex-direction: column; + } +} diff --git a/utils/convertObjToArray.js b/utils/convertObjToArray.js new file mode 100644 index 0000000..88430df --- /dev/null +++ b/utils/convertObjToArray.js @@ -0,0 +1,3 @@ +const convertObjToArray = (data) => Object.entries(data); + +export default convertObjToArray;