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 ? (