diff --git a/packages/bruno-app/src/components/Dropdown/StyledWrapper.js b/packages/bruno-app/src/components/Dropdown/StyledWrapper.js index cdfa51377..64e878d74 100644 --- a/packages/bruno-app/src/components/Dropdown/StyledWrapper.js +++ b/packages/bruno-app/src/components/Dropdown/StyledWrapper.js @@ -25,6 +25,7 @@ const Wrapper = styled.div` display: flex; align-items: center; padding: 0.35rem 0.6rem; + background-color: ${(props) => props.theme.dropdown.labelBg}; } .dropdown-item { diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js index 4cbc432c6..f1b99ec66 100644 --- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js +++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js @@ -8,7 +8,7 @@ const Wrapper = styled.div` thead, td { - border: 1px solid ${(props) => props.theme.table.border}; + border: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder}; } thead { @@ -29,6 +29,7 @@ const Wrapper = styled.div` width: 100%; border: solid 1px transparent; outline: none !important; + background-color: transparent; &:focus { outline: none !important; diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js index c08e88776..722a15db1 100644 --- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js +++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js @@ -4,8 +4,11 @@ const StyledWrapper = styled.div` margin-inline: -1rem; margin-block: -1.5rem; + background-color: ${(props) => props.theme.collection.environment.settings.bg}; + .environments-sidebar { - background-color: #eaeaea; + background-color: ${(props) => props.theme.collection.environment.settings.sidebar.bg}; + border-right: solid 1px ${(props) => props.theme.collection.environment.settings.sidebar.borderRight}; min-height: 400px; } @@ -20,15 +23,15 @@ const StyledWrapper = styled.div` &:hover { text-decoration: none; - background-color: #e4e4e4; + background-color: ${(props) => props.theme.collection.environment.settings.item.hoverBg}; } } .active { - background-color: #dcdcdc !important; - border-left: solid 2px var(--color-brand); + background-color: ${(props) => props.theme.collection.environment.settings.item.active.bg} !important; + border-left: solid 2px ${(props) => props.theme.collection.environment.settings.item.border}; &:hover { - background-color: #dcdcdc !important; + background-color: ${(props) => props.theme.collection.environment.settings.item.active.hoverBg} !important; } } @@ -36,7 +39,7 @@ const StyledWrapper = styled.div` padding: 8px 10px; cursor: pointer; border-bottom: none; - color: var(--color-text-link); + color: ${(props) => props.theme.textLink}; &:hover { span { diff --git a/packages/bruno-app/src/components/Modal/StyledWrapper.js b/packages/bruno-app/src/components/Modal/StyledWrapper.js index e12319e44..0b1403478 100644 --- a/packages/bruno-app/src/components/Modal/StyledWrapper.js +++ b/packages/bruno-app/src/components/Modal/StyledWrapper.js @@ -110,6 +110,10 @@ const Wrapper = styled.div` outline: none !important; } } + + .bruno-form { + color: ${(props) => props.theme.modal.body.color}; + } } .bruno-modal-backdrop { @@ -126,7 +130,7 @@ const Wrapper = styled.div` height: 100%; width: 100%; left: 0; - opacity: 0.4; + opacity: ${(props) => props.theme.modal.backdrop.opacity}; top: 0; background: black; position: fixed; diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js index 3cc2362bc..11f945b3e 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js +++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js @@ -2,7 +2,7 @@ import styled from 'styled-components'; const Wrapper = styled.div` .menu-icon { - color: rgb(110 110 110); + color: ${(props) => props.theme.sidebar.dropdownIcon.color}; .dropdown { div[aria-expanded='true'] { @@ -62,9 +62,9 @@ const Wrapper = styled.div` } div.dropdown-item.delete-item { - color: var(--color-text-danger); + color: ${(props) => props.theme.colors.danger}; &:hover { - background-color: var(--color-background-danger); + background-color: ${(props) => props.theme.colors.bg.danger}; color: white; } } diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js index 3e3fc5f81..7b7438c53 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js +++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js @@ -24,7 +24,7 @@ const Wrapper = styled.div` svg { height: 22px; - color: rgb(110 110 110); + color: ${(props) => props.theme.sidebar.dropdownIcon.color}; } } @@ -45,9 +45,9 @@ const Wrapper = styled.div` } div.dropdown-item.delete-collection { - color: var(--color-text-danger); + color: ${(props) => props.theme.colors.text.danger}; &:hover { - background-color: var(--color-background-danger); + background-color: ${(props) => props.theme.colors.bg.danger}; color: white; } } diff --git a/packages/bruno-app/src/components/Sidebar/Collections/SelectCollection/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/SelectCollection/StyledWrapper.js index ce6f50e2e..605aecc09 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/SelectCollection/StyledWrapper.js +++ b/packages/bruno-app/src/components/Sidebar/Collections/SelectCollection/StyledWrapper.js @@ -10,7 +10,7 @@ const StyledWrapper = styled.div` cursor: pointer; &:hover { - background-color: #f4f4f4; + background-color: ${(props) => props.theme.plainGrid.hoverBg};; } } `; diff --git a/packages/bruno-app/src/components/Sidebar/LocalCollections/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/LocalCollections/StyledWrapper.js index b81097d82..b8ba958da 100644 --- a/packages/bruno-app/src/components/Sidebar/LocalCollections/StyledWrapper.js +++ b/packages/bruno-app/src/components/Sidebar/LocalCollections/StyledWrapper.js @@ -13,6 +13,11 @@ const Wrapper = styled.div` } } + .muted-message { + color: ${(props) => props.theme.sidebar.muted}; + border-top: solid 1px ${(props) => props.theme.dropdown.seperator}; + } + div[data-tippy-root] { width: calc(100% - 1rem); } diff --git a/packages/bruno-app/src/components/Sidebar/LocalCollections/index.js b/packages/bruno-app/src/components/Sidebar/LocalCollections/index.js index 99e708f97..741bc0184 100644 --- a/packages/bruno-app/src/components/Sidebar/LocalCollections/index.js +++ b/packages/bruno-app/src/components/Sidebar/LocalCollections/index.js @@ -60,7 +60,7 @@ const LocalCollections = ({ searchText }) => { Open Collection -