Add translations, close button and make Giphy modal more beautiful

app/javascript/flavours/glitch/features/ui/components/gif_modal.js

@@ -1,15 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Button from 'flavours/glitch/components/button';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { giphySet, uploadCompose } from 'flavours/glitch/actions/compose';
 import IconButton from 'flavours/glitch/components/icon_button';
-import { debounce, mapValues } from 'lodash';
-import classNames from 'classnames';
 import ReactGiphySearchbox from 'react-giphy-searchbox'
-import { changeCompose } from 'flavours/glitch/actions/compose';
+import { defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+  search:    { id: 'giphy.search', defaultMessage: 'Search for GIFs' },
+  error:     { id: 'giphy.error', defaultMessage: 'Oops! Something went wrong. Please, try again.' },
+  loading:   { id: 'giphy.loading', defaultMessage: 'Loading...'},
+  nomatches: { id: 'giphy.nomatches', defaultMessage: 'No matches found.' },
+  close:     { id: 'settings.close', defaultMessage: 'Close' },
+});
 
 // Utility for converting base64 image to binary for upload
 // https://stackoverflow.com/questions/35940290/how-to-convert-base64-string-to-javascript-file-object-like-as-from-file-input-f
@@ -34,19 +39,17 @@ const mapDispatchToProps = dispatch => ({
 });
 
 export default @connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
 class GIFModal extends ImmutablePureComponent {
 
   static propTypes = {
+    intl: PropTypes.object.isRequired,
     options: ImmutablePropTypes.map,
     onClose: PropTypes.func.isRequired,
     setOpt: PropTypes.func.isRequired,
     submit: PropTypes.func.isRequired,
   };
 
-  componentDidMount() {
-    //If component mounted
-  }
-
   onDoneButton = (item) => {
     const url = item["images"]["original"]["mp4"];
     var modal = this;
@@ -64,31 +67,14 @@ class GIFModal extends ImmutablePureComponent {
     });
   };
 
-  handleClick = () => {
-    this.props.onClose();
-  }
-
-  handleCancel = () => {
-    this.props.onClose();
-  }
-
-  setRef = (c) => {
-    this.button = c;
-  }
-
-  toggleNotifications = () => {
-    this.props.onToggleNotifications();
-  }
-
-  changeMuteDuration = (e) => {
-    this.props.onChangeMuteDuration(e);
-  }
-
   render () {
 
+    const { intl } = this.props;
+
     return (
-      <div className='modal-root__modal mute-modal'>
+      <div className='modal-root__modal giphy-modal'>
-        <div className='mute-modal__container'>
+        <div className='giphy-modal__container'>
+          <IconButton title={intl.formatMessage(messages.close)} icon="close" size="16" onClick={this.props.onClose}  style={{float: "right"}} /><br />
           <ReactGiphySearchbox
             apiKey="1ttK05MF98dLllFFknTAVo0U4CGcQb4J"
             onSelect={item => this.onDoneButton(item)}
@@ -96,6 +82,12 @@ class GIFModal extends ImmutablePureComponent {
               { columns: 2, imageWidth: 190, gutter: 5 },
               { mq: "700px", columns: 2, imageWidth: 210, gutter: 5 }
             ]}
+            autoFocus="true"
+            searchPlaceholder={intl.formatMessage(messages.search)}
+            messageError={intl.formatMessage(messages.error)}
+            messageLoading={intl.formatMessage(messages.loading)}
+            messageNoMatches={intl.formatMessage(messages.nomatches)}
+            wrapperClassName="giphy-modal__searchbox"
           />
         </div>
       </div>

app/javascript/flavours/glitch/styles/components/giphy.scss

@@ -1,86 +1,13 @@
-$giphyBg: #d9e1e8;
 .giphy-modal {
   @extend .boost-modal;
-  width: unset;
+  width: 500px;
 }
 
 .giphy-modal__container {
-  background: $giphyBg;
   text-align: center;
-  line-height: 0; // remove weird gap under canvas
+  padding: 20px;
-  canvas {
-    border: 5px solid $giphyBg;
-  }
 }
 
-.giphy-modal__action-bar {
+.giphy-modal__searchbox {
-  @extend .boost-modal__action-bar;
+  width: 450px !important;
-
+}
-  .filler {
-    flex-grow: 1;
-    margin: 0;
-    padding: 0;
-  }
-
-  .giphy-toolbar {
-    line-height: 1;
-
-    display: flex;
-    flex-direction: column;
-    flex-grow: 0;
-    justify-content: space-around;
-
-    &.with-inputs {
-      label {
-        display: inline-block;
-        width: 70px;
-        text-align: right;
-        margin-right: 2px;
-      }
-
-      input[type="number"],input[type="text"] {
-        width: 40px;
-      }
-      span.val {
-        display: inline-block;
-        text-align: left;
-        width: 50px;
-      }
-    }
-  }
-
-  .giphy-palette {
-    padding-right: 0 !important;
-    border: 1px solid black;
-    line-height: .2rem;
-    flex-grow: 0;
-    background: white;
-
-    button {
-      appearance: none;
-      width: 1rem;
-      height: 1rem;
-      margin: 0; padding: 0;
-      text-align: center;
-      color: black;
-      text-shadow: 0 0 1px white;
-      cursor: pointer;
-      box-shadow: inset 0 0 1px rgba(white, .5);
-      border: 1px solid black;
-      outline-offset:-1px;
-
-      &.foreground {
-        outline: 1px dashed white;
-      }
-
-      &.background {
-        outline: 1px dashed red;
-      }
-
-      &.foreground.background {
-        outline: 1px dashed red;
-        border-color: white;
-      }
-    }
-  }
-}