[dashboard] Support optionally rendering DropDowns with link colors

Author: jankeromnes

components/dashboard/src/components/Arrow.tsx

@@ -4,10 +4,14 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
-function Arrow(props: { up: boolean }) {
+function Arrow(props: { up: boolean; customBorderClasses?: string }) {
     return (
         <span
-            className="mx-2 border-gray-400 dark:border-gray-600 group-hover:border-gray-600 dark:group-hover:border-gray-400"
+            className={
+                "mx-2 " +
+                (props.customBorderClasses ||
+                    "border-gray-400 dark:border-gray-600 group-hover:border-gray-600 dark:group-hover:border-gray-400")
+            }
             style={{
                 marginTop: 2,
                 marginBottom: 2,

components/dashboard/src/components/DropDown.tsx

@@ -11,6 +11,7 @@ import ContextMenu from "./ContextMenu";
 export interface DropDownProps {
     prefix?: string;
     customClasses?: string;
+    renderAsLink?: boolean;
     activeEntry?: string;
     entries: DropDownEntry[];
 }
@@ -35,14 +36,20 @@ function DropDown(props: DropDownProps) {
             },
         };
     });
-    const font =
-        "text-gray-400 dark:text-gray-500 text-sm leading-1 group hover:text-gray-600 dark:hover:text-gray-400 transition ease-in-out";
+    const defaultFont = "text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 ";
+    const asLinkFont = "text-blue-500 dark:text-blue-400 hover:text-blue-600 dark:hover:text-blue-500";
+    const asLinkArrowBorder =
+        "border-blue-500 dark:border-blue-400 group-hover:border-blue-600 dark:group-hover:border-blue-500";
     return (
         <ContextMenu menuEntries={enhancedEntries} customClasses={`${props.customClasses} right-0`}>
-            <span className={`py-2 cursor-pointer ${font}`}>
+            <span
+                className={`py-2 cursor-pointer text-sm leading-1 group ${
+                    props.renderAsLink ? asLinkFont : defaultFont
+                } transition ease-in-out`}
+            >
                 {props.prefix}
                 {current}
-                <Arrow up={false} />
+                <Arrow up={false} customBorderClasses={props.renderAsLink ? asLinkArrowBorder : undefined} />
             </span>
         </ContextMenu>
     );