From 1cd3a8172f10ce488a2e7462ccf314757f458d95 Mon Sep 17 00:00:00 2001
From: Theo Sanderson <theo@theo.io>
Date: Tue, 12 Sep 2023 21:59:22 +0100
Subject: [PATCH] update

---
 .../src/components/DeckSettingsModal.jsx      | 62 ++++++++++---------
 1 file changed, 33 insertions(+), 29 deletions(-)

diff --git a/taxonium_component/src/components/DeckSettingsModal.jsx b/taxonium_component/src/components/DeckSettingsModal.jsx
index 4300f318..6f644a86 100644
--- a/taxonium_component/src/components/DeckSettingsModal.jsx
+++ b/taxonium_component/src/components/DeckSettingsModal.jsx
@@ -158,33 +158,7 @@ const DeckSettingsModal = ({
                 />
               </label>
             </div>
-            <div>
-              <label>
-                Color for terminal node labels
-                <ColorPicker
-                  color={settings.terminalNodeLabelColor}
-                  setColor={settings.setTerminalNodeLabelColor}
-                />
-              </label>
-            </div>
-            <div>
-              <label>
-                Color for tree lines
-                <ColorPicker
-                  color={settings.lineColor}
-                  setColor={settings.setLineColor}
-                />
-              </label>
-            </div>
-            <div>
-              <label>
-                Color for clade labels
-                <ColorPicker
-                  color={settings.cladeLabelColor}
-                  setColor={settings.setCladeLabelColor}
-                />
-              </label>
-            </div>
+            
           </div>
         </TabPanel>
 
@@ -226,14 +200,44 @@ const DeckSettingsModal = ({
           </div>
         </TabPanel>
         <TabPanel>
-          <div className="space-y-3">
-            <h3 className="font-medium">Color</h3>
+          <div className="space-y-3 mt-5">
+            
             <div>
               <label>
                 Default color for nodes:
                 <ColorPicker color={noneColor} setColor={setNoneColor} />
               </label>
             </div>
+            <div>
+              <label>
+                Color for terminal node labels
+                <ColorPicker
+                  color={settings.terminalNodeLabelColor}
+                  setColor={settings.setTerminalNodeLabelColor}
+                />
+              </label>
+            </div>
+            <div>
+              <label>
+                Color for tree lines
+                <ColorPicker
+                  color={settings.lineColor}
+                  setColor={settings.setLineColor}
+                />
+              </label>
+            </div>
+            <div>
+              <label>
+                Color for clade labels
+                <ColorPicker
+                  color={settings.cladeLabelColor}
+                  setColor={settings.setCladeLabelColor}
+                />
+              </label>
+            </div>
+            <div className="text-md">
+              <b>Tip:</b> to modify the color of nodes colored by metadata, click the specific metadata in the key at the bottom left.
+            </div>
           </div>
         </TabPanel>
       </Tabs>