Updated color Scheme (#41)

* #35: simplify color scheme * #35: Edit components for color scheme
potassco · Dec 20, 2023 · ef1e9d3 · ef1e9d3
1 parent 5788719
commit ef1e9d3
Show file tree

Hide file tree

Showing 15 changed files with 123 additions and 132 deletions.
diff --git a/frontend/src/lib/components/Box.react.js b/frontend/src/lib/components/Box.react.js
@@ -25,9 +25,9 @@ export function Box(props) {
     const classNames = useHighlightedNodeToCreateClassName(node)
 
     return <div className={classNames}
-                style={{"backgroundColor": colorPalette.sixty.dark, "color": colorPalette.ten.dark}}
+                style={{"backgroundColor": colorPalette.primary, "color": colorPalette.primary}}
                 id={node}>
-        <div style={{ "backgroundColor": colorPalette.ten.dark, "color": colorPalette.sixty.dark }}>
+        <div style={{ "backgroundColor": colorPalette.primary, "color": colorPalette.primary }}>
             <img src={`${backendURL("graph/clingraph")}/${node}`} alt="Clingraph" /> 
         </div> 
     </div>

diff --git a/frontend/src/lib/components/Detail.react.js b/frontend/src/lib/components/Detail.react.js
@@ -13,8 +13,8 @@ function DetailSymbolPill(props) {
     const colorPalette = useColorPalette();
     return <span className="detail_atom_view_content"
                  style={{
-                     backgroundColor: colorPalette.fifty.dark,
-                     color: colorPalette.thirty.bright
+                     backgroundColor: colorPalette.primary,
+                     color: colorPalette.light
                  }}>{make_atoms_string(symbol)}</span>
 
 }

diff --git a/frontend/src/lib/components/Edges.react.js b/frontend/src/lib/components/Edges.react.js
@@ -89,11 +89,11 @@ export function Edges(props) {
     return <div ref={target} className="edge_container" >
             {edges.map(link => <LineTo
                 key={link.src + "-" + link.tgt} from={link.src} fromAnchor={"bottom center"} toAnchor={"top center"}
-                to={link.tgt} zIndex={1} borderColor={colorPalete.seventy.dark} borderStyle={"solid"} borderWidth={1} />)}
+                to={link.tgt} zIndex={1} borderColor={colorPalete.dark} borderStyle={"solid"} borderWidth={1} />)}
             {!usingClingraph ? null:
             clingraphEdges.map(link => <LineTo
                 key={link.src + "-" + link.tgt} from={link.src} fromAnchor={"bottom center"} toAnchor={"top center"}
-                to={link.tgt} zIndex={1} borderColor={colorPalete.seventy.bright} borderStyle={"dashed"} borderWidth={2} />)}
+                to={link.tgt} zIndex={1} borderColor={colorPalete.dark} borderStyle={"dashed"} borderWidth={2} />)}
         </div>
 
 

diff --git a/frontend/src/lib/components/Facts.react.js b/frontend/src/lib/components/Facts.react.js
@@ -44,27 +44,3 @@ Facts.propTypes = {
      */
     notifyClick: PropTypes.func
 }
-
-function FactBanner(props) {
-    const {fact} = props;
-    const [, dispatch] = useShownNodes()
-    const colorPalette = useColorPalette();
-
-    React.useEffect(() => {
-        dispatch(showNode(fact.uuid))
-        return () => {
-            dispatch(hideNode(fact.uuid))
-        }
-    }, [])
-    const clazzName = `${fact.uuid} facts_banner noselect`
-    return <div className={clazzName}
-                style={{"color": colorPalette.sixty.dark, "backgroundColor": colorPalette.ten.dark}}>Facts</div>
-}
-
-FactBanner.propTypes = {
-    /**
-     * The ID used to identify this component in Dash callbacks.
-     */
-    id: PropTypes.string,
-    fact: NODE
-}
diff --git a/frontend/src/lib/components/Node.react.js b/frontend/src/lib/components/Node.react.js
@@ -131,7 +131,8 @@ function NodeContent(props) {
             return <Symbol key={JSON.stringify(s)} symbolIdentifier={s} isSubnode={isSubnode} reasons={node.reason[make_atoms_string(s)]} handleClick={handleClick}/>
         })
 
-    return <div className={containerNames} style={{ "color": colorPalette.dark }}>
+    return <div className={containerNames} 
+                style={{"color": colorPalette.dark}}>
         <span className={classNames2}>{renderedSymbols.length > 0 ? renderedSymbols : ""}</span>
     </div>
 }
