💄improve css

MiaadTeam · Oct 18, 2023 · 617a3ca · 617a3ca
1 parent 2354625
commit 617a3ca
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 28 deletions.
diff --git a/src/server/playground/comp/History.tsx b/src/server/playground/comp/History.tsx
@@ -1,12 +1,11 @@
 /** @jsx h */
-import { h, useEffect, useState } from "../reactDeps.ts";
+import { Fragment, h, useEffect, useState, useRef } from "../reactDeps.ts";
 import { ConvertMilliseconds } from "../utils/convertMilliseconds.ts";
 import { useNonInitialEffect } from "./hooks/useNonInitialEffect.ts";
 import DeleteIcon from "./icon/deleteIcon.tsx";
 import DustbinIcon from "./icon/DustbinIcon.tsx";
 import { JSONViewer } from "./JSONVeiwer.tsx";
 import { useLesan } from "./ManagedLesanContext.tsx";
-
 export function History({
   setFormFromHistory,
 }: // ,localHistory
@@ -22,17 +21,14 @@ export function History({
   }, [history]);
 
   return (
-    <div className="history modal-content">
+    <Fragment>
       {history && history?.length > 0 ? (
-        <div className="">
+        <div>
           <br />
           {history.map((hi, index) => (
             <div className="container-detail" id={hi.id}>
               <section className="container-re">
-                <div
-                  style={{ position: "relative" }}
-                  // className="history-re-title_date "
-                >
+                <div style={{ position: "relative" }}>
                   <span className="container-re-title">REQUEST</span>
                   <span className="history-re-detail-date">{hi.reqDate}</span>
                 </div>
@@ -82,12 +78,14 @@ export function History({
                 <div
                   className="history-re-title_delete"
                   style={{ position: "relative" }}
-                  onClick={(event) => {
-                    event.stopPropagation();
-                    deleteItemHistory(index);
-                  }}
                 >
-                  <span className="history-re-delete">
+                  <span
+                    className="history-re-delete"
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      deleteItemHistory(index);
+                    }}
+                  >
                     <DeleteIcon />
                   </span>
                   <span className="container-re-title history-response-title">
@@ -143,14 +141,13 @@ export function History({
               }
             }}
           >
-            {" "}
             <DustbinIcon />
             <span className="tooltip-text">Clear History</span>
           </button>
         </div>
       ) : (
         ""
       )}
-    </div>
+    </Fragment>
   );
 }
diff --git a/src/server/playground/comp/icon/DustbinIcon.tsx b/src/server/playground/comp/icon/DustbinIcon.tsx
@@ -10,7 +10,6 @@ export default function Dustbin() {
       viewBox="0 0 105.7 122.88"
       width={20}
     >
-      {/* <title>Clear History</title> */}
       <path
         fill="white"
         d="M30.46,14.57V5.22A5.18,5.18,0,0,1,32,1.55v0A5.19,5.19,0,0,1,35.68,0H70a5.22,5.22,0,0,1,3.67,1.53l0,0a5.22,5.22,0,0,1,1.53,3.67v9.35h27.08a3.36,3.36,0,0,1,3.38,3.37V29.58A3.38,3.38,0,0,1,102.32,33H98.51l-8.3,87.22a3,3,0,0,1-2.95,2.69H18.43a3,3,0,0,1-3-2.95L7.19,33H3.37A3.38,3.38,0,0,1,0,29.58V17.94a3.36,3.36,0,0,1,3.37-3.37Zm36.27,0V8.51H39v6.06ZM49.48,49.25a3.4,3.4,0,0,1,6.8,0v51.81a3.4,3.4,0,1,1-6.8,0V49.25ZM69.59,49a3.4,3.4,0,1,1,6.78.42L73,101.27a3.4,3.4,0,0,1-6.78-.43L69.59,49Zm-40.26.42A3.39,3.39,0,1,1,36.1,49l3.41,51.8a3.39,3.39,0,1,1-6.77.43L29.33,49.46ZM92.51,33.38H13.19l7.94,83.55H84.56l8-83.55Z"

diff --git a/src/server/playground/css/index.css b/src/server/playground/css/index.css
@@ -1180,22 +1180,32 @@ textarea {
   bottom: 20px;
   right: 30px;
   z-index: 99;
-  font-size: 18px;
   border: none;
   outline: none;
-  background-color: red;
+  background: none;
+  color: white;
+}
+
+.myBtn-active {
+  border: none;
+  outline: none;
   color: white;
   cursor: pointer;
-  padding: 15px;
-  border-radius: 4px;
+  border-radius: 50%;
+  background-color: darkred;
+  width: 2.95rem;
+  height: 2.95rem;
+  border: 1px solid whiItesmoke;
+  cursor: pointer;
+  border-radius: 50%;
 }
 
 .none {
   display: none;
 }
 
-.myBtn:hover {
-  background-color: #555;
+.myBtn-active:hover {
+  background-color: rgb(190, 6, 6);
 }
 
 .detail-requests {
@@ -1610,6 +1620,8 @@ textarea {
   justify-content: space-between;
   align-items: baseline;
   color: white;
+  /* height: 350px;
+  overflow: scroll; */
 }
 
 .history-re-delete {
@@ -1716,20 +1728,21 @@ textarea {
 
 .clear-history {
   position: absolute;
-  bottom: 0;
-  right: 27px;
+  bottom: 20px;
+  /* right: 27px; */
+  left: 27px;
   display: flex;
   justify-content: end;
-  margin: 0 auto 5px auto;
-  padding: 10px 2px 10px 0;
+  /* margin: 0 auto 5px auto; */
+  /* padding: 10px 2px 10px 0; */
   z-index: 5;
 }
 
 .clear-history-button {
   border-radius: 50%;
   background-color: darkred;
-  width: 3.5rem;
-  height: 3.5rem;
+  width: 2.95rem;
+  height: 2.95rem;
   border: 1px solid whiItesmoke;
   cursor: pointer;
 }