holm/bruno
1
0
Fork 0
forked from extern/bruno
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: dark-mode completed :)

Browse Source
This commit is contained in:
Anoop M D 2022-10-23 11:26:16 +05:30
parent 2ba6e4823d
commit 96f50b0c6d
25 changed files with 253 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/bruno-app/src/components/Dropdown/StyledWrapper.js
View File

@ -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 {

3
packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
View File

@ -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;

15
packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js
View File

@ -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 {

6
packages/bruno-app/src/components/Modal/StyledWrapper.js
View File

@ -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;

6
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js
View File

@ -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;
}
}

6
packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js
View File

@ -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;
}
}

2
packages/bruno-app/src/components/Sidebar/Collections/SelectCollection/StyledWrapper.js
View File

@ -10,7 +10,7 @@ const StyledWrapper = styled.div`
cursor: pointer;
&:hover {
background-color: #f4f4f4;
background-color: ${(props) => props.theme.plainGrid.hoverBg};;
}
}
`;

5
packages/bruno-app/src/components/Sidebar/LocalCollections/StyledWrapper.js
View File

@ -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);
}

2
packages/bruno-app/src/components/Sidebar/LocalCollections/index.js
View File

@ -60,7 +60,7 @@ const LocalCollections = ({ searchText }) => {
<span>Open Collection</span>
</div>
<div className="px-2 pt-2 text-gray-600" style={{ fontSize: 10, borderTop: 'solid 1px #e7e7e7' }}>
<div className="px-2 pt-2 muted-message" style={{ fontSize: 10 }}>
Note: Local collections are not tied to a workspace
</div>
</Dropdown>

15
packages/bruno-app/src/components/Sidebar/MenuBar/index.js
View File

@ -8,7 +8,7 @@ import { IconCode, IconFiles, IconMoon, IconChevronsLeft, IconLifebuoy } from '@
import Link from 'next/link';
import StyledWrapper from './StyledWrapper';
import BrunoSupport from 'components/BrunoSupport';
import ThemeSupport from 'components/ThemeSupport/index';
import SwitchTheme from 'components/SwitchTheme';
const MenuBar = () => {
const router = useRouter();
@ -23,6 +23,9 @@ const MenuBar = () => {
return (
<StyledWrapper className="h-full flex flex-col">
{openBrunoSupport && <BrunoSupport onClose={() => setOpenBrunoSupport(false)} />}
{openTheme && <SwitchTheme onClose={() => setOpenTheme(false)} />}
<div className="flex flex-col">
<Link href="/">
<div className={getClassName('/')}>
@ -46,18 +49,16 @@ const MenuBar = () => {
<IconUser size={28} strokeWidth={1.5}/>
</div>
</Link> */}
<div className="menu-item">
<IconLifebuoy size={28} strokeWidth={1.5} onClick={() => setOpenBrunoSupport(true)} />
<div className="menu-item" onClick={() => setOpenBrunoSupport(true)}>
<IconLifebuoy size={28} strokeWidth={1.5}/>
</div>
<div className="menu-item">
<IconMoon size={28} strokeWidth={1.5} onClick={() => setOpenTheme(true)} />
<div className="menu-item" onClick={() => setOpenTheme(true)}>
<IconMoon size={28} strokeWidth={1.5}/>
</div>
<div className="menu-item" onClick={() => dispatch(toggleLeftMenuBar())}>
<IconChevronsLeft size={28} strokeWidth={1.5} />
</div>
</div>
{openBrunoSupport && <BrunoSupport onClose={() => setOpenBrunoSupport(false)} />}
{openTheme && <ThemeSupport onClose={() => setOpenTheme(false)} />}
</StyledWrapper>
);
};

7
packages/bruno-app/src/components/Sidebar/TitleBar/StyledWrapper.js
View File

@ -1,17 +1,14 @@
import styled from 'styled-components';
const StyledWrapper = styled.div`
.local-collection-label {
background-color: var(--color-sidebar-background);
}
.local-collections-unavailable {
padding: 0.35rem 0.6rem;
color: ${(props) => props.theme.sidebar.muted};
border-top: solid 1px ${(props) => props.theme.dropdown.seperator};
font-size: 11px;
}
.collection-dropdown {
color: rgb(110 110 110);
color: ${(props) => props.theme.sidebar.dropdownIcon.color};
&:hover {
color: inherit;

2
packages/bruno-app/src/components/Sidebar/TitleBar/index.js
View File

@ -135,7 +135,7 @@ const TitleBar = () => {
</div>
</>
) : (
<div className="flex items-center select-none text-gray-400 text-xs local-collections-unavailable">
<div className="flex items-center select-none text-xs local-collections-unavailable">
Note: Local collections are only available on the desktop app.
</div>
)}

0
packages/bruno-app/src/components/ThemeSupport/StyledWrapper.js → packages/bruno-app/src/components/SwitchTheme/StyledWrapper.js
View File

67
packages/bruno-app/src/components/SwitchTheme/index.js Normal file
View File

@ -0,0 +1,67 @@
import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import Modal from 'components/Modal/index';
import StyledWrapper from './StyledWrapper';
import { useTheme } from 'providers/Theme';
const SwitchTheme = ({ onClose }) => {
const { storedTheme, setStoredTheme } = useTheme();
const formik = useFormik({
enableReinitialize: true,
initialValues: {
theme: storedTheme
},
validationSchema: Yup.object({
theme: Yup.string().oneOf(['light', 'dark']).required('theme is required')
}),
onSubmit: (values) => {
setStoredTheme(values.theme);
}
});
return (
<StyledWrapper>
<Modal size="sm" title={'Switch Theme'} handleCancel={onClose} hideFooter={true}>
<div className='bruno-form'>
<div className="flex items-center mt-2">
<input
id="light-theme"
className="cursor-pointer"
type="radio"
name="theme"
onChange={(e) => {
formik.handleChange(e);
formik.handleSubmit()
}}
value="light"
checked={formik.values.theme === 'light'}
/>
<label htmlFor="light-theme" className="ml-1 cursor-pointer select-none">
Light
</label>
<input
id="dark-theme"
className="ml-4 cursor-pointer"
type="radio"
name="theme"
onChange={(e) => {
formik.handleChange(e);
formik.handleSubmit()
}}
value="dark"
checked={formik.values.theme === 'dark'}
/>
<label htmlFor="dark-theme" className="ml-1 cursor-pointer select-none">
Dark
</label>
</div>
</div>
</Modal>
</StyledWrapper>
);
};
export default SwitchTheme;

34
packages/bruno-app/src/components/ThemeSupport/index.js
View File

@ -1,34 +0,0 @@
import React from 'react';
import Modal from 'components/Modal/index';
import StyledWrapper from './StyledWrapper';
import { useTheme } from 'providers/Theme';
const ThemeSupport = ({ onClose }) => {
const { storedTheme, themeOptions, setStoredTheme } = useTheme();
console.log(themeOptions);
const handleThemeChange = (e) => {
setStoredTheme(e.target.value);
};
return (
<StyledWrapper>
<Modal size="sm" title={'Support'} handleCancel={onClose} hideFooter={true}>
<div className="collection-options">
<select name="theme_switcher" onChange={handleThemeChange} defaultValue={storedTheme}>
{themeOptions.map((tk, index) => {
return (
<option value={tk} key={index}>
{tk}
</option>
);
})}
</select>
</div>
</Modal>
</StyledWrapper>
);
};
export default ThemeSupport;

4
packages/bruno-app/src/components/Welcome/StyledWrapper.js
View File

@ -2,12 +2,12 @@ import styled from 'styled-components';
const StyledWrapper = styled.div`
.heading {
color: ${(props) => props.theme.welcome.heading};
color: ${(props) => props.theme.welcome.heading};
font-size: 0.75rem;
}
.muted {
color: ${(props) => props.theme.welcome.muted};
color: ${(props) => props.theme.welcome.muted};
}
.collection-options {

2
packages/bruno-app/src/components/Workspaces/WorkspaceConfigurer/WorkspaceItem/StyledWrapper.js
View File

@ -10,7 +10,7 @@ const Wrapper = styled.div`
}
div:hover {
background-color: #f4f4f4;
background-color: ${(props) => props.theme.plainGrid.hoverBg};
}
`;

6
packages/bruno-app/src/globalStyles.js
View File

@ -66,9 +66,9 @@ const GlobalStyle = createGlobalStyle`
}
&:disabled {
color: #545454;
background: #efefef;
border: solid 1px rgb(234, 234, 234);
color: ${(props) => props.theme.button.disabled.color};
background: ${(props) => props.theme.button.disabled.bg};
border: solid 1px ${(props) => props.theme.button.disabled.border};
cursor: not-allowed;
}

2
packages/bruno-app/src/pageComponents/Collections/StyledWrapper.js
View File

@ -17,7 +17,7 @@ const Wrapper = styled.div`
border-radius: 3px;
&:hover {
background-color: #f4f4f4;
background-color: ${(props) => props.theme.plainGrid.hoverBg};
margin-left: -8px;
margin-right: -8px;
padding-left: 8px;

2
packages/bruno-app/src/pageComponents/Login/StyledWrapper.js
View File

@ -28,7 +28,7 @@ const Wrapper = styled.div`
}
a {
color: var(--color-text-link);
color: ${(props) => props.theme.textLink};
}
.error-msg {

2
packages/bruno-app/src/pageComponents/SignUp/StyledWrapper.js
View File

@ -28,7 +28,7 @@ const Wrapper = styled.div`
}
a {
color: var(--color-text-link);
color: ${(props) => props.theme.textLink};
}
.or {

16
packages/bruno-app/src/pages/_app.js
View File

@ -1,7 +1,6 @@
import { Provider } from 'react-redux';
import { Toaster } from 'react-hot-toast';
import { AppProvider } from 'providers/App';
import { AuthProvider } from 'providers/Auth';
import { ToastProvider } from 'providers/Toaster';
import { HotkeysProvider } from 'providers/Hotkeys';
import ReduxStore from 'providers/ReduxStore';
@ -34,12 +33,13 @@ function MyApp({ Component, pageProps }) {
<NoSsr>
<Provider store={ReduxStore}>
<ThemeProvider>
<AppProvider>
<HotkeysProvider>
<Toaster toastOptions={{ duration: 2000 }} />
<Component {...pageProps} />
</HotkeysProvider>
</AppProvider>
<ToastProvider>
<AppProvider>
<HotkeysProvider>
<Component {...pageProps} />
</HotkeysProvider>
</AppProvider>
</ToastProvider>
</ThemeProvider>
</Provider>
</NoSsr>

31
packages/bruno-app/src/providers/Toaster/index.js Normal file
View File

@ -0,0 +1,31 @@
import React from 'react';
import { Toaster } from 'react-hot-toast';
import { useTheme } from 'providers/Theme';
export const ToastContext = React.createContext();
export const ToastProvider = (props) => {
const {
storedTheme
} = useTheme();
const toastOptions = { duration: 2000 };
if(storedTheme === 'dark') {
toastOptions.style = {
borderRadius: '10px',
background: '#3d3d3d',
color: '#fff'
};
}
return (
<ToastContext.Provider {...props} value="toastProvider">
<Toaster toastOptions={toastOptions} />
<div>
{props.children}
</div>
</ToastContext.Provider>
);
};
export default ToastProvider;

48
packages/bruno-app/src/themes/dark.js
View File

@ -4,12 +4,22 @@ const darkTheme = {
textLink: '#569cd6',
bg: '#1e1e1e',
colors: {
text: {
danger: '#f06f57'
},
bg: {
danger: '#d03544'
}
},
menubar: {
bg: '#333333',
},
sidebar: {
color: '#ccc',
muted: '#9d9d9d',
workspace: {
bg: '#3D3D3D'
@ -29,6 +39,10 @@ const darkTheme = {
indentBorder: 'solid 1px #4c4c4c'
}
}
},
dropdownIcon: {
color: '#ccc'
}
},
@ -43,7 +57,8 @@ const darkTheme = {
bg: 'rgb(48, 48, 49)',
hoverBg: '#0F395E',
shadow: 'rgb(0 0 0 / 36%) 0px 2px 8px',
seperator: '#444'
seperator: '#444',
labelBg: '#4a4949'
},
request: {
@ -75,7 +90,24 @@ const darkTheme = {
collection: {
environment: {
bg: '#3D3D3D'
bg: '#3D3D3D',
settings: {
bg: '#3D3D3D',
sidebar: {
bg: '#3D3D3D',
borderRight: '#4f4f4f'
},
item: {
border: '#569cd6',
hoverBg: 'transparent',
active: {
bg: 'transparent',
hoverBg: 'transparent'
},
},
gridBorder: '#4f4f4f'
}
}
},
@ -93,6 +125,9 @@ const darkTheme = {
bg: 'rgb(65, 65, 65)',
border: 'rgb(65, 65, 65)',
focusBorder: 'rgb(65, 65, 65)'
},
backdrop: {
opacity: 0.2
}
},
@ -108,6 +143,11 @@ const darkTheme = {
bg: 'transparent',
border: 'transparent',
hoverBorder: ''
},
disabled: {
color: '#a5a5a5',
bg: '#626262',
border: '#626262'
}
},
@ -154,6 +194,10 @@ const darkTheme = {
striped: '#2A2D2F'
},
plainGrid: {
hoverBg: '#3D3D3D'
},
'primary-text': '#ffffff',
'secondary-text': '#929292',
'sidebar-collection-item-active-background': '#e1e1e1',

54
packages/bruno-app/src/themes/light.js
View File

@ -4,12 +4,22 @@ const lightTheme = {
textLink: '#1663bb',
bg: '#fff',
colors: {
text: {
danger: 'rgb(185, 28, 28)'
},
bg: {
danger: '#dc3545'
}
},
menubar: {
bg: 'rgb(44, 44, 44)',
},
sidebar: {
color: 'rgb(52, 52, 52)',
muted: '#4b5563',
workspace: {
bg: '#e1e1e1'
@ -29,6 +39,10 @@ const lightTheme = {
indentBorder: 'solid 1px #d0d0d0'
}
}
},
dropdownIcon: {
color: 'rgb(110 110 110)'
}
},
@ -43,7 +57,8 @@ const lightTheme = {
bg: '#fff',
hoverBg: '#e9e9e9',
shadow: 'rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px',
seperator: '#e7e7e7'
seperator: '#e7e7e7',
labelBg: '#f3f3f3'
},
request: {
@ -75,7 +90,28 @@ const lightTheme = {
collection: {
environment: {
bg: '#efefef'
bg: '#efefef',
settings: {
bg: 'white',
sidebar: {
bg: '#eaeaea',
borderRight: 'transparent'
},
item: {
border: '#546de5',
hoverBg: '#e4e4e4',
active: {
bg: '#dcdcdc',
hoverBg: '#dcdcdc'
},
},
gridBorder: '#f4f4f4'
}
},
sidebar: {
bg: '#eaeaea'
}
},
@ -86,13 +122,16 @@ const lightTheme = {
iconColor: 'black'
},
body: {
color: '#ccc',
color: 'rgb(52, 52, 52)',
bg: 'white',
},
input : {
bg: 'white',
border: '#ccc',
focusBorder: '#8b8b8b'
},
backdrop: {
opacity: 0.4
}
},
@ -108,6 +147,11 @@ const lightTheme = {
bg: 'white',
border: 'white',
hoverBorder: ''
},
disabled: {
color: '#9f9f9f',
bg: '#efefef',
border: 'rgb(234, 234, 234)'
}
},
@ -154,6 +198,10 @@ const lightTheme = {
striped: '#f3f3f3'
},
plainGrid: {
hoverBg: '#f4f4f4'
},
'primary-text': 'rgb(52 52 52)',
'secondary-text': '#929292',
'sidebar-collection-item-active-background': '#e1e1e1',