fix: layout fix of input data

src/components/App.css

@@ -20,6 +20,5 @@ footer{
     margin-top:40px;
     padding:10px;
     font-size: 14px;
-    border-top:1px solid  #cccccc
+    border-top:1px solid  #cccccc;
-    ;
 }

src/components/ComponentToImg.js

@@ -11,6 +11,7 @@ class ComponentToImg extends React.Component {
 	render() {
 		console.log(this.props.children);
 		let downloadButton;
+		// eslint-disable-next-line default-case
 		switch (this.props.downloadAs) {
 			case "PNG":
 				downloadButton = <button onClick={() => exportComponentAsPNG(this.componentRef)}>Download</button>;

src/components/ConfigCover.css

@@ -29,16 +29,29 @@ input {
 	margin: 4px;
 }
 
+input[type=number]{
+	width:40px;
+}
+
+.custom-range::-webkit-slider-thumb{	
+	background-color: #00cc7a;
+}
+.input-sm{
+	width:80px;
+}
+.input-md{
+	width:120px;
+}
 .inputTitle {
-	height: 40px;
-	width: auto;
 	border-radius: 4px;
 	padding-left: 20px;
 }
 
 .reset-btn {
-	background-color: #fc5c65;
+	background-color: #00e68a;
 	margin-top: 10px;
+	box-shadow: 4px 4px #676683;
+
 }
 
 @media screen and (max-width: 600px) {

src/components/ConfigCover.js

@@ -6,7 +6,7 @@ import ComponentToImg from "./ComponentToImg";
 const defaultSettings = {
 	title: "How I built my first project with react",
 	bgColor: "#00ff99",
-	borderColor: "#8c52ff",
+	borderColor: "#676683",
 	borderSize: "18",
 	borderType: "solid",
 	pattern: "",
@@ -42,7 +42,9 @@ class ConfigCover extends React.Component {
 
 						<label>Border</label>
 						<input type="color" value={this.state.borderColor} onChange={(e) => this.setState({ borderColor: e.target.value })} />
+
 					</div>
+
 					<div>
 						<label>Foreground</label>
 						<input
@@ -50,10 +52,10 @@ class ConfigCover extends React.Component {
 							value={this.state.foregroundColor}
 							onChange={(e) => this.setState({ foregroundColor: e.target.value })}
 						/>
-
 						<label>Text</label>
 						<input type="color" value={this.state.textColor} onChange={(e) => this.setState({ textColor: e.target.value })} />
 					</div>
+
 					<label>Opacity</label>
 					<input
 						type="range"
@@ -61,27 +63,31 @@ class ConfigCover extends React.Component {
 						max="1"
 						step="0.1"
 						value={this.state.opacity}
+						className="custom-range"
 						onChange={(e) => this.setState({ opacity: e.target.value })}
 					></input>
-					<label>Border size</label>
-					<input type="number" value={this.state.borderSize} onChange={(e) => this.setState({ borderSize: e.target.value })} />
 
-					<label>Border type</label>
+					<div className="d-flex flex-row">
-					<select
+						<label>Border size</label>
-						onChange={(e) => this.setState({ borderType: e.target.value })}
+						<input type="number" value={this.state.borderSize} onChange={(e) => this.setState({ borderSize: e.target.value })} />
-						className="form-control"
+
-						value={this.state.borderType}
+						<label>Type</label>
-					>
+						<select
-						<option>dotted</option>
+							onChange={(e) => this.setState({ borderType: e.target.value })}
-						<option>dashed</option>
+							className="form-control input-sm"
-						<option>solid</option>
+							value={this.state.borderType}
-						<option>double</option>
+						>
-						<option>groove</option>
+							<option>dotted</option>
-						<option>ridge</option>
+							<option>dashed</option>
-						<option>inset</option>
+							<option>solid</option>
-						<option>outset</option>
+							<option>double</option>
-						<option>none</option>
+							<option>groove</option>
-					</select>
+							<option>ridge</option>
+							<option>inset</option>
+							<option>outset</option>
+							<option>none</option>
+						</select>
+					</div>
 
 					<label>Background Pattern</label>
 					<select onChange={(e) => this.setState({ pattern: e.target.value })} className="form-control" value={this.state.pattern}>
@@ -105,11 +111,14 @@ class ConfigCover extends React.Component {
 						<option>jupiter</option>
 						<option>sun</option>
 					</select>
-					<label>Dowload As</label>
+
-					<select onChange={(e) => this.setState({ download: e.target.value })} className="form-control" value={this.state.download}>
+					<div className="d-flex flex-row mt-2">
-						<option>PNG</option>
+						<label>Dowload As</label>
-						<option>JPEG</option>
+						<select onChange={(e) => this.setState({ download: e.target.value })} className="form-control input-md" value={this.state.download}>
-					</select>
+							<option>PNG</option>
+							<option>JPEG</option>
+						</select>
+					</div>
 					<button className="reset-btn" onClick={this.handleReset}>
 						Reset
 					</button>

src/components/CoverImage.css

@@ -7,7 +7,7 @@
     height:420px;
     width:800px;
     padding:90px;
-    margin:30px 0px 15px 0px;
+    margin:00px 0px 15px 0px;
 }
 
 .title-card{
@@ -42,7 +42,7 @@ button{
     border-radius:4px;
     padding:10px;
     margin:auto ;
-    width:100px;
+    width:150px;
     text-align: center;
     box-shadow: 4px 4px #cccccc;
 }

src/components/CoverImage.js

@@ -7,7 +7,7 @@ class CoverImage extends React.Component {
 		var c;
 		if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
 			c = hex.substring(1).split("");
-			if (c.length == 3) {
+			if (c.length === 3) {
 				c = [c[0], c[0], c[1], c[1], c[2], c[2]];
 			}
 			c = "0x" + c.join("");