Details page improvements (#13)

- Improve overlay layout - Change link to button
Orbitalize · Aug 17, 2023 · 5c3f3e5 · 5c3f3e5
1 parent ac9b32d
commit 5c3f3e5
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 16 deletions.
diff --git a/reports/src/App.css b/reports/src/App.css
@@ -40,4 +40,14 @@ th {
   th {
     background-color: dimgray;
   }
+}
+
+.detailOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: white;
+  overflow: scroll;
 }
diff --git a/reports/src/capability/CapabilityTable.tsx b/reports/src/capability/CapabilityTable.tsx
@@ -40,26 +40,17 @@ export const CheckRow = ({ check }: { check: Check }) => {
         {check.result === "pass" ? "PASS" : "FAIL"}
       </td>
       <td>
-        <a onClick={() => setShowDetails(true)}>Link</a>
+        <button onClick={() => setShowDetails(true)}>Open</button>
         {/* TODO: Beautify popup / move to a dedicated page */}
         {showDetails && (
-          <div
-            style={{
-              position: "absolute",
-              top: 0,
-              left: 0,
-              width: "100%",
-              height: "100%",
-              background: "#fff",
-            }}
-          >
-            <a onClick={() => setShowDetails(false)}>
+          <div className="detailOverlay">
+            <div onClick={() => setShowDetails(false)}>
               <i>Click anywhere to close.</i>
               <h2>
                 {check.name} was evaluated in step {check.step.name}. Details:
               </h2>
               <pre>{JSON.stringify(check.details, null, 2)}</pre>
-            </a>
+            </div>
           </div>
         )}
       </td>

diff --git a/reports/src/index.css b/reports/src/index.css
@@ -38,8 +38,8 @@ h1 {
 
 button {
   border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
+  border: 1px solid black;
+  padding: 0.3em 0.6em;
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
@@ -48,7 +48,7 @@ button {
   transition: border-color 0.25s;
 }
 button:hover {
-  border-color: #646cff;
+  border-color: turquoise;
 }
 button:focus,
 button:focus-visible {