Clean up css rules related to button icons

src/components/scenegraph/Toolbar.js

@@ -144,11 +144,9 @@ export default class Toolbar extends React.Component {
           >
             <AwesomeIcon icon={faFloppyDisk} />
           </a>
-          <div className="helpButtonContainer">
-            <a className="button" title="Help" onClick={this.openHelpModal}>
-              <AwesomeIcon icon={faQuestion} />
-            </a>
-          </div>
+          <a className="button" title="Help" onClick={this.openHelpModal}>
+            <AwesomeIcon icon={faQuestion} />
+          </a>
         </div>
       </div>
     );

src/style/components.styl

@@ -28,6 +28,11 @@
   font-weight 600
   vertical-align bottom !important
 
+.componentHeaderActions
+  display flex
+  align-items center
+  gap 10px
+
 .collapsible .static
   background $bglight
   border-bottom 2px solid $bg
@@ -172,6 +177,8 @@
   .collapsible-header
     bottom 5px
     position relative
+  a.button
+    margin-left 10px
   .collapse-button
     display none
   .static

src/style/index.styl

@@ -265,7 +265,7 @@ body.aframe-inspector-opened
   a.button
     color #bcbcbc
     font-size 16px
-    margin-left 10px
+    line-height 1em
     text-decoration none
 
     &:hover

src/style/scenegraph.styl

@@ -4,19 +4,15 @@
   background-color $bg
 
   .toolbarActions
-    padding 0 0 5px
+    padding 5px 10px
     display flex
     align-items baseline
+    justify-content space-between
 
     a.disabled
       color #666
       cursor default
 
-    .helpButtonContainer
-      flex-grow 1
-      padding-right 10px
-      text-align right
-
 #scenegraph
   background $bg
   border-top 1px solid #111
@@ -50,6 +46,9 @@
         display flex
         padding-right 2px
 
+        a.button:hover
+          color $primary
+
     &.novisible
       &.active
         span,
@@ -79,17 +78,6 @@
       font-size 12px
       margin-left 6px
 
-  svg
-    color #CCC
-
-  .toolbarActions svg:hover,
-  .entityActions svg:hover,
-  .search a.button svg:hover
-    color $primary
-
-  .active svg
-    color #FAFAFA
-
   .id
     color #ccc
 
@@ -102,9 +90,6 @@
     text-align center
     width 14px
 
-  .icons a.button
-    color #fff
-
   .search
     padding 5px
     font-size 16px

src/style/viewport.styl

@@ -9,20 +9,13 @@
   height 32px
   font-size 15px
   justify-content space-between
-  left 0
-  margin 0 auto
-  right 0
-  top 0
+  padding 0 5px
 
 .toolbarButtons
   display flex
   align-items center
   gap 6px
 
-  *
-    margin-left 0 !important
-    vertical-align middle
-
   a.button
     & svg
       padding 8px
@@ -38,15 +31,13 @@
     color #fff !important
 
 .local-transform
-  padding-left 10px
-  padding-right 20px
+  display flex
+  align-items center
+  gap 5px
+  padding 0 10px
 
 .local-transform label
   color $lightgray
-  padding-left 5px
-
-.local-transform a.button
-  padding-top 0
 
 #cameraSelect
   cursor pointer
@@ -56,11 +47,8 @@
     padding-right 3px
 
 #cameraToolbar
-  margin-left 5px
   align-items center
   display flex
-  a
-    margin-right 10px
   .select__control
     background none
   .select__single-value