From 272885d13eb64a1e7ddfa493ac7627b007f25012 Mon Sep 17 00:00:00 2001
From: Isha Dubey <ishadubey36@gmail.com>
Date: Fri, 31 May 2024 18:57:19 +0530
Subject: [PATCH] fix : add hovering effects in different places [123]

---
 .../components/list-item/ListItem.svelte      |  2 +-
 .../layout/EnvironmentList.svelte             |  5 ++
 .../common/utils/url-input-theme.ts           |  4 +
 .../empty-collection/EmptyCollection.svelte   |  3 +
 .../layout/CollectionList.svelte              |  2 +-
 .../tab-bar/components/tab/Tab.svelte         | 10 ++-
 .../features/tab-bar/layout/TabBar.svelte     | 82 ++++++++++++++-----
 7 files changed, 84 insertions(+), 24 deletions(-)

diff --git a/src/packages/@environments/features/environment-list/components/list-item/ListItem.svelte b/src/packages/@environments/features/environment-list/components/list-item/ListItem.svelte
index 2f7893e64..246e749ad 100644
--- a/src/packages/@environments/features/environment-list/components/list-item/ListItem.svelte
+++ b/src/packages/@environments/features/environment-list/components/list-item/ListItem.svelte
@@ -315,7 +315,7 @@
       background-color: var(--bg-secondary-400);
     }
     .threedot-icon-container:hover {
-      background-color: var(--bg-secondary-400);
+      background-color: var( --text-tertiary-600);
     }
 
     .btn-primary {
diff --git a/src/packages/@environments/features/environment-list/layout/EnvironmentList.svelte b/src/packages/@environments/features/environment-list/layout/EnvironmentList.svelte
index ebeee35d5..af61df082 100644
--- a/src/packages/@environments/features/environment-list/layout/EnvironmentList.svelte
+++ b/src/packages/@environments/features/environment-list/layout/EnvironmentList.svelte
@@ -241,6 +241,11 @@
   }
   .add-environment {
     border: 1px solid var(--text-secondary-300);
+    border-radius: 2px;
     height: 32px;
   }
+  .add-environment:hover{
+    border: 1px solid var(--border-primary-300);
+    border-radius: 2px;
+  }
 </style>
diff --git a/src/packages/@workspaces/common/utils/url-input-theme.ts b/src/packages/@workspaces/common/utils/url-input-theme.ts
index c5266fd3e..93d784f9d 100644
--- a/src/packages/@workspaces/common/utils/url-input-theme.ts
+++ b/src/packages/@workspaces/common/utils/url-input-theme.ts
@@ -58,6 +58,10 @@ export class UrlInputTheme {
         fontSize: "12px",
         fontWeight: "400",
       },
+      "&.cm-editor:hover": {
+        border: "1px solid var(--border-primary-200)",
+        borderRadius: "0",
+      },
       "&.cm-editor.cm-focused": {
         border: "1px solid var(--border-primary-200)",
         borderRadius: "0",
diff --git a/src/packages/@workspaces/features/collection-list/components/empty-collection/EmptyCollection.svelte b/src/packages/@workspaces/features/collection-list/components/empty-collection/EmptyCollection.svelte
index a1ef35c5e..abc520acb 100644
--- a/src/packages/@workspaces/features/collection-list/components/empty-collection/EmptyCollection.svelte
+++ b/src/packages/@workspaces/features/collection-list/components/empty-collection/EmptyCollection.svelte
@@ -49,4 +49,7 @@
     border: 1px solid var(--text-secondary-300);
     height: 32px;
   }
+  .add-collection:hover{
+    border: 1px solid var(--text-primary-300);
+  }
 </style>
diff --git a/src/packages/@workspaces/features/collection-list/layout/CollectionList.svelte b/src/packages/@workspaces/features/collection-list/layout/CollectionList.svelte
index cee93e58c..92046d3d9 100644
--- a/src/packages/@workspaces/features/collection-list/layout/CollectionList.svelte
+++ b/src/packages/@workspaces/features/collection-list/layout/CollectionList.svelte
@@ -220,7 +220,7 @@
           handleSearch();
         }}
         defaultBorderColor="transparent"
-        hoveredBorderColor="transparent"
+        hoveredBorderColor="var(--border-primary-300)"
         focusedBorderColor={"var(--border-primary-300)"}
         class="text-fs-12 bg-tertiary-400 border-radius-2 ellipsis fw-normal px-2"
         style="outline:none;"
diff --git a/src/packages/@workspaces/features/tab-bar/components/tab/Tab.svelte b/src/packages/@workspaces/features/tab-bar/components/tab/Tab.svelte
index aa217cf4c..4d918b1ad 100644
--- a/src/packages/@workspaces/features/tab-bar/components/tab/Tab.svelte
+++ b/src/packages/@workspaces/features/tab-bar/components/tab/Tab.svelte
@@ -153,13 +153,13 @@
     {/if}
 
     <button
-      class="{!(tab?.property?.request && !tab?.isSaved) && !tab.isActive
+      class="cross-icon-btn {!(tab?.property?.request && !tab?.isSaved) && !tab.isActive
         ? 'inactive-close-btn'
-        : ''} btn border-0 d-flex align-items-center px-1"
+        : ''} btn  d-flex align-items-center px-1"
       on:click={() => {
         onTabClosed(tab.id, tab);
       }}
