Skip to content

Commit

Permalink
feat[frontend]: add dashboard page
Browse files Browse the repository at this point in the history
  • Loading branch information
@rahulgpt
rahulgpt committed Aug 1, 2022
1 parent 4e2c0af commit 2009232
Show file tree
Hide file tree
Showing 6 changed files with 158 additions and 141 deletions.
28 changes: 28 additions & 0 deletions frontend/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"@mantine/notifications": "^5.0.2",
"@stripe/react-stripe-js": "^1.1.2",
"@stripe/stripe-js": "^1.9.0",
"@tabler/icons": "^1.78.1",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
Expand Down
3 changes: 1 addition & 2 deletions frontend/src/components/Auth/SignUp.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React, { Component } from "react";
import { authSignIn, authSignUp } from "../../actions/authActions";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import loader2 from "../Loader/Loader2";
import "../../styles/Auth/Auth.css";

class SignUp extends Component {
Expand Down Expand Up @@ -85,7 +84,7 @@ class SignUp extends Component {
<div className="auth-btn-wrapper">
{this.props.loading ? (
<button id="loader-btn" type="submit">
{loader2}
LOADING
</button>
) : (
<button
Expand Down
139 changes: 89 additions & 50 deletions frontend/src/components/Dashboard/Dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,67 +3,106 @@ import "../../styles/Dashboard/Dashboard.css";
import dummyImage from "../images/4.jpg";
import dummyImage1 from "../images/5.jpg";
import dummyImage2 from "../images/6.jpg";
import { ActionIcon, Tabs, Button } from "@mantine/core";
import {
IconDownload,
IconSettings,
IconListDetails,
IconStar,
} from "@tabler/icons";

class Dashboard extends Component {
render() {
return (
<div className="dashboard-container">
<h4 className="title-line d-margin">Dashboard</h4>
<h4 className="title-line">Dashboard</h4>
<Tabs defaultValue="purchased-items">
<Tabs.List>
<Tabs.Tab value="purchased-items" icon={<IconStar size={14} />}>
Purchased Items
</Tabs.Tab>
<Tabs.Tab value="billing-info" icon={<IconListDetails size={14} />}>
Billing Info
</Tabs.Tab>
<Tabs.Tab value="settings" icon={<IconSettings size={14} />}>
Settings
</Tabs.Tab>
</Tabs.List>

<div className="dashboard">
<div className="dashboard-nav">
<span>
<h4>My Products</h4>
<h4>Account Info</h4>
<h4>Billing Details</h4>
</span>
</div>
<Tabs.Panel value="purchased-items" pt="xs">
<div className="items-container">
<div className="item">
<img src={dummyImage} alt="dummy1" />
<ActionIcon variant="filled" className="download-icon">
<IconDownload />
</ActionIcon>
</div>

<div className="nav-detail">
<div className="dashboard-item">
<span className="grp">
<img
className="product-img"
src={dummyImage}
alt="product-img"
/>
<h3 className="p-title">Bats and Bunting</h3>
</span>
<div className="item">
<img src={dummyImage1} alt="dummy2" />
<ActionIcon variant="filled" className="download-icon">
<IconDownload />
</ActionIcon>
</div>

<button className="auth-btn reg-btn download-btn">
Download
</button>
</div>
<div className="dashboard-item">
<span className="grp">
<img
className="product-img"
src={dummyImage1}
alt="product-img"
/>
<h3 className="p-title">Dummy Product</h3>
</span>
<div className="item">
<img src={dummyImage2} alt="dummy3" />
<ActionIcon variant="filled" className="download-icon">
<IconDownload />
</ActionIcon>
</div>

<button className="auth-btn reg-btn download-btn">
Download
</button>
</div>
<div className="dashboard-item">
<span className="grp">
<img
className="product-img"
src={dummyImage2}
alt="product-img"
/>
<h3 className="p-title">Another</h3>
</span>
<div className="item">
<img src={dummyImage2} alt="dummy3" />
<ActionIcon variant="filled" className="download-icon">
<IconDownload />
</ActionIcon>
</div>

<div className="item">
<img src={dummyImage} alt="dummy1" />
<ActionIcon variant="filled" className="download-icon">
<IconDownload />
</ActionIcon>
</div>

<div className="item">
<img src={dummyImage1} alt="dummy2" />
<ActionIcon variant="filled" className="download-icon">
<IconDownload />
</ActionIcon>
</div>

<button className="auth-btn reg-btn download-btn">
Download
</button>
<div className="item">
<img src={dummyImage2} alt="dummy3" />
<ActionIcon variant="filled" className="download-icon">
<IconDownload />
</ActionIcon>
</div>

<div className="item">
<img src={dummyImage2} alt="dummy3" />
<ActionIcon variant="filled" className="download-icon">
<IconDownload />
</ActionIcon>
</div>
</div>
</div>
</div>
<Button
radius="xs"
style={{ marginTop: "1rem", backgroundColor: "#5fa372" }}
>
DOWNLOAD ALL
</Button>
</Tabs.Panel>

<Tabs.Panel value="billing-info" pt="xs">
Billing tab content
</Tabs.Panel>

<Tabs.Panel value="settings" pt="xs">
Settings tab content
</Tabs.Panel>
</Tabs>
</div>
);
}
Expand Down
60 changes: 19 additions & 41 deletions frontend/src/components/Dashboard/Dashboard.sass
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,27 @@
.dashboard-container
padding: 0 18em
width: 650px
margin: auto

.dashboard-item
.items-container
display: flex
align-items: center
justify-content: space-between
margin-top: 2em
flex-wrap: wrap
gap: 1rem

img
margin-right: 4em

h3
font-weight: 400

.nav-detail
width: 100%
flex: 3

.grp
display: flex
align-items: center
.item
position: relative

.download-btn
margin: 0
.download-icon
height: auto
width: 30px
position: absolute
top: 60px
left: 63px

.dashboard
display: flex
//justify-content: space-between
.dashboard-nav
widht: 25em
flex: 1
border: 1px solid #e0e0e0 // #f3f3f344
display: flex
align-items: center
flex-direction: column
padding: 2em 0
margin-right: 2em
border-radius: 4px
img
height: 150px
width: 150px
opacity: 0.9
border-radius: 4px
filter: brightness(90%)

h4
margin-bottom: 1em
font-weight: 500
cursor: pointer
font-size: 0.9em

.p-title
font-size: 1em
68 changes: 20 additions & 48 deletions frontend/src/styles/Dashboard/Dashboard.css
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,28 @@
.dashboard-container {
padding: 0 18em;
width: 650px;
margin: auto;
}

.dashboard-item {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 2em;
}
.dashboard-item img {
margin-right: 4em;
}
.dashboard-item h3 {
font-weight: 400;
}

.nav-detail {
width: 100%;
flex: 3;
}

.grp {
display: flex;
align-items: center;
}

.download-btn {
margin: 0;
}

.dashboard {
.items-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}

.dashboard-nav {
widht: 25em;
flex: 1;
border: 1px solid #e0e0e0;
display: flex;
align-items: center;
flex-direction: column;
padding: 2em 0;
margin-right: 2em;
.item {
position: relative;
}
.item .download-icon {
height: auto;
width: 30px;
position: absolute;
top: 60px;
left: 63px;
}
.item img {
height: 150px;
width: 150px;
opacity: 0.9;
border-radius: 4px;
}
.dashboard-nav h4 {
margin-bottom: 1em;
font-weight: 500;
cursor: pointer;
font-size: 0.9em;
}

.p-title {
font-size: 1em;
filter: brightness(90%);
}

0 comments on commit 2009232

Please sign in to comment.