- {environments.map(env => (
+ {environments.map((env) => (
props.theme.dropdown.selectedColor};
+ border: 1px solid ${(props) => props.theme.dropdown.selectedColor};
line-height: 1rem;
.caret {
@@ -17,11 +17,11 @@ const Wrapper = styled.div`
.env-icon {
margin-right: 0.25rem;
- color: ${props => props.theme.dropdown.selectedColor};
+ color: ${(props) => props.theme.dropdown.selectedColor};
}
.env-text {
- color: ${props => props.theme.dropdown.selectedColor};
+ color: ${(props) => props.theme.dropdown.selectedColor};
font-size: 0.875rem;
}
@@ -32,15 +32,15 @@ const Wrapper = styled.div`
}
.env-text-inactive {
- color: ${props => props.theme.dropdown.color};
+ color: ${(props) => props.theme.dropdown.color};
font-size: 0.875rem;
opacity: 0.7;
}
&.no-environments {
- background-color: ${props => props.theme.sidebar.badge.bg};
+ background-color: ${(props) => props.theme.sidebar.badge.bg};
border: 1px solid transparent;
- color: ${props => props.theme.dropdown.secondaryText};
+ color: ${(props) => props.theme.dropdown.secondaryText};
}
}
@@ -65,19 +65,19 @@ const Wrapper = styled.div`
padding: 0.35rem 0.6rem;
cursor: pointer;
font-size: 0.8125rem;
- color: ${props => props.theme.dropdown.primaryText};
+ color: ${(props) => props.theme.dropdown.primaryText};
&:hover:not(:disabled) {
- background-color: ${props => props.theme.dropdown.hoverBg};
+ background-color: ${(props) => props.theme.dropdown.hoverBg};
}
&.active {
- background-color: ${props => props.theme.dropdown.selectedBg};
- color: ${props => props.theme.dropdown.selectedColor};
+ background-color: ${(props) => props.theme.dropdown.selectedBg};
+ color: ${(props) => props.theme.dropdown.selectedColor};
}
&.no-environment {
- color: ${props => props.theme.dropdown.mutedText};
+ color: ${(props) => props.theme.dropdown.mutedText};
}
}
}
@@ -87,17 +87,17 @@ const Wrapper = styled.div`
bottom: 0;
left: 0;
right: 0;
- background-color: ${props => props.theme.dropdown.bg};
- border-top: 0.0625rem solid ${props => props.theme.dropdown.separator};
+ background-color: ${(props) => props.theme.dropdown.bg};
+ border-top: 0.0625rem solid ${(props) => props.theme.dropdown.separator};
z-index: 10;
margin: 0;
&:hover {
- background-color: ${props => props.theme.dropdown.bg + ' !important'};
+ background-color: ${(props) => props.theme.dropdown.bg + ' !important'};
}
button {
- color: ${props => props.theme.dropdown.primaryText};
+ color: ${(props) => props.theme.dropdown.primaryText};
display: flex;
align-items: center;
justify-content: center;
@@ -118,8 +118,8 @@ const Wrapper = styled.div`
}
&.active {
- color: ${props => props.theme.tabs.active.color};
- border-bottom-color: ${props => props.theme.tabs.active.border};
+ color: ${(props) => props.theme.tabs.active.color};
+ border-bottom-color: ${(props) => props.theme.tabs.active.border};
}
&.inactive {
@@ -158,7 +158,7 @@ const Wrapper = styled.div`
min-height: 12.5rem;
h3 {
- color: ${props => props.theme.dropdown.primaryText};
+ color: ${(props) => props.theme.dropdown.primaryText};
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.5rem;
@@ -166,7 +166,7 @@ const Wrapper = styled.div`
}
p {
- color: ${props => props.theme.dropdown.primaryText};
+ color: ${(props) => props.theme.dropdown.primaryText};
opacity: 0.75;
font-size: 0.6875rem;
line-height: 1.5;
@@ -182,9 +182,9 @@ const Wrapper = styled.div`
}
.space-y-2 > button {
- border: 0.0625rem solid ${props => props.theme.dropdown.primaryText};
+ border: 0.0625rem solid ${(props) => props.theme.dropdown.primaryText};
background: transparent;
- color: ${props => props.theme.dropdown.primaryText};
+ color: ${(props) => props.theme.dropdown.primaryText};
padding: 0.5rem 1rem;
border-radius: 0.375rem;
width: 100%;
@@ -197,7 +197,7 @@ const Wrapper = styled.div`
gap: 0.5rem;
&:hover {
- background-color: ${props => props.theme.dropdown.hoverBg};
+ background-color: ${(props) => props.theme.dropdown.hoverBg};
}
&:last-child {
@@ -212,7 +212,7 @@ const Wrapper = styled.div`
align-items: center;
justify-content: center;
padding: 2rem 1rem;
- color: ${props => props.theme.dropdown.primaryText};
+ color: ${(props) => props.theme.dropdown.primaryText};
font-size: 0.8125rem;
line-height: 1.5;
text-align: center;
@@ -220,7 +220,7 @@ const Wrapper = styled.div`
svg {
margin: 0 auto 1rem auto;
- color: ${props => props.theme.dropdown.primaryText};
+ color: ${(props) => props.theme.dropdown.primaryText};
opacity: 0.5;
}
}
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
index 5d44d1104..e88406597 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
@@ -27,37 +27,37 @@ const EnvironmentSelector = ({ collection }) => {
const [showCreateCollectionModal, setShowCreateCollectionModal] = useState(false);
const [showImportCollectionModal, setShowImportCollectionModal] = useState(false);
- const globalEnvironments = useSelector(state => state.globalEnvironments.globalEnvironments);
- const activeGlobalEnvironmentUid = useSelector(state => state.globalEnvironments.activeGlobalEnvironmentUid);
+ const globalEnvironments = useSelector((state) => state.globalEnvironments.globalEnvironments);
+ const activeGlobalEnvironmentUid = useSelector((state) => state.globalEnvironments.activeGlobalEnvironmentUid);
const activeGlobalEnvironment = activeGlobalEnvironmentUid
- ? find(globalEnvironments, e => e.uid === activeGlobalEnvironmentUid)
+ ? find(globalEnvironments, (e) => e.uid === activeGlobalEnvironmentUid)
: null;
const environments = collection?.environments || [];
const activeEnvironmentUid = collection?.activeEnvironmentUid;
const activeCollectionEnvironment = activeEnvironmentUid
- ? find(environments, e => e.uid === activeEnvironmentUid)
+ ? find(environments, (e) => e.uid === activeEnvironmentUid)
: null;
const tabs = [
{ id: 'collection', label: 'Collection', icon:
},
- { id: 'global', label: 'Global', icon:
},
+ { id: 'global', label: 'Global', icon:
}
];
- const onDropdownCreate = ref => {
+ const onDropdownCreate = (ref) => {
dropdownTippyRef.current = ref;
};
// Get description based on active tab
- const description
- = activeTab === 'collection'
+ const description =
+ activeTab === 'collection'
? 'Create your first environment to begin working with your collection.'
: 'Create your first global environment to begin working across collections.';
// Environment selection handler
- const handleEnvironmentSelect = environment => {
- const action
- = activeTab === 'collection'
+ const handleEnvironmentSelect = (environment) => {
+ const action =
+ activeTab === 'collection'
? selectEnvironment(environment ? environment.uid : null, collection.uid)
: selectGlobalEnvironment({ environmentUid: environment ? environment.uid : null });
@@ -70,7 +70,7 @@ const EnvironmentSelector = ({ collection }) => {
}
dropdownTippyRef.current.hide();
})
- .catch(err => {
+ .catch((err) => {
toast.error('An error occurred while selecting the environment');
});
};
@@ -159,7 +159,7 @@ const EnvironmentSelector = ({ collection }) => {
} placement="bottom-end">
{/* Tab Headers */}
- {tabs.map(tab => (
+ {tabs.map((tab) => (