From d59f3499adf71c9bf137edc6c404167d0a8647c1 Mon Sep 17 00:00:00 2001
From: serpico1899 <billywilder222@gmail.com>
Date: Wed, 1 Nov 2023 09:44:22 +0330
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84improve=20css=20in=20e2e=20componen?=
 =?UTF-8?q?t?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/server/playground/comp/E2E.tsx            | 88 ++++++++++---------
 src/server/playground/comp/SequenceSlider.tsx |  4 +-
 src/server/playground/css/index.css           |  4 +-
 3 files changed, 49 insertions(+), 47 deletions(-)

diff --git a/src/server/playground/comp/E2E.tsx b/src/server/playground/comp/E2E.tsx
index 87307d12..1e3a023f 100644
--- a/src/server/playground/comp/E2E.tsx
+++ b/src/server/playground/comp/E2E.tsx
@@ -451,14 +451,14 @@ export function E2E({ baseUrl }: { baseUrl: string; bodyHeaders?: string }) {
               </div>
               <div className="information-container--request--sections">
                 <p className="information-container--request--sections--item">
-                  All Success Request:{" "}
+                  All <span className="e2e-success">Success</span> Request:{" "}
                   <span className="information-container--request--sections--item--content">
                     {requestDetail.success}{" "}
                   </span>{" "}
                   times
                 </p>
                 <p className="information-container--request--sections--item">
-                  All Fails Request :{" "}
+                  All <span className="e2e-fail">Fails</span> Request :{" "}
                   <span className="information-container--request--sections--item--content">
                     {requestDetail.fails}{" "}
                   </span>
@@ -466,7 +466,6 @@ export function E2E({ baseUrl }: { baseUrl: string; bodyHeaders?: string }) {
                 </p>
               </div>
             </div>
-
             <div className="information-container--times">
               <span className="information-container-label">Times</span>{" "}
               <ul className="information-container--times--sections">
@@ -541,47 +540,50 @@ export function E2E({ baseUrl }: { baseUrl: string; bodyHeaders?: string }) {
                 </li>
               </ul>
             </div>
-
-            <div className="information-container--captures">
-              <span className="information-container-label">
-                Captures Information
-              </span>{" "}
-              {requestDetail.allCaptureItems.map((ci) => (
-                <ul className="information-container--captures--sections">
-                  <span className="information-container-label">{ci.key}</span>
-                  <li>
-                    Captured From:{" "}
-                    <span className="information-container--request--sections--item--content">
-                      {ci.captured}
-                    </span>
-                  </li>
-                  <li>
-                    Value Of{" "}
-                    <span className="information-container--request--sections--item--content">
-                      : {ci.value}
-                    </span>
-                  </li>
-                  <li>
-                    Model :{" "}
-                    <span className="information-container--request--sections--item--content">
-                      {ci.model}
+            {requestDetail.allCaptureItems.length > 0 && (
+              <div className="information-container--captures">
+                <span className="information-container-label">
+                  Captures Information
+                </span>{" "}
+                {requestDetail.allCaptureItems.map((ci) => (
+                  <ul className="information-container--captures--sections">
+                    <span className="information-container-label">
+                      {ci.key}
                     </span>
-                  </li>
-                  <li>
-                    Act :{" "}
-                    <span className="information-container--request--sections--item--content">
-                      {ci.act}
-                    </span>
-                  </li>
-                  <li>
-                    Captured Inside Sequnce Index:{" "}
-                    <span className="information-container--request--sections--item--content">
-                      {ci.sequenceIdx}
-                    </span>
-                  </li>
-                </ul>
-              ))}
-            </div>
+                    <li>
+                      Captured From:{" "}
+                      <span className="information-container--request--sections--item--content">
+                        {ci.captured}
+                      </span>
+                    </li>
+                    <li>
+                      Value Of{" "}
+                      <span className="information-container--request--sections--item--content">
+                        : {ci.value}
+                      </span>
+                    </li>
+                    <li>
+                      Model :{" "}
+                      <span className="information-container--request--sections--item--content">
+                        {ci.model}
+                      </span>
+                    </li>
+                    <li>
+                      Act :{" "}
+                      <span className="information-container--request--sections--item--content">
+                        {ci.act}
+                      </span>
+                    </li>
+                    <li>
+                      Captured Inside Sequnce Index:{" "}
+                      <span className="information-container--request--sections--item--content">
+                        {ci.sequenceIdx}
+                      </span>
+                    </li>
+                  </ul>
+                ))}
+              </div>
+            )}
           </div>
 
           <div className="e2e-sequesnce-wrapper">
diff --git a/src/server/playground/comp/SequenceSlider.tsx b/src/server/playground/comp/SequenceSlider.tsx
index 11415407..334ad071 100644
--- a/src/server/playground/comp/SequenceSlider.tsx
+++ b/src/server/playground/comp/SequenceSlider.tsx
@@ -34,10 +34,10 @@ export function SequenceSlider({ sequence }: { sequence: TSequenceDetail }) {
                 <span>
                   All Request Count: <span>{sequence.repeat}</span>{" "}
                 </span>
-                <span>
+                <span className="e2e-success">
                   Success:<span> {sequence.success}</span>
                 </span>
-                <span>
+                <span className="e2e-fail">
                   Fails: <span>{sequence.fails}</span>
                 </span>
                 <span>
diff --git a/src/server/playground/css/index.css b/src/server/playground/css/index.css
index fbec625a..013f8af4 100644
--- a/src/server/playground/css/index.css
+++ b/src/server/playground/css/index.css
@@ -1287,11 +1287,11 @@ textarea {
 }
 
 .e2e-success {
-  color: #008f00;
+  color: #00b800;
 }
 
 .e2e-fail {
-  color: #b80000;
+  color: #c00;
 }
 
 .detail-sequence--sections {