Merge pull request #118 from chromaui/ghengeveld/ap-3681-always-displ…

…ay-mode-even-when-there-is-only-one Show label even when there is only one mode
chromaui · Sep 21, 2023 · d0f95ab · d0f95ab
2 parents f07ea40 + b1dae5b
commit d0f95ab
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/src/components/ModeSelector.tsx b/src/components/ModeSelector.tsx
@@ -10,6 +10,9 @@ import { StatusDot, StatusDotWrapper } from "./StatusDot";
 import { TooltipMenu } from "./TooltipMenu";
 
 const IconWrapper = styled.div(({ theme }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 6,
   height: 14,
   margin: "7px 7px",
   color: `${theme.color.defaultText}99`,
@@ -57,7 +60,9 @@ export const ModeSelector = ({
       hasChrome={false}
       placement="top"
       trigger="hover"
-      tooltip={<TooltipNote note={links ? "Switch mode" : `View mode: ${modeResults[0].mode}`} />}
+      tooltip={
+        <TooltipNote note={links ? "Switch mode" : `View mode: ${modeResults[0].mode.name}`} />
+      }
     >
       {links ? (
         <TooltipMenu placement="bottom" links={links}>
@@ -66,7 +71,10 @@ export const ModeSelector = ({
           <ArrowIcon icon="arrowdown" />
         </TooltipMenu>
       ) : (
-        <IconWrapper>{icon}</IconWrapper>
+        <IconWrapper>
+          {icon}
+          {selectedMode.name}
+        </IconWrapper>
       )}
     </WithTooltip>
   );