fix(detailed pages): Make delete btns more visible on detail pages

update breakpoint, btn look and text and new hook

src/context/useDeleteIcon.tsx

@@ -0,0 +1,13 @@
+import useEventListener from "@use-it/event-listener";
+import { useState } from "react";
+import { isWidthBelow } from "util/helpers";
+
+export const useDeleteIcon = (): boolean => {
+  const [isSmallScreen, setIsSmallScreen] = useState(isWidthBelow(620));
+  const handleResize = () => {
+    const newSmall = isWidthBelow(620);
+    newSmall !== isSmallScreen && setIsSmallScreen(newSmall);
+  };
+  useEventListener("resize", handleResize);
+  return isSmallScreen;
+};

src/pages/instances/actions/DeleteInstanceBtn.tsx

@@ -6,12 +6,14 @@ import { useNavigate } from "react-router-dom";
 import { useNotify } from "context/notify";
 import ItemName from "components/ItemName";
 import { deletableStatuses } from "util/instanceDelete";
+import { useDeleteIcon } from "context/useDeleteIcon";
 
 interface Props {
   instance: LxdInstance;
 }
 
 const DeleteInstanceBtn: FC<Props> = ({ instance }) => {
+  const isDeleteIcon = useDeleteIcon();
   const notify = useNotify();
   const [isLoading, setLoading] = useState(false);
   const navigate = useNavigate();
@@ -42,11 +44,11 @@ const DeleteInstanceBtn: FC<Props> = ({ instance }) => {
   return (
     <ConfirmationButton
       onHoverText="Delete instance"
-      toggleAppearance="base"
-      className="delete-instance-btn"
+      toggleAppearance={isDeleteIcon ? "base" : "default"}
+      className="u-no-margin--bottom"
       isLoading={isLoading}
-      icon="delete"
       title="Confirm delete"
+      toggleCaption={isDeleteIcon ? undefined : "Delete instance"}
       confirmMessage={
         <>
           Are you sure you want to delete instance{" "}
@@ -57,7 +59,8 @@ const DeleteInstanceBtn: FC<Props> = ({ instance }) => {
       confirmButtonLabel="Delete"
       onConfirm={handleDelete}
       isDisabled={isDisabled}
-      isDense
+      isDense={false}
+      icon={isDeleteIcon ? "delete" : undefined}
     />
   );
 };

src/pages/profiles/actions/DeleteProfileBtn.tsx

@@ -5,6 +5,7 @@ import { useNavigate } from "react-router-dom";
 import { LxdProfile } from "types/profile";
 import { useNotify } from "context/notify";
 import ItemName from "components/ItemName";
+import { useDeleteIcon } from "context/useDeleteIcon";
 
 interface Props {
   profile: LxdProfile;
@@ -17,6 +18,7 @@ const DeleteProfileBtn: FC<Props> = ({
   project,
   featuresProfiles,
 }) => {
+  const isDeleteIcon = useDeleteIcon();
   const notify = useNotify();
   const [isLoading, setLoading] = useState(false);
   const navigate = useNavigate();
@@ -38,11 +40,11 @@ const DeleteProfileBtn: FC<Props> = ({
   return (
     <ConfirmationButton
       onHoverText="Delete profile"
-      toggleAppearance="base"
-      className="delete-profile-btn"
+      toggleAppearance={isDeleteIcon ? "base" : "default"}
+      className="u-no-margin--bottom"
       isLoading={isLoading}
-      icon="delete"
       title="Confirm delete"
+      toggleCaption={isDeleteIcon ? undefined : "Delete profile"}
       confirmMessage={
         <>
           Are you sure you want to delete profile{" "}
@@ -53,7 +55,8 @@ const DeleteProfileBtn: FC<Props> = ({
       confirmButtonLabel="Delete"
       onConfirm={handleDelete}
       isDisabled={profile.name === "default" || !featuresProfiles}
-      isDense
+      isDense={false}
+      icon={isDeleteIcon ? "delete" : undefined}
     />
   );
 };

src/pages/storage/StorageDetailHeader.tsx

@@ -64,6 +64,7 @@ const StorageDetailHeader: FC<Props> = ({ name, storagePool, project }) => {
           key="delete"
           storage={storagePool}
           project={project}
+          shouldExpand={true}
         />
       }
       isLoaded={true}

src/pages/storage/actions/DeleteStorageBtn.tsx

@@ -7,13 +7,20 @@ import { queryKeys } from "util/queryKeys";
 import { useNotify } from "context/notify";
 import ItemName from "components/ItemName";
 import { useNavigate } from "react-router-dom";
+import { useDeleteIcon } from "context/useDeleteIcon";
 
 interface Props {
   storage: LxdStoragePool;
   project: string;
+  shouldExpand?: boolean;
 }
 
-const DeleteStorageBtn: FC<Props> = ({ storage, project }) => {
+const DeleteStorageBtn: FC<Props> = ({
+  storage,
+  project,
+  shouldExpand = false,
+}) => {
+  const isSmallScreen = useDeleteIcon();
   const navigate = useNavigate();
   const notify = useNotify();
   const [isLoading, setLoading] = useState(false);
@@ -40,11 +47,13 @@ const DeleteStorageBtn: FC<Props> = ({ storage, project }) => {
 
   return (
     <ConfirmationButton
-      toggleAppearance="base"
+      toggleAppearance={!isSmallScreen && shouldExpand ? "default" : "base"}
       className="u-no-margin--bottom"
       isLoading={isLoading}
-      icon="delete"
       title="Confirm delete"
+      toggleCaption={
+        !isSmallScreen && shouldExpand ? "Delete storage" : undefined
+      }
       confirmMessage={
         <>
           Are you sure you want to delete storage{" "}
@@ -54,7 +63,8 @@ const DeleteStorageBtn: FC<Props> = ({ storage, project }) => {
       }
       confirmButtonLabel="Delete"
       onConfirm={handleDelete}
-      isDense={true}
+      isDense={!shouldExpand}
+      icon={!isSmallScreen && shouldExpand ? undefined : "delete"}
     />
   );
 };

src/sass/_instance_detail_page.scss

@@ -9,12 +9,6 @@
     }
   }
 
-  .delete-instance-btn {
-    margin: 0;
-    padding-left: $sph--x-large;
-    padding-right: $sph--x-large;
-  }
-
   .p-panel__content {
     margin-top: -$spv--medium;
     padding-bottom: 0;

src/sass/_profile_detail_page.scss

@@ -1,10 +1,4 @@
 .profile-detail-page {
-  .delete-profile-btn {
-    margin: 0;
-    padding-left: $sph--x-large;
-    padding-right: $sph--x-large;
-  }
-
   .p-panel__content {
     margin-top: -$spv--medium;
     padding-bottom: 0;

src/sass/_rename_header.scss

@@ -4,7 +4,7 @@
     flex-direction: column;
     max-width: none;
 
-    @include large {
+    @include extra-large {
       align-items: center;
       flex-direction: row;
     }