From ea9e294c546f640b1bd9ecb9079ef0295447b68c Mon Sep 17 00:00:00 2001
From: Its-treason <39559178+Its-treason@users.noreply.github.com>
Date: Mon, 2 Oct 2023 19:50:01 +0200
Subject: [PATCH] feat(#245): Update tab design + Remove CSP

---
 .../ResponsePane/QueryResult/StyledWrapper.js |  9 +----
 .../ResponsePane/QueryResult/index.js         | 39 ++++++++++---------
 packages/bruno-electron/src/index.js          |  2 -
 3 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResult/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/QueryResult/StyledWrapper.js
index 18c1c5314..df65244d6 100644
--- a/packages/bruno-app/src/components/ResponsePane/QueryResult/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/QueryResult/StyledWrapper.js
@@ -3,14 +3,7 @@ import styled from 'styled-components';
 const StyledWrapper = styled.div`
   display: grid;
   grid-template-columns: 100%;
-  grid-template-rows: 50px calc(100% - 50px);
-
-  /* If there is only one element (the preview, not tabs) make it span over both grid rows */
-  > *:last-child:first-child {
-    grid-row: 1 / 3;
-    margin-top: 1.25rem;
-    height: calc(100% - 1.25rem);
-  }
+  grid-template-rows: 1.25rem calc(100% - 1.25rem);
 
   /* This is a hack to force Codemirror to use all available space */
   > div {
diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js b/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
index dd4c8a502..faa0e1e14 100644
--- a/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
@@ -63,23 +63,28 @@ const QueryResult = ({ item, collection, data, width, disableRunEventListener, h
   };
 
   const getTabClassname = (tabName) => {
-    return classnames(`tab select-none ${tabName}`, {
-      active: tabName === tab
+    return classnames(`select-none ${tabName}`, {
+      'text-yellow-500': tabName === tab,
+      'cursor-pointer': tabName !== tab,
     });
   };
 
-  const tabs = [(
-    <div className={getTabClassname('raw')} role="tab" onClick={() => setTab('raw')}>
-      Raw
-    </div>
-  )];
-  if (mode.includes('html')) {
-    tabs.push(
-      <div className={getTabClassname('preview')} role="tab" onClick={() => setTab('preview')}>
-        Preview
-      </div>
+  const getTabs = () => {
+    if (!mode.includes('html')) {
+      return null;
+    }
+
+    return (
+      <>
+        <div className={getTabClassname('raw')} role="tab" onClick={() => setTab('raw')}>
+          Raw
+        </div>
+        <div className={getTabClassname('preview')} role="tab" onClick={() => setTab('preview')}>
+          Preview
+        </div>
+      </>
     );
-  }
+  };
 
   const activeResult = useMemo(() => {
     if (tab === 'preview') {
@@ -108,11 +113,9 @@ const QueryResult = ({ item, collection, data, width, disableRunEventListener, h
 
   return (
     <StyledWrapper className="px-3 w-full h-full" style={{ maxWidth: width }}>
-      {tabs.length > 1 ? (
-        <div className="flex flex-wrap items-center px-3 tabs mb-3" role="tablist">
-          {tabs}
-        </div>
-      ) : null}
+      <div className="flex justify-end gap-2 text-xs" role="tablist">
+        {getTabs()}
+      </div>
       {activeResult}
     </StyledWrapper>
   );
diff --git a/packages/bruno-electron/src/index.js b/packages/bruno-electron/src/index.js
index 8f56d6461..ac2e92208 100644
--- a/packages/bruno-electron/src/index.js
+++ b/packages/bruno-electron/src/index.js
@@ -16,9 +16,7 @@ setContentSecurityPolicy(`
 	default-src * 'unsafe-inline' 'unsafe-eval';
 	script-src * 'unsafe-inline' 'unsafe-eval';
 	connect-src * 'unsafe-inline';
-	base-uri 'none';
 	form-action 'none';
-  img-src 'self' data:image/svg+xml;
 `);
 
 const menu = Menu.buildFromTemplate(menuTemplate);