.

Website/src/activitys/account/AccountActivity.tsx

@@ -288,29 +288,20 @@ const AccountActivty = () => {
             </Typography>
           </CardContent>
 
-          <List>
-            {filteredModules.map((module, i) => (
-              <ExploreModule index={i} moduleProps={module} disableLowQuality />
-            ))}
-          </List>
+          <Box sx={{ flexGrow: 1 }}>
+            {/* @ts-ignore */}
+            <Grid container justify="center" spacing={2}>
+              {filteredModules.map((module, i) => (
+                <Grid key={i} item {...{ xs: 12, sm: 6, md: 4, lg: 3 }}>
+                  <ExploreModule index={i} moduleProps={module} disableLowQuality disableCovers />
+                </Grid>
+              ))}
+            </Grid>
+          </Box>
         </Card>
       </Page.RelativeContent>
     </Page>
   );
 };
 
-interface ParModuleProps {
-  module: Module;
-}
-
-const ParModule = (props: ParModuleProps) => {
-  const formatLastUpdate = useFormatDate(props.module.last_update);
-
-  return (
-    <ListItem>
-      <ListItemText primary={props.module.prop_url.name} secondary={formatLastUpdate} />
-    </ListItem>
-  );
-};
-
 export default AccountActivty;

Website/src/components/ExploreModule.tsx

@@ -25,6 +25,7 @@ interface Props {
   index: number;
   moduleProps: Module;
   disableLowQuality?: boolean;
+  disableCovers?: boolean;
 }
 export const ExploreModule = (props: Props) => {
   const { context } = useActivity();
@@ -77,6 +78,46 @@ export const ExploreModule = (props: Props) => {
     });
   };
 
+  const CoverHandler = () => {
+    if (props.disableCovers) {
+      return null;
+    }
+
+    if (!settings._disable_module_covers && prop_url.mmrlCover) {
+      return (
+        <CardMedia
+          component="img"
+          style={{
+            minHeight: os.isAndroid || isMobile ? 179 : 465,
+            height: "100%",
+            objectFit: "cover",
+          }}
+          image={prop_url.mmrlCover}
+          alt={prop_url.name}
+        />
+      );
+    }
+
+    return null;
+  };
+
+  const LegacyVerified = () => {
+    if (!authorData?.options?.roles?.verified && isVerified) {
+      return (
+        <StyledIconButton
+          style={{ width: 39, height: 39 }}
+          onClick={() => {
+            os.toast(strings.module_verified, Toast.LENGTH_SHORT);
+          }}
+        >
+          <VerifiedRounded sx={{ fontSize: 14 }} />
+        </StyledIconButton>
+      );
+    }
+
+    return null;
+  };
+
   return (
     <StyledCard elevation={0}>
       <GestureDetector
@@ -85,19 +126,7 @@ export const ExploreModule = (props: Props) => {
           os.open("https://www.youtube.com/watch?v=dQw4w9WgXcQ");
         }}
       >
-        {!settings._disable_module_covers && prop_url.mmrlCover && (
-          // @ts-ignore
-          <CardMedia
-            component="img"
-            style={{
-              minHeight: os.isAndroid || isMobile ? 179 : 465,
-              height: "100%",
-              objectFit: "cover",
-            }}
-            image={prop_url.mmrlCover}
-            alt={prop_url.name}
-          />
-        )}
+        <CoverHandler />
         <Box sx={{ p: 2, display: "flex" }}>
           <Stack spacing={0.5} style={{ flexGrow: 1 }}>
             <Typography fontWeight={700} color="text.primary">
@@ -142,16 +171,7 @@ export const ExploreModule = (props: Props) => {
               <span style={{ fontSize: 14 }}>0</span>
             </Stack>
           </StyledIconButtonWithText> */}
-          {isVerified && (
-            <StyledIconButton
-              style={{ width: 39, height: 39 }}
-              onClick={() => {
-                os.toast(strings.module_verified, Toast.LENGTH_SHORT);
-              }}
-            >
-              <VerifiedRounded sx={{ fontSize: 14 }} />
-            </StyledIconButton>
-          )}
+          <LegacyVerified />
         </Stack>
       </Stack>
       {settings._low_quality_module && isLowQuality && (