feat: new card style, possibly fixed "cramped"ness

Opti-mod · Oct 17, 2024 · aa639e3 · aa639e3
1 parent 4717a48
commit aa639e3
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/src/ui/settings/components/Card.tsx b/src/ui/settings/components/Card.tsx
@@ -8,15 +8,17 @@ const { FormRow, FormSwitch, FormRadio } = Forms;
 const { hideActionSheet } = findByProps("openLazy", "hideActionSheet");
 const { showSimpleActionSheet } = findByProps("showSimpleActionSheet");
 
-// TODO: These styles work weirdly. iOS has cramped text, Android with low DPI probably does too. Fix?
 const styles = stylesheet.createThemedStyleSheet({
     card: {
-        backgroundColor: semanticColors?.BACKGROUND_SECONDARY,
-        borderRadius: 5,
+        backgroundColor: semanticColors.BACKGROUND_SECONDARY,
+        borderRadius: 7,
+        borderColor: semanticColors.BACKGROUND_TERTIARY,
+        borderWidth: 1,
     },
     header: {
         padding: 0,
-        backgroundColor: semanticColors?.BACKGROUND_TERTIARY,
+        backgroundColor: semanticColors.PRIMARY_DARK,
+        color: semanticColors.HEADER_PRIMARY,
         borderTopLeftRadius: 5,
         borderTopRightRadius: 5,
     },

diff --git a/src/ui/settings/components/PluginCard.tsx b/src/ui/settings/components/PluginCard.tsx
@@ -16,6 +16,7 @@ async function stopThenStart(plugin: Plugin, callback: Function) {
 export default function PluginCard({ item: plugin, index }: CardWrapper<Plugin>) {
     const settings = getSettings(plugin.id);
     const navigation = NavigationNative.useNavigation();
+    const authors = plugin.manifest.authors;
     const [removed, setRemoved] = React.useState(false);
 
     // This is needed because of React™
@@ -25,7 +26,7 @@ export default function PluginCard({ item: plugin, index }: CardWrapper<Plugin>)
         <Card
             index={index}
             // TODO: Actually make use of user IDs
-            headerLabel={`${plugin.manifest.name} by ${plugin.manifest.authors.map(i => i.name).join(", ")}`}
+            headerLabel={`${plugin.manifest.name}`}
             headerIcon={plugin.manifest.vendetta?.icon || "ic_application_command_24px"}
             toggleType="switch"
             toggleValue={plugin.enabled}
@@ -36,7 +37,7 @@ export default function PluginCard({ item: plugin, index }: CardWrapper<Plugin>)
                     showToast((e as Error).message, getAssetIDByName("Small"));
                 }
             }}
-            descriptionLabel={plugin.manifest.description}
+            descriptionLabel={`plugin.manifest.description  \n\nAuthors: ${authors.map(i => i.name).join(", ")}`}
             overflowTitle={plugin.manifest.name}
             overflowActions={[
                 {