docs: try to reslove colors

phodal · Jul 11, 2022 · 47afaf9 · 47afaf9
1 parent 9a1d319
commit 47afaf9
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/quake_webapp/quake-board/src/components/concept/ConceptNodeModel.tsx b/quake_webapp/quake-board/src/components/concept/ConceptNodeModel.tsx
@@ -13,7 +13,7 @@ export class ConceptNodeModel extends NodeModel {
       ...options,
       type: "concept"
     });
-    this.color = options.color || "red";
+    this.color = options.color || "rgb(0,192,255)";
 
     // setup an in and out port
     this.addPort(

diff --git a/quake_webapp/quake-board/src/components/concept/ConceptNodeWidget.tsx b/quake_webapp/quake-board/src/components/concept/ConceptNodeWidget.tsx
@@ -34,16 +34,16 @@ export class ConceptNodeWidget extends React.Component<ConceptNodeWidgetProps,
 
   render() {
     return (
-      <StyledConceptNodeWidget>
+      <StyledConceptNodeWidget  style={ { backgroundColor: this.props.node.color } }>
         <PortWidget
           engine={ this.props.engine }
           port={ this.props.node.getPort("in") as any }
         >
           <StyledCirclePort/>
         </PortWidget>
 
-        <StyledNodeColor style={ { backgroundColor: this.props.node.color } }>
-          <input type="text" value={ this.state.name }
+        <StyledNodeColor>
+          <StyleInputBox type="text" value={ this.state.name }
                  onChange={ (event) => {
                    this.setName(event.target.value)
                  } }
@@ -84,7 +84,7 @@ const StyledCirclePort = styled.div`
   height: 12px;
   margin: 2px;
   border-radius: 4px;
-  background: darkgray;
+  background: greenyellow;
   cursor: pointer;
 `
 
@@ -96,3 +96,13 @@ const StyledNodeColor = styled.div`
   justify-content: center;
   border-radius: 10px;
 `
+
+const StyleInputBox = styled.input`
+  background: transparent;
+  border: none;
+
+
+  :hover {
+    border: none;
+  }
+`