Updated Logo and footer

README.md

@@ -8,7 +8,7 @@ Generate a cover image for your blog post online.
 
 [![Cover Image Generator](https://github.com/PJijin/Cover-Image-Generator/blob/master/preview.png?raw=true 'Cover Image Generator')]()
 
-✅ Live Preview: <a href="https://cover-image-generator.pjijin1.now.sh/" target="_BLANK">Click Here</a>
+✅ Live Preview: <a href="https://blogcover.now.sh/" target="_BLANK">Click Here</a>
 
 📹 Video Preview: <a href="https://www.youtube.com/watch?v=GGTrhgKrch8" target="_BLANK">Click Here</a>
 
@@ -44,7 +44,7 @@ Generate a cover image for your blog post online.
 
 ## ⚙️ Usage
 
-You can use the online version to generate cover image. <a href="https://cover-image-generator.pjijin1.now.sh/" target="_BLANK">Click Here</a>
+You can use the online version to generate cover image. <a href="https://blogcover.now.sh/" target="_BLANK">Click Here</a>
 
 OR
 

src/components/canvas-properties/canvas-properties.component.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Toggle } from 'react-powerplug';
-import { Plus, Minus, Settings  } from 'react-feather';
+import { Plus, Minus, Settings } from 'react-feather';
 import InputRange from 'react-input-range';
 import 'react-input-range/lib/css/index.css';
 
@@ -51,7 +51,9 @@ const CanvasProperties = ({ handleChange, defaultSettings, changeSettings, massU
 			{({ on, toggle }) => (
 				<>
 					<div className="toggle" onClick={toggle} checked={on}>
-						<h5>{on ? <Minus size="12" /> : <Plus size="12" />} <Settings size="12" /> Properties</h5>
+						<h5>
+							{on ? <Minus size="12" /> : <Plus size="12" />} <Settings size="12" /> Properties
+						</h5>
 					</div>
 					{on && (
 						<div className="options-toggle">

src/components/footer/footer.component.jsx

@@ -8,11 +8,11 @@ export default function Footer() {
 		<footer>
 			<div>
 				Made with
-				<span role="img" className="ml-5" aria-label="heart">
-					❤️
-				</span>
+				<img width="14" src="https://twemoji.maxcdn.com/2/72x72/1f496.png" alt="heart" />
+				by <a href="https://twitter.com/PJijin">@PJijin</a> &{' '}
+				<a href="https://twitter.com/JP1016v1">@JP1016v1</a>
 			</div>
-			<div className="mtb-15">
+			<div className="mtb-15 socialLinks">
 				<a href="https://twitter.com/pjijin" target="_BLANK" rel="noopener noreferrer">
 					<Twitter size="18" />
 				</a>

src/components/footer/footer.styles.scss

@@ -18,11 +18,21 @@ footer {
 }
 
 footer a {
+	text-decoration: none;
+	color: var(--primary);
+	font-weight: 600;
+}
+
+footer img {
+	padding: 0 10px;
+}
+
+.socialLinks a {
 	font-size: 14px;
 	margin-right: 10px;
 	margin-top: 10px;
 }
 
-footer a:hover svg {
+.socialLinks a:hover svg {
 	fill: var(--primary);
 }

src/components/options/options.component.jsx

@@ -1,12 +1,13 @@
 import React, { useContext } from 'react';
+import { Image } from 'react-feather';
 
 import { defaultSettings } from '../../contexts/settings.utils';
 import SettingsContext from '../../contexts/settings.context.js';
 import FontOptions from '../font-options/font-options.component';
 import CanvasProperties from '../canvas-properties/canvas-properties.component';
-import './options.styles.scss';
 import ImageOptions from '../image-options/image-options.components';
 import BackgroundOptions from '../background-options/background-options.component';
+import './options.styles.scss';
 
 const Options = ({ updateSettings, massUpdateSettings }) => {
 	const settings = useContext(SettingsContext);
@@ -29,6 +30,10 @@ const Options = ({ updateSettings, massUpdateSettings }) => {
 
 	return (
 		<div className="options">
+			<h2 className="logo">
+				<Image size="24" /> <span>BlogCover</span>
+			</h2>
+
 			<h4>Options</h4>
 
 			<CanvasProperties

src/components/options/options.styles.scss

@@ -13,6 +13,17 @@
 	margin-top: 15px;
 }
 
+.logo {
+	text-align: center;
+	font-family: 'Montserrat';
+	font-weight: 600;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-top: 0px;
+	margin-bottom: 20px;
+}
+
 .options {
 	width: 300px;
 	height: 100vh;