chore: pr #766 ux polish

packages/bruno-app/src/components/ResponsePane/ResponseSave/StyledWrapper.js

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
   font-size: 0.8125rem;
+  color: ${(props) => props.theme.requestTabPanel.responseStatus};
 `;
 
 export default StyledWrapper;

packages/bruno-app/src/components/ResponsePane/ResponseSave/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import StyledWrapper from './StyledWrapper';
 import toast from 'react-hot-toast';
 import get from 'lodash/get';
+import { IconDownload } from '@tabler/icons';
 
 const ResponseSave = ({ item }) => {
   const { ipcRenderer } = window;
@@ -21,9 +22,9 @@ const ResponseSave = ({ item }) => {
   };
 
   return (
-    <StyledWrapper className="ml-4">
-      <button onClick={saveResponseToFile} disabled={!response.dataBuffer}>
-        Save Response
+    <StyledWrapper className="ml-4 flex items-center">
+      <button onClick={saveResponseToFile} disabled={!response.dataBuffer} title="Save response to file">
+        <IconDownload size={16} strokeWidth={1.5} />
       </button>
     </StyledWrapper>
   );

packages/bruno-app/src/components/ResponsePane/StatusCode/index.js

@@ -6,7 +6,7 @@ import StyledWrapper from './StyledWrapper';
 // Todo: text-error class is not getting pulled in for 500 errors
 const StatusCode = ({ status }) => {
   const getTabClassname = (status) => {
-    return classnames('', {
+    return classnames('ml-2', {
       'text-ok': status >= 100 && status < 200,
       'text-ok': status >= 200 && status < 300,
       'text-error': status >= 300 && status < 400,

packages/bruno-app/src/components/ResponsePane/index.js

@@ -113,10 +113,10 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
         </div>
         {!isLoading ? (
           <div className="flex flex-grow justify-end items-center">
+            <ResponseSave item={item} />
             <StatusCode status={response.status} />
             <ResponseTime duration={response.duration} />
             <ResponseSize size={response.size} />
-            <ResponseSave item={item} />
           </div>
         ) : null}
       </div>