-      style="overflow:hidden; height: 31px;"
+      style="overflow:hidden; height: 18px; width:22px; margin-top:7px; margin-bottom:6px;"
     >
       <Crossicon />
     </button>
@@ -230,4 +230,8 @@
     position: relative;
     transition-delay: 2s;
   }
+  .cross-icon-btn:hover{
+    background-color: var(--text-tertiary-300);
+    border-radius: 2px;
+  }
 </style>
diff --git a/src/packages/@workspaces/features/tab-bar/layout/TabBar.svelte b/src/packages/@workspaces/features/tab-bar/layout/TabBar.svelte
index 12aeb70bb..64c84a6de 100644
--- a/src/packages/@workspaces/features/tab-bar/layout/TabBar.svelte
+++ b/src/packages/@workspaces/features/tab-bar/layout/TabBar.svelte
@@ -89,7 +89,8 @@
     bind:offsetWidth={scrollerParent}
   >
     {#if scrolable}
-      <div class="d-inline-block" style="height:35px; width:35px;">
+      <div class="d-inline-block m-1" style="height:35px; width:35px;">
+        <div class="right-btn mt-1 ">
         <Button
           onClick={() => {
             moveNavigation("left");
@@ -100,6 +101,7 @@
           buttonClassProp={"btn border-0 ps-1 pe-1 py-0 h-100 w-100"}
         />
       </div>
+      </div>
     {/if}
     <button
       on:dragover|preventDefault
@@ -124,22 +126,24 @@
     </button>
     {#if scrolable}
       <div
-        class="d-inline-block position-relative"
+        class="d-inline-block position-relative p-1"
         style="height:35px; width:35px;"
       >
         <div
           class="position-absolute"
           style="height: 18px; width: 1px; background-color: var(--tab-request-divider-line) ; top: 10px; left: 0;"
         />
+        <div class="left-btn  mt-1" >
         <Button
           title=""
           onClick={() => {
             moveNavigation("right");
           }}
-          buttonClassProp={"btn border-0 ps-1 pe-1 py-auto h-100 w-100"}
+          buttonClassProp={"btn border-0  ps-1 pe-1 py-0 "}
           buttonStartIconStyle={"height: 12px !important; transform: rotate(180deg); margin: 0 !important;"}
           buttonStartIcon={angleLeft}
         />
+      </div>
         <div
           class="position-absolute"
           style="height: 18px; width: 1px; background-color: var(--tab-request-divider-line) ; top: 10px; right: 0;"
@@ -156,16 +160,18 @@
         />
       </div>
     {/if}
-    <div class="d-inline-flex" style="height:35px; width:35px;">
-      <Button
+    <div class="" style="height:35px; width:35px;">
+      <div class="plus-button-tab d-flex justify-content-center align-items-center ">
+        <Button
         title=""
         onClick={onNewTabRequested}
-        buttonClassProp={"btn border-0 ps-1 pe-1 pt-1 py-0 h-100 w-100"}
+        buttonClassProp={"btn border-0 mb-1 ps-0 py-0 h-100 w-100"}
         buttonStartIconStyle={"height: 25px !important; width: 25px !important; margin: auto 0;"}
         buttonStartIcon={plusIcon}
       />
+      </div>
     </div>
-    <div class="d-flex ms-auto my-auto me-2">
+    <div class="d-flex ms-auto my-auto me-2 ">
       <Dropdown
         buttonId="viewChange"
         bind:isMenuOpen={viewChange}
@@ -184,19 +190,21 @@
           },
         ]}
       >
+      <div class="btn-div">
         <button
-          id="viewChange"
-          class="border-0 bg-transparent pt-1 rounded"
-          on:click={() => {
-            viewChange = !viewChange;
-          }}
-        >
-          {#if $requestSplitterDirection === "horizontal"}
-            <ViewGrid color={"var(--text-primary-400)"} height={15} />
-          {:else}
-            <VerticalGrid height={15} color="var(--blackColor)" />
-          {/if}
-        </button>
+        id="viewChange"
+        class="view-Change border-0 bg-transparent  rounded"
+        on:click={() => {
+          viewChange = !viewChange;
+        }}
+      >
+        {#if $requestSplitterDirection === "horizontal"}
+          <ViewGrid color={"var(--text-primary-400)"} height={14} />
+        {:else}
+          <VerticalGrid height={15} color="var(--blackColor)" />
+        {/if}
+      </button>
+      </div>
       </Dropdown>
       <Dropdown
         buttonId="moreOptions"
@@ -249,4 +257,40 @@
   .tab-scroller::-webkit-scrollbar {
     display: none;
   }
+  .btn-div{
+    margin-top: 4px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 2px;
+  }
+  .btn-div:hover{  
+    background-color: var(--text-tertiary-300 ) !important;
+  }
+  .plus-button-tab:hover{ 
+    background-color: var(--text-tertiary-300 ) !important;
+  }
+  .plus-button-tab{
+    height: 21px;
+    width: 77%;
+    margin-top: 9.5px;
+    margin-left: 6px;
+    border-radius: 2px;
+  }
+  .view-Change{
+    padding: 1px;
+  }
+  .right-btn:hover{
+    background-color: var(--text-tertiary-300 ) !important;
+    border-radius: 2px;
+  }
+  .left-btn{
+    height: 24px;
+    width: 24px;
+  }
+  .left-btn:hover{
+   
+    background-color: var(--text-tertiary-300 ) !important;
+    border-radius: 2px;
+  }
 </style>