[my libs] for new users: create default library and show the guide (#4372)

* [my libs] for new users: create default library and show the guide
dialog

* only do that for the first login

* [my libs] 'guide for new' dialog: redesigned the UI

frontend/src/components/dialog/guide-for-new-dialog.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalBody } from 'reactstrap';
+import { gettext, mediaUrl, siteName, canAddRepo } from '../../utils/constants';
+
+const propTypes = {
+  toggleDialog: PropTypes.func.isRequired
+};
+
+class GuideForNewDialog extends React.Component {
+
+  toggle = () => {
+    this.props.toggleDialog();
+  }
+
+  render() {
+    return (
+      <Modal isOpen={true} toggle={this.toggle}>
+        <ModalBody>
+          <button type="button" className="close text-gray" onClick={this.toggle}><span aria-hidden="true">×</span></button>
+          <div className="p-2 text-center">
+            <img src={`${mediaUrl}img/welcome.png`} width="180" alt="" />
+            <h3 id="dialogTitle">{gettext('Welcome to {site_name_placeholder}').replace('{site_name_placeholder}', siteName)}</h3>
+            {canAddRepo ?
+              <p>{gettext('{site_name_placeholder} organizes files into libraries. Each library can be synced and shared separately. We have created a personal library for you. You can create more libraries later.').replace('{site_name_placeholder}', siteName)}</p> :
+              <p>{gettext('{site_name_placeholder} organizes files into libraries. Each library can be synced and shared separately. Howerver, since you are a guest user now, you can not create libraries.').replace('{site_name_placeholder}', siteName)}</p>
+            }
+          </div>
+        </ModalBody>
+      </Modal>
+    );
+  }
+}
+
+GuideForNewDialog.propTypes = propTypes;
+
+export default GuideForNewDialog;