chore: minor style updates

packages/grafnode-components/src/components/RequestTabs/StyledWrapper.js

@@ -25,8 +25,6 @@ const Wrapper = styled.div`
 
       .tab-container {
         border-left: 1px solid #dcdcdc;
-        padding-left: 12px;
-        padding-right: 12px;
       }
 
       &.active {
@@ -55,10 +53,13 @@ const Wrapper = styled.div`
         .close-icon {
           color: #9f9f9f;
           width: 8px;
+          padding-bottom: 3px;
+          padding-top: 3px;
         }
 
         &:hover .close-icon{
           color: rgb(142, 68, 173);
+          transform: scale(1.1);
         }
       }
 

packages/grafnode-components/src/components/RequestTabs/index.js

@@ -55,12 +55,12 @@ const RequestTabs = ({actions, dispatch, activeRequestTabId, requestTabs}) => {
           {requestTabs && requestTabs.length ? requestTabs.map((rt, index) => {
             return <li key={rt.id} className={getTabClassname(rt, index)} role="tab" onClick={() => handleClick(rt)}>
               <div className="flex items-center justify-between tab-container">
-                <div className="flex items-center tab-label">
+                <div className="flex items-center tab-label pl-3">
                   <span className="tab-method" style={{color: getMethodColor(rt.method)}}>{rt.method}</span>
                   <span className="text-gray-700 ml-1 tab-name">{rt.name}</span>
                 </div>
                 {rt.id === activeRequestTabId ? (
-                  <div className="flex pl-2 close-icon-container" onClick={(e) => handleCloseClick(e, rt)}>
+                  <div className="flex pl-2 pr-2 close-icon-container" onClick={(e) => handleCloseClick(e, rt)}>
                     <svg focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" className="close-icon">
                       <path fill="currentColor" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path>
                     </svg>

packages/grafnode-components/src/components/Sidebar/index.js

@@ -45,20 +45,21 @@ const Sidebar = ({collections, actions, dispatch, activeRequestTabId}) => {
         <span className="ml-2">Collections</span>
         <div className="collection-dropdown flex flex-grow items-center justify-end">
           <Dropdown onCreate={onMenuDropdownCreate} icon={<MenuIcon />} placement='bottom-start'>
-            <div>
-              <div className="dropdown-item" onClick={(e) => {
-                menuDropdownTippyRef.current.hide();
-                setModalOpen(true);
-              }}>
-                Create Collection
-              </div>
+            <div className="dropdown-item" onClick={(e) => {
+              menuDropdownTippyRef.current.hide();
+              setModalOpen(true);
+            }}>
+              Create Collection
             </div>
-            <div>
-              <div className="dropdown-item" onClick={(e) => {
-                menuDropdownTippyRef.current.hide();
-              }}>
-                Settings
-              </div>
+            <div className="dropdown-item" onClick={(e) => {
+              menuDropdownTippyRef.current.hide();
+            }}>
+              Import Collection
+            </div>
+            <div className="dropdown-item" onClick={(e) => {
+              menuDropdownTippyRef.current.hide();
+            }}>
+              Settings
             </div>
           </Dropdown>
         </div>

packages/grafnode-run/src/pageComponents/Main/StyledWrapper.js

@@ -8,6 +8,7 @@ const Wrapper = styled.div`
 
   aside {
     min-width: 230px;
+    width: 230px;
     border-right: solid 1px #e1e1e1;
     background-color: #F6F8FA;
   }