diff --git a/src/components/App.js b/src/components/App.js index 0a88bc3..03554ce 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -8,7 +8,6 @@ class App extends React.Component {
-
); } diff --git a/src/components/ChevronDown.js b/src/components/ChevronDown.js deleted file mode 100644 index b856a3e..0000000 --- a/src/components/ChevronDown.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import './ConfigCover.css'; - -const ChevronDown = () => { - return ( - - - - ); -} -export default ChevronDown; - diff --git a/src/components/ConfigCover.css b/src/components/ConfigCover.css index 9aee380..6b99430 100644 --- a/src/components/ConfigCover.css +++ b/src/components/ConfigCover.css @@ -14,7 +14,6 @@ body { .config-container { display: flex; flex-direction: column; - align-items: center; padding:35px; width: 600px; background-color: #ffffff; @@ -46,45 +45,15 @@ details{ } -summary{ - align-items: center; + +.flex-card{ + display: flex; + flex-direction:row; justify-content: center; - list-style: none; - + align-items: center; } -summary:focus{ - outline:none; -} -summary::-webkit-details-marker { - display: none; -} -summary:hover { - cursor: pointer; -} -.bi-chevron-down { - pointer-events: none; - position: absolute; - top:1em; - right:0.5em; - background: #ffffff; - opacity:0.5; -} -.bi-chevron-down:hover{ - opacity:1; -} - -svg { - display: block; - } -.icon{ - width:20px; - height:20px; - left:1em; - position:absolute; - top:0.7em; -} .blog-cover { display: flex; @@ -100,26 +69,13 @@ input { text-align: center; } -.custom-range{ - max-width:170px; - vertical-align: middle; - margin-left:15px; -} -.custom-range::-webkit-slider-thumb{ - background-color: #00cc7a; -} -.input-sm{ - width:120px; - margin:auto; -} + + .input-md{ - width:120px; -} -.inputTitle { - border-radius: 4px; - padding-left: 20px; + width:100px; } + .reset-btn { margin-top: 20px; font-size: 18px; diff --git a/src/components/ConfigCover.js b/src/components/ConfigCover.js index 08169b5..5c96ff3 100644 --- a/src/components/ConfigCover.js +++ b/src/components/ConfigCover.js @@ -2,31 +2,28 @@ import React from "react"; import "./ConfigCover.css"; import CoverImage from "./CoverImage"; import ComponentToImg from "./ComponentToImg"; -import ChevronDown from './ChevronDown'; import Select from 'react-select'; import RandomTheme from './RandomTheme'; const defaultSettings = { title: "How I built my first project with react", bgColor: "#00ff99", - borderColor: "#676683", - borderSize: "18", - borderType: "solid", pattern: "", download: "PNG", - foregroundColor: "#ffffff", - textColor: "#676683", - opacity: 1, author: 'Rutik Wankhade', icon: { 'label': 'react', 'value': 'react' }, devIconOptions: {}, + }; + const devIconsUrl = "https://raw.githubusercontent.com/devicons/devicon/master/devicon.json" // const devIconOptions = [ // { value: 'None', label: 'None' }, // { value: 'javascript', label: 'Javascript' }, // { value: 'python', label: 'Python' }, + class ConfigCover extends React.Component { + state = defaultSettings; componentDidMount() { console.log("Mount") @@ -41,184 +38,95 @@ class ConfigCover extends React.Component { getRandomTheme = (theme, Pattern) => { this.setState({ bgColor: theme.bgColor, borderColor: theme.bdColor, pattern: Pattern }); } - //this function will set the max border value to 50 if user types a value greater than 50 - maxBorderValidationCheck = (e) => { - if(e.target.value > 50) { - e.target.value = 50; - } - } + render() { return (
-

🛠 Creating cover images for your blogs is now super easy

+

🛠 Creating cover images for your blogs is now super easy

this.setState({ title: e.target.value })} > this.setState({ author: e.target.value })} > -
- - - - - - - - -
- - this.setState({ bgColor: e.target.value })} /> +
- - this.setState({ borderColor: e.target.value })} /> -
+
Background
-
- - this.setState({ foregroundColor: e.target.value })} - /> - - - this.setState({ textColor: e.target.value })} /> -
- - - this.setState({ opacity: e.target.value })} - > - -
- -
- - - - - - - - -
-
- - this.setState({ borderSize: e.target.value })} /> +
+
+ Color + this.setState({ bgColor: e.target.value })} + className="input-md form-control" + />
-
- +
+
+
-
- -
- - - - - - - - - -
- -
- - - - - - - - - this.setState({ icon: e.target.value })} className="form-control" value={this.state.icon}> - - - - - - - - - - - - - - - - - - - */} -
+
-
- - this.setState({ icon: selectedOption })} + options={this.state.devIconOptions} + className="input" + /> +
+ +
+
Download As
+
-
diff --git a/src/components/CoverImage.css b/src/components/CoverImage.css index b64c555..d17c800 100644 --- a/src/components/CoverImage.css +++ b/src/components/CoverImage.css @@ -32,7 +32,7 @@ padding: 40px; font-family: inter; margin: auto; - box-shadow: 13px 10px 36px 2px rgba(0,0,0,0.22); + box-shadow: 13px 10px 36px 2px rgba(0, 0, 0, 0.22); } @@ -53,16 +53,6 @@ i { margin-top: 20px; } -.meta { - float: bottom; - background-color: #676683; - color: #ffffff; - padding: 20px; - font-weight: 500; - display: flex; - align-items: center; - justify-content: space-between -} h1 { height: auto; @@ -89,22 +79,20 @@ button:hover { @media screen and (max-width:600px) { .cover { width: 100vw; - height: auto; - padding: 8vh; + height: 50vh; + padding: 4vh; } - .title-card { - padding: 2.5vw 3vw 2.5vw 3vw; - font-size: 1.2rem; + .title { + font-size: 1.5rem; } - .meta { - height: 5vh; - font-size: 2vh; + .author-text { + font-size: 12px; } i { - font-size: 3.5vh; + font-size: 12vh; } } \ No newline at end of file diff --git a/src/components/Footer.js b/src/components/Footer.js deleted file mode 100644 index 4c7d0d8..0000000 --- a/src/components/Footer.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import './App.css'; - -const Footer = () => { - return ( - - ); - -} - -export default Footer; \ No newline at end of file diff --git a/src/components/Navbar.js b/src/components/Navbar.js index e48299d..868ffdb 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -5,16 +5,14 @@ const Navbar = () => { return ( ); - - }; export default Navbar; \ No newline at end of file