Styling, handle disabled labelers

assets/icons/squareBehindSquare4_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M8 8V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-5v5a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h5Zm1 8a1 1 0 0 1-1-1v-5H4v10h10v-4H9Z" clip-rule="evenodd"/></svg>

src/components/icons/SquareBehindSquare4.tsx

@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const SquareBehindSquare4_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M8 8V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-5v5a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h5Zm1 8a1 1 0 0 1-1-1v-5H4v10h10v-4H9Z',
+})

src/screens/Moderation/index.tsx

@@ -26,11 +26,12 @@ import {
 } from '#/state/queries/preferences'
 import {useModServicesDetailedInfoQuery} from '#/state/queries/modservice'
 
-import {useTheme, atoms as a, useBreakpoints} from '#/alf'
+import {useTheme, atoms as a, useBreakpoints, native} from '#/alf'
 import {Divider} from '#/components/Divider'
 import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/components/icons/CircleBanSign'
 import {Group3_Stroke2_Corner0_Rounded as Group} from '#/components/icons/Group'
 import {Person_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Person'
+import {SquareBehindSquare4_Stroke2_Corner0_Rounded as SquareBehindSquare} from '#/components/icons/SquareBehindSquare4'
 import {Text} from '#/components/Typography'
 import * as Toggle from '#/components/forms/Toggle'
 import * as ToggleButton from '#/components/forms/ToggleButton'
@@ -38,7 +39,7 @@ import {InlineLink, Link} from '#/components/Link'
 import {Loader} from '#/components/Loader'
 import {useLabelGroupStrings} from '#/lib/moderation/useLabelGroupStrings'
 import * as Dialog from '#/components/Dialog'
-import {Button} from '#/components/Button'
+import {Button, ButtonText, ButtonIcon} from '#/components/Button'
 import {
   getModerationServiceTitle,
   useConfigurableLabelGroups,
@@ -365,57 +366,65 @@ function LabelGroup({
       </View>
 
       {!!mods.length && (
-        <View style={[a.flex_row, a.align_start, a.pb_md]}>
-          <Button
-            label={_(
-              msg`Configure moderation services for category: ${name.toLowerCase()}`,
-            )}
-            onPress={() =>
-              openModSettingsDialog({
-                labelGroup,
-                modservices: mods,
-              })
-            }
-            style={[a.flex_1]}>
-            {ctx => (
         <View
           style={[
-                  a.w_full,
             a.flex_row,
-                  a.align_center,
+            a.align_start,
-                  a.gap_xs,
+            a.justify_between,
+            a.mb_md,
             a.p_sm,
-                  a.border,
             a.rounded_sm,
-                  t.atoms.border_contrast_low,
+            t.atoms.bg_contrast_25,
-                  (ctx.hovered || ctx.focused) && t.atoms.bg_contrast_25,
           ]}>
+          <View style={[a.flex_row, a.align_center, a.flex_1, a.gap_xs]}>
             {mods.map(mod => {
               const modservicePreferences =
                 preferences.moderationOpts.mods.find(
                   ({did}) => did === mod.creator.did,
                 )
-                  const enabled =
+              const labelGroupEnabled =
                 !modservicePreferences?.disabledLabelGroups?.includes(
                   labelGroup,
                 )
+              const isLabelerEnabled = modservicePreferences?.enabled
+              const enabled = labelGroupEnabled && isLabelerEnabled
               return (
                 <View
                   key={mod.creator.did}
                   style={[
-                        a.py_xs,
+                    a.flex_row,
-                        a.px_sm,
+                    a.align_center,
-                        a.rounded_sm,
+                    a.gap_sm,
+                    a.py_sm,
+                    a.px_md,
+                    a.rounded_full,
                     a.border,
                     t.atoms.border_contrast_low,
-                        enabled && t.atoms.bg_contrast_800,
+                    enabled && t.atoms.border_contrast_high,
+                    enabled && t.atoms.bg,
                   ]}>
+                  <View
+                    style={[
+                      a.rounded_full,
+                      t.atoms.bg_contrast_300,
+                      {
+                        height: 6,
+                        width: 6,
+                      },
+                      enabled && {
+                        backgroundColor: t.palette.positive_500,
+                      },
+                    ]}
+                  />
                   <Text
                     style={[
                       a.text_xs,
                       a.font_bold,
-                          t.atoms.text_contrast_high,
+                      native({
-                          enabled && t.atoms.text_inverted,
+                        top: 1,
+                      }),
+                      t.atoms.text_contrast_medium,
+                      enabled && t.atoms.text_contrast_high,
                     ]}>
                     {getModerationServiceTitle({
                       displayName: mod.creator.displayName,
@@ -425,19 +434,22 @@ function LabelGroup({
                 </View>
               )
             })}
-
-                <Text
-                  style={[
-                    a.text_xs,
-                    a.font_bold,
-                    a.pl_sm,
-                    a.italic,
-                    t.atoms.text_contrast_low,
-                  ]}>
-                  Configure
-                </Text>
           </View>
-            )}
+
+          <Button
+            size="tiny"
+            variant="ghost"
+            color="secondary"
+            label={_(msg`Configure enabled labelers for this content type`)}
+            style={[a.mt_xs]}
+            onPress={() => {
+              openModSettingsDialog({
+                labelGroup,
+                modservices: mods,
+              })
+            }}>
+            <ButtonText>Configure</ButtonText>
+            <ButtonIcon icon={SquareBehindSquare} position="right" />
           </Button>
         </View>
       )}