request colors made consistent on the sidebar and tabs

This commit is contained in:
therealrinku 2023-10-06 14:57:20 +05:45
parent c25542bbdf
commit be72d24ecb
5 changed files with 29 additions and 13 deletions

View File

@ -6,9 +6,13 @@ import { findItemInCollection } from 'utils/collections';
import StyledWrapper from './StyledWrapper';
import RequestTabNotFound from './RequestTabNotFound';
import SpecialTab from './SpecialTab';
import { useTheme } from 'providers/Theme';
import darkTheme from 'themes/dark';
import lightTheme from 'themes/light';
const RequestTab = ({ tab, collection }) => {
const dispatch = useDispatch();
const { storedTheme } = useTheme();
const handleCloseClick = (event) => {
event.stopPropagation();
@ -21,35 +25,38 @@ const RequestTab = ({ tab, collection }) => {
};
const getMethodColor = (method = '') => {
const theme = storedTheme === 'dark' ? darkTheme : lightTheme;
let color = '';
method = method.toLocaleLowerCase();
switch (method) {
case 'get': {
color = 'var(--color-method-get)';
color = theme.request.methods.get;
break;
}
case 'post': {
color = 'var(--color-method-post)';
color = theme.request.methods.post;
break;
}
case 'put': {
color = 'var(--color-method-put)';
color = theme.request.methods.put;
break;
}
case 'delete': {
color = 'var(--color-method-delete)';
color = theme.request.methods.delete;
break;
}
case 'patch': {
color = 'var(--color-method-patch)';
color = theme.request.methods.patch;
break;
}
case 'options': {
color = 'var(--color-method-options)';
color = theme.request.methods.options;
break;
}
case 'head': {
color = 'var(--color-method-head)';
color = theme.request.methods.head;
break;
}
}

View File

@ -25,13 +25,13 @@ const Wrapper = styled.div`
color: ${(props) => props.theme.request.methods.delete};
}
.method-patch {
color: ${(props) => props.theme.request.methods.put};
color: ${(props) => props.theme.request.methods.patch};
}
.method-options {
color: ${(props) => props.theme.request.methods.put};
color: ${(props) => props.theme.request.methods.options};
}
.method-head {
color: ${(props) => props.theme.request.methods.put};
color: ${(props) => props.theme.request.methods.head};
}
`;

View File

@ -15,7 +15,8 @@ const RequestMethod = ({ item }) => {
'method-put': method === 'put',
'method-delete': method === 'delete',
'method-patch': method === 'patch',
'method-head': method === 'head'
'method-head': method === 'head',
'method-options': method == 'options'
});
};

View File

@ -86,7 +86,11 @@ const darkTheme = {
get: '#8cd656',
post: '#cd56d6',
put: '#d69956',
delete: '#f06f57'
delete: '#f06f57',
// customize these colors if needed
patch: '#d69956',
options: '#d69956',
head: '#d69956'
}
},

View File

@ -86,7 +86,11 @@ const lightTheme = {
get: 'rgb(5, 150, 105)',
post: '#8e44ad',
put: '#ca7811',
delete: 'rgb(185, 28, 28)'
delete: 'rgb(185, 28, 28)',
// customize these colors if needed
patch: '#ca7811',
options: '#ca7811',
head: '#ca7811'
}
},