Tweak button and icon styles

6 files changed, 22 insertions, 9 deletions

diff --git a/app/src/App.css b/app/src/App.css
index ef0cef4..4feffe3 100644
--- a/app/src/App.css
+++ b/app/src/App.css
@@ -21,7 +21,7 @@ html, body {
 	right: 20px;
 }
 
-button {
+#actions button {
   cursor: pointer;
   background-color: var(--hover-selection);
   color: white;
diff --git a/app/src/Common/Icon.js b/app/src/Common/Icon.js
index d28f37b..933784f 100644
--- a/app/src/Common/Icon.js
+++ b/app/src/Common/Icon.js
@@ -1,6 +1,10 @@
 
-export default function Icon({ brand, name }) {
-  const groupClass = brand ? 'fab' : 'fa'
+const faCollections = {
+  brands: 'fab',
+  default: 'fa'
+}
+export default function Icon({ name, collection = 'default' }) {
+  const groupClass = faCollections[collection]
   const iconClass = `fa-${name}`
 
   return <span className={[groupClass, iconClass].join(' ')} />
diff --git a/app/src/Common/IconButton.js b/app/src/Common/IconButton.js
index f6fff30..9281772 100644
--- a/app/src/Common/IconButton.js
+++ b/app/src/Common/IconButton.js
@@ -1,9 +1,9 @@
 import Icon from './Icon'
 
-export default function IconButton({ brand, icon, text, children, onClick }) {
+export default function IconButton({ collection, icon, text, children, onClick }) {
   return (
     <button onClick={onClick}>
-      <Icon brand={brand} name={icon} /> {text || children}
+      <Icon collection={collection} name={icon} /> {text || children}
     </button>
   )
 }
diff --git a/app/src/Common/Spinner.js b/app/src/Common/Spinner.js
index 08c524f..386b03a 100644
--- a/app/src/Common/Spinner.js
+++ b/app/src/Common/Spinner.js
@@ -1,8 +1,8 @@
 import styles from './spinner.module.css'
 
-export default function Spinner({ children }) {
+export default function Spinner({ children, ...rest }) {
   return (
-    <div className={styles.spinner}>
+    <div {...rest} className={styles.spinner}>
       <i className={`${styles.icon} fa fa-spinner`} />
       {children}
     </div>
diff --git a/app/src/GitHubLink.js b/app/src/GitHubLink.js
new file mode 100644
index 0000000..c5b2974
--- /dev/null
+++ b/app/src/GitHubLink.js
@@ -0,0 +1,9 @@
+import Icon from './Common/Icon'
+
+export default function GitHubLink(props = {}) {
+  return (
+    <a {...props} href="https://github.com/nickcoutsos/keymap-editor">
+      <Icon collection="brands" name="github" />/nickcoutsos/keymap-editor
+    </a>
+  )
+}
diff --git a/app/src/Pickers/Github/Picker.js b/app/src/Pickers/Github/Picker.js
index 0eacb25..81a5ff2 100644
--- a/app/src/Pickers/Github/Picker.js
+++ b/app/src/Pickers/Github/Picker.js
@@ -14,7 +14,7 @@ import Spinner from '../../Common/Spinner'
 function Login() {
   return (
     <IconButton
-      brand
+      collection="brands"
       icon="github"
       text="Login with GitHub"
       onClick={() => github.beginLoginFlow()}
@@ -25,7 +25,7 @@ function Login() {
 function Install() {
   return (
     <IconButton
-      brand
+      collection="brands"
       icon="github"
       text="Add Repository"
       onClick={() => github.beginInstallAppFlow()}