From 6be2818bfb48c75b372182a20b9ceb8616aed862 Mon Sep 17 00:00:00 2001 From: Anoop M D Date: Sat, 22 Oct 2022 16:00:04 +0530 Subject: [PATCH] feat: dark mode (environment selector, query url) --- .../src/components/Dropdown/StyledWrapper.js | 4 ++++ .../EnvironmentSelector/StyledWrapper.js | 2 +- .../src/components/Icons/Send/index.js | 17 +++++++++++++++++ .../RequestPane/QueryParams/StyledWrapper.js | 1 + .../RequestPane/QueryUrl/StyledWrapper.js | 6 +++--- .../components/RequestPane/QueryUrl/index.js | 6 ++++-- .../RequestPane/RequestHeaders/StyledWrapper.js | 1 + .../Workspaces/WorkspaceSelector/index.js | 4 ++-- packages/bruno-app/src/themes/dark.js | 14 ++++++++++++++ packages/bruno-app/src/themes/light.js | 13 +++++++++++++ 10 files changed, 60 insertions(+), 8 deletions(-) create mode 100644 packages/bruno-app/src/components/Icons/Send/index.js diff --git a/packages/bruno-app/src/components/Dropdown/StyledWrapper.js b/packages/bruno-app/src/components/Dropdown/StyledWrapper.js index ee857ac6..05de1d1c 100644 --- a/packages/bruno-app/src/components/Dropdown/StyledWrapper.js +++ b/packages/bruno-app/src/components/Dropdown/StyledWrapper.js @@ -33,6 +33,10 @@ const Wrapper = styled.div` padding: 0.35rem 0.6rem; cursor: pointer; + .icon { + color: ${(props) => props.theme.dropdown.iconColor}; + } + &:hover { background-color: ${(props) => props.theme.dropdown.hoverBg}; } diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js index a0f5681f..4db3ada0 100644 --- 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-enviroment { - background: #efefef; + background-color: ${(props) => props.theme.sidebar.workspace.bg}; border-radius: 15px; .caret { diff --git a/packages/bruno-app/src/components/Icons/Send/index.js b/packages/bruno-app/src/components/Icons/Send/index.js new file mode 100644 index 00000000..15b4fa8c --- /dev/null +++ b/packages/bruno-app/src/components/Icons/Send/index.js @@ -0,0 +1,17 @@ +import React from 'react'; + +const SendIcon = ({color, width}) => { + return ( + + + + + ); +} + +export default SendIcon; diff --git a/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js index b0f26f0b..ba312fc7 100644 --- a/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js +++ b/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js @@ -32,6 +32,7 @@ const Wrapper = styled.div` width: 100%; border: solid 1px transparent; outline: none !important; + background-color: inherit; &:focus { outline: none !important; diff --git a/packages/bruno-app/src/components/RequestPane/QueryUrl/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/QueryUrl/StyledWrapper.js index a5abce2b..7ec35f33 100644 --- a/packages/bruno-app/src/components/RequestPane/QueryUrl/StyledWrapper.js +++ b/packages/bruno-app/src/components/RequestPane/QueryUrl/StyledWrapper.js @@ -4,18 +4,18 @@ const Wrapper = styled.div` height: 2.3rem; div.method-selector-container { - background-color: var(--color-sidebar-background); + background-color: ${(props) => props.theme.requestTabPanel.url.bg}; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } div.input-container { - background-color: var(--color-sidebar-background); + background-color: ${(props) => props.theme.requestTabPanel.url.bg}; border-top-right-radius: 3px; border-bottom-right-radius: 3px; input { - background-color: var(--color-sidebar-background); + background-color: ${(props) => props.theme.requestTabPanel.url.bg}; outline: none; box-shadow: none; diff --git a/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js b/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js index 8487417a..3fe81acd 100644 --- a/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js +++ b/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js @@ -3,10 +3,12 @@ import get from 'lodash/get'; import { useDispatch } from 'react-redux'; import { requestUrlChanged, updateRequestMethod } from 'providers/ReduxStore/slices/collections'; import HttpMethodSelector from './HttpMethodSelector'; +import { useTheme } from 'providers/Theme'; +import SendIcon from 'components/Icons/Send'; import StyledWrapper from './StyledWrapper'; -import SendSvg from 'assets/send.svg'; const QueryUrl = ({ item, collection, handleRun }) => { + const { theme } = useTheme(); const dispatch = useDispatch(); const method = item.draft ? get(item, 'draft.request.method') : get(item, 'request.method'); let url = item.draft ? get(item, 'draft.request.url') : get(item, 'request.url'); @@ -48,7 +50,7 @@ const QueryUrl = ({ item, collection, handleRun }) => { onChange={(event) => onUrlChange(event.target.value)} />
- +
diff --git a/packages/bruno-app/src/components/RequestPane/RequestHeaders/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/RequestHeaders/StyledWrapper.js index 3f36e484..ef62c4a2 100644 --- a/packages/bruno-app/src/components/RequestPane/RequestHeaders/StyledWrapper.js +++ b/packages/bruno-app/src/components/RequestPane/RequestHeaders/StyledWrapper.js @@ -31,6 +31,7 @@ const Wrapper = styled.div` width: 100%; border: solid 1px transparent; outline: none !important; + background-color: inherit; &:focus { outline: none !important; diff --git a/packages/bruno-app/src/components/Workspaces/WorkspaceSelector/index.js b/packages/bruno-app/src/components/Workspaces/WorkspaceSelector/index.js index 12c5a7a6..0b40c4fc 100644 --- a/packages/bruno-app/src/components/Workspaces/WorkspaceSelector/index.js +++ b/packages/bruno-app/src/components/Workspaces/WorkspaceSelector/index.js @@ -49,14 +49,14 @@ const WorkspaceSelector = () => {
} placement="bottom-end">
setOpenSwitchWorkspaceModal(true)}> -
+
Switch Workspace
setOpenWorkspacesModal(true)}> -
+
Configure Workspaces diff --git a/packages/bruno-app/src/themes/dark.js b/packages/bruno-app/src/themes/dark.js index d5a17fd2..1f5c5879 100644 --- a/packages/bruno-app/src/themes/dark.js +++ b/packages/bruno-app/src/themes/dark.js @@ -38,6 +38,7 @@ const darkTheme = { dropdown: { color: "rgb(204, 204, 204)", + iconColor: "rgb(204, 204, 204)", bg: 'rgb(48, 48, 49)', hoverBg: '#0F395E', shadow: 'rgb(0 0 0 / 36%) 0px 2px 8px', @@ -52,6 +53,19 @@ const darkTheme = { } }, + requestTabPanel: { + url: { + bg: '#3D3D3D', + icon: 'rgb(204, 204, 204)' + } + }, + + collection: { + environment: { + bg: '#3D3D3D' + } + }, + 'primary-text': '#ffffff', 'secondary-text': '#929292', 'sidebar-collection-item-active-background': '#e1e1e1', diff --git a/packages/bruno-app/src/themes/light.js b/packages/bruno-app/src/themes/light.js index 7ee9a1a9..b7ecbdee 100644 --- a/packages/bruno-app/src/themes/light.js +++ b/packages/bruno-app/src/themes/light.js @@ -38,6 +38,7 @@ const lightTheme = { dropdown: { color: "rgb(48 48 48)", + iconColor: "rgb(75, 85, 99)", bg: 'rgb(48, 48, 49)', hoverBg: '#e9e9e9', shadow: 'rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px', @@ -52,6 +53,18 @@ const lightTheme = { } }, + requestTabPanel: { + url: { + bg: '#f3f3f3', + icon: '#515151' + } + }, + + collection: { + environment: { + bg: '#efefef' + } + }, 'primary-text': 'rgb(52 52 52)', 'secondary-text': '#929292',