fix(ui): icons could overflow (#17)

web/ui/react-app/package.json

@@ -11,7 +11,7 @@
     "@fortawesome/react-fontawesome": "^0.1.18",
     "@types/bootstrap": "^5.1.10",
     "@types/jest": "^27.4.1",
-    "@types/react": "^18.0.6",
+    "@types/react": "^18.0.7",
     "@types/react-dom": "^18.0.2",
     "bootstrap": "^5.1.3",
     "date-fns": "^2.28.0",
@@ -50,7 +50,7 @@
     ]
   },
   "devDependencies": {
-    "@types/node": "^17.0.25",
+    "@types/node": "^17.0.27",
     "@types/styled-components": "^5.1.25"
   }
 }

web/ui/react-app/src/components/approvals/service-image.tsx

@@ -20,41 +20,45 @@ export const ServiceImage = ({
   visible,
 }: ServiceImageData): ReactElement => {
   const delayedRender = useDelayedRender(500);
-  return service?.icon ? (
-    <Card.Img
-      variant="top"
-      src={service.icon}
-      alt={`${service.id} Image`}
-      className="service-image"
-      style={{ display: visible ? "inline" : "none" }}
-    />
-  ) : service?.loading === false ? (
-    <FontAwesomeIcon
-      icon={service.type === "github" ? faGithub : faWindowMaximize}
-      style={{
-        minWidth: "fit-content",
-        display: visible ? "inline" : "none",
-        height: "6rem",
-      }}
-      className={"service-image"}
-    />
-  ) : (
+  return (
     <div
-      className="service-image"
-      style={{ display: visible ? "inline" : "none" }}
+      className="empty"
+      style={{ height: "7rem", display: visible ? "flex" : "none" }}
     >
-      {delayedRender(() => (
+      {service?.icon ? (
+        <Card.Img
+          variant="top"
+          src={service.icon}
+          alt={`${service.id} Image`}
+          className="service-image"
+        />
+      ) : service?.loading === false ? (
         <FontAwesomeIcon
-          icon={faCircleNotch}
+          icon={service.type === "github" ? faGithub : faWindowMaximize}
           style={{
             minWidth: "fit-content",
-            display: visible ? "inline" : "none",
             height: "6rem",
-            padding: "0",
           }}
-          className={"service-image fa-spin"}
+          className={"service-image"}
         />
-      ))}
+      ) : (
+        <div
+          className="service-image"
+          style={{ display: visible ? "inline" : "none" }}
+        >
+          {delayedRender(() => (
+            <FontAwesomeIcon
+              icon={faCircleNotch}
+              style={{
+                minWidth: "fit-content",
+                height: "6rem",
+                padding: "0",
+              }}
+              className={"service-image fa-spin"}
+            />
+          ))}
+        </div>
+      )}
     </div>
   );
 };

web/ui/react-app/src/components/approvals/service-info.tsx

@@ -59,7 +59,7 @@ export const ServiceInfo = ({
       className={serviceWarning ? "alert-warning" : "default"}
     >
       <ListGroup className="list-group-flush">
-        {service.webhook && updateAvailable && !updateSkipped ? (
+        {updateAvailable && !updateSkipped ? (
           <>
             <ListGroup.Item
               key="update-available"
@@ -72,30 +72,33 @@ export const ServiceInfo = ({
               key="update-buttons"
               className={"service-item update-options alert-warning"}
               variant="secondary"
+              style={{ paddingTop: "0.25rem" }}
             >
               <Button
                 key="details"
-                className="btn-flex"
+                className="btn-flex btn-update-action"
                 variant="primary"
                 onClick={() => setShowUpdateInfo()}
               >
                 <FontAwesomeIcon icon={faInfo} />
               </Button>
               <Button
                 key="approve"
-                className="btn-flex"
+                className="btn-flex btn-update-action"
                 variant="success"
                 onClick={() =>
                   showModal(updateApproved ? "RESEND" : "SEND", service)
                 }
+                disabled={updateApproved || service.webhook === undefined}
               >
                 <FontAwesomeIcon icon={faCheck} />
               </Button>
               <Button
                 key="reject"
-                className="btn-flex"
+                className="btn-flex btn-update-action"
                 variant="danger"
                 onClick={() => showModal("SKIP", service)}
+                disabled={updateApproved || service.webhook === undefined}
               >
                 <FontAwesomeIcon icon={faTimes} color="white" />
               </Button>

web/ui/react-app/src/index.css

@@ -138,11 +138,17 @@ body {
 }
 .service-item {
   display: flex;
+  padding: 0px;
   justify-content: space-between;
-  padding: 0.5rem;
   border: none;
   overflow: hidden;
 }
+.list-group-flush {
+  padding: 0.5rem;
+}
+.btn-update-action {
+  height: 1.25rem;
+}
 
 .alert-primary {
   color: var(--alert-primary-color) !important;
@@ -183,7 +189,6 @@ body {
 .update-options {
   overflow: hidden;
   text-align: center;
-  height: 28px;
 }
 
 .btn-flex {
@@ -319,7 +324,9 @@ body {
 }
 .service-image {
   padding: 0.5rem 0;
-  height: 7rem;
+  height: 100%;
+  max-height: 100%;
+  max-width: 100%;
   width: auto;
   margin: auto;
 }
@@ -367,6 +374,10 @@ body {
 .no-margin {
   margin: 0px;
 }
+.empty {
+  margin: 0px;
+  padding: 0px;
+}
 
 .webhook-title {
   margin: 0.25rem 0px;

web/ui/static/asset-manifest.json

@@ -1,13 +1,13 @@
 {
   "files": {
-    "main.css": "./static/css/main.071c36a2.css",
-    "main.js": "./static/js/main.393ec7a8.js",
+    "main.css": "./static/css/main.a965f714.css",
+    "main.js": "./static/js/main.8fa68257.js",
     "index.html": "./index.html",
-    "main.071c36a2.css.map": "./static/css/main.071c36a2.css.map",
-    "main.393ec7a8.js.map": "./static/js/main.393ec7a8.js.map"
+    "main.a965f714.css.map": "./static/css/main.a965f714.css.map",
+    "main.8fa68257.js.map": "./static/js/main.8fa68257.js.map"
   },
   "entrypoints": [
-    "static/css/main.071c36a2.css",
-    "static/js/main.393ec7a8.js"
+    "static/css/main.a965f714.css",
+    "static/js/main.8fa68257.js"
   ]
 }

web/ui/static/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.svg" type="image/svg+xml"/><link rel="apple-touch-icon" href="./apple-touch-icon.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="Hymenaios" content="Monitor new releases"/><link rel="apple-touch-icon" href="./favicon.png"/><link rel="manifest" href="./manifest.json"/><title>Hymenaios</title><script defer="defer" src="./static/js/main.393ec7a8.js"></script><link href="./static/css/main.071c36a2.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.svg" type="image/svg+xml"/><link rel="apple-touch-icon" href="./apple-touch-icon.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="Hymenaios" content="Monitor new releases"/><link rel="apple-touch-icon" href="./favicon.png"/><link rel="manifest" href="./manifest.json"/><title>Hymenaios</title><script defer="defer" src="./static/js/main.8fa68257.js"></script><link href="./static/css/main.a965f714.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>