use StyledWrapper

Signed-off-by: mathieu <mathieu.dreano@gmail.com>
usebruno · Feb 14, 2024 · 339687a · 339687a
1 parent 3c3ba0d
commit 339687a
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 7 deletions.
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   .current-environment {
-    background-color: ${(props) => props.theme.sidebar.badge.bg};
+    background-color: ${(props) => props.color ?? props.theme.sidebar.badge.bg};
     border-radius: 15px;
 
     .caret {

diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
@@ -25,11 +25,7 @@ const EnvironmentSelector = (props) => {
 
   const Icon = forwardRef((props, ref) => {
     return (
-      <div
-        ref={ref}
-        style={{ background: activeEnvironment?.color }}
-        className="current-environment flex items-center justify-center pl-3 pr-2 py-1 select-none"
-      >
+      <div ref={ref} className="current-environment flex items-center justify-center pl-3 pr-2 py-1 select-none">
         {activeEnvironment ? activeEnvironment.name : 'No Environment'}
         <IconCaretDown className="caret" size={14} strokeWidth={2} />
       </div>
@@ -61,7 +57,7 @@ const EnvironmentSelector = (props) => {
   };
 
   return (
-    <StyledWrapper>
+    <StyledWrapper color={activeEnvironment?.color}>
       <div className="flex items-center cursor-pointer environment-selector">
         <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
           {collection.environments?.length