feat: sdoc diff (#5465)

* feat: sdoc diff

* feat: add changes

* feat: optimize code

frontend/src/components/common/go-back/index.css

@@ -0,0 +1,9 @@
+.go-back {
+  margin-right: 0.75rem;
+  color: #c0c0c0;
+}
+
+.go-back:hover {
+  color: #ff9933;
+  cursor: pointer;
+}

frontend/src/components/common/go-back/index.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+
+import './index.css';
+
+class GoBack extends Component {
+
+  onBackClick = (event) => {
+    event.preventDefault();
+    window.history.back();
+  }
+
+  render() {
+    return (
+      <div className="go-back" onClick={this.onBackClick}>
+        <span className="fas fa-chevron-left"></span>
+      </div>
+    );
+  }
+}
+
+export default GoBack;

frontend/src/components/common/switch/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import '../../../css/switch.css';
+
+function Switch(props) {
+  const { onChange, checked, placeholder, disabled, className, size } = props;
+
+  return(
+    <div className={classnames('seahub-switch position-relative', className, size)}>
+      <label className="custom-switch">
+        <input
+          className="custom-switch-input"
+          type="checkbox"
+          checked={checked}
+          onChange={onChange}
+          name="custom-switch-checkbox"
+          disabled={disabled}
+        />
+        <span className="custom-switch-description text-truncate">{placeholder}</span>
+        <span className="custom-switch-indicator"></span>
+      </label>
+    </div>
+  );
+}
+
+Switch.propTypes = {
+  checked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  className: PropTypes.string,
+  size: PropTypes.oneOf(['large', 'small', undefined]),
+  onChange: PropTypes.func.isRequired,
+};
+
+export default Switch;

frontend/src/components/history-list-view/history-list-item.js

@@ -5,6 +5,8 @@ import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem} from 'reactstrap'
 import { gettext, filePath } from '../../utils/constants';
 import URLDecorator from '../../utils/url-decorator';
 
+import '../../css/history-record-item.css';
+
 moment.locale(window.app.config.lang);
 
 const propTypes = {