diff --git a/packages/bruno-app/src/components/Modal/index.js b/packages/bruno-app/src/components/Modal/index.js index 0b44b928b..99bf1f89d 100644 --- a/packages/bruno-app/src/components/Modal/index.js +++ b/packages/bruno-app/src/components/Modal/index.js @@ -16,7 +16,7 @@ const ModalHeader = ({ title, handleCancel, customHeader, hideClose }) => ( ); -const ModalContent = ({ children }) =>
{children}
; +const ModalContent = ({ children }) =>
{children}
; const ModalFooter = ({ confirmText, diff --git a/packages/bruno-app/src/components/PathDisplay/StyledWrapper.js b/packages/bruno-app/src/components/PathDisplay/StyledWrapper.js index 943a58673..bdaca8bbf 100644 --- a/packages/bruno-app/src/components/PathDisplay/StyledWrapper.js +++ b/packages/bruno-app/src/components/PathDisplay/StyledWrapper.js @@ -5,16 +5,32 @@ const StyledWrapper = styled.div` background: ${(props) => props.theme.requestTabPanel.url.bg}; border-radius: 4px; padding: 8px 12px; - - .filename { - color: ${(props) => props.theme.brand}; - font-weight: 500; - min-height: 1.25rem; + font-size: 0.8125rem; + border: 1px solid rgba(0, 0, 0, 0.08); + + .icon-column { + padding-right: 8px; + align-items: flex-start; + padding-top: 2px; } - .file-extension { + .path-container { + flex-wrap: wrap; + } + + .path-segment { + white-space: nowrap; + } + + + .filename, .file-extension { + color: ${(props) => props.theme.colors.text.yellow}; + } + + .separator { color: ${(props) => props.theme.text}; - opacity: 0.5; + opacity: 0.6; + margin: 0 1px; } } `; diff --git a/packages/bruno-app/src/components/PathDisplay/index.js b/packages/bruno-app/src/components/PathDisplay/index.js index 78b6f189a..b7ffa087f 100644 --- a/packages/bruno-app/src/components/PathDisplay/index.js +++ b/packages/bruno-app/src/components/PathDisplay/index.js @@ -19,7 +19,7 @@ const PathDisplay = ({
- +
-
-
- {showExtension ? : } - {collection?.name} +
+
+ {showExtension ? : }
- {pathSegments?.length > 0 && pathSegments?.map((segment, index) => ( -
- / - {segment} +
+
+ {collection?.name}
- ))} -
- {collection && /} + + {pathSegments?.length > 0 && pathSegments?.map((segment, index) => ( + + / +
+ {segment} +
+
+ ))} + + {collection && ( + / + )} + {filename} {showExtension && filename?.length ? (