.

DerGoogler · May 19, 2024 · f0a880b · f0a880b
1 parent c588d10
commit f0a880b
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 68 deletions.
diff --git a/Website/src/components/AntifeaturesButton.tsx b/Website/src/components/AntifeaturesButton.tsx
@@ -4,6 +4,7 @@ import WarningAmberIcon from "@mui/icons-material/WarningAmber";
 import React from "react";
 import { useStrings } from "@Hooks/useStrings";
 import AntiFeatureListItem from "./AntiFeatureListItem";
+import { GestureDetector } from "./onsenui/GestureDetector";
 
 type Props = {
   sx?: SxProps;
@@ -15,7 +16,8 @@ export const AntifeatureButton = (props: Props) => {
 
   const { strings } = useStrings();
 
-  const handleClickOpen = () => {
+  const handleClickOpen = (e: any) => {
+    e.preventDefault();
     setOpen(true);
   };
 
@@ -25,9 +27,11 @@ export const AntifeatureButton = (props: Props) => {
 
   return (
     <>
-      <Button onClick={handleClickOpen} sx={props.sx} variant="contained" color="error" startIcon={<WarningAmberIcon />}>
-        {strings("antifeatures")}
-      </Button>
+      <GestureDetector onHold={handleClickOpen}>
+        <Button sx={props.sx} variant="contained" color="error" size="small">
+          <WarningAmberIcon />
+        </Button>
+      </GestureDetector>
       <Dialog open={open} onClose={handleClose} scroll="paper">
         <DialogTitle>{strings("antifeatures")}</DialogTitle>
         <DialogContent dividers>

diff --git a/Website/src/components/module/DeviceModule.tsx b/Website/src/components/module/DeviceModule.tsx
@@ -25,6 +25,7 @@ import Switch from "@mui/material/Switch";
 import { Image } from "@Components/dapi/Image";
 import { blacklistedModules } from "@Util/blacklisted-modules";
 import { AntifeatureButton } from "@Components/AntifeaturesButton";
+import Box from "@mui/material/Box";
 
 interface Props {
   module: Module;
@@ -66,7 +67,13 @@ const DeviceModule = React.memo<Props>((props) => {
   }, [id]);
 
   return (
-    <Card sx={{ position: "relative", p: 2, width: "100%" }}>
+    <Card
+      sx={{
+        position: "relative",
+        p: 2,
+        width: "100%",
+      }}
+    >
       <Stack sx={{ position: "relative", zIndex: 1 }} direction="column" justifyContent="center" spacing={1}>
         {cover && (
           <Image
@@ -174,9 +181,7 @@ const DeviceModule = React.memo<Props>((props) => {
             <Divider variant="middle" />
             <Stack direction="row" justifyContent="flex-end" alignItems="center" spacing={1}>
               {findHardCodedAntifeature && findHardCodedAntifeature.length !== 0 && (
-                <Stack direction="row" justifyContent="flex-end" alignItems="center" spacing={2}>
-                  <AntifeatureButton antifeatures={findHardCodedAntifeature} />
-                </Stack>
+                <AntifeatureButton antifeatures={findHardCodedAntifeature} />
               )}
               <Button
                 onClick={() => {

diff --git a/Website/src/components/module/ExploreModule.tsx b/Website/src/components/module/ExploreModule.tsx
@@ -44,73 +44,64 @@ const ExploreModule = React.memo<Props>((props) => {
   };
 
   return (
-    <Box>
-      <Card
-        onTap={handleOpenModule}
-        component={GestureDetector}
-        sx={{
-          ...(track.antifeatures && {
-            borderRadius: `${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0px ${theme.shape.borderRadius}px`,
-          }),
-          p: 2,
-          ":hover": {
-            opacity: ".8",
-            cursor: "pointer",
-          },
-          width: "100%",
-        }}
-      >
-        <Stack direction="column" justifyContent="center" spacing={1}>
-          {track.cover && (
-            <Image
-              sx={{
-                height: "100%",
-                objectFit: "cover",
-                width: "100%",
-              }}
-              src={track.cover}
-              alt={name}
-              noOpen
-            />
-          )}
-
-          <Stack direction="column" justifyContent="center" alignItems="flex-start">
-            <Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={0.5}>
-              <Typography variant="h6">{name}</Typography>
-              <VerifiedIcon isVerified={track.verified} />
-            </Stack>
+    <Card
+      onTap={handleOpenModule}
+      component={GestureDetector}
+      sx={{
+        p: 2,
+        ":hover": {
+          opacity: ".8",
+          cursor: "pointer",
+        },
+        width: "100%",
+      }}
+    >
+      <Stack direction="column" justifyContent="center" spacing={1}>
+        {track.cover && (
+          <Image
+            sx={{
+              height: "100%",
+              objectFit: "cover",
+              width: "100%",
+            }}
+            src={track.cover}
+            alt={name}
+            noOpen
+          />
+        )}
 
-            <Typography color="text.secondary" variant="caption">
-              {version} ({versionCode}) / {author}
-            </Typography>
+        <Stack direction="column" justifyContent="center" alignItems="flex-start">
+          <Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={0.5}>
+            <Typography variant="h6">{name}</Typography>
+            <VerifiedIcon isVerified={track.verified} />
           </Stack>
-          <Typography color="text.secondary" variant="body2" display="block">
-            {description}
+
+          <Typography color="text.secondary" variant="caption">
+            {version} ({versionCode}) / {author}
           </Typography>
-          <Stack direction="column" justifyContent="center" spacing={1.2}>
-            <Divider variant="middle" />
-            <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={1}>
-              <Chip
-                sx={{
-                  bgColor: "secondary.dark",
-                }}
-                label={formatLastUpdate}
-              />
+        </Stack>
+        <Typography color="text.secondary" variant="body2" display="block">
+          {description}
+        </Typography>
+        <Stack direction="column" justifyContent="center" spacing={1.2}>
+          <Divider variant="middle" />
+          <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={1}>
+            <Chip
+              sx={{
+                bgColor: "secondary.dark",
+              }}
+              label={formatLastUpdate}
+            />
 
-              <Stack direction="row" justifyContent="flex-end" alignItems="center" spacing={1}></Stack>
+            <Stack direction="row" justifyContent="flex-end" alignItems="center" spacing={1}>
+              {findHardCodedAntifeature && findHardCodedAntifeature.length !== 0 && (
+                <AntifeatureButton antifeatures={findHardCodedAntifeature} />
+              )}
             </Stack>
           </Stack>
         </Stack>
-      </Card>
-      {findHardCodedAntifeature && findHardCodedAntifeature.length !== 0 && (
-        <Stack direction="row" justifyContent="flex-end" alignItems="center" spacing={2}>
-          <AntifeatureButton
-            antifeatures={findHardCodedAntifeature}
-            sx={{ borderRadius: `0px 0px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px` }}
-          />
-        </Stack>
-      )}
-    </Box>
+      </Stack>
+    </Card>
   );
 });