Improve styling for hidden assets

scottbenton · Oct 31, 2024 · d1e6a3b · d1e6a3b
1 parent fbfdf8f
commit d1e6a3b
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 27 deletions.
diff --git a/src/components/features/assets/AssetCard/AssetCard.tsx b/src/components/features/assets/AssetCard/AssetCard.tsx
@@ -24,6 +24,7 @@ export interface AssetCardProps {
   ) => void;
 
   showSharedIcon?: boolean;
+  disabled?: boolean;
   sx?: SxProps<Theme>;
 }
 
@@ -40,6 +41,7 @@ const AssetCardComponent = (
     onAssetOptionChange,
     onAssetControlChange,
     showSharedIcon,
+    disabled,
     sx,
   } = props;
 
@@ -98,7 +100,9 @@ const AssetCardComponent = (
         ...sx,
       }}
     >
-      <AssetHeader asset={asset} onAssetRemove={onAssetRemove} />
+      <Box sx={{ filter: disabled ? "grayscale(30%) opacity(70%)" : undefined }}>
+        <AssetHeader asset={asset} onAssetRemove={onAssetRemove} />
+      </Box>
       <Box
         flexGrow={1}
         display={"flex"}
@@ -110,25 +114,34 @@ const AssetCardComponent = (
           borderBottomRightRadius: theme.shape.borderRadius,
         })}
       >
-        <AssetNameAndDescription
-          asset={asset}
-          showSharedIcon={showSharedIcon}
-        />
-        <AssetOptions
-          options={assetOptions}
-          storedAsset={storedAsset}
-          onAssetOptionChange={onAssetOptionChange}
-        />
-        <AssetAbilities
-          asset={asset}
-          storedAsset={storedAsset}
-          onAbilityToggle={onAssetAbilityToggle}
-        />
-        <AssetControls
-          controls={assetControls}
-          storedAsset={storedAsset}
-          onControlChange={onAssetControlChange}
-        />
+        <Box
+          flexGrow={1}
+          display={"flex"}
+          flexDirection={"column"}
+          sx={{
+            filter: disabled ? "grayscale(30%) opacity(70%)" : undefined
+          }}
+        >
+          <AssetNameAndDescription
+            asset={asset}
+            showSharedIcon={showSharedIcon}
+          />
+          <AssetOptions
+            options={assetOptions}
+            storedAsset={storedAsset}
+            onAssetOptionChange={onAssetOptionChange}
+          />
+          <AssetAbilities
+            asset={asset}
+            storedAsset={storedAsset}
+            onAbilityToggle={onAssetAbilityToggle}
+          />
+          <AssetControls
+            controls={assetControls}
+            storedAsset={storedAsset}
+            onControlChange={onAssetControlChange}
+          />
+        </Box>
         {actions && (
           <Stack
             direction={"row"}

diff --git a/src/components/features/assets/AssetCardDialog/AssetCardDialogCard.tsx b/src/components/features/assets/AssetCardDialog/AssetCardDialogCard.tsx
@@ -1,6 +1,7 @@
 import { AssetCard } from "../AssetCard/AssetCard";
 import { LoadingButton } from "@mui/lab";
 import { useEffect, useRef, useState } from "react";
+import { CircularProgress } from "@mui/material";
 
 export interface AssetCardDialogCardProps {
   assetId: string;
@@ -46,20 +47,19 @@ export function AssetCardDialogCard(props: AssetCardDialogCardProps) {
           }}
           loading={buttonLoading}
           variant={"contained"}
+          disableRipple
+          disableElevation
+          loadingIndicator={
+            <CircularProgress color={"inherit"} size={16} disableShrink sx={{ animationDuration: "600ms" }}/>
+          }
           sx={{
             width: "40%",
-            boxShadow: "none",
-            ":hover": {
-              boxShadow: "none",
-            }
           }}
         >
           {selectLabel ?? "Select"}
         </LoadingButton>
       }
-      sx={{
-        filter: disabled ? "grayscale(30%) opacity(70%)" : undefined
-      }}
+      disabled={disabled}
     />
   );
 }