Add style for plugin hint

4 files changed, 55 insertions, 7 deletions

diff --git a/packages/gitbook-plugin-hints/.gitignore b/packages/gitbook-plugin-hints/.gitignore
index 7c6f0eb..ef47881 100644
--- a/packages/gitbook-plugin-hints/.gitignore
+++ b/packages/gitbook-plugin-hints/.gitignore
@@ -28,4 +28,4 @@ node_modules
 *.swp
 
 # Plugin assets
-_assets
+_assets/plugin.js
diff --git a/packages/gitbook-plugin-hints/_assets/website/plugin.css b/packages/gitbook-plugin-hints/_assets/website/plugin.css
new file mode 100644
index 0000000..343201b
--- /dev/null
+++ b/packages/gitbook-plugin-hints/_assets/website/plugin.css
@@ -0,0 +1,43 @@
+.HintAlert {
+    padding: 10px;
+    border-radius: 3px;
+    display: flex;
+    margin-bottom: 1.275em;
+}
+
+.HintAlert-Icon {
+    flex: 0;
+    padding: 10px 20px;
+    font-size: 24px;
+}
+
+.HintAlert-Content {
+    flex: auto;
+    padding: 10px;
+    padding-left: 0px;
+}
+
+/* Styles */
+.HintAlert-Style-info, .HintAlert-Style-tip {
+    color: #31708f;
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+}
+
+.HintAlert-Style-success {
+    color: #3c763d;
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+
+.HintAlert-Style-danger {
+    color: #a94442;
+    background-color: #f2dede;
+    border-color: #ebccd1;
+}
+
+.HintAlert-Style-warning {
+    color: #8a6d3b;
+    background-color: #fcf8e3;
+    border-color: #faebcc;
+}
diff --git a/packages/gitbook-plugin-hints/package.json b/packages/gitbook-plugin-hints/package.json
index bd9f65b..1635d36 100644
--- a/packages/gitbook-plugin-hints/package.json
+++ b/packages/gitbook-plugin-hints/package.json
@@ -2,7 +2,7 @@
   "name": "gitbook-plugin-hints",
   "description": "Defines four types of styled hint blocks: info, danger, tip, working.",
   "main": "index.js",
-  "browser": "./_assets/theme.js",
+  "browser": "./_assets/plugin.js",
   "version": "2.0.0",
   "dependencies": {
     "classnames": "^2.2.5",
@@ -15,7 +15,7 @@
     "gitbook": ">=4.0.0"
   },
   "scripts": {
-    "build-js": "gitbook-plugin build ./src/index.js ./_assets/theme.js",
+    "build-js": "gitbook-plugin build ./src/index.js ./_assets/plugin.js",
     "prepublish": "npm run build-js"
   },
   "homepage": "https://github.com/GitBookIO/gitbook",
diff --git a/packages/gitbook-plugin-hints/src/index.js b/packages/gitbook-plugin-hints/src/index.js
index be29f1b..2ee8a1f 100644
--- a/packages/gitbook-plugin-hints/src/index.js
+++ b/packages/gitbook-plugin-hints/src/index.js
@@ -3,8 +3,9 @@ const GitBook = require('gitbook-core');
 const { React } = GitBook;
 
 const STYLE_TO_ICON = {
-    info:    'info',
+    info:    'info-circle',
     tip:     'question',
+    success: 'check-circle',
     danger:  'exclamation-circle',
     warning: 'exclamation-triangle'
 };
@@ -18,14 +19,18 @@ const HintAlert = React.createClass({
 
     render() {
         const { children, style, icon } = this.props;
-        const className = classNames('HintAlert', 'alert', `alert-${style}`);
+        const className = classNames(
+            'HintAlert', `HintAlert-Style-${style}`,
+            'alert', `alert-${style}`
+        );
 
         return (
             <div className={className}>
-                <div className="HintAlert/Icon">
+                <GitBook.ImportCSS href="gitbook/hints/plugin.css" />
+                <div className="HintAlert-Icon">
                     <GitBook.Icon id={icon || STYLE_TO_ICON[style]} />
                 </div>
-                <div className="HintAlert/Content">
+                <div className="HintAlert-Content">
                     {children}
                 </div>
             </div>