colours
diff --git a/Components/Card.js b/Components/Card.js
index d8c11f6..85a2407 100644
--- a/Components/Card.js
+++ b/Components/Card.js
@@ -12,7 +12,7 @@
backgroundImage:`linear-gradient(69.44deg, #${this.props.gradient[0]} 0%, #${this.props.gradient[1]} 100%)`,
margin: "0"
}}>
- <img alt="" className={Styles.backgroundImage} src={`/Waves/${this.props.wave}.svg`} />
+ <img alt="" className={Styles.backgroundImage} src={`/Waves/${this.props.wave}.svg`} draggable={false} />
<div className={Styles.panel}>
<div className={Styles.titleContainer}>
<img alt="Project icon" className={Styles.image} src={"/Icons/" + (this.props.icon ? this.props.icon : this.props.wave) + ".svg"} />
diff --git a/Components/Header.js b/Components/Header.js
index 51bd412..5aed6f3 100644
--- a/Components/Header.js
+++ b/Components/Header.js
@@ -25,7 +25,7 @@
<meta name="author" content="Clicks Minute Per" />
<meta name="og:author" content="Clicks Minute Per" />
</Head>
- <img alt="" className={Styles.backgroundImage} src={`/Headers/${this.props.wave}.svg`} />
+ <img draggable={false} alt="" className={Styles.backgroundImage} src={`/Headers/${this.props.wave}.svg`} />
<div className={Styles.panel}>
<div className={Styles.titleContainer}>
<h1 className={Styles.title}>{this.props.name}</h1>
@@ -47,8 +47,8 @@
}
</div>
</div>
- <span className={Styles.arrowSpan + " " + (this.props.hideArrow ? Styles.arrowHidden : null)}>
- <a href="#start"><img alt="Down arrow" src="/Arrow.svg" className={Styles.arrow} draggable={false} /></a>
+ <span className={Styles.arrowSpan + " " + (this.props.hideArrow ? Styles.arrowHidden : null)} draggable={false}>
+ <a href="#start" draggable={false}><img alt="Down arrow" src="/Arrow.svg" className={Styles.arrow} draggable={false} /></a>
</span>
</div>
)
diff --git a/Components/NavBar.js b/Components/NavBar.js
index 38c1275..c838f28 100644
--- a/Components/NavBar.js
+++ b/Components/NavBar.js
@@ -1,19 +1,13 @@
import React, { Component } from "react";
import Styles from '../styles/navbar.module.css';
-import Cookies from 'js-cookie';
import ThemeChangeButton from './ThemeChangeButton';
-// import { setInfo } from "../redux/actions/main"
-// import { connect } from "react-redux";
-// import { makeStore } from "../redux/store";
-// const store = makeStore();
class NavBar extends Component {
constructor(props) {
super(props);
this.state = {
isOpen: false,
- cookie: 'light'
}
this.isTouchDevice = false
this.hoverSensor = React.createRef();
@@ -41,9 +35,6 @@
} else {
this.isTouchDevice = false
}
- this.setState({
- cookie: Cookies.get('theme')
- })
}
onClick() {
@@ -80,16 +71,4 @@
}
}
-
-// const mapStateToProps = state => {
-// return { theme: state.main.theme }
-// }
-
-// const mapDispatchToProps = {
-// setInfo
-// }
-
-// const nav = connect(mapStateToProps, mapDispatchToProps)(NavBar);
-// export default nav;
-
export default NavBar;
\ No newline at end of file
diff --git a/Components/ThemeChangeButton.js b/Components/ThemeChangeButton.js
index 50f1cc2..b4c80c8 100644
--- a/Components/ThemeChangeButton.js
+++ b/Components/ThemeChangeButton.js
@@ -1,20 +1,29 @@
/** @jsxImportSource theme-ui */
import { useColorMode } from 'theme-ui';
-import Styles from '../styles/navbar.module.css'
+import Styles from '../styles/navbar.module.css';
+import Light from '../public/light.svg';
+import Dark from '../public/dark.svg';
+import { useState, useEffect } from 'react';
+
const ThemeChangeButton = () => {
const [colorMode, setColorMode] = useColorMode()
+ const [render, setRender] = useState(false);
+
+ useEffect(() => {
+ setRender(true);
+ });
+
return (
<header>
- <a onClick={(e) => {
- e.preventDefault();
- setColorMode(colorMode === 'light' ? 'dark' : 'light');
- }}>
- <img
- alt="Theme"
- className={Styles.icon}
- src={`/${colorMode}.svg`}
- /></a>
+ <a className={Styles.icon + " " + Styles.ThemeChangeButton} onClick={(e) => {
+ e.preventDefault();
+ setColorMode(colorMode === 'light' ? 'dark' : 'light');
+ }}>
+ {
+ !render ? null : (colorMode == 'light' ? <Light /> : <Dark />)
+ }
+ </a>
</header>
)
}