style: update sttyle of config cover

public/index.html

@@ -14,8 +14,8 @@
   <meta property="twitter:image"
     content="https://user-images.githubusercontent.com/47467468/138584874-34311571-5fc7-40db-93f2-759edb68635d.png">
   <link rel="apple-touch-icon" href="./favicon.png" />
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css"
+  <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css"
-    integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
+    integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous"> -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/konpa/devicon@master/devicon.min.css">
 
   <!--

src/components/App.js

@@ -5,8 +5,8 @@ class App extends React.Component {
 
     render() {
         return (
-            <div className="content bg-slate-400">
+            <div className="content ">
-                <Navbar />
+                {/* <Navbar /> */}
                 <ConfigCover />
             </div>
         );

src/components/ConfigCover.css

@@ -2,31 +2,9 @@ body {
 	background-color: #f2f2f2;
 }
 
-.main-container {	
-	display: flex;
-	flex-direction: row;
-}
-.tagline {
-	max-width: 300px;
-	font-weight: 600;
-	font-size: 18px;
-}
-.config-container {
-	display: flex;
-	flex-direction: column;
-	padding:35px;
-	width: 600px;
-	background-color: #ffffff;
-	margin-right:10px;
-	justify-items: center;
-	justify-content: center;
 
-}
-.card{
-    text-align: center;
-    color:#676683;
 
-}
+
 
 details{
 	font-size: 1rem;
@@ -64,21 +42,11 @@ details{
 label{
 	margin: 5px;
 }
-input {
-	margin: 4px;
-		background-color: #f2f2f2;
 
-}
 
-.input-title{
-	margin:5px;
-	background-color: #f2f2f2;
-}
 
-.input-author{
-		background-color: #f2f2f2;
 
-}
+
 .input-color{
 padding:1px;
 	width:40px;

src/components/ConfigCover.js

@@ -41,55 +41,118 @@ class ConfigCover extends React.Component {
 
 	render() {
 		return (
-			<div className="main-container">
+			<div className="flex ">
-				<div className="config-container card ">
+				<div className="bg-white  p-4 flex flex-col md:w-1/4">
-					<p className="tagline"><span role="img" aria-label="tool"> 🛠 </span> Creating cover images for your blogs is now super easy</p>
+					{/* <p className="tagline"><span role="img" aria-label="tool"> 🛠 </span> Creating cover images for your blogs is now super easy</p> */}
-					<textarea
-						type="text"
-						placeholder="Enter title here"
-						className="input-title form-control"
-						onChange={(e) => this.setState({ title: e.target.value })}
-					/>
-
-					<input
-						type="text"
-						placeholder="Author"
-						className="input-author form-control"
-						onChange={(e) => this.setState({ author: e.target.value })}
-					></input>
 
 
-					<div className=" rounded my-2 ml-2 p-1">
+					<div className="m-2 flex flex-col">
+						<span className="font-medium">Blog Title</span>
+						<textarea
+							type="text"
+							value={this.state.title}
+							placeholder="Enter title here"
+							className="border text-gray-700 text-xl rounded  p-2 h-24"
+							onChange={(e) => this.setState({ title: e.target.value })}
+						/>
+					</div>
 
-						{/* <h6 className="">Background</h6> */}
+					<div className="flex flex-col m-2 ">
+						<span className="font-medium">Author</span>
+						<input
+							type="text"
+							value={this.state.author}
+							placeholder="Author"
+							className="border text-gray-700 text-xl rounded bg-white p-2"
+							onChange={(e) => this.setState({ author: e.target.value })}
+						></input>
+					</div>
 
-						<div className="flex-card">
+
-							<div className=" border rounded p-1 flex-row ">
+
-								<span>{ this.state.bgColor}</span>
+					<div className="flex items-center">
+
+						<div className="flex flex-col m-2 w-1/2">
+							<span className="font-medium">Font</span>
+
+							<select className=" text-gray-700 text-xl p-2 rounded border">
+								<option>Serif</option>
+								<option>Sans</option>
+								<option>mono</option>
+							</select>
+						</div>
+						<div className="flex flex-col m-2 ">
+							<span className="font-medium">Color</span>
+							<div className="border rounded flex items-center p-2">
+
+								<span className="text-sm text-gray-700 font-semibold mx-2">{this.state.bgColor}</span>
 								<input type="color" value={this.state.bgColor}
 									onChange={(e) => this.setState({ bgColor: e.target.value })}
-									className="input-color form-control"
+									className="h-8 w-8  rounded"
 								/>
 							</div>
-
-							<div className="flex-row">
-								<span>Font size</span>
-								<input type="number" className="font-size" min="20"/>
-					</div>
-
 						</div>
+
 					</div>
 
 
-					<div className="mx-4 my-1">
+
-						<h6>Dev Icon</h6>
+
+
+					<div className="flex flex-col m-2 ">
+						<span className="font-medium">Icon</span>
 						<Select value={this.state.icon}
 							onChange={(selectedOption) => this.setState({ icon: selectedOption })}
 							options={this.state.devIconOptions}
-							className="input"
+							className="text-xl text-gray-700"
 						/>
 					</div>
 
+
+
+					<div className="flex flex-col m-2">
+						<span className="font-medium">Pattern</span>
+						<select
+							onChange={(e) => this.setState({ pattern: e.target.value })}
+							className="border text-xl p-2 rounded"
+							value={this.state.pattern}>
+
+							<option>None</option>
+							<option>graph-paper</option>
+							<option>jigsaw</option>
+							<option>hideout</option>
+							<option>dots</option>
+							<option>falling-triangles</option>
+							<option>circuit-board</option>
+							<option>temple</option>
+							<option>anchors</option>
+							<option>brickwall</option>
+							<option>overlapping-circles</option>
+							<option>wiggle</option>
+							<option>tic-tac-toe</option>
+							<option>leaf</option>
+							<option>bubbles</option>
+							<option>squares</option>
+							<option>explorer</option>
+							<option>jupiter</option>
+							<option>sun</option>
+						</select>
+					</div>
+
+					{/* <div className="flex flex-col m-2 ">
+						<span className="font-medium">Theme</span>
+
+						<select className="text-gray-700 text-xl p-2 rounded border">
+							<option>Basic</option>
+							<option>Theme 2</option>
+							<option>Theme 3</option>
+						</select>
+					</div> */}
+
+
+
+
+
 					{/* <div className="mx-4 my-1">
 						<h6>Download As</h6>
 						<select onChange={(e) => this.setState({ download: e.target.value })}
@@ -107,7 +170,7 @@ class ConfigCover extends React.Component {
 					</button>
 				</div>
 
-				<div className="d-flex flex-column">
+				<div className="m-2 items-center justify-center flex">
 					<RandomTheme onThemeChange={this.getRandomTheme} />
 				</div>