diff --git a/src/components/ConfigCover.js b/src/components/ConfigCover.js
index dbcd60d..abaea2b 100644
--- a/src/components/ConfigCover.js
+++ b/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=>{
- this.setState({devIconOptions: data.map(item=>({'value':item.name,'label':item.name}))})
+ fetch(devIconsUrl).then(r => r.json()).then(data => {
+ 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 (
@@ -214,11 +219,16 @@ class ConfigCover extends React.Component {
+
+
+
+
+
);
}
diff --git a/src/components/CoverImage.css b/src/components/CoverImage.css
index c718b29..ad33a45 100644
--- a/src/components/CoverImage.css
+++ b/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){
diff --git a/src/components/RandomTheme.css b/src/components/RandomTheme.css
new file mode 100644
index 0000000..7b2dd37
--- /dev/null
+++ b/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;
+}
+}
diff --git a/src/components/RandomTheme.js b/src/components/RandomTheme.js
new file mode 100644
index 0000000..e34f14f
--- /dev/null
+++ b/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 (
+
+ );
+ }
+}
+export default RandomTheme;