feat(#304) Environments color 🎨 (#1053)

* associate environment to a color Signed-off-by: mathieu <mathieu.dreano@gmail.com> use StyledWrapper Signed-off-by: mathieu <mathieu.dreano@gmail.com> don't save anything for color if it is not set Signed-off-by: mathieu <mathieu.dreano@gmail.com> use redux store instead of local state remove logs fix selectedEnvironment cleanup add bottom border on active tab * associate environment to a color Signed-off-by: mathieu <mathieu.dreano@gmail.com> * move dependency to appropriate package.json Signed-off-by: mathieu <mathieu.dreano@gmail.com> * use border instead of background color Signed-off-by: mathieu <mathieu.dreano@gmail.com> * simplify onColorChange Signed-off-by: mathieu <mathieu.dreano@gmail.com> * add black, keep backgound on unselected color Signed-off-by: mathieu <mathieu.dreano@gmail.com> * fix conflicts Signed-off-by: mathieu <mathieu.dreano@gmail.com> * associate environment to a color Signed-off-by: mathieu <mathieu.dreano@gmail.com> use StyledWrapper Signed-off-by: mathieu <mathieu.dreano@gmail.com> don't save anything for color if it is not set Signed-off-by: mathieu <mathieu.dreano@gmail.com> use redux store instead of local state remove logs fix selectedEnvironment cleanup add bottom border on active tab # Conflicts: # packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js # packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js # packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js # packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js # packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js # packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js * Update packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentColor/index.js Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * unused selectedEnvironment prop in EnvironmentList Signed-off-by: Mathieu D <mathieu.dreano@decathlon.com> * RequestTab, avoid unnecessary call if undefined activeCollection Signed-off-by: Mathieu D <mathieu.dreano@decathlon.com> * use @uiw/reac-color instead of react-color Signed-off-by: Mathieu D <mathieu.dreano@decathlon.com> --------- Signed-off-by: mathieu <mathieu.dreano@gmail.com> Signed-off-by: Mathieu D <mathieu.dreano@decathlon.com> Co-authored-by: Mathieu D <mathieu.dreano@decathlon.com> Co-authored-by: Anoop M D <anoop@usebruno.com> Co-authored-by: Mathieu DREANO <122891400+mdreano@users.noreply.github.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
2026-07-09 06:55:03 +00:00 · 2026-01-29 11:51:39 +01:00
parent 214e1434e5
commit 5a6714f085
15 changed files with 612 additions and 24 deletions
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/EnvironmentListContent/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/EnvironmentListContent/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { IconPlus, IconDownload, IconSettings } from '@tabler/icons';
+import { IconPlus, IconDownload, IconSettings, IconDatabase } from '@tabler/icons';
 import ToolHint from 'components/ToolHint';

 const EnvironmentListContent = ({
@@ -38,6 +38,7 @@ const EnvironmentListContent = ({
                    data-tooltip-content={env.name}
                    data-tooltip-hidden={env.name?.length < 90}
                  >
+                    <IconDatabase size={16} strokeWidth={1.5} color={env.color} />
                    <span className="max-w-100% truncate no-wrap">{env.name}</span>
                  </div>
                ))}
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
@@ -5,8 +5,8 @@ const Wrapper = styled.div`
    border-radius: ${(props) => props.theme.border.radius.base};
    padding: 0.25rem 0.3rem 0.25rem 0.5rem;
    user-select: none;
-    background-color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.bg};
-    border: 1px solid ${(props) => props.theme.app.collection.toolbar.environmentSelector.border};
+    background-color: ${(props) => props.color ? undefined : 'transparent'};
+    border: 2px solid ${(props) => props.color ?? props.theme.dropdown.selectedColor};
    line-height: 1rem;
    transition: all 0.15s ease;

@@ -15,6 +15,11 @@ const Wrapper = styled.div`
      background-color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.hoverBg};
    }

+    .active-env-toolhint {
+      display: flex;
+      flex-direction: row;
+    }
+
    .caret {
      margin-left: 0.25rem;
      color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.caret};
@@ -24,11 +29,12 @@ const Wrapper = styled.div`

    .env-icon {
      margin-right: 0.25rem;
-      color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.icon};
+      color: ${(props) => props.color ?? props.theme.dropdown.selectedColor};
    }

    .env-text {
-      color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.text};
+      color: ${(props) => props.color ?? props.theme.dropdown.selectedColor};
+      font-size: ${(props) => props.theme.font.size.base};
      display: block;
    }

@@ -65,6 +71,37 @@ const Wrapper = styled.div`
    overflow: hidden;
  }

+  .tippy-box .tippy-content {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .dropdown-item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      column-gap: 0.35em;
+      padding: 0.35rem 0.6rem;
+      cursor: pointer;
+      font-size: ${(props) => props.theme.font.size.base};
+      color: ${(props) => props.theme.dropdown.primaryText};
+
+      &:hover:not(:disabled) {
+        background-color: ${(props) => props.theme.dropdown.hoverBg};
+      }
+
+      &.active {
+        background-color: ${(props) => props.theme.dropdown.selectedBg};
+        color: ${(props) => props.color ?? props.theme.dropdown.selectedColor} !important;
+      }
+
+      &.no-environment {
+        color: ${(props) => props.theme.dropdown.mutedText};
+      }
+    }
+  }
+
  .configure-button {
    position: absolute;
    bottom: 0;
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
@@ -134,14 +134,15 @@ const EnvironmentSelector = ({ collection }) => {
        {activeCollectionEnvironment && (
          <>
            <div className="flex items-center">
-              <IconDatabase size={14} strokeWidth={1.5} className="env-icon" />
              <ToolHint
+                className="active-env-toolhint"
                text={activeCollectionEnvironment.name}
                toolhintId={`collection-env-${activeCollectionEnvironment.uid}`}
                place="bottom-start"
                delayShow={1000}
                hidden={activeCollectionEnvironment.name?.length < 7}
              >
+                <IconDatabase size={14} strokeWidth={1.5} className="env-icon" />
                <span className="env-text max-w-24 truncate overflow-hidden">{activeCollectionEnvironment.name}</span>
              </ToolHint>
            </div>
@@ -182,7 +183,7 @@ const EnvironmentSelector = ({ collection }) => {
  });

  return (
-    <StyledWrapper width={dropdownWidth}>
+    <StyledWrapper color={activeCollectionEnvironment?.color} width={dropdownWidth}>
      <div className="environment-selector flex align-center cursor-pointer">
        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
          {/* Tab Headers */}