⚡feat: can choose random themes now

src/components/ConfigCover.js

@@ -4,6 +4,7 @@ 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",
@@ -17,7 +18,7 @@ const defaultSettings = {
 	textColor: "#676683",
 	opacity: 1,
 	author: 'Rutik Wankhade',
-	icon: {'label':'react','value':'react'},
+	icon: { 'label': 'react', 'value': 'react' },
 	devIconOptions: {},
 };
 const devIconsUrl = "https://raw.githubusercontent.com/devicons/devicon/master/devicon.json"
@@ -27,16 +28,20 @@ const devIconsUrl = "https://raw.githubusercontent.com/devicons/devicon/master/d
 // 	{ value: 'python', label: 'Python' },
 class ConfigCover extends React.Component {
 	state = defaultSettings;
-	componentDidMount(){
+	componentDidMount() {
 		console.log("Mount")
-		fetch(devIconsUrl).then(r=>r.json()).then(data=>{
+		fetch(devIconsUrl).then(r => r.json()).then(data => {
-			this.setState({devIconOptions: data.map(item=>({'value':item.name,'label':item.name}))})
+			this.setState({ devIconOptions: data.map(item => ({ 'value': item.name, 'label': item.name })) })
 		})
 	}
 	handleReset = () => {
 		this.setState(defaultSettings);
 	};
 
+	getRandomTheme = (theme, Pattern) => {
+		this.setState({ bgColor: theme.bgColor, borderColor: theme.bdColor, pattern: Pattern });
+	}
+
 	render() {
 		return (
 			<div className="main-container">
@@ -214,11 +219,16 @@ class ConfigCover extends React.Component {
 					</button>
 				</div>
 
+				<div className="d-flex flex-column">
+					<RandomTheme onThemeChange={this.getRandomTheme} />
+				</div>
+
 				<div className="blog-cover">
 					<ComponentToImg downloadAs={this.state.download}>
 						<CoverImage {...this.state} />
 					</ComponentToImg>
 				</div>
+
 			</div>
 		);
 	}

src/components/CoverImage.css

@@ -61,6 +61,10 @@ button{
     margin-top:20px;
     text-align: center;
     box-shadow: 4px 4px #cccccc;
+
+}
+button:active{   
+     transform:scale(1.1);
 }
 
 @media screen and (max-width:600px){

src/components/RandomTheme.css

@@ -0,0 +1,28 @@
+.random-btn{
+    height: 40px;
+    width: 40px;
+    padding: 5px;
+    border-radius: 6px;
+    cursor: pointer;
+    background-color: #ffffff;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
+    border: 2px solid #ccccff;
+    
+}
+.random-btn:active{
+    transform: rotate(360deg);
+    transition: all 0.2s ease-out;
+}
+.bi-shuffle{
+    height: 25px;
+    width: 25px;
+    opacity: 0.6;
+}
+
+@media screen and(max-width:600px){
+.random-btn{
+    margin: 20px;
+}
+}

src/components/RandomTheme.js

@@ -0,0 +1,119 @@
+import React from 'react';
+import './RandomTheme.css';
+class RandomTheme extends React.Component {
+
+    changeTheme = () => {
+        const colorThemes = [
+            {
+                bgColor: '#d972ff',
+                bdColor: '#581b98'
+            },
+            {
+                bgColor: '#a7ff83',
+                bdColor: '#17b978'
+
+            },
+            {
+                bgColor: '#CB91FE',
+                bdColor: '#5F01B2'
+
+            },
+            {
+                bgColor: '#9D2EFE',
+                bdColor: '#3D0C6A'
+
+            },
+            {
+                bgColor: '#88EF69',
+                bdColor: '#362E48'
+
+            },
+            {
+                bgColor: '#ffa600',
+                bdColor: '#44475a'
+            },
+            {
+                bgColor: '#8078E7',
+                bdColor: '#4B4681'
+            },
+            {
+                bgColor: '#B1B3E4',
+                bdColor: '#333794'
+            },
+            {
+                bgColor: '#CA96DB',
+                bdColor: '#7D3394'
+            },
+            {
+                bgColor: '#F9A6A8',
+                bdColor: '#55456F'
+            },
+            {
+                bgColor: '#dcd6f7',
+                bdColor: '#424874'
+            },
+            {
+                bgColor: '#aba9e9',
+                bdColor: '#64638f'
+            },
+            {
+                bgColor: '#ffe9e3',
+                bdColor: '#7c73e6'
+            },
+            {
+                bgColor: '#efb1ff',
+                bdColor: '#742dd2'
+            },
+            {
+                bgColor: '#fee856',
+                bdColor: '#1b0044'
+            },
+            {
+                bgColor: '#fee856',
+                bdColor: '#5c2a9d'
+            },
+            {
+                bgColor: '#16db93',
+                bdColor: '#2c699a'
+            },
+            {
+                bgColor: '#ffc4d6',
+                bdColor: '#ff5d8f'
+            },
+            {
+                bgColor: '#80ed99',
+                bdColor: '#22577a'
+            },
+            {
+                bgColor: '#ffb2e6',
+                bdColor: '#8447ff'
+            },
+            {
+                bgColor: '',
+                bdColor: ''
+            }
+
+        ];
+        const patterns = ['graph-paper', 'gigsaw', '', 'hideout', 'dots', '', 'falling-triangles', 'circuit-board', '',
+            'temple', 'anchors', '', 'brickwall', 'wiggle', 'overlapping-circles', '', 'tic-tac-toe', 'leaf', '', 'bubbles', 'squares', ''];
+        const indexOfColors = Math.floor(Math.random() * colorThemes.length);
+        const theme = colorThemes[indexOfColors];
+
+        const indexOfPattern = Math.floor(Math.random() * patterns.length);
+        const Pattern = patterns[indexOfPattern];
+
+        this.props.onThemeChange(theme, Pattern);
+    }
+
+    render() {
+        return (
+            <div className="random-btn" onClick={this.changeTheme}>
+                <svg width="1em" height="1em" viewBox="0 0 16 16" className="bi bi-shuffle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                    <path fillRule="evenodd" d="M0 3.5A.5.5 0 0 1 .5 3H1c2.202 0 3.827 1.24 4.874 2.418.49.552.865 1.102 1.126 1.532.26-.43.636-.98 1.126-1.532C9.173 4.24 10.798 3 13 3v1c-1.798 0-3.173 1.01-4.126 2.082A9.624 9.624 0 0 0 7.556 8a9.624 9.624 0 0 0 1.317 1.918C9.828 10.99 11.204 12 13 12v1c-2.202 0-3.827-1.24-4.874-2.418A10.595 10.595 0 0 1 7 9.05c-.26.43-.636.98-1.126 1.532C4.827 11.76 3.202 13 1 13H.5a.5.5 0 0 1 0-1H1c1.798 0 3.173-1.01 4.126-2.082A9.624 9.624 0 0 0 6.444 8a9.624 9.624 0 0 0-1.317-1.918C4.172 5.01 2.796 4 1 4H.5a.5.5 0 0 1-.5-.5z" />
+                    <path d="M13 5.466V1.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192zm0 9v-3.932a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192z" />
+                </svg>
+            </div>
+        );
+    }
+}
+export default RandomTheme;