Simplify the ProfileModerationService ui

src/screens/ProfileModerationService/index.tsx

@@ -140,6 +140,9 @@ export function ProfileModserviceScreenInner({
       p => p.did === modservice.creator.did,
     )
   }, [modservice.creator.did, preferences.moderationOpts.mods])
+  const isSubscribed = preferences.moderationOpts.mods.find(
+    mod => mod.did === modservice.creator.did,
+  )
   const isEnabled = Boolean(
     enabledVariables?.enabled ??
       preferences.moderationOpts.mods.find(
@@ -248,18 +251,15 @@ export function ProfileModserviceScreenInner({
 
       <Divider />
 
-      <View style={[a.gap_sm, a.mt_xl]}>
+      {isSubscribed ? (
-        <Text style={[a.text_md, a.font_bold]}>
+        <View style={[a.flex_row, a.pr_lg, a.pt_xl]}>
-          Configure moderation service
+          <View style={[a.gap_sm, a.flex_1]}>
-        </Text>
+            <Text style={[a.text_md, a.font_bold]}>Settings</Text>
             <Text style={[t.atoms.text_contrast_high, a.leading_snug]}>
-          This labeler moderates the following types of content. You can
+              Enable or disable labels from this service.
-          optionally enable or disable the labeler's recommendations for each
-          type of content below.
             </Text>
           </View>
 
-      <View style={[a.w_full, a.mt_xl]}>
           <Toggle.Item
             name="enable"
             value={isEnabled}
@@ -269,40 +269,40 @@ export function ProfileModserviceScreenInner({
                 ? _(msg`Disable this moderation service`)
                 : _(msg`Enable this moderation service`)
             }>
-          <View
+            <Toggle.Label>{isEnabled ? 'Enabled' : 'Disabled'}</Toggle.Label>
-            style={[
-              a.w_full,
-              a.flex_row,
-              a.justify_between,
-              a.gap_lg,
-              a.p_md,
-              a.rounded_sm,
-              t.atoms.bg_contrast_25,
-            ]}>
-            <View style={[a.flex_1]}>
-              <Text style={[a.font_bold, a.pb_xs]}>
-                This service is {isEnabled ? 'enabled' : 'disabled'}
-              </Text>
-              <Text style={[t.atoms.text_contrast_medium, a.leading_snug]}>
-                Optionally disable this service without affecting your
-                subscription.
-              </Text>
-            </View>
             <Toggle.Switch />
-          </View>
           </Toggle.Item>
         </View>
+      ) : (
+        <View style={[a.gap_sm, a.pt_xl]}>
+          <Text style={[a.text_md, a.font_bold]}>Labels</Text>
+          <Text style={[t.atoms.text_contrast_high, a.leading_snug]}>
+            This labeler moderates the following types of content.
+          </Text>
+        </View>
+      )}
 
-      <View style={[a.gap_md, a.mt_xl]}>
+      <View
+        style={[
+          a.gap_md,
+          a.mt_xl,
+          t.atoms.bg_contrast_25,
+          a.rounded_md,
+          a.border,
+          a.py_md,
+          t.atoms.border_contrast_low,
+        ]}>
         {groups.map((def, i) => {
           return (
             <React.Fragment key={def.id}>
               {i !== 0 && <Divider />}
+              <View style={[a.px_lg]}>
                 <PreferenceRow
                   disabled={isEnabled ? undefined : true}
                   labelGroup={def.id}
                   modservicePreferences={modservicePreferences}
                 />
+              </View>
             </React.Fragment>
           )
         })}