Add watermark feature (#274)

* Add watermark feature

* Change watermark to carbon logo

* Fix double borders

components/Carbon.js

@@ -6,7 +6,9 @@ import ResizeObserver from 'resize-observer-polyfill'
 import toHash from 'tohash'
 import debounce from 'lodash.debounce'
 import ms from 'ms'
+
 import WindowControls from '../components/WindowControls'
+import Watermark from '../components/svg/Watermark'
 import CodeMirror from '../lib/react-codemirror'
 import {
   COLORS,
@@ -121,6 +123,7 @@ class Carbon extends React.Component {
             value={this.props.children}
             options={options}
           />
+          {config.watermark && <Watermark />}
           <div id="container-bg">
             <div className="white eliminateOnRender" />
             <div className="alpha eliminateOnRender" />
@@ -135,6 +138,14 @@ class Carbon extends React.Component {
               padding: ${config.paddingVertical} ${config.paddingHorizontal};
             }
 
+            #container :global(.watermark) {
+              fill-opacity: 0.3;
+              position: absolute;
+              z-index: 2;
+              bottom: calc(${config.paddingVertical} + 16px);
+              right: calc(${config.paddingHorizontal} + 16px);
+            }
+
             #container #container-bg {
               position: absolute;
               top: 0px;

components/Dropdown.js

@@ -86,9 +86,9 @@ const SelectedItem = ({ children, isOpen, color, ...rest }) => {
   const itemColor = color || COLORS.SECONDARY
 
   return (
-    <span {...rest} tabIndex="0" className="dropdown-display">
+    <span {...rest} tabIndex="0" className={`dropdown-display ${isOpen ? 'is-open' : ''}`}>
       <span className="dropdown-display-text">{children}</span>
-      <div className={`dropdown-arrow ${isOpen ? 'is-reverse' : ''}`}>
+      <div className={`dropdown-arrow`}>
         <ArrowDown fill={itemColor} />
       </div>
       <style jsx>{`
@@ -104,11 +104,16 @@ const SelectedItem = ({ children, isOpen, color, ...rest }) => {
         .dropdown-display:hover {
           background: ${COLORS.HOVER};
         }
+
+        .dropdown-display.is-open {
+          border-radius: 3px 3px 0 0;
+        }
+
         .dropdown-display-text {
           flex-grow: 1;
           color: ${itemColor};
         }
-        .dropdown-arrow.is-reverse {
+        .is-open > .dropdown-arrow {
           transform: rotate(180deg);
         }
       `}</style>
@@ -148,6 +153,11 @@ const ListItem = ({ children, color, isHighlighted, isSelected, ...rest }) => {
           padding: 8px 16px;
           border-bottom: 1px solid ${itemColor};
         }
+
+        .dropdown-list-item:last-child {
+          border-bottom: none;
+        }
+
         .dropdown-list-item:hover {
           background: ${COLORS.HOVER};
         }

components/Settings.js

@@ -100,6 +100,11 @@ class Settings extends React.Component {
               enabled={this.props.enabled.squaredImage}
               onChange={this.props.onChange.bind(null, 'squaredImage')}
             />
+            <Toggle
+              label="Watermark"
+              enabled={this.props.enabled.watermark}
+              onChange={this.props.onChange.bind(null, 'watermark')}
+            />
             <ExportSizeSelect
               selected={this.props.enabled.exportSize || '2x'}
               onChange={this.props.onChange.bind(null, 'exportSize')}
@@ -162,6 +167,7 @@ class Settings extends React.Component {
           }
 
           .settings-settings > :global(div):first-child,
+          .settings-settings > :global(div):last-child,
           .settings-settings > :global(.collapse) {
             border-bottom: none;
           }

lib/constants.js

@@ -460,5 +460,6 @@ export const DEFAULT_SETTINGS = {
   widthAdjustment: true,
   lineNumbers: false,
   exportSize: '2x',
-  titleBar: ''
+  titleBar: '',
+  watermark: false
 }