@@ -176,7 +177,7 @@ function RecursionButton(props) {
 
     return <div className={"recursion_button"} onClick={handleClick}>
         {!node.recursive ? null :
-            <div className={"recursion_button_text"} style={{ "backgroundColor": colorPalette.primary, "color": colorPalette.sixty.dark }}>
+            <div className={"recursion_button_text"} style={{ "backgroundColor": colorPalette.primary, "color": colorPalette.light }}>
                 <Suspense fallback={<div>R</div>}>
                     <RealComponent icon={clockwiseVerticalArrows} width="9" height="9" />
                 </Suspense>
@@ -194,7 +195,7 @@ function OverflowButton(props) {
         setExpandNode(true);
     }
 
-    return <div style={{ "backgroundColor": colorPalette.primary, "color": colorPalette.sixty.dark }}
+    return <div style={{ "backgroundColor": colorPalette.primary, "color": colorPalette.light }}
                 className={"bauchbinde"} onClick={handleClick}>
         <div className={"bauchbinde_text"}>
             <Suspense fallback={<div>...</div>}>
@@ -238,34 +239,53 @@ export function Node(props) {
 
     const divID = `${node.uuid}_animate_height`;
 
-    return <div className={classNames}
-        style={{ "backgroundColor": colorPalette.light, "color": colorPalette.secondary }}
-        id={node.uuid}
-        onClick={(e) => { e.stopPropagation(); notifyClick(node) }}>
-        {showMini ?
-            <div style={{ "backgroundColor": colorPalette.primary, "color": colorPalette.primary }}
-                className={"mini"} /> :
-            <div className={"set_too_high"}  >
-                <AnimateHeight
-                    id={divID}
-                    duration={500}
-                    height={height}
-                    onHeightAnimationStart={startAnimationUpdater}
-                    onHeightAnimationEnd={stopAnimationUpdater}>
-                    <NodeContent
-                        node={node}
-                        setHeight={setHeight}
-                        parentID={divID}
-                        setIsOverflowV={setIsOverflowV}
-                        expandNode={expandNode}
-                        isSubnode={isSubnode} />
-                    <RecursionButton node={node} />
-                </AnimateHeight>
-            </div>
-        }
-        {!showMini && isOverflowV ?
-            <OverflowButton setExpandNode={setExpandNode} /> : null}
-    </div>
+    return (
+        <div
+            className={classNames}
+            style={{
+                backgroundColor: colorPalette.light,
+                color: colorPalette.primary,
+            }}
+            id={node.uuid}
+            onClick={(e) => {
+                e.stopPropagation();
+                notifyClick(node);
+            }}
+        >
+            {showMini ? (
+                <div
+                    style={{
+                        backgroundColor: colorPalette.primary,
+                        color: colorPalette.primary,
+                    }}
+                    className={'mini'}
+                />
+            ) : (
+                <div className={'set_too_high'}>
+                    <AnimateHeight
+                        id={divID}
+                        duration={500}
+                        height={height}
+                        onHeightAnimationStart={startAnimationUpdater}
+                        onHeightAnimationEnd={stopAnimationUpdater}
+                        >
+                        <NodeContent
+                            node={node}
+                            setHeight={setHeight}
+                            parentID={divID}
+                            setIsOverflowV={setIsOverflowV}
+                            expandNode={expandNode}
+                            isSubnode={isSubnode}
+                        />
+                        <RecursionButton node={node} />
+                    </AnimateHeight>
+                </div>
+            )}
+            {!showMini && isOverflowV ? (
+                <OverflowButton setExpandNode={setExpandNode} />
+            ) : null}
+        </div>
+    );
 }
 
 Node.propTypes = {
@@ -288,7 +308,7 @@ export function RecursiveSuperNode(props) {
     const { node, notifyClick, showMini } = props;
     const colorPalette = useColorPalette();
     const [, dispatch] = useShownNodes();
-    const classNames = useHighlightedNodeToCreateClassName(node);
+    const classNames = `node_border ${node.uuid}`;//useHighlightedNodeToCreateClassName(node);
     // state updater to force other components to update
 
     React.useEffect(() => {
@@ -302,15 +322,15 @@ export function RecursiveSuperNode(props) {
     })
 
     return <div className={classNames}
-        style={{ "backgroundColor": colorPalette.fourty.dark, "color": colorPalette.fourty.bright }}
+        style={{ "color": colorPalette.primary }}
         id={node.uuid}
         onClick={(e) => { e.stopPropagation(); notifyClick(node) }} >
         <RecursionButton node={node} />
         {
             node.recursive._graph.nodes.
                 map(e => e.id).
                 map(subnode => {
-                    return <Node key={subnode}
+                    return <Node key={subnode.uuid}
                         node={subnode}
                         notifyClick={notifyClick}
                         showMini={showMini}

diff --git a/frontend/src/lib/components/Row.react.js b/frontend/src/lib/components/Row.react.js
@@ -178,7 +178,7 @@ export function Boxrow(props) {
     return <div className="boxrow_container">
         {/* TODO: make boxrow_header to toggle showing of visualization */}
             <div ref={ref} className="boxrow_row">  
-                {nodes.map((child) => <Box  node={child}/>)}</div>
+                {nodes.map((child) => <Box key={child} node={child}/>)}</div>
         </div>
 }
 

diff --git a/frontend/src/lib/components/RowHeader.react.js b/frontend/src/lib/components/RowHeader.react.js
@@ -6,20 +6,29 @@ import {useColorPalette} from "../contexts/ColorPalette";
 export function RowHeader(props) {
     const { transformation } = props;
     const colorPalette = useColorPalette();
-    return <div style={{
-        "backgroundColor": colorPalette.secondary,
-        "color": colorPalette.light,
-        "borderColor": colorPalette.secondary
-    }}
-        className="row_header">{transformation.map(rule =>
-            <div key={rule}
-                style={{ whiteSpace: 'pre' }}
-                dangerouslySetInnerHTML={{
-                    __html: rule.replace(/</g, "&lt;")
-                        .replace(/>/g, "&gt;")
-                        .replace(/\n/g, "<br>")
-                }} />)}
-    </div>
+    return (
+        <div
+            style={{
+                backgroundColor: colorPalette.primary,
+                color: colorPalette.light,
+                borderColor: colorPalette.primary,
+            }}
+            className="row_header"
+        >
+            {transformation.map((rule) => (
+                <div
+                    key={rule}
+                    style={{whiteSpace: 'pre'}}
+                    dangerouslySetInnerHTML={{
+                        __html: rule
+                            .replace(/</g, '&lt;')
+                            .replace(/>/g, '&gt;')
+                            .replace(/\n/g, '<br>'),
+                    }}
+                />
+            ))}
+        </div>
+    );
 }
 
 RowHeader.propTypes = {

diff --git a/frontend/src/lib/components/Search.react.js b/frontend/src/lib/components/Search.react.js
@@ -24,8 +24,8 @@ function ActiveFilters() {
 
 function CloseButton(props) {
     const {onClose} = props;
-    const {sixty} = useColorPalette();
-    return <span style={{color: sixty.bright}} className='close' onClick={onClose}>X</span>
+    const colorPalette = useColorPalette();
+    return <span style={{color: colorPalette.light}} className='close' onClick={onClose}>X</span>
 }
 
 CloseButton.propTypes = {
@@ -38,7 +38,7 @@ CloseButton.propTypes = {
 function ActiveFilter(props) {
     const {filter} = props;
     const [, dispatch] = useFilters();
-    const {ten, sixty} = useColorPalette();
+    const colorPalette = useColorPalette();
     const classes = ["filter", "search_row"]
     if (filter._type === "Transformation") {
         classes.push("search_rule")
@@ -54,7 +54,7 @@ function ActiveFilter(props) {
         dispatch(clear(filter))
     }
 
-    return <li style={{backgroundColor: ten.bright, color: sixty.dark}} className={classes.join(" ")}
+    return <li style={{backgroundColor: colorPalette.primary, color: colorPalette.light}} className={classes.join(" ")}
                key={filter.name}>{filter.name}/{filter.args}<CloseButton
         onClose={onClose}/>
     </li>
@@ -76,7 +76,7 @@ export function Search(props) {
     const [, dispatch] = useFilters();
     const {dispatch: dispatchT} = useTransformations()
     const {backendURL} = useSettings();
-    const {sixty} = useColorPalette();
+    const colorPalette = useColorPalette();
     let suggestionsListComponent;
     React.useEffect(() => {
         const highlighted = filteredSuggestions[activeSuggestion]
@@ -144,9 +144,9 @@ export function Search(props) {
     if (showSuggestions && userInput) {
         if (filteredSuggestions.length) {
             suggestionsListComponent = (
-                <ul className="search_result_list" style={{backgroundColor: sixty.dark}}>
+                <ul className="search_result_list" style={{backgroundColor: colorPalette.light}}>
                     {filteredSuggestions.map((suggestion, index) => {
-                        return <Suggestion active={index === activeSuggestion} key={index}
+                        return <Suggestion active={index === activeSuggestion} key={index} 
                                            value={suggestion} select={select}/>
                     })}
                 </ul>

diff --git a/frontend/src/lib/components/SearchResult.react.js b/frontend/src/lib/components/SearchResult.react.js
@@ -25,18 +25,18 @@ function SuggestionContent(props) {
 
     if (value._type === "Node") {
         suggestionSymbol = "{}"
-        color = colorPalette.ten.dark;
+        color = colorPalette.primary;
         display = make_atoms_string(state.show_all ? value.atoms : value.diff)
     }
     if (value._type === "Signature") {
         suggestionSymbol = "  /"
-        color = colorPalette.ten.dark;
+        color = colorPalette.primary;
         display = `${value.name}/${value.args}`
     }
 
     if (value._type === "Transformation") {
         suggestionSymbol = ":-"
-        color = colorPalette.ten.dark;
+        color = colorPalette.primary;
         display = make_rules_string(value.rules)
     }
     return <StyledSuggestion color={color} content={suggestionSymbol}>{display}</StyledSuggestion>

diff --git a/frontend/src/lib/components/node.css b/frontend/src/lib/components/node.css
@@ -55,7 +55,7 @@
     font-size: 14pt;
     width: -moz-fit-content;
     width: fit-content;
-    margin: 5px;
+    margin: 8px;
     min-width: 15px;
 
     align-items: flex-start;

diff --git a/frontend/src/lib/components/search.css b/frontend/src/lib/components/search.css
@@ -15,7 +15,7 @@
 }
 
 .search_row.active {
-    background-color: lightblue;
+    background-color: #6554C0;
 }
 
 .search_result_list {