Fix some settings, move them back to Settings page

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

src/components/sidebar-navigation-link.tsx

@@ -2,6 +2,8 @@ import clsx from 'clsx';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 
+import { useSettings } from 'soapbox/hooks';
+
 import { Icon, Text } from './ui';
 
 interface ISidebarNavigationLink {
@@ -26,6 +28,8 @@ const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, r
   const { icon, activeIcon, text, to = '', count, countMax, onClick } = props;
   const isActive = location.pathname === to;
 
+  const { demetricator } = useSettings();
+
   const handleClick: React.EventHandler<React.MouseEvent> = (e) => {
     if (onClick) {
       onClick(e);
@@ -55,7 +59,7 @@ const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, r
       >
         <Icon
           src={(isActive && activeIcon) || icon}
-          count={count}
+          count={demetricator ? undefined : count}
           countMax={countMax}
           className={clsx('h-5 w-5', {
             'text-primary-700 dark:text-white': !isActive,

src/components/status-action-button.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 
 import { Text, Icon, Emoji } from 'soapbox/components/ui';
+import { useSettings } from 'soapbox/hooks';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
 
 import type { EmojiReaction } from 'soapbox/schemas';
@@ -19,9 +20,11 @@ interface IStatusActionCounter {
 
 /** Action button numerical counter, eg "5" likes. */
 const StatusActionCounter: React.FC<IStatusActionCounter> = ({ count = 0 }): JSX.Element => {
+  const { demetricator } = useSettings();
+
   return (
     <Text size='xs' weight='semibold' theme='inherit'>
-      {shortNumberFormat(count)}
+      {demetricator && count > 1 ? '1+' : shortNumberFormat(count)}
     </Text>
   );
 };

src/components/thumb-navigation-link.tsx

@@ -4,6 +4,7 @@ import { NavLink, useLocation } from 'react-router-dom';
 
 import IconWithCounter from 'soapbox/components/icon-with-counter';
 import { Icon, Text } from 'soapbox/components/ui';
+import { useSettings } from 'soapbox/hooks';
 
 interface IThumbNavigationLink {
   count?: number;
@@ -18,6 +19,7 @@ interface IThumbNavigationLink {
 
 const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax, src, activeSrc, text, to, exact, paths }): JSX.Element => {
   const { pathname } = useLocation();
+  const { demetricator } = useSettings();
 
   const isActive = (): boolean => {
     if (paths) {
@@ -33,7 +35,7 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax,
 
   return (
     <NavLink to={to} exact={exact} className='thumb-navigation__link'>
-      {count !== undefined ? (
+      {!demetricator && count !== undefined ? (
         <IconWithCounter
           src={icon}
           className={clsx({

src/components/ui/divider/divider.tsx

@@ -18,7 +18,7 @@ const Divider = ({ text, textSize = 'md' }: IDivider) => (
 
     {text && (
       <div className='relative flex justify-center'>
-        <span className='bg-white px-2 text-gray-700 dark:bg-gray-900 dark:text-gray-600' data-testid='divider-text'>
+        <span className='bg-white px-2 text-gray-700 black:bg-black dark:bg-gray-900 dark:text-gray-600' data-testid='divider-text'>
           <Text size={textSize} tag='span' theme='inherit'>{text}</Text>
         </span>
       </div>