Add transitions

4 files changed, 34 insertions, 17 deletions

diff --git a/app/components/HeaderBar.css b/app/components/HeaderBar.css
index d4505a79fd..9fcc65047b 100644
--- a/app/components/HeaderBar.css
+++ b/app/components/HeaderBar.css
@@ -4,12 +4,9 @@
   transition: 0.5s background-color ease-in-out;
 }
 
-/* macOS app runs as menubar app so create arrow and add extra padding */
+/* macOS app runs as menubar app so add extra padding */
 .headerbar--darwin {
   padding-top: 24px;
-  -webkit-mask: 
-    url(../assets/images/app-triangle.svg) 50% 0% no-repeat,
-    url(../assets/images/app-header-backdrop.svg) no-repeat;
 }
 
 .headerbar--hidden {
@@ -20,26 +17,14 @@
   background-color: #192E45;
 }
 
-.headerbar--style-defaultDark:before {
-  background-image: url(../assets/images/app-triangle-default-dark.svg);
-}
-
 .headerbar--style-error {
   background-color: #D0021B;
 }
 
-.headerbar--style-error:before {
-  background-image: url(../assets/images/app-triangle-error.svg);
-}
-
 .headerbar--style-success {
   background-color: #44AD4D;
 }
 
-.headerbar--style-success:before {
-  background-image: url(../assets/images/app-triangle-success.svg);
-}
-
 .headerbar__container {
   display: flex;
   flex-direction: row;
diff --git a/app/components/Settings.css b/app/components/Settings.css
index aff3cf55be..4bd2de5929 100644
--- a/app/components/Settings.css
+++ b/app/components/Settings.css
@@ -116,4 +116,4 @@
   padding: 24px;
 }
 
-.settings__footer .button + .button { margin-top: 16px; }
+.settings__footer .button + .button { margin-top: 16px; }
\ No newline at end of file
diff --git a/app/components/WindowChrome.css b/app/components/WindowChrome.css
new file mode 100644
index 0000000000..8f3fcdb52c
--- /dev/null
+++ b/app/components/WindowChrome.css
@@ -0,0 +1,6 @@
+/* macOS app runs as menubar; create an app chrome with arrow using mask */
+.window-chrome--darwin {
+  -webkit-mask:
+    url(../assets/images/app-triangle.svg) 50% 0% no-repeat,
+    url(../assets/images/app-header-backdrop.svg) no-repeat;
+}
\ No newline at end of file
diff --git a/app/components/WindowChrome.js b/app/components/WindowChrome.js
new file mode 100644
index 0000000000..e1df040d6c
--- /dev/null
+++ b/app/components/WindowChrome.js
@@ -0,0 +1,26 @@
+import React, { Component, PropTypes } from 'react';
+
+/**
+ * A component used to chip out arrow in the app header using CSS mask
+ *
+ * @export
+ * @class WindowChrome
+ * @extends {Component}
+ */
+export default class WindowChrome extends Component {
+  static propTypes = {
+    children: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.element),
+      PropTypes.element,
+    ])
+  };
+
+  render() {
+    const chromeClass = ['window-chrome', 'window-chrome--' + process.platform];
+    return (
+      <div className={ chromeClass.join(' ') }>
+        { this.props.children }
+      </div>
+    );
+  }
+}
\ No newline at end of file