From 25daf96ae834bb439b9d221fdf24010ea6e65efd Mon Sep 17 00:00:00 2001 From: rutik wankhade Date: Fri, 21 Aug 2020 15:23:48 +0530 Subject: [PATCH] feat: major UI changes --- src/assets/icons/github.png | Bin 9043 -> 0 bytes src/components/App.css | 16 ++- src/components/ChevronDown.js | 12 +++ src/components/ConfigCover.css | 88 ++++++++++++--- src/components/ConfigCover.js | 188 +++++++++++++++++++++------------ src/components/CoverImage.css | 14 +-- src/components/CoverImage.js | 4 +- src/components/Navbar.js | 3 +- 8 files changed, 219 insertions(+), 106 deletions(-) delete mode 100644 src/assets/icons/github.png create mode 100644 src/components/ChevronDown.js diff --git a/src/assets/icons/github.png b/src/assets/icons/github.png deleted file mode 100644 index 6c408dfcec7ed47185440ba6418aa4283bf10b48..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 9043 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 { + return ( + + + + ); +} +export default ChevronDown; + diff --git a/src/components/ConfigCover.css b/src/components/ConfigCover.css index 2ebdd8f..2289121 100644 --- a/src/components/ConfigCover.css +++ b/src/components/ConfigCover.css @@ -3,8 +3,8 @@ body { } .main-container { - /* width: auto;*/ - /* justify-content: center; + /* width: auto; + justify-content: center; align-items: center; */ display: flex; flex-direction: row; @@ -18,34 +18,94 @@ body { flex-direction: column; align-items: center; padding:35px; - - } -.inputdata::-webkit-scrollbar { +.card{ + border-radius: 8px; + text-align: center; + color:#676683; + margin:10px 10px 10px 20px; + /* border:1px solid #676683; */ +} + +details{ + font-size: 1rem; + box-shadow: 0 10px 15px -5px #f2f2f2; + width: 100%; + background: #ffffff; + border-radius: 5px; + position: relative; + max-width: 400px; + padding:5px; + border: 2px solid #f2f2f2; + margin:4px; + justify-content: center; + align-items: center; + +} + +summary{ + align-items: center; + justify-content: 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; flex-direction: column; align-items: center; - margin:30px; -} -label { + margin:60px; + } +label{ margin: 5px; } input { margin: 4px; + text-align: center; } -input[type=number]{ - width:40px; +.custom-range{ + max-width:170px; + vertical-align: middle; + margin-left:15px; } - .custom-range::-webkit-slider-thumb{ background-color: #00cc7a; } .input-sm{ - width:80px; + width:120px; + margin:auto; } .input-md{ width:120px; @@ -70,6 +130,6 @@ input[type=number]{ flex-direction: column; } .blog-cover{margin:0px;} - + .card{margin:10px;} } diff --git a/src/components/ConfigCover.js b/src/components/ConfigCover.js index efa4c9b..1e16e13 100644 --- a/src/components/ConfigCover.js +++ b/src/components/ConfigCover.js @@ -2,6 +2,7 @@ import React from "react"; import "./ConfigCover.css"; import CoverImage from "./CoverImage"; import ComponentToImg from "./ComponentToImg"; +import ChevronDown from './ChevronDown'; const defaultSettings = { title: "How I built my first project with react", @@ -18,6 +19,7 @@ const defaultSettings = { icon: 'react' }; + class ConfigCover extends React.Component { state = defaultSettings; @@ -30,7 +32,7 @@ class ConfigCover extends React.Component {

CoverView

-

🛠 Create awesome cover images for your blog posts quickly

+

🛠 Creating cover images for your blogs is now super easy

this.setState({ author: e.target.value })} > -
- - this.setState({ bgColor: e.target.value })} /> +
+ + + + + - - this.setState({ borderColor: e.target.value })} /> + + + +
+ + this.setState({ bgColor: e.target.value })} /> -
+ + this.setState({ borderColor: e.target.value })} /> +
-
- +
+ + this.setState({ foregroundColor: e.target.value })} + /> + + + this.setState({ textColor: e.target.value })} /> +
+ + this.setState({ foregroundColor: e.target.value })} - /> - - this.setState({ textColor: e.target.value })} /> -
+ type="range" + min="0" + max="1" + step="0.1" + value={this.state.opacity} + className="custom-range" + onChange={(e) => this.setState({ opacity: e.target.value })} + > - - this.setState({ opacity: e.target.value })} - > + -
- - this.setState({ borderSize: e.target.value })} /> +
+ + + + + + + - - this.setState({ borderSize: e.target.value })} /> +
+ +
+ + +
+
+ + +
+ + + + + + + + + -
+ - - +
+ + + + + + + + - - +
+
@@ -156,6 +203,7 @@ class ConfigCover extends React.Component { Reset
+
diff --git a/src/components/CoverImage.css b/src/components/CoverImage.css index a291b98..646097c 100644 --- a/src/components/CoverImage.css +++ b/src/components/CoverImage.css @@ -25,14 +25,6 @@ vertical-align: middle; } -.card{ - - border-radius: 8px; - text-align: center; - color:#676683; - margin:10px; - /* border:1px solid #676683; */ -} i{ font-size: 32px; float:left; @@ -49,8 +41,7 @@ i{ height:42px; padding :4px; font-weight: 500; - vertical-align: middle; - + vertical-align: middle; } h1{ @@ -69,19 +60,16 @@ button{ box-shadow: 4px 4px #cccccc; } - @media screen and (max-width:600px){ .cover{ width:100vw; height:auto; padding:8vh; - } .title-card{ padding:2.5vw 3vw 2.5vw 3vw; font-size: 1.2rem; } - .meta{ height:5vh; font-size: 2vh; diff --git a/src/components/CoverImage.js b/src/components/CoverImage.js index 3261d23..d1d3fac 100644 --- a/src/components/CoverImage.js +++ b/src/components/CoverImage.js @@ -17,7 +17,7 @@ class CoverImage extends React.Component { } render() { - const { title, bgColor, borderColor, borderSize, borderType, pattern, foregroundColor, textColor, opacity, author,icon } = this.props; + const { title, bgColor, borderColor, borderSize, borderType, pattern, foregroundColor, textColor, opacity, author, icon } = this.props; const styleToApply = { borderTop: `${borderSize}px ${borderType} ${borderColor}`, backgroundColor: `${this.hexToRgbA(foregroundColor, opacity)}`, @@ -34,7 +34,7 @@ class CoverImage extends React.Component {
- + A blog by âš¡ {author}
); diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 69ab7b9..32815c5 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -1,7 +1,6 @@ import React from 'react'; import './App.css'; import logo from '../assets/icons/favicon.png'; -import githubIcon from '../assets/icons/github.png'; const Navbar = () => { return ( @@ -9,7 +8,7 @@ const Navbar = () => {

logoCoverView

- giticon + );