diff --git a/packages/bruno-app/src/components/BodyModeSelector/StyledWrapper.js b/packages/bruno-app/src/components/BodyModeSelector/StyledWrapper.js index 202148456..2b47647b1 100644 --- a/packages/bruno-app/src/components/BodyModeSelector/StyledWrapper.js +++ b/packages/bruno-app/src/components/BodyModeSelector/StyledWrapper.js @@ -19,7 +19,7 @@ const StyledWrapper = styled.div` } .selected-body-mode { - color: ${(props) => props.theme.brand}; + color: ${(props) => props.theme.primary.text}; } .dropdown-icon { diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/StyledWrapper.js index df6bc33c3..2e4f50372 100644 --- a/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/StyledWrapper.js +++ b/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/StyledWrapper.js @@ -7,7 +7,7 @@ const Wrapper = styled.div` background: transparent; .auth-mode-label { - color: ${(props) => props.theme.brand}; + color: ${(props) => props.theme.primary.text}; .caret { color: rgb(140, 140, 140); diff --git a/packages/bruno-app/src/components/CollectionSettings/Overview/RequestsNotLoaded/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/Overview/RequestsNotLoaded/StyledWrapper.js index 2837918ce..9e79d745d 100644 --- a/packages/bruno-app/src/components/CollectionSettings/Overview/RequestsNotLoaded/StyledWrapper.js +++ b/packages/bruno-app/src/components/CollectionSettings/Overview/RequestsNotLoaded/StyledWrapper.js @@ -1,16 +1,23 @@ import styled from 'styled-components'; +import { rgba } from 'polished'; const StyledWrapper = styled.div` &.card { background-color: ${(props) => props.theme.requestTabPanel.card.bg}; .title { - border-top: 1px solid ${(props) => props.theme.border.BORDER0}; - border-left: 1px solid ${(props) => props.theme.border.BORDER0}; - border-right: 1px solid ${(props) => props.theme.border.BORDER0}; + border-top: 1px solid ${(props) => props.theme.table.border}; + border-left: 1px solid ${(props) => props.theme.table.border}; + border-right: 1px solid ${(props) => props.theme.table.border}; border-top-left-radius: 3px; border-top-right-radius: 3px; + + background-color: ${(props) => props.theme.status.warning.background}; + } + + .warning-icon { + color: ${(props) => props.theme.status.warning.text}; } .table { diff --git a/packages/bruno-app/src/components/CollectionSettings/Overview/RequestsNotLoaded/index.js b/packages/bruno-app/src/components/CollectionSettings/Overview/RequestsNotLoaded/index.js index db1b5eb01..7e81280fe 100644 --- a/packages/bruno-app/src/components/CollectionSettings/Overview/RequestsNotLoaded/index.js +++ b/packages/bruno-app/src/components/CollectionSettings/Overview/RequestsNotLoaded/index.js @@ -41,8 +41,8 @@ const RequestsNotLoaded = ({ collection }) => { return ( -
- +
+ Following requests were not loaded
diff --git a/packages/bruno-app/src/components/CollectionSettings/Presets/index.js b/packages/bruno-app/src/components/CollectionSettings/Presets/index.js index b2803e055..4bcd7bf7e 100644 --- a/packages/bruno-app/src/components/CollectionSettings/Presets/index.js +++ b/packages/bruno-app/src/components/CollectionSettings/Presets/index.js @@ -36,7 +36,7 @@ const PresetsSettings = ({ collection }) => { return ( -
+
These presets will be used as the default values for new requests in this collection.
diff --git a/packages/bruno-app/src/components/CollectionSettings/Script/index.js b/packages/bruno-app/src/components/CollectionSettings/Script/index.js index 156dc40d5..179286d63 100644 --- a/packages/bruno-app/src/components/CollectionSettings/Script/index.js +++ b/packages/bruno-app/src/components/CollectionSettings/Script/index.js @@ -56,7 +56,7 @@ const Script = ({ collection }) => { }; return ( - +
Write pre and post-request scripts that will run before and after any request in this collection is sent.
diff --git a/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js index 64580b60b..4c6612e3e 100644 --- a/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js +++ b/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js @@ -19,6 +19,10 @@ const StyledWrapper = styled.div` box-shadow: none !important; } + &:hover { + color: ${(props) => props.theme.tabs.active.color} !important; + } + &.active { font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important; color: ${(props) => props.theme.tabs.active.color} !important; diff --git a/packages/bruno-app/src/components/CollectionSettings/Vars/index.js b/packages/bruno-app/src/components/CollectionSettings/Vars/index.js index 612db4019..fe5e38e55 100644 --- a/packages/bruno-app/src/components/CollectionSettings/Vars/index.js +++ b/packages/bruno-app/src/components/CollectionSettings/Vars/index.js @@ -14,7 +14,7 @@ const Vars = ({ collection }) => { return ( -
+
Pre Request
diff --git a/packages/bruno-app/src/components/Cookies/ModifyCookieModal/StyledWrapper.js b/packages/bruno-app/src/components/Cookies/ModifyCookieModal/StyledWrapper.js index 66d911a52..f907675f1 100644 --- a/packages/bruno-app/src/components/Cookies/ModifyCookieModal/StyledWrapper.js +++ b/packages/bruno-app/src/components/Cookies/ModifyCookieModal/StyledWrapper.js @@ -19,7 +19,7 @@ const StyledWrapper = styled.div` /* Checkbox */ input[type='checkbox'] { cursor: pointer; - accent-color: ${(props) => props.theme.colors.accent}; + accent-color: ${(props) => props.theme.primary.solid}; } `; diff --git a/packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js b/packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js index db35b6ba9..3aa9215c6 100644 --- a/packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js +++ b/packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js @@ -30,8 +30,8 @@ const ConfirmCloseEnvironment = ({ onCancel, onCloseWithoutSave, onSaveAndClose, Don't Save
-
-
-
-
-
- diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/SpecialTab.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/SpecialTab.js index e9dffde29..89cc5949a 100644 --- a/packages/bruno-app/src/components/RequestTabs/RequestTab/SpecialTab.js +++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/SpecialTab.js @@ -8,7 +8,7 @@ const SpecialTab = ({ handleCloseClick, type, tabName, handleDoubleClick, hasDra case 'collection-settings': { return ( <> - + Collection ); @@ -16,7 +16,7 @@ const SpecialTab = ({ handleCloseClick, type, tabName, handleDoubleClick, hasDra case 'collection-overview': { return ( <> - + Overview ); @@ -24,7 +24,7 @@ const SpecialTab = ({ handleCloseClick, type, tabName, handleDoubleClick, hasDra case 'folder-settings': { return ( <> - + {tabName || 'Folder'} ); @@ -32,7 +32,7 @@ const SpecialTab = ({ handleCloseClick, type, tabName, handleDoubleClick, hasDra case 'variables': { return ( <> - + Variables ); @@ -40,7 +40,7 @@ const SpecialTab = ({ handleCloseClick, type, tabName, handleDoubleClick, hasDra case 'collection-runner': { return ( <> - + Runner ); @@ -48,7 +48,7 @@ const SpecialTab = ({ handleCloseClick, type, tabName, handleDoubleClick, hasDra case 'environment-settings': { return ( <> - + Environments ); @@ -56,7 +56,7 @@ const SpecialTab = ({ handleCloseClick, type, tabName, handleDoubleClick, hasDra case 'global-environment-settings': { return ( <> - + Global Environments ); @@ -67,7 +67,7 @@ const SpecialTab = ({ handleCloseClick, type, tabName, handleDoubleClick, hasDra return ( <>
{getTabInfo(type, tabName)} diff --git a/packages/bruno-app/src/components/RequestTabs/StyledWrapper.js b/packages/bruno-app/src/components/RequestTabs/StyledWrapper.js index 6a86cf2c8..8b92c93cb 100644 --- a/packages/bruno-app/src/components/RequestTabs/StyledWrapper.js +++ b/packages/bruno-app/src/components/RequestTabs/StyledWrapper.js @@ -17,8 +17,6 @@ const Wrapper = styled.div` .tabs-scroll-container { overflow-x: auto; overflow-y: clip; - padding-bottom: 10px; - margin-bottom: -10px; &::-webkit-scrollbar { display: none; @@ -197,6 +195,10 @@ const Wrapper = styled.div` &.has-chevrons ul { padding-left: 0; } + + .special-tab-icon { + color: ${(props) => props.theme.primary.text}; + } `; export default Wrapper; diff --git a/packages/bruno-app/src/components/RequestTabs/index.js b/packages/bruno-app/src/components/RequestTabs/index.js index 8c9f48f76..0de864955 100644 --- a/packages/bruno-app/src/components/RequestTabs/index.js +++ b/packages/bruno-app/src/components/RequestTabs/index.js @@ -12,6 +12,7 @@ import StyledWrapper from './StyledWrapper'; import DraggableTab from './DraggableTab'; import CreateUntitledRequest from 'components/CreateUntitledRequest'; import { IconPlus } from '@tabler/icons'; +import ActionIcon from 'ui/ActionIcon/index'; const RequestTabs = () => { const dispatch = useDispatch(); @@ -116,22 +117,19 @@ const RequestTabs = () => { {collectionRequestTabs && collectionRequestTabs.length ? ( <> -
-
    - {showChevrons ? ( -
  • -
    - -
    -
    • - ) : null} - {/* Moved to post mvp */} - {/*
  • -
    - -
    -
    • */} -
+
+ + {showChevrons ? ( + + + + ) : null} + {/* Moved to post mvp */} + {/*
  • +
    + +
    +
    • */}
      {collectionRequestTabs && collectionRequestTabs.length @@ -169,30 +167,27 @@ const RequestTabs = () => {
    {activeCollection && ( -
    setNewRequestModalOpen(true)}> + setNewRequestModalOpen(true)} aria-label="New Request" size="lg" style={{ marginBottom: '3px' }}> -
    + )} -
      - {showChevrons ? ( -
    • -
      - -
      -
      • - ) : null} - {/* Moved to post mvp */} - {/*
    • + + {showChevrons ? ( + + + + ) : null} + {/* Moved to post mvp */} + {/*
      • */} -
    ) : null} diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBody/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBody/StyledWrapper.js index c0d034289..7f9393d8c 100644 --- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBody/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBody/StyledWrapper.js @@ -26,12 +26,12 @@ const StyledWrapper = styled.div` } .selected-body-mode { - color: ${(props) => props.theme.brand}; + color: ${(props) => props.theme.primary.text}; } &.cursor-default { opacity: 0.6; - + .selected-body-mode { color: ${(props) => props.theme.colors.text.muted}; } @@ -53,11 +53,11 @@ const StyledWrapper = styled.div` align-items: center; justify-content: center; color: ${(props) => props.theme.colors.text.muted}; - + &:hover { opacity: 0.9; } - + &:disabled { opacity: 0.5; cursor: not-allowed; diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/StyledWrapper.js index 6fd4c499f..03f66d7a0 100644 --- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/StyledWrapper.js @@ -18,7 +18,7 @@ const StyledWrapper = styled.div` } .selected-body-mode { - color: ${(props) => props.theme.brand}; + color: ${(props) => props.theme.primary.text}; } } diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.js index f160816c3..d18199d46 100644 --- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.js @@ -19,6 +19,10 @@ const StyledWrapper = styled.div` box-shadow: none !important; } + &:hover { + color: ${(props) => props.theme.tabs.active.color} !important; + } + &.active { font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important; color: ${(props) => props.theme.tabs.active.color} !important; diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.js index bd0e0e445..5f9ad7489 100644 --- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.js @@ -6,7 +6,6 @@ const StyledWrapper = styled.div` .empty-state { color: ${(props) => props.theme.colors.text.muted}; - padding: 1rem; } .responses-container { diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/index.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/index.js index dd45e355a..e9e77ca17 100644 --- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/index.js +++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/index.js @@ -141,7 +141,7 @@ const GrpcResponsePane = ({ item, collection }) => { ) : null}
    {isLoading ? : null} {!item?.response ? ( diff --git a/packages/bruno-app/src/components/ResponsePane/Overlay/index.js b/packages/bruno-app/src/components/ResponsePane/Overlay/index.js index 429c4889a..bd8b6a8aa 100644 --- a/packages/bruno-app/src/components/ResponsePane/Overlay/index.js +++ b/packages/bruno-app/src/components/ResponsePane/Overlay/index.js @@ -4,6 +4,7 @@ import { useDispatch, useSelector } from 'react-redux'; import { cancelRequest } from 'providers/ReduxStore/slices/collections/actions'; import StopWatch from '../../StopWatch'; import StyledWrapper from './StyledWrapper'; +import Button from 'ui/Button/index'; const ResponseLoadingOverlay = ({ item, collection }) => { const dispatch = useDispatch(); @@ -23,13 +24,12 @@ const ResponseLoadingOverlay = ({ item, collection }) => {
    - +
    ); diff --git a/packages/bruno-app/src/components/ResponsePane/ResponsePaneActions/index.js b/packages/bruno-app/src/components/ResponsePane/ResponsePaneActions/index.js index d86c53c6d..639c52e60 100644 --- a/packages/bruno-app/src/components/ResponsePane/ResponsePaneActions/index.js +++ b/packages/bruno-app/src/components/ResponsePane/ResponsePaneActions/index.js @@ -20,7 +20,7 @@ const StyledMenuIcon = styled.button` border-radius: 4px; &:hover { - background-color: ${(props) => props.theme.workspace.button.bg}; + border-color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.hoverBorder} !important; color: ${(props) => props.theme.text}; } `; diff --git a/packages/bruno-app/src/components/ResponsePane/Timeline/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/Timeline/StyledWrapper.js index 6b3d106b0..b3d075e47 100644 --- a/packages/bruno-app/src/components/ResponsePane/Timeline/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponsePane/Timeline/StyledWrapper.js @@ -10,8 +10,11 @@ const StyledWrapper = styled.div` flex: 1; } + .timeline-item { + border-color: ${(props) => props.theme.border.border1}; + } + .timeline-event { - padding: 8px 0 0 0; cursor: pointer; } @@ -65,7 +68,7 @@ const StyledWrapper = styled.div` .tabs-switcher { border-bottom: 1px solid ${(props) => props.theme.border.border1}; margin-bottom: 16px; - + button { position: relative; padding: 8px 16px; @@ -126,7 +129,7 @@ const StyledWrapper = styled.div` color: ${(props) => props.theme.colors.text.purple}; } } - + .request-label { font-size: ${(props) => props.theme.font.size.base}; padding: 2px 6px; diff --git a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Method/index.js b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Method/index.js index bd4900cce..3d64851cd 100644 --- a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Method/index.js +++ b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Method/index.js @@ -1,13 +1,17 @@ +import { useMemo } from 'react'; import { useTheme } from 'providers/Theme'; const Method = ({ method }) => { const { theme } = useTheme(); - const methodUpper = method?.toUpperCase(); - const methodColor = theme.request.methods[methodUpper?.toLowerCase()] || theme.text; + + const methodColor = useMemo(() => { + const methodLower = method?.toLowerCase(); + return theme.request.methods[methodLower] || theme.text; + }, [method, theme]); return ( - - {methodUpper} + + {method} ); }; diff --git a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Time/index.js b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Time/index.js index 3f882ba39..92af37cd6 100644 --- a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Time/index.js +++ b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Time/index.js @@ -1,4 +1,5 @@ import { useState, useEffect } from 'react'; +import { useTheme } from 'providers/Theme'; const getRelativeTime = (date) => { const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' }); @@ -23,6 +24,7 @@ const getRelativeTime = (date) => { export const RelativeTime = ({ timestamp }) => { const [relativeTime, setRelativeTime] = useState(getRelativeTime(new Date(timestamp))); + const { theme } = useTheme(); useEffect(() => { const interval = setInterval(() => { @@ -32,5 +34,15 @@ export const RelativeTime = ({ timestamp }) => { return () => clearInterval(interval); }, [timestamp]); - return 
    {relativeTime}
    ; + return ( + + {relativeTime} + + ); }; diff --git a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/StyledWrapper.js index 0cb4ab5b7..3bb9ff71e 100644 --- a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/StyledWrapper.js @@ -3,11 +3,11 @@ import { rgba } from 'polished'; const StyledWrapper = styled.div` .timeline-item { - border-bottom: 2px solid ${(props) => rgba(props.theme.colors.text.warning, 0.5)}; + border-bottom: 1px solid ${(props) => props.theme.border.border1}; padding: 0.5rem 0; &--oauth2 { - border-bottom: 2px solid ${(props) => rgba(props.theme.primary.solid, 0.5)}; + border-bottom: 1px solid ${(props) => props.theme.border.border1}; } } diff --git a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/index.js b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/index.js index fc0c562cd..671909414 100644 --- a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/index.js +++ b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/index.js @@ -1,4 +1,5 @@ import { useState } from 'react'; +import { useTheme } from 'providers/Theme'; import Network from './Network/index'; import Request from './Request/index'; import Response from './Response/index'; @@ -8,6 +9,7 @@ import { RelativeTime } from './Common/Time/index'; import StyledWrapper from './StyledWrapper'; const TimelineItem = ({ timestamp, request, response, item, collection, isOauth2, hideTimestamp = false }) => { + const { theme } = useTheme(); const [isCollapsed, _toggleCollapse] = useState(false); const [activeTab, setActiveTab] = useState('request'); const toggleCollapse = () => _toggleCollapse((prev) => !prev); @@ -18,24 +20,18 @@ const TimelineItem = ({ timestamp, request, response, item, collection, isOauth2 return (
    -
    -
    -
    - - - - {isOauth2 && 
    [oauth2.0]
    } - {!hideTimestamp && ( - <> - 
    [{new Date(timestamp).toISOString()}]
    - - - - - )} -
    +
    + +
    + +
    {url}
    + {isOauth2 && [oauth2.0]}
    -
    {url}
    + {!hideTimestamp && ( + + + + )}
    {isCollapsed && (
    diff --git a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js index c515c9ae6..c214b6f9a 100644 --- a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js +++ b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js @@ -185,7 +185,7 @@ const WSMessagesList = ({ order = -1, messages = [] }) => { } const ordered = order === -1 ? messages : messages.slice().reverse(); return ( - + {ordered.map((msg, idx, src) => { const inFocus = order === -1 ? src.length - 1 === idx : idx === 0; return ; diff --git a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/index.js b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/index.js index 473f2387b..d9b9f8835 100644 --- a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/index.js +++ b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/index.js @@ -135,7 +135,7 @@ const WSResponsePane = ({ item, collection }) => { ) : null}
    {isLoading ? : null} {!item?.response ? ( diff --git a/packages/bruno-app/src/components/ResponsePane/index.js b/packages/bruno-app/src/components/ResponsePane/index.js index 725666045..e0105281f 100644 --- a/packages/bruno-app/src/components/ResponsePane/index.js +++ b/packages/bruno-app/src/components/ResponsePane/index.js @@ -284,7 +284,7 @@ const ResponsePane = ({ item, collection }) => { />
    { return ( - +
    e.preventDefault()}>