Merge pull request sparrowapp-dev#1930 from Abhishek9503/feat/socket-…

…io-header-1893 feat: Udpated the UI part for socket-io header [sparrowapp-dev#1893]
harshvardhan-212 · Nov 1, 2024 · bc588a6 · bc588a6
2 parents f19174e + 49cdb41
commit bc588a6
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 82 deletions.
diff --git a/apps/@sparrow-desktop/src/styles/style.scss b/apps/@sparrow-desktop/src/styles/style.scss
@@ -107,26 +107,27 @@ $theme-grey-808080: #808080;
 $theme-grey-636566: #636566;
 $theme-grey-60616B: #60616b;
 $theme-grey-484848: #484848;
-$theme-grey-4D4D4D: #4D4D4D;
+$theme-grey-4D4D4D: #4d4d4d;
 $theme-grey-4e4e4e: #4e4e4e;
 $theme-grey-45494D: #45494d;
 $theme-grey-353646: #353646;
 $theme-grey-333333: #333333;
+$theme-grey-2d2d2d: #2d2d2d;
 $theme-grey-3E415A: #3e415a;
 $theme-grey-313233: #313233;
 $theme-grey-2B343D: #2b343d;
 $theme-grey-272727: #272727;
 $theme-grey-212222: #212222;
-$theme-grey-19191A: #19191A;
+$theme-grey-19191A: #19191a;
 $theme-grey-1A1A1A: #1a1a1a;
 $theme-grey-161617: #161617;
-$theme-grey-1E1E1E: #1E1E1E;
+$theme-grey-1E1E1E: #1e1e1e;
 $theme-grey-151515: #151515;
 $theme-grey-000000: #000000;
 $theme-grey-191919: #191919;
 $theme-grey-121212: #121212;
-$theme-grey-1D1D20: #1D1D20;
-
+$theme-grey-1D1D20: #1d1d20;
+$theme-grey-1B1B1B: #1b1b1b;
 
 $theme-blue-F5F6F8: #f5f6f8;
 $theme-blue-B0B0B0: #b0b0b0;
@@ -161,9 +162,6 @@ $theme-violet-1C1D2B: #1c1d2b;
 $theme-violet-363849: #363849;
 $theme-violet-2e2f3db2: #2e2f3db2;
 
-
-
-
 $theme-red-e5acb2: #e5acb2;
 $theme-red-fe8c98: #fe8c98;
 $theme-red-ff7878: #ff7878;
@@ -181,7 +179,6 @@ $theme-red-2B1C1D: #2b1c1d;
 $theme-green-8dc599: #8dc599;
 $theme-green-00A86B: #00a86b;
 
-
 :root {
   --tab-bar-hover: #{$sparrow-email-invite-bg-color};
   --blackColor: #{$sparrow-black};
@@ -313,10 +310,8 @@ $theme-green-00A86B: #00a86b;
   --text-tertiary-700: #{$theme-violet-1c1d27};
   --text-tertiary-750: #{$theme-violet-1C1D2B};
 
-
   --text-success-200: #{$theme-green-00A86B};
 
-
   --text-danger-100: #{$theme-red-e5acb2};
   --text-danger-200: #{$theme-red-fe8c98};
   --text-danger-300: #{$theme-red-ff7878};
@@ -369,6 +364,7 @@ $theme-green-00A86B: #00a86b;
   --bg-secondary-800: #{$theme-grey-151515};
   --bg-secondary-850: #{$theme-grey-121212};
   --bg-secondary-870: #{$theme-grey-1D1D20};
+  --bg-secondary-880: #{$theme-grey-1B1B1B};
   --bg-secondary-900: #{$theme-grey-000000};
   --bg-secondary-950: #{$theme-grey-808080};
   --bg-secondary-970: #{$theme-grey-1E1E1E};
@@ -422,6 +418,7 @@ $theme-green-00A86B: #00a86b;
   --border-secondary-295: #{$theme-grey-4e4e4e};
   --border-secondary-300: #{$theme-grey-636566};
   --border-secondary-310: #{$theme-grey-636566};
+  --border-secondary-315: #{$theme-grey-2d2d2d};
   --border-secondary-320: #{$theme-grey-353646};
   --border-secondary-400: #{$theme-grey-313233};
   --border-secondary-450: #{$theme-grey-191919};
@@ -443,11 +440,8 @@ $theme-green-00A86B: #00a86b;
   --border-tertiary-700: #{$theme-violet-1c1d27};
   --border-tertiary-750: #{$theme-violet-1C1D2B};
 
-
   --border-success-200: #{$theme-green-00A86B};
 
-
-
   --border-danger-100: #{$theme-red-e5acb2};
   --border-danger-200: #{$theme-red-fe8c98};
   --border-danger-300: #{$theme-red-ff7878};
@@ -520,57 +514,60 @@ $theme-green-00A86B: #00a86b;
 
 // $button-color: linear-gradient(270deg, #6147ff -1.72%, #1193f0 100%);
 
-$theme-colors: map-merge($theme-colors,
-    ("primaryColor": $theme-blue-3670F7,
-      "recentApiText": $sparrow-recentApiText,
-
-      "secondaryColor": $sparrow-yellow,
-      "blackColor": $sparrow-black,
-      "successColor": $sparrow-success,
-      "borderColor": $sparrow-error,
-      "defaultColor": $sparrow-default,
-      "dangerColor": $sparrow-danger,
-      "whiteColor": $sparrow-white,
-      "lightGray": $sparrow-light-gray,
-      "backgroundColor": $sparrow-background,
-      "backgroundLight": $sparrow-background-light,
-      "backgroundDark": $sparrow-background-dark,
-      "backgroundDropdown": $sparrow-background-dropdown,
-      "plusButton": $sparrow-plusbutton,
-      "lightBackground": $sparrow-border-color,
-      "requestBodyColor": $sparrow-request-body,
-      "labelColor": $sparrow-send-button,
-      "buttonBackColor": $sparrow-button-background,
-      "buttonColor": $sparrow-button-color,
-      "redColor": $sparrow-gradient,
-      "getColor": $sparrow-get,
-      "putColor": $sparrow-put,
-      "postColor": $sparrow-post,
-      "deleteColor": $sparrow-delete,
-      "headColor": $sparrow-head,
-      "patchColor": $sparrow-patc,
-      "optionsColor": $sparrow-opt,
-      "textColor": $sparrow-text-color,
-      "keyValuePairColor": $sparrow-key-value-pair,
-      "dullBackground": $sparrow-dull-background,
-      "sparrowBottomBorder": $sparrow-bottom-border,
-      "emailInviteBackgroundColor": $sparrow-email-invite-bg-color,
-      "dropdownBorderColor": $sparrow-dropdown-border-color,
-      "activeSyncBtn": $sparrow-active-sync,
-      "dropdownButton": $sparrow-dropdown,
-      "dropdownHover": $sparrow-dropdown-hover,
-      "dropdownContainer": $sparrow-dropdown-container,
-      "dropdownOptionHover": $sparrow-dropdown-option-hover,
-      "dropdownOptionActive": $sparrow-dropdown-option-active,
-      "saveButtonLine": $sparrow-send-button-line,
-
-      "sparrowBgContainer": $sparrow-bg-container,
-      "sparrowBgContainerBorder": $sparrow-bg-container-border,
-      "sparrowBgContainerOne": $sparrow-bg-container-one,
-      "sparrowBgContainerTwo": $sparrow-bg-container-two,
-      "sparrowBgContainerThree": $sparrow-bg-container-three,
-      "sparrowBgContainerFour": $sparrow-bg-container-four,
-    ));
+$theme-colors: map-merge(
+  $theme-colors,
+  (
+    "primaryColor": $theme-blue-3670F7,
+    "recentApiText": $sparrow-recentApiText,
+
+    "secondaryColor": $sparrow-yellow,
+    "blackColor": $sparrow-black,
+    "successColor": $sparrow-success,
+    "borderColor": $sparrow-error,
+    "defaultColor": $sparrow-default,
+    "dangerColor": $sparrow-danger,
+    "whiteColor": $sparrow-white,
+    "lightGray": $sparrow-light-gray,
+    "backgroundColor": $sparrow-background,
+    "backgroundLight": $sparrow-background-light,
+    "backgroundDark": $sparrow-background-dark,
+    "backgroundDropdown": $sparrow-background-dropdown,
+    "plusButton": $sparrow-plusbutton,
+    "lightBackground": $sparrow-border-color,
+    "requestBodyColor": $sparrow-request-body,
+    "labelColor": $sparrow-send-button,
+    "buttonBackColor": $sparrow-button-background,
+    "buttonColor": $sparrow-button-color,
+    "redColor": $sparrow-gradient,
+    "getColor": $sparrow-get,
+    "putColor": $sparrow-put,
+    "postColor": $sparrow-post,
+    "deleteColor": $sparrow-delete,
+    "headColor": $sparrow-head,
+    "patchColor": $sparrow-patc,
+    "optionsColor": $sparrow-opt,
+    "textColor": $sparrow-text-color,
+    "keyValuePairColor": $sparrow-key-value-pair,
+    "dullBackground": $sparrow-dull-background,
+    "sparrowBottomBorder": $sparrow-bottom-border,
+    "emailInviteBackgroundColor": $sparrow-email-invite-bg-color,
+    "dropdownBorderColor": $sparrow-dropdown-border-color,
+    "activeSyncBtn": $sparrow-active-sync,
+    "dropdownButton": $sparrow-dropdown,
+    "dropdownHover": $sparrow-dropdown-hover,
+    "dropdownContainer": $sparrow-dropdown-container,
+    "dropdownOptionHover": $sparrow-dropdown-option-hover,
+    "dropdownOptionActive": $sparrow-dropdown-option-active,
+    "saveButtonLine": $sparrow-send-button-line,
+
+    "sparrowBgContainer": $sparrow-bg-container,
+    "sparrowBgContainerBorder": $sparrow-bg-container-border,
+    "sparrowBgContainerOne": $sparrow-bg-container-one,
+    "sparrowBgContainerTwo": $sparrow-bg-container-two,
+    "sparrowBgContainerThree": $sparrow-bg-container-three,
+    "sparrowBgContainerFour": $sparrow-bg-container-four,
+  )
+);
 
 // Define a map for font sizes in pixels
 $sparrow-font-sizes: (
@@ -945,4 +942,4 @@ textarea {
 button:disabled {
   pointer-events: none !important;
   opacity: 0.7;
-}
+}
diff --git a/packages/@sparrow-workspaces/src/components/tabular-input/LazyElement.svelte b/packages/@sparrow-workspaces/src/components/tabular-input/LazyElement.svelte
@@ -49,11 +49,12 @@
 >
   {#if isInView}
     <div
-      style="padding-top: 1px;  display: flex;flex-direction: column;width:100%;"
+      class=""
+      style="padding-left:7px; padding-top: 1px;  display: flex;flex-direction: column;width:100%; border-bottom:1px solid var(--border-secondary-315);"
     >
       <div
         class="d-flex w-100 align-items-center justify-content-center gap-3 pair-container"
-        style="padding-top:3px; padding-bottom:3px; height:24px;"
+        style="padding-top:3px; padding-bottom:3px; height:24px;  "
       >
         <div style="width:30px; height: 14px;">
           {#if pairs.length - 1 != index || !isInputBoxEditable}

diff --git a/packages/@sparrow-workspaces/src/components/tabular-input/TabularInput.svelte b/packages/@sparrow-workspaces/src/components/tabular-input/TabularInput.svelte
@@ -273,13 +273,13 @@
 <div class="outer-section">
   {#if !isBulkEditActive}
     <div
-      class="mb-0 me-0 w-100 bg-secondary-700 ps-3 py-0 border-radius-2 section-layout"
+      class="mb-0 me-0 w-100 bg-secondary-700 py-0 border-radius-2 section-layout"
     >
       <div
-        class="d-flex gap-3 py-1 mb-1 align-items-center w-100 ps-2 {!isTopHeaderRequired
+        class="d-flex gap-3 py-1 mb-1 align-items-center w-100 ps-3 {!isTopHeaderRequired
           ? 'd-none'
           : ''}"
-        style="height:26px;"
+        style="height:26px;  background-color:var(--bg-secondary-880);"
       >
         <div style="width:30px;">
           <!-- <input
@@ -300,7 +300,7 @@
         </div>
         <div
           class="d-flex pair-title bg-secondary-700 align-items-center w-100"
-          style="font-size: 12px; font-weight: 500;"
+          style="font-size: 12px; font-weight: 500;  background-color:var(--bg-secondary-880);"
         >
           <p
             class="mb-0 w-50 text-secondary-200 text-fs-12 p-1 ps-1"
@@ -309,7 +309,7 @@
             Key
           </p>
           <p
-            class="mb-0 w-50 text-secondary-200 text-fs-12 p-1 ps-0 ms-3"
+            class="mb-0  w-50 text-secondary-200 text-fs-12 p-1 ps-1 ms-3"
             style="font-weight: 1000;"
           >
             Value

diff --git a/packages/@sparrow-workspaces/src/components/tabular-input/TabularInputFormData.svelte b/packages/@sparrow-workspaces/src/components/tabular-input/TabularInputFormData.svelte
@@ -163,14 +163,15 @@
 </script>
 
 <div
-  class="mb-0 me-0 w-100 bg-secondary-700 ps-3 py-0 border-radius-2 section-layout"
+  class="mb-0 me-0 w-100 bg-secondary-700  py-0 border-radius-2 section-layout"
 >
   <div
-    class="d-flex gap-3 align-items-center w-100 {!isTopHeaderRequired
+    class="d-flex gap-3 ps-3 align-items-center w-100 {!isTopHeaderRequired
       ? 'd-none'
       : ''}"
+    style="background-color:var(--bg-secondary-880);"
   >
-    <div style="width:30px; margin-left: 5px;">
+    <div style="width:30px; margin-left: 5px;  ">
       <label class="container">
         <input
           type="checkbox"
@@ -183,7 +184,7 @@
     </div>
     <div
       class="d-flex pair-title bg-secondary-700 align-items-center w-100"
-      style="font-size: 12px; font-weight: 500;"
+      style="font-size: 12px; font-weight: 500; background-color:var(--bg-secondary-880);"
     >
       <p class="mb-0 w-50 text-secondary-200 text-fs-12 p-1 ps-2">Key</p>
       <p class="mb-0 w-50 text-secondary-200 text-fs-12 p-1">Value</p>
@@ -218,11 +219,13 @@
   </div>
 
   <div
-    class="w-100"
+    class="w-100 "
     style="display:block; position:relative;
-      width:200px;
+      width:200px;    
       "
   >
+
+
     {#if readable.key || readable.value}
       <div
         aria-label="Toggle Hover"
@@ -277,8 +280,9 @@
       {#each pairs as element, index}
         <div
           aria-label="Toggle Hover"
-          class="sortable > div pair-container"
-          style=" width:100%;"
+          class="sortable > div pair-container ps-3"
+          style=" width:100%; border-bottom:1px solid var(--border-secondary-315);
+  "
           data-list-key={JSON.stringify({
             name: element.key,
             description: element.value,

diff --git a/...paces/src/features/socketio-explorer/components/request-navigator/RequestNavigator.svelte b/...paces/src/features/socketio-explorer/components/request-navigator/RequestNavigator.svelte
@@ -79,7 +79,7 @@
           ><span>{tab.name}</span>
           {#if tab.count}
             <span class="ms-1"></span>
-            <Label number={tab.count} />
+            <Label textColor={"var(--text-primary-300)"}  backgroundColor={"var(--bg-tertiary-300)"} number={tab.count} />
           {/if}
         </span>
       </button>