fix button colors, better lightbulb, button hovers

frontend/app/element/button.less

@@ -33,6 +33,9 @@
     &.primary,
     &.secondary {
         background: var(--accent-color);
+        &:hover {
+            color: var(--main-text-color);
+        }
 
         i {
             fill: var(--main-text-color);
@@ -49,6 +52,7 @@
 
     &.primary.ghost {
         background: none;
+        border: 1px solid var(--accent-color);
 
         i {
             fill: var(--accent-color);
@@ -68,6 +72,13 @@
 
     &.secondary.ghost {
         background: none;
+        border: 1px solid var(--secondary-text-color);
+        color: var(--secondary-text-color);
+
+        &:hover {
+            border: 1px solid var(--main-text-color);
+            color: 1px solid var(--main-text-color);
+        }
     }
 
     &.secondary.danger {

frontend/app/element/iconbutton.less

@@ -3,6 +3,17 @@
     opacity: 0.7;
     align-items: center;
 
+    &.bulb {
+        color: var(--bulb-color);
+        opacity: 1;
+
+        &:hover i::before {
+            content: "\f672";
+            position: relative;
+            left: -1px;
+        }
+    }
+
     &:hover {
         opacity: 1;
     }

frontend/app/theme.less

@@ -104,4 +104,6 @@
     --conn-icon-color-6: #ffa24e;
     --conn-icon-color-7: #dbde52;
     --conn-icon-color-8: #58c142;
+
+    --bulb-color: rgb(255, 221, 51);
 }

frontend/app/view/preview/preview.tsx

@@ -357,8 +357,9 @@ export class PreviewModel implements ViewModel {
                     tipIcon = [
                         {
                             elemtype: "iconbutton",
-                            icon: "lightbulb-on",
+                            icon: "lightbulb",
                             iconColor: "var(--warning-color)",
+                            className: "bulb",
                             click: () => {
                                 const tips: UserInputRequest = {
                                     requestid: "",