forked from extern/bruno
feat: dark-mode (response status and support modal)
This commit is contained in:
Anoop M D
parent
04a0a37ca4
commit
2ba6e4823d
@ -1,7 +1,7 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
color: var(--color-text);
|
||||
color: ${(props) => props.theme.text};
|
||||
.collection-options {
|
||||
svg {
|
||||
position: relative;
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import React from 'react';
|
||||
import Modal from 'components/Modal/index';
|
||||
import { IconSpeakerphone, IconBrandTwitter } from '@tabler/icons';
|
||||
import { IconSpeakerphone, IconBrandTwitter, IconBrandGithub } from '@tabler/icons';
|
||||
import StyledWrapper from './StyledWrapper';
|
||||
import GithubSvg from 'assets/github.svg';
|
||||
|
||||
const BrunoSupport = ({ onClose }) => {
|
||||
return (
|
||||
@ -10,19 +9,19 @@ const BrunoSupport = ({ onClose }) => {
|
||||
<Modal size="sm" title={'Support'} handleCancel={onClose} hideFooter={true}>
|
||||
<div className="collection-options">
|
||||
<div className="mt-2">
|
||||
<a href="https://github.com/usebruno/bruno/issues" target="_blank" className="flex items-center">
|
||||
<a href="https://github.com/usebruno/bruno/issues" target="_blank" className="flex items-end">
|
||||
<IconSpeakerphone size={18} strokeWidth={2} />
|
||||
<span className="label ml-2">Report Issues</span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<a href="https://github.com/usebruno/bruno" target="_blank" className="flex items-center">
|
||||
<img src={GithubSvg.src} style={{ width: '18px' }} />
|
||||
<a href="https://github.com/usebruno/bruno" target="_blank" className="flex items-end">
|
||||
<IconBrandGithub size={18} strokeWidth={2} />
|
||||
<span className="label ml-2">Github</span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<a href="https://twitter.com/use_bruno" target="_blank" className="flex items-center">
|
||||
<a href="https://twitter.com/use_bruno" target="_blank" className="flex items-end">
|
||||
<IconBrandTwitter size={18} strokeWidth={2} />
|
||||
<span className="label ml-2">Twitter</span>
|
||||
</a>
|
||||
|
||||
@ -40,6 +40,10 @@ const Wrapper = styled.div`
|
||||
&:hover {
|
||||
background-color: ${(props) => props.theme.dropdown.hoverBg};
|
||||
}
|
||||
|
||||
&.border-top {
|
||||
border-top: solid 1px ${(props) => props.theme.dropdown.seperator};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -65,7 +65,7 @@ const EnvironmentSelector = ({ collection }) => {
|
||||
>
|
||||
<span>No Environment</span>
|
||||
</div>
|
||||
<div className="dropdown-item" style={{ borderTop: 'solid 1px #e7e7e7' }} onClick={() => setOpenSettingsModal(true)}>
|
||||
<div className="dropdown-item border-top" onClick={() => setOpenSettingsModal(true)}>
|
||||
<div className="pr-2 text-gray-600">
|
||||
<IconSettings size={18} strokeWidth={1.5} />
|
||||
</div>
|
||||
|
||||
@ -23,7 +23,7 @@ const ResponseLoadingOverlay = ({ item, collection }) => {
|
||||
<IconRefresh size={24} className="animate-spin" />
|
||||
<button
|
||||
onClick={handleCancelRequest}
|
||||
className="mt-4 uppercase bg-gray-200 active:bg-blueGray-600 text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
|
||||
className="mt-4 uppercase btn-md rounded btn-secondary ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
>
|
||||
Cancel Request
|
||||
|
||||
@ -3,6 +3,10 @@ import styled from 'styled-components';
|
||||
const StyledWrapper = styled.div`
|
||||
padding-top: 20%;
|
||||
width: 100%;
|
||||
|
||||
.send-icon {
|
||||
color: ${(props) => props.theme.requestTabPanel.responseSendIcon};
|
||||
}
|
||||
`;
|
||||
|
||||
export default StyledWrapper;
|
||||
|
||||
@ -5,7 +5,7 @@ import StyledWrapper from './StyledWrapper';
|
||||
const Placeholder = () => {
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<div className="text-gray-300 flex justify-center" style={{ fontSize: 200 }}>
|
||||
<div className="send-icon flex justify-center" style={{ fontSize: 200 }}>
|
||||
<IconSend size={150} strokeWidth={1} />
|
||||
</div>
|
||||
<div className="flex mt-4">
|
||||
|
||||
@ -3,7 +3,7 @@ import styled from 'styled-components';
|
||||
const Wrapper = styled.div`
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: rgb(117 117 117);
|
||||
color: ${(props) => props.theme.requestTabPanel.responseStatus};
|
||||
`;
|
||||
|
||||
export default Wrapper;
|
||||
|
||||
@ -3,7 +3,7 @@ import styled from 'styled-components';
|
||||
const Wrapper = styled.div`
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: rgb(117 117 117);
|
||||
color: ${(props) => props.theme.requestTabPanel.responseStatus};
|
||||
`;
|
||||
|
||||
export default Wrapper;
|
||||
|
||||
@ -3,6 +3,14 @@ import styled from 'styled-components';
|
||||
const Wrapper = styled.div`
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
|
||||
&.text-ok {
|
||||
color: ${(props) => props.theme.requestTabPanel.responseOk};
|
||||
}
|
||||
|
||||
&.text-error {
|
||||
color: ${(props) => props.theme.requestTabPanel.responseError};
|
||||
}
|
||||
`;
|
||||
|
||||
export default Wrapper;
|
||||
|
||||
@ -3,19 +3,20 @@ import classnames from 'classnames';
|
||||
import statusCodePhraseMap from './get-status-code-phrase';
|
||||
import StyledWrapper from './StyledWrapper';
|
||||
|
||||
// Todo: text-error class is not getting pulled in for 500 errors
|
||||
const StatusCode = ({ status }) => {
|
||||
const getTabClassname = () => {
|
||||
const getTabClassname = (status) => {
|
||||
return classnames('', {
|
||||
'text-blue-700': status >= 100 && status < 200,
|
||||
'text-green-700': status >= 200 && status < 300,
|
||||
'text-purple-700': status >= 300 && status < 400,
|
||||
'text-yellow-700': status >= 400 && status < 500,
|
||||
'text-red-700': status >= 500 && status < 600
|
||||
'text-ok': status >= 100 && status < 200,
|
||||
'text-ok': status >= 200 && status < 300,
|
||||
'text-error': status >= 300 && status < 400,
|
||||
'text-error': status >= 400 && status < 500,
|
||||
'text-error': status >= 500 && status < 600
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledWrapper className={getTabClassname()}>
|
||||
<StyledWrapper className={getTabClassname(status)}>
|
||||
{status} {statusCodePhraseMap[status]}
|
||||
</StyledWrapper>
|
||||
);
|
||||
|
||||
@ -7,7 +7,7 @@ const StyledWrapper = styled.div`
|
||||
|
||||
.local-collections-unavailable {
|
||||
padding: 0.35rem 0.6rem;
|
||||
border-top: solid 1px #ddd;
|
||||
border-top: solid 1px ${(props) => props.theme.dropdown.seperator};
|
||||
font-size: 11px;
|
||||
}
|
||||
.collection-dropdown {
|
||||
|
||||
@ -43,6 +43,7 @@ const darkTheme = {
|
||||
bg: 'rgb(48, 48, 49)',
|
||||
hoverBg: '#0F395E',
|
||||
shadow: 'rgb(0 0 0 / 36%) 0px 2px 8px',
|
||||
seperator: '#444'
|
||||
},
|
||||
|
||||
request: {
|
||||
@ -65,7 +66,11 @@ const darkTheme = {
|
||||
},
|
||||
bodyModeSelect: {
|
||||
color: 'transparent'
|
||||
}
|
||||
},
|
||||
responseSendIcon: '#555',
|
||||
responseStatus: '#ccc',
|
||||
responseOk: '#8cd656',
|
||||
responseError: '#f06f57'
|
||||
},
|
||||
|
||||
collection: {
|
||||
|
||||
@ -43,6 +43,7 @@ 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'
|
||||
},
|
||||
|
||||
request: {
|
||||
@ -65,7 +66,11 @@ const lightTheme = {
|
||||
},
|
||||
bodyModeSelect: {
|
||||
color: '#efefef'
|
||||
}
|
||||
},
|
||||
responseSendIcon: 'rgb(209, 213, 219)',
|
||||
responseStatus: 'rgb(117 117 117)',
|
||||
responseOk: '#047857',
|
||||
responseError: 'rgb(185, 28, 28)'
|
||||
},
|
||||
|
||||
collection: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user