Add sponsor button

src/components/Main.js

@@ -5,6 +5,7 @@ import Events from '../lib/Events';
 import ComponentsSidebar from './components/Sidebar';
 import ModalTextures from './modals/ModalTextures';
 import ModalHelp from './modals/ModalHelp';
+import ModalSponsor from './modals/ModalSponsor';
 import SceneGraph from './scenegraph/SceneGraph';
 import CameraToolbar from './viewport/CameraToolbar';
 import TransformToolbar from './viewport/TransformToolbar';
@@ -19,6 +20,8 @@ export default class Main extends React.Component {
     this.state = {
       entity: null,
       inspectorEnabled: true,
+      isHelpOpen: false,
+      isModalSponsorOpen: false,
       isModalTexturesOpen: false,
       sceneEl: AFRAME.scenes[0],
       visible: {
@@ -98,6 +101,14 @@ export default class Main extends React.Component {
     }
   };
 
+  openModalSponsor = () => {
+    this.setState({ isModalSponsorOpen: true });
+  };
+
+  onCloseModalSponsor = () => {
+    this.setState({ isModalSponsorOpen: false });
+  };
+
   toggleEdit = () => {
     if (this.state.inspectorEnabled) {
       AFRAME.INSPECTOR.close();
@@ -157,6 +168,20 @@ export default class Main extends React.Component {
         <a className="toggle-edit" onClick={this.toggleEdit}>
           {toggleButtonText}
         </a>
+        {this.state.inspectorEnabled && (
+          <a className="sponsor-btn" onClick={this.openModalSponsor}>
+            <svg
+              aria-hidden="true"
+              height="16"
+              viewBox="0 0 16 16"
+              version="1.1"
+              width="16"
+            >
+              <path d="m8 14.25.345.666a.75.75 0 0 1-.69 0l-.008-.004-.018-.01a7.152 7.152 0 0 1-.31-.17 22.055 22.055 0 0 1-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.066 22.066 0 0 1-3.744 2.584l-.018.01-.006.003h-.002ZM4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.58 20.58 0 0 0 8 13.393a20.58 20.58 0 0 0 3.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.749.749 0 0 1-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5Z"></path>
+            </svg>
+            Sponsor
+          </a>
+        )}
 
         {this.renderSceneGraphToggle()}
         {this.renderComponentsToggle()}
@@ -189,6 +214,10 @@ export default class Main extends React.Component {
           isOpen={this.state.isHelpOpen}
           onClose={this.onCloseHelpModal}
         />
+        <ModalSponsor
+          isOpen={this.state.isModalSponsorOpen}
+          onClose={this.onCloseModalSponsor}
+        />
         <ModalTextures
           isOpen={this.state.isModalTexturesOpen}
           selectedTexture={this.state.selectedTexture}

src/components/modals/ModalSponsor.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Modal from './Modal';
+
+export default class ModalSponsor extends React.Component {
+  static propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired
+  };
+
+  render() {
+    return (
+      <Modal
+        title="Sponsor"
+        isOpen={this.props.isOpen}
+        onClose={this.props.onClose}
+      >
+        <div style={{ fontSize: '1.2em', maxWidth: '500px' }}>
+          <p>
+            The inspector is kept up to date by members of the community working
+            on the aframe editor, a modified version of the inspector with
+            additional features.
+          </p>
+
+          <div style={{ display: 'flex', justifyContent: 'center' }}>
+            <a
+              href="https://github.com/c-frame/aframe-editor"
+              target="_blank"
+              rel="noreferrer"
+              className="try-editor-btn"
+            >
+              Give the aframe editor a try
+            </a>
+          </div>
+          <p style={{ fontWeight: 'bold', textAlign: 'center' }}>
+            If you like it, please consider supporting the project.
+          </p>
+        </div>
+      </Modal>
+    );
+  }
+}

src/style/index.styl

@@ -1,11 +1,13 @@
 @import './lib';
 
 body.aframe-inspector-opened,
-.toggle-edit
+.toggle-edit,
+.sponsor-btn
   font-family BlinkMacSystemFont, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif
 
 .wf-roboto-n4-active body.aframe-inspector-opened,
-.wf-roboto-n4-active .toggle-edit
+.wf-roboto-n4-active .toggle-edit,
+.wf-roboto-n4-active .sponsor-btn
   font-family BlinkMacSystemFont, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif
 
 body.aframe-inspector-opened
@@ -98,19 +100,65 @@ body.aframe-inspector-opened
     color #FAFAFA
     font-size 13px
     left 3px
-    line-height normal
+    line-height 16px
     margin 0
     padding 6px 10px
     position fixed
     text-align center
     text-decoration none
     top 3px
-    width 204px
+    width 100px
     z-index 999999999
 
   .toggle-edithover
     background-color rgb(228, 43, 90)
 
+  .try-editor-btn
+    background-color $red
+    box-sizing content-box
+    color #FAFAFA
+    font-size 16px
+    line-height 24px
+    margin 0
+    padding 6px 10px
+    text-align center
+    text-decoration none
+    width 200px
+    display flex
+    gap 5px
+    justify-content center
+
+  .try-editor-btn:hover
+    background-color rgb(228, 43, 90)
+    color #FAFAFA
+
+  .sponsor-btn
+    background-color #ffffff
+    box-sizing content-box
+    color #000000
+    font-size 13px
+    left 127px
+    line-height 16px
+    margin 0
+    padding 6px 10px
+    position fixed
+    text-align center
+    text-decoration none
+    top 3px
+    width 80px
+    z-index 999999999
+    display flex
+    gap 5px
+    justify-content center
+
+    svg
+      fill currentColor
+      color rgb(219, 97, 162)
+
+  .sponsor-btn:hover
+    background-color rgb(228, 43, 90)
+    color #FAFAFA
+
   input
     background-color transparent
     border 1px solid #555