feat: display colorful space diff on synchronization

Author: pyphilia

src/actions/syncSpace.js

@@ -3,6 +3,8 @@ import {
   GET_SYNC_REMOTE_SPACE_SUCCEEDED,
   GET_SYNC_LOCAL_SPACE_SUCCEEDED,
   CLEAR_SYNC_SPACES,
+  SELECT_SYNC_PHASE,
+  CLEAR_SYNC_PHASES,
 } from '../types';
 
 export const getRemoteSpaceForSync = payload =>
@@ -16,3 +18,16 @@ export const clearSpacesForSync = () => dispatch => {
     type: CLEAR_SYNC_SPACES,
   });
 };
+
+export const clearPhasesForSync = () => dispatch => {
+  return dispatch({
+    type: CLEAR_SYNC_PHASES,
+  });
+};
+
+export const selectPhaseForSync = phase => dispatch => {
+  dispatch({
+    type: SELECT_SYNC_PHASE,
+    payload: phase,
+  });
+};

src/components/phase/PhaseItemDescription.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import InfoIcon from '@material-ui/icons/Info';
 import Text from '../common/Text';
 import './PhaseItemDescription.css';
@@ -13,12 +14,15 @@ const style = {
   alignItems: 'center',
 };
 
-const PhaseItemDescription = ({ description }) => {
+const PhaseItemDescription = ({ description, className }) => {
   if (description && description !== '') {
     return (
       <div style={style}>
         <InfoIcon color="primary" />
-        <Text content={description} className="PhaseItemDescriptionText" />
+        <Text
+          content={description}
+          className={clsx('PhaseItemDescriptionText', className)}
+        />
       </div>
     );
   }
@@ -27,10 +31,12 @@ const PhaseItemDescription = ({ description }) => {
 
 PhaseItemDescription.propTypes = {
   description: PropTypes.string,
+  className: PropTypes.string,
 };
 
 PhaseItemDescription.defaultProps = {
   description: '',
+  className: null,
 };
 
 export default PhaseItemDescription;

src/components/space/SpaceDescription.js

@@ -11,12 +11,9 @@ import {
   SPACE_START_PREVIEW_BUTTON,
   BANNER_WARNING_PREVIEW_ID,
   SPACE_DESCRIPTION_ID,
+  SPACE_DESCRIPTION_TEXT_CLASS,
 } from '../../config/selectors';
 
-const style = {
-  fontSize: 'large',
-};
-
 const renderPreviewWarning = t => {
   return (
     <Banner
@@ -39,8 +36,7 @@ const SpaceDescription = ({ description, classes, start, saved }) => {
         <div className={classes.spaceDescription} id={SPACE_DESCRIPTION_ID}>
           <Text
             content={description}
-            style={style}
-            className="SpaceDescriptionText"
+            className={SPACE_DESCRIPTION_TEXT_CLASS}
           />
         </div>
         <Button