Merge pull request #928 from isha-dubey/fix/consistency-of-hovering-e…

…ffect-all-over-app [staging] fix : add hovering effects in different places [123]
sparrowapp-dev · Jun 3, 2024 · 9a5e0a2 · 9a5e0a2
2 parents b05864e + ce516f0
commit 9a5e0a2
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 21 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
@@ -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
@@ -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
@@ -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/...s/@workspaces/features/collection-list/components/empty-collection/EmptyCollection.svelte b/...s/@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
@@ -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
@@ -148,13 +148,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>
@@ -164,7 +164,8 @@
       style="height: 18px; width: 1px; background-color: var(--tab-request-divider-line) ; top: 10px; right: 0;"
     />
   {/if}
-</button>
+  </div></button
+>
 
 <style>
   * {
@@ -194,5 +195,9 @@
   .individual-tab:hover .request-text {
     color: var(--text-secondary-100) !important;
   }
-  
+
+  .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
@@ -8,22 +8,22 @@
   import VerticalGrid from "@library/icons/VerticalGrid.svelte";
   import SplitVerital from "@workspaces/features/tab-bar/assets/SplitVertical.svg";
   import SplitHorizontal from "@workspaces/features/tab-bar/assets/SplitHorizontal.svg";
-
+ 
   // ---- Store
   import { collapsibleState } from "$lib/store/request-response-section";
-
+ 
   // ---- Interface
   import type { TabDocument } from "@app/database/database";
-
+ 
   // ---- Component
   import Tab from "@workspaces/features/tab-bar/components/tab/Tab.svelte";
   import { Dropdown } from "@library/ui";
-
+ 
   // ---- Helper
   import { moveNavigation, tabBarScroller } from "$lib/utils/helpers/navigation";
   import Button from "@library/ui/button/Button.svelte";
   import { requestSplitterDirection } from "@workspaces/features/rest-explorer/store";
-
+ 
   // ------ Props ------
   /**
    * List of tabs
@@ -59,23 +59,23 @@
    * @param id - Tab ID
    */
   export let onTabSelected: (id: string) => void;
-
+ 
   export let onChangeViewInRequest: (view: string) => void;
-
+ 
   $: {
     if (tabList) {
       scrolable = tabList.length * 182 >= scrollerParent;
     }
   }
-
+ 
   let tabWidth: number = 182;
   let scrolable: boolean = false;
   let scrollerParent: number;
   let scrollerWidth: number;
   let moreOption: boolean = false;
   let viewChange: boolean = false;
 </script>
-
+ 
 <button
   class="tab border-0 w-100 bg-blackColor d-flex"
   style="cursor: default;"
@@ -236,19 +236,20 @@
     </div>
   </div>
 </button>
-
+ 
 <style>
   * {
-    transition: all 300ms;   
+    transition: all 300ms;  
   }
   .tabbar {
     height: 35px;
     background-color: var(--sparrow-black);
-  
-    
+ 
+   
   }
-
+ 
   .tab-scroller::-webkit-scrollbar {
     display: none;
   }
 </style>
+