Merge branch 'feature/paint'

README.md

@@ -0,0 +1,65 @@
+<br>
+
+<p align="center">
+  <img src="client/src/assets/images/logo.png" width="350" title="Pixel Artify">
+</p>
+
+## About The Project
+
+Pixel Artify is a web-based tool for transforming images into pixel art. Try it out at [https://pixelartify.com](https://pixelartify.com)!
+
+![Demo Screenshot](client/src/assets/images/demo-screenshot.png)
+
+
+## Getting Started
+
+### Prerequisites
+
+This project requires Node.js which can be installed [here](https://nodejs.org/en/).
+
+### Development Setup
+
+1. Clone the repo:
+
+```sh
+
+git clone https://github.com/shannonlui/pixel-artify.git
+
+```
+
+2. Install the required dependencies in the client directory:
+
+```sh
+
+cd client
+npm install
+
+```
+
+4. Run the client app in development mode:
+
+```js
+
+npm start
+
+```
+
+
+## Features
+- [x] Pixelate uploaded images with customizable pixel size
+- [x] Adjust contrast, brightness, saturation, and color palette
+- [x] Paint, erase and color selection on canvas
+- [ ] Resizable canvas and image export
+- [ ] Zooming and panning the canvas
+- [ ] Undo or redo changes
+
+
+## Acknowledgments
+This project was built using [React.js](https://reactjs.org/), Redux, and the following libraries:
+
+* [Color Thief](https://github.com/lokesh/color-thief)
+* [FileSaver.js](https://github.com/eligrey/FileSaver.js/) 
+* [Pica](https://github.com/nodeca/pica)
+* [React Color](https://github.com/casesandberg/react-color)
+* [React Icons](https://github.com/react-icons/react-icons)
+

client/package.json

@@ -3,9 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "file-saver": "^2.0.2",
+    "file-saver": "^2.0.5",
+    "pica": "^9.0.1",
     "react": "^16.8.6",
+    "react-color": "^2.19.3",
     "react-dom": "^16.8.6",
+    "react-icons": "^4.3.1",
     "react-redux": "^7.0.3",
     "react-router-dom": "^5.0.0",
     "react-scripts": "3.0.0",

client/src/components/Button/Button.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import styles from './Button.module.css';
+
+function Button(props) {
+  const { children, className, primary, secondary, small, ...otherProps } = props;
+  const classNames = [styles.button, className, primary && styles.primary, 
+    secondary && styles.secondary, small && styles.small];
+
+  return (
+    <button type="button" {...otherProps} className={classNames.join(' ')}>
+      <span className={styles.label}>{children}</span>
+    </button>
+  );
+}
+
+export default Button;

client/src/components/Button/Button.module.css

@@ -0,0 +1,31 @@
+.button {
+  background-color: #ef6461;
+  border: none;
+  border-radius: 5px;
+  padding: 5px 10px;
+  color: white;
+  font-weight: bold;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.primary {
+  background-color: #1c9197;
+}
+
+.secondary {
+  background-color: grey;
+}
+
+.small {
+  font-size: 0.8em;
+}
+
+.label {
+  display: flex;
+  align-items: center;
+}
+
+.label svg {
+  margin-right: 5px;
+}

client/src/components/FormControl/FormControl.module.css

@@ -1,12 +1,12 @@
 .control {
   color: white;
-  margin-bottom: 64px;
+  margin-bottom: 40px;
 }
 
 .control .label {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 10px;
+  margin-bottom: 2px;
   font-weight: bold;
 }

client/src/components/Loading/Loading.module.css

@@ -1,5 +1,13 @@
 .loading {
   text-align: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transform: -webkit-translate(-50%, -50%);
+  transform: -moz-translate(-50%, -50%);
+  transform: -ms-translate(-50%, -50%);
+  z-index: 9999;
 }
 
 .text {

client/src/components/Modal/Modal.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { FiX } from 'react-icons/fi';
+
+import styles from './Modal.module.css';
+import Button from '../Button/Button';
+
+function Modal(props) {
+  return (
+    <div className={styles.background} onClick={props.onClose}>
+      <div className={styles.modal} onClick={e => e.stopPropagation()}>
+        <button onClick={props.onClose} className={styles.closeBtn}><FiX /></button>
+        {
+          props.header && <div className={styles.header}>
+            {props.header}
+          </div>
+        }
+        { props.header && <hr /> }
+        <div className={styles.body}>
+          {props.children}
+        </div>
+        <div className={styles.footer}>
+          <Button onClick={props.onClose} secondary>Cancel</Button>
+          <Button onClick={props.onSubmit} primary>Ok</Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Modal;

client/src/components/Modal/Modal.module.css

@@ -0,0 +1,66 @@
+.background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 20;
+}
+
+.modal {
+  position: relative;
+  background: #444;
+  min-width: 250px;
+  width: 40%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  z-index: 100;
+  border-radius: 5px;
+  color: white;
+  overflow-y: scroll;
+}
+
+.header {
+  font-size: 1.2em;
+  font-weight: bold;
+  padding: 24px;
+  margin-right: 24px;
+  color: #ddd;
+}
+
+.closeBtn {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  font-size: 1.4em;
+  cursor: pointer;
+  color: white;
+  background: none;
+  border: none;
+}
+
+.body {
+  padding: 24px;
+  margin-bottom: 60px;
+  min-height: 100px;
+  height: 50%;
+  overflow: auto;
+}
+
+.footer {
+  position: absolute;
+  bottom: 24px;
+  right: 24px;
+}
+
+.footer button {
+  margin-left: 12px;
+}
+
+@media only screen and (max-width: 400px) {
+  .header {
+    font-size: 1em;
+  }
+}

client/src/components/SliderControl/SliderControl.module.css

@@ -6,6 +6,7 @@
   height: 8px;
   outline: none;
   border: none;
+  background: #ddd;
 }
 
 .slider::-webkit-slider-thumb {

client/src/components/Toolbar/Toolbar.js

@@ -9,7 +9,11 @@ const classes = {
 
 const toolbar = (props) => (
   <header className={`${styles.toolbar} ${classes[props.theme]}`}>
-    <Link to="/" className={styles.logo}>pixel artify</Link>
+    <Link to="/" className={styles.logo}>
+      <img src={require('../../assets/images/logo-left.png')} className={styles.logoLeft} />
+      pixel artify
+      <img src={require('../../assets/images/logo-right.png')} className={styles.logoRight} />
+    </Link>
   </header>
 );
 

client/src/components/Toolbar/Toolbar.module.css

@@ -14,7 +14,7 @@
 
 .logo {
   font-family: 'VT323', serif;
-  font-size: 46px;
+  font-size: 38px;
   margin-top: -5px;
   color:white;
   text-decoration: none;
@@ -30,8 +30,19 @@
   color: #ef6461;
 }
 
+.logoLeft {
+  width: 20px;
+  margin-right: 10px;
+}
+
+.logoRight {
+  width: 20px;
+  margin-left: 8px;
+}
+
 @media only screen and (max-width: 768px) {
   .toolbar {
     justify-content: center;
+    padding: 0;
   }
 }

client/src/constants/constants.js

@@ -0,0 +1,5 @@
+export const TOOL_TYPES = {
+  PAINT: "PAINT",
+  COLOR_PICK: "COLOR_PICK",
+  ERASE: "ERASE"
+}