feat: UI Revamp - Add Solved, Remove, Delete at bottom in Create New PQIR

components/canvas/Sidebar/NewPQIR.tsx

@@ -1,5 +1,11 @@
 import { NodeDataCommon } from "@/types/NodeData";
-import { Button, Checkbox, Icon } from "@equinor/eds-core-react";
+import {
+  Button,
+  Checkbox,
+  Icon,
+  Tooltip,
+  Typography,
+} from "@equinor/eds-core-react";
 import { add } from "@equinor/eds-icons";
 import dynamic from "next/dynamic";
 import styles from "./PQIRListElement.module.scss";
@@ -34,46 +40,55 @@ export const NewPQIR = ({ selectedNode }: NewPQIRProps) => {
         selectedType={selectedType}
         onClick={(type) => setSelectedType(type)}
       />
-      {solved !== null && (
-        <Checkbox
-          defaultChecked={solved}
-          onChange={(e) => setSolved(e.target.checked)}
-          title="Mark as solved"
-        />
-      )}
     </div>
   );
 
   const panelSectionBottom = (selectedNodeId: string) => (
     <div className={styles.actionButtonsContainer}>
-      <Button
-        variant="outlined"
-        className={styles.actionButton}
-        onClick={() => setIsEditing(false)}
-      >
-        Cancel
-      </Button>
-      <Button
-        className={styles.actionButton}
-        onClick={() =>
-          createPQIR.mutate(
-            {
-              description,
-              selectedType,
-              solved,
-              selectedNodeId,
-            },
-            {
-              onSuccess() {
-                setIsEditing(false);
+      <div>
+        {solved !== null && (
+          <div className={styles.actioncontainer}>
+            <Tooltip title="Mark PQIR as solved" placement="top">
+              <Checkbox
+                defaultChecked={solved}
+                onChange={(e) => setSolved(e.target.checked)}
+                className={styles.checkBoxStyle}
+              />
+            </Tooltip>
+            <Typography className={styles.actionText}>Solved</Typography>
+          </div>
+        )}
+      </div>
+      <div className={styles.actionButtonsContainer}>
+        <Button
+          variant="outlined"
+          className={styles.actionButton}
+          onClick={() => setIsEditing(false)}
+        >
+          Cancel
+        </Button>
+        <Button
+          className={styles.actionButton}
+          onClick={() =>
+            createPQIR.mutate(
+              {
+                description,
+                selectedType,
+                solved,
+                selectedNodeId,
               },
-            }
-          )
-        }
-        disabled={!description}
-      >
-        Create
-      </Button>
+              {
+                onSuccess() {
+                  setIsEditing(false);
+                },
+              }
+            )
+          }
+          disabled={!description}
+        >
+          Create
+        </Button>
+      </div>
     </div>
   );
 

components/canvas/Sidebar/PQIRListElement.module.scss

@@ -44,7 +44,8 @@
 .actionButtonsContainer {
   display: flex;
   column-gap: 12px;
-  justify-content: flex-end;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .actionButton {
@@ -54,3 +55,33 @@
 .createPQIRButton {
   height: 46px !important;
 }
+
+.checkBoxStyle {
+  padding: 0px !important;
+}
+
+.checkBoxStyle > input {
+  --scale: 1 !important;
+}
+
+.actioncontainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 16px;
+}
+
+.actionIcon {
+  width: auto !important;
+  height: auto !important;
+}
+
+.actionText {
+  font-size: 14px !important;
+  font-weight: 500 !important;
+  color: #007079 !important;
+}
+
+.actionIconContainer {
+  display: flex;
+}

components/canvas/Sidebar/PQIRListElement.tsx

@@ -6,9 +6,15 @@ import {
   Button,
   Checkbox,
   Icon,
+  Tooltip,
   Typography,
 } from "@equinor/eds-core-react";
-import { add, delete_to_trash, minimize } from "@equinor/eds-icons";
+import {
+  add,
+  delete_to_trash,
+  minimize,
+  remove_outlined,
+} from "@equinor/eds-icons";
 import dynamic from "next/dynamic";
 import { TextCircle } from "../entities/TextCircle";
 import styles from "./PQIRListElement.module.scss";
@@ -110,33 +116,59 @@ export const PQIRListELement = ({
         selectedType={selectedType}
         onClick={(type) => setSelectedType(type)}
       />
-      <div>
-        {solved !== null && isSelectedSection && (
-          <Checkbox
-            checked={solved}
-            onChange={(e) => setSolved(e.target.checked)}
-            title="Mark as solved"
-          />
-        )}
-        <Button
-          variant="ghost_icon"
-          onClick={() => dispatch.setPQIRToBeDeletedId(pqir.id)}
-          title="Delete PQIR"
-        >
-          <Icon data={delete_to_trash} />
-        </Button>
-      </div>
     </div>
   );
   const panelSectionBottom = (
     <div className={styles.actionButtonsContainer}>
-      <Button
-        onClick={handleSaveClick}
-        className={styles.actionButton}
-        disabled={!hasChanges || !description}
-      >
-        Save
-      </Button>
+      <div className={styles.actionIconContainer}>
+        {solved !== null && isSelectedSection && (
+          <div className={styles.actioncontainer}>
+            <Tooltip title="Mark PQIR as solved" placement="top">
+              <Checkbox
+                checked={solved}
+                onChange={(e) => setSolved(e.target.checked)}
+                className={styles.checkBoxStyle}
+              />
+            </Tooltip>
+            <Typography className={styles.actionText}>Solved</Typography>
+          </div>
+        )}
+        {isSelectedSection && (
+          <div className={styles.actioncontainer}>
+            <Tooltip title="Remove PQIR from selected card" placement="top">
+              <Button
+                variant="ghost_icon"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  unlinkPQIR.mutate({ selectedNodeId, pqirId });
+                }}
+                className={styles.actionIcon}
+              >
+                <Icon data={remove_outlined} />
+              </Button>
+            </Tooltip>
+            <Typography className={styles.actionText}>Remove</Typography>
+          </div>
+        )}
+        <div className={styles.actioncontainer}>
+          <Tooltip title="Delete PQIR from process" placement="top">
+            <Button
+              variant="ghost_icon"
+              onClick={() => dispatch.setPQIRToBeDeletedId(pqir.id)}
+              className={styles.actionIcon}
+            >
+              <Icon data={delete_to_trash} />
+            </Button>
+          </Tooltip>
+          <Typography className={styles.actionText}>Delete</Typography>
+        </div>
+      </div>
+
+      {!(!hasChanges || !description) && (
+        <Button onClick={handleSaveClick} className={styles.actionButton}>
+          Save
+        </Button>
+      )}
 
       {showScrim &&
         createPortal(

components/canvas/Sidebar/usePQIRMutations.tsx

@@ -89,7 +89,7 @@ export const usePQIRMutations = () => {
     },
     {
       onSuccess() {
-        dispatch.setSnackMessage("✅ PQIR unlinked!");
+        dispatch.setSnackMessage("⛔️ PQIR removed from card!");
         void notifyOthers("Removed PQIR from a card", projectId, account);
         return queryClient.invalidateQueries();
       },