feat(#245): Update tab design + Remove CSP

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 {

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>
   );

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);