client/src/components/Memeify/EditableFontface/index.js

@@ -64,7 +64,7 @@ export default class EditableFontface extends Component {
     ) : null;
 
     return (
-      <div style={{ position: 'relative' }}>
+      <div style={{ position: 'relative', ...(fontFace.container || {}) }}>
         <style scoped>{'@keyframes textBlink { 0% { opacity: 1 } 30% { opacity: 0.6 } 60% { opacity: 1 } }'}</style>
         {fontInput}
         <div ref={me.state.fontRender} style={textStyles} title={value}>{textRender(value)}</div>
@@ -93,6 +93,7 @@ export const PRESETS = {
   'Lazer': require('../FontFaces/Lazer'),
   'Neon': require('../FontFaces/Neon'),
   'Old Blue': require('../FontFaces/OldBlue'),
+  'Outline': require('../FontFaces/Outline'),
   'Retro Rainbow': require('../FontFaces/RetroRainbow'),
   'The Special': require('../FontFaces/TheSpecial'),
   'Vapor Wave': require('../FontFaces/VaporWave'),

client/src/components/Memeify/FontFaces/GreenMachine.js

@@ -1,5 +1,4 @@
 module.exports = {
-  container: {},
   editorStyle: {
     fontFamily: 'courier, Courier New',
     fontWeight: 'bold',
@@ -12,4 +11,7 @@ module.exports = {
     fontWeight: 'bold',
     textShadow: '1px 1px 2px #003605',
   },
+  previewOverrides: {
+    fontSize: '1.6em',
+  },
 };

client/src/components/Memeify/FontFaces/Inferno.js

@@ -1,5 +1,4 @@
 module.exports = {
-  container: {},
   editorStyle: {
     fontFamily: 'helvetica, Helvetica Nue',
     fontWeight: 'bold',
@@ -14,6 +13,7 @@ module.exports = {
   },
   previewOverrides: {
     fontSize: '1.5em',
+    overflow: 'hidden',
     padding: '0 1rem 0 1rem',
   },
 };

client/src/components/Memeify/FontFaces/Lazer.js

@@ -1,5 +1,4 @@
 module.exports = {
-  container: {},
   editorStyle: {
     fontFamily: 'helvetica, Helvetica Nue',
     fontWeight: 'bold',
@@ -20,4 +19,7 @@ module.exports = {
     WebkitBackgroundClip: 'text',
     WebkitTextStroke: '0.03em rgba(255, 255, 255, 0.6)',
   },
+  previewOverrides: {
+    fontSize: '1.8em',
+  },
 };

client/src/components/Memeify/FontFaces/Neon.js

@@ -1,5 +1,4 @@
 module.exports = {
-  container: {},
   editorStyle: {
     fontFamily: 'Helvetica, Arial',
     fontWeight: 'bold',

client/src/components/Memeify/FontFaces/OldBlue.js

@@ -17,6 +17,7 @@ module.exports = {
   },
 	previewOverrides: {
 		height: '2.6rem',
+		overflow: 'hidden',
 	},
   textRender: (text) => {
     const id = `curve-${text.replace(/[^A-Za-z0-9]/g, '')}-oceanwave`
@@ -24,12 +25,12 @@ module.exports = {
       <svg viewBox="0 0 500 50" style={{ height: '4em', fontFamily: 'Arial', fontWeight: 'bold' }}>
 				<path id={id} fill="transparent" d="M 0 50 Q 50 0 100 50 Q 150 100 200 50 Q 250 0 300 50 Q 350 100 400 50 Q 450 0 500 50 Q 550 100 600 50 " transform="scale(1 0.5) translate(0 15)" />
         <text x="10" style={{ fill: '#4dc2fe', fontWeight: 900, letterSpacing: '-0.15em', textShadow: '0.15em -0.1em #1c55a0' }}>
-          <textPath href={`#${id}`}>
+          <textPath xlinkHref={`#${id}`}>
             {text}
           </textPath>
         </text>
 				<text x="10" style={{ fill: 'transparent', stroke: '#1c55a0', strokeWidth: '.012em', fontWeight: 900, letterSpacing: '-0.15em' }}>
-          <textPath href={`#${id}`}>
+          <textPath xlinkHref={`#${id}`}>
             {text}
           </textPath>
         </text>

client/src/components/Memeify/FontFaces/Outline.js

@@ -0,0 +1,18 @@
+module.exports = {
+  editorStyle: {
+    fontFamily: 'arial',
+    fontWeight: 'bold',
+    fontSize: '2em',
+  },
+  text: {
+    color: '#fff',
+    fontFamily: 'arial',
+    fontSize: '2rem',
+    fontWeight: 'bold',
+    textShadow: '2px 2px .1px #000, -1px -1px .1px #000, 1px -1px .1px #000, -1px 1px .1px #000, 1px 1px .1px #000',
+  },
+  previewOverrides: {
+    fontSize: '1.6rem',
+    padding: '0 .04rem',
+  },
+};

client/src/components/Memeify/FontFaces/RetroRainbow.js

@@ -1,5 +1,4 @@
 module.exports = {
-  container: {},
   editorStyle: {
     fontFamily: 'Arial, sans-serif',
     fontWeight: 'bold',

client/src/components/Memeify/FontFaces/TheSpecial.js

@@ -1,7 +1,6 @@
 import React from 'react';
 
 module.exports = {
-  container: {},
   editorStyle: {
     fontFamily: 'Arial, sans-serif',
     fontWeight: 'bold',

client/src/components/Memeify/FontFaces/VaporWave.js

@@ -10,7 +10,9 @@ const charToFullWidth = char => {
 const stringToFullWidth =
 
 module.exports = {
-  container: {},
+  container: {
+		overflow: 'hidden',
+	},
   editorStyle: {},
   text: {
     fontFamily: 'Segoe UI,Helvetica,Arial',
@@ -33,7 +35,7 @@ module.exports = {
       <svg viewBox="0 0 500 160" style={{ height: '10em' }}>
         <path id={id} fill="transparent" d="M6,150C49.63,93,105.79,36.65,156.2,47.55,207.89,58.74,213,131.91,264,150c40.67,14.43,108.57-6.91,229-145" />
         <text x="10">
-          <textPath href={`#${id}`}>
+          <textPath xlinkHref={`#${id}`}>
             {formattedText}
           </textPath>
         </text>

client/src/components/Memeify/RichDraggable/index.js

@@ -49,9 +49,11 @@ export default class RichDraggable extends Component {
 
     return (
       <Draggable {...props} bounds={bounds} offsetParent={body} cancel=".no-drag">
-        <div ref={me.contents} style={{ padding: '15px', position: 'absolute', border: '4px dashed #ddd', cursor: 'move' }} className="creatifyDecor">
-          <div className="no-drag" style={{ position: 'relative', cursor: 'auto' }}>
-            {props.children}
+        <div ref={me.contents} style={{ border: '4px dashed rgba(0, 0, 0, .7)', cursor: 'move', position: 'absolute' }} className="creatifyDecor">
+          <div style={{ border: '4px dashed rgba(255, 255, 255, .8)', margin: '-5px -3px -3px -5px', padding: '15px' }} className="creatifyDecor">
+            <div className="no-drag" style={{ position: 'relative', cursor: 'auto' }}>
+              {props.children}
+            </div>
           </div>
         </div>
       </Draggable>

client/src/components/Memeify/index.js

@@ -30,7 +30,7 @@ const getRasterizedCanvas = (contents, width, height) => {
 
     // Attempt to match font kerning with the DOM.
     const kerningAndPadding = '<style>svg{font-kerning:normal}body{padding:0;margin:0}</style>';
-    const svgContents = `<svg xmlns="http://www.w3.org/2000/svg" width="${width * 2}" height="${height * 2}">
+    let svgContents = `<svg xmlns="http://www.w3.org/2000/svg" width="${width * 2}" height="${height * 2}">
 <foreignObject x="0" y="0" width="${width * 2}" height="${height * 2}" externalResourcesRequired="true">
 <html xmlns="http://www.w3.org/1999/xhtml"><head>${kerningAndPadding}</head><body>${contents}</body></html>
 </foreignObject></svg>`;
@@ -81,7 +81,7 @@ const getRasterizedCanvas = (contents, width, height) => {
   });
 };
 
-export default class Creatify extends Component {
+export default class Memeify extends Component {
   constructor(props) {
     super(props);
 
@@ -94,7 +94,7 @@ export default class Creatify extends Component {
         {
           value: fontName,
           label: (
-            <div style={{ maxHeight: '150px', maxWidth: '100%', fontSize: '16px', overflow: 'hidden' }}>
+            <div style={{ maxHeight: '150px', maxWidth: '100%', fontSize: '16px' }}>
               <EditableFontface key={fontName} fontFace={FontPresets[fontName]} preview={true} value={fontName} editable={false} blinkSelection={false} />
             </div>
           ),

client/src/containers/Dropzone/view.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { validateFile } from '../../utils/file';
-import Creatify from '@components/Creatify';
+import Memeify from '@components/Memeify';
 import DropzonePreviewImage from '@components/DropzonePreviewImage';
 import DropzoneDropItDisplay from '@components/DropzoneDropItDisplay';
 import DropzoneInstructionsDisplay from '@components/DropzoneInstructionsDisplay';
@@ -187,11 +187,11 @@ class Dropzone extends React.Component {
     };
 
     const memeifyContent = memeify && file && filePreview ? (
-      <Creatify flex toolbarClassName={'dropzone-memeify-toolbar'} onSave={(canvas) => this.selectFileFromCanvas(canvas)}>
+      <Memeify flex toolbarClassName={'dropzone-memeify-toolbar'} onSave={(canvas) => this.selectFileFromCanvas(canvas)}>
         <div style={{ background: '#fff', flex: 1, pointerEvents: 'none' }}>
           <img style={{ width: '100%' }} src={filePreview} />
         </div>
-      </Creatify>
+      </Memeify>
     ) : null;
 
     const dropZoneClassName = 'dropzone' + (dragOver ? ' dropzone--drag-over' : '');

package.json

@@ -123,6 +123,7 @@
     "ndb": "^1.0.26",
     "node-sass": "^4.10.0",
     "nodemon": "^1.18.6",
+    "react-color": "^2.14.1",
     "redux-devtools": "^3.4.1",
     "regenerator-transform": "^0.13.3",
     "rollup": "^0.67.0",