Skip to content

Commit 2f803f0

Browse files
JinSSJ3JinSSJ3
committed
[FEAT]: New landing dropzone-ui main page
1 parent 13dc8b3 commit 2f803f0

File tree

115 files changed

+7155
-48
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

115 files changed

+7155
-48
lines changed

‎package-lock.json‎

Lines changed: 18 additions & 15 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,11 @@
2121
"@types/react": "^17.0.16",
2222
"@unlimited-react-components/kernel": "^1.0.2",
2323
"@unlimited-react-components/material-button": "^1.2.5",
24-
"@unlimited-react-components/react-highlight": "^2.0.0",
2524
"axios": "^0.24.0",
2625
"dotenv": "^10.0.0",
2726
"history": "^5.1.0",
2827
"node-sass": "^6.0.1",
28+
"rc-highlight": "^1.3.0",
2929
"react": "^17.0.2",
3030
"react-dom": "^17.0.2",
3131
"react-router": "^6.0.2",
@@ -59,4 +59,4 @@
5959
"last 1 safari version"
6060
]
6161
}
62-
}
62+
}

‎src/Components/Badges.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const Badges = (props) => {
1111
flexWrap: "wrap",
1212
alignItems: "center",
1313
justifyContent: "center",
14+
margin:"10px 0"
1415
}}
1516
>
1617
<a
@@ -53,15 +54,15 @@ const Badges = (props) => {
5354
/>
5455
</a>
5556

56-
<a
57+
{/* <a
5758
style={styles.badge}
5859
href="https://snyk.io/test/github/dropzone-ui/react"
5960
>
6061
<img
6162
src="https://snyk.io/test/github/dropzone-ui/react/badge.svg"
6263
alt="Known Vulnerabilities"
6364
/>
64-
</a>
65+
</a> */}
6566

6667
<a
6768
style={styles.badge}

‎src/Components/CodeGenerator/InteractiveGeneratedCode.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
//import { Highlighter } from "@unlimited-react-components/react-highlight";
2-
import { Highlighter } from "@unlimited-react-components/react-highlight";
1+
2+
import { Highlighter } from "rc-highlight";
33
import React, { Fragment, useEffect, useState } from "react";
44
//import { Highlighter } from "../../HIGHLIGHTER";
55

‎src/Components/OptionsRedirect/Options.jsx‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,29 @@ import DoubleArrowIcon from "@mui/icons-material/DoubleArrow";
55
import GitHubIcon from "@mui/icons-material/GitHub";
66
import StorageIcon from "@mui/icons-material/Storage";
77
import DocumentScannerIcon from "@mui/icons-material/DocumentScanner";
8+
import "./Options.scss";
89
const Options = (props) => {
910
const openTab = (url) => {
1011
window.open(url, "_blank").focus();
1112
};
1213
return (
1314
<div
14-
direction="row"
15-
style={{
15+
className="options-container"
16+
// direction="row"
17+
/* style={{
1618
display: "flex",
1719
flexDirection: "row",
1820
flexWrap: "wrap",
19-
justifyContent: "space-evenly",
21+
justifyContent: "space-between",
2022
backgroundColor: "#f3f6f9",
21-
padding: "25px 5px",
22-
}}
23+
margin: "20px 0px",
24+
width:"100%"
25+
}} */
2326
>
2427
<Button
25-
size="small"
28+
//size="small"
2629
variant="contained"
30+
style={{ margin: "5px" }}
2731
startIcon={<DocumentScannerIcon />}
2832
onClick={() =>
2933
openTab(
@@ -34,7 +38,8 @@ const Options = (props) => {
3438
API doc
3539
</Button>
3640
<Button
37-
size="small"
41+
style={{ margin: "5px" }}
42+
//size="small"
3843
variant="outlined"
3944
startIcon={<DoubleArrowIcon />}
4045
onClick={() =>
@@ -44,7 +49,8 @@ const Options = (props) => {
4449
Samples
4550
</Button>
4651
<Button
47-
size="small"
52+
style={{ margin: "5px" }}
53+
//size="small"
4854
variant="outlined"
4955
startIcon={<GitHubIcon />}
5056
onClick={() =>
@@ -54,7 +60,8 @@ const Options = (props) => {
5460
Github
5561
</Button>
5662
<Button
57-
size="small"
63+
style={{ margin: "5px" }}
64+
//size="small"
5865
variant="outlined"
5966
startIcon={<StorageIcon />}
6067
onClick={() =>
@@ -63,9 +70,6 @@ const Options = (props) => {
6370
>
6471
Server side
6572
</Button>
66-
{/* <div id="donate-button-container">
67-
<div id="donate-button"></div>
68-
</div> */}
6973
</div>
7074
);
7175
};

‎src/Components/OptionsRedirect/Options.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.options-container{
2+
display: flex;
3+
flex-direction: row;
4+
justify-content: space-between;
5+
width: 100%;
6+
flex-wrap: wrap;
7+
}

‎src/Pages/Footer/Footer.jsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from "react";
2+
import "./Footer.scss";
3+
const Footer = (props) => {
4+
return (
5+
<footer className="dui-footer">
6+
<div className="dui-footer-logo-container">
7+
<img
8+
width={"90%"}
9+
height={"90%"}
10+
alt="dui-footer-logo"
11+
src="https://user-images.githubusercontent.com/43678736/132112022-0ca409ae-cca2-43c8-be89-110376260a3f.png"
12+
/>
13+
</div>
14+
<div className="dui-footer-logo-text">
15+
{"Copyright © 2021 Dropzone-UI"}
16+
</div>
17+
</footer>
18+
);
19+
};
20+
export default Footer;

‎src/Pages/Footer/Footer.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.dui-footer {
2+
width: 100%;
3+
background-color: rgb(87, 12, 12);
4+
height: 60px;
5+
display: flex;
6+
flex-direction: row;
7+
align-items: center;
8+
justify-content: center;
9+
.dui-footer-logo-container {
10+
height: 45px;
11+
}
12+
.dui-footer-logo-text {
13+
color: white;
14+
font-size: 1em;
15+
}
16+
}

‎src/Pages/MainPage/MainPage.js‎

Lines changed: 35 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,17 @@ import Donate from "../../Components/Donate";
66
import ElevateAppBar from "../../Templates/ElevateAppBar";
77
import Options from "../../Components/OptionsRedirect/Options";
88
//import ResponsiveDrawer from "../../Templates/ResponsiveDrawer";
9-
import "./MainPage.scss";
9+
//import "./MainPage.scss";
10+
import "./MainStyles.scss";
1011
import InteractiveCode from "../../Components/CodeGenerator/InteractiveCode";
12+
import RightPart from "./MainPageRightDropzone/RightPart";
13+
import LeftPart from "./MainPageLeftDropzone/LeftPart";
14+
import Footer from "../Footer/Footer";
1115
const MainPage = (props) => {
1216
return (
1317
<Fragment>
14-
{/* <Dropzone /> */}
18+
<Fragment>
19+
{/*
1520
1621
<div className="dui-main-wrapper">
1722
{" "}
@@ -58,7 +63,34 @@ const MainPage = (props) => {
5863
<Donate />
5964
</div>
6065
</div>
61-
</div>
66+
</div> */}
67+
</Fragment>
68+
<Fragment>
69+
<div className="dui-web-main-wrapper">
70+
<ElevateAppBar />
71+
<div className="dui-web-main-container">
72+
<div className="dui-web-main-container-left">
73+
<div className="dropzone-ui-logo-container">
74+
<img
75+
width={"100%"}
76+
src="https://user-images.githubusercontent.com/43678736/132112022-0ca409ae-cca2-43c8-be89-110376260a3f.png"
77+
alt="dropzone-ui main logo"
78+
/>
79+
</div>
80+
<div className="dropzone-ui-logo-text">
81+
Dropzone <span>UI</span>
82+
</div>
83+
<LeftPart />
84+
</div>
85+
<div className="dui-web-main-container-right">
86+
<RightPart />
87+
88+
</div>
89+
</div>{" "}
90+
<Footer />
91+
{/* holaa */}
92+
</div>
93+
</Fragment>
6294
</Fragment>
6395
);
6496
};

‎src/Pages/MainPage/MainPage.scss‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -33,15 +33,7 @@
3333
background-color: rgb(234, 238, 243);
3434
}
3535

36-
.dropzone-ui-logo-container {
37-
//height: 215px;
38-
width: 215px;
39-
margin: auto;
40-
@media (max-width: 960px) {
41-
height: 180px;
42-
width: 180px;
43-
}
44-
}
36+
4537
.dropzone-ui-text-container {
4638
font-size: 3em;
4739
text-align: center;
@@ -57,6 +49,14 @@
5749
font-weight: 700;
5850
text-align: center;
5951
//margin-bottom: 20px;
52+
}.dropzone-ui-logo-container {
53+
//height: 215px;
54+
width: 215px;
55+
margin: auto;
56+
@media (max-width: 960px) {
57+
height: 180px;
58+
width: 180px;
59+
}
6060
}
6161
.stargazers {
6262
padding: 1%;

0 commit comments

Comments
 (0)