Merge branch 'black-mode' into 'main'

Minor style improvements See merge request soapbox-pub/soapbox!2962
2024-03-25 10:49:52 +00:00 · 2024-03-25 10:49:52 +00:00 · 5ea2e2442c
commit 5ea2e2442c
parent a4bea06b76 7749f93c21
23 changed files with 31 additions and 26 deletions
--- a/src/components/account.tsx
+++ b/src/components/account.tsx
@ -286,9 +286,10 @@ const Account = ({
                </Text>
              ) : withAccountNote && (
                <Text
+                  truncate
                  size='sm'
                  dangerouslySetInnerHTML={{ __html: account.note_emojified }}
-                  className='mr-2 rtl:ml-2 rtl:mr-0'
+                  className='mr-2 rtl:ml-2 rtl:mr-0 [&_br]:hidden [&_p:first-child]:inline [&_p:first-child]:truncate [&_p]:hidden'
                />
              )}
            </Stack>
--- a/src/components/scrollable-list.tsx
+++ b/src/components/scrollable-list.tsx
@ -71,6 +71,8 @@ interface IScrollableList extends VirtuosoProps<any, any> {
  onRefresh?: () => Promise<any>;
  /** Extra class names on the Virtuoso element. */
  className?: string;
+  /** Extra class names on the list element. */
+  listClassName?: string;
  /** Class names on each item container. */
  itemClassName?: string;
  /** `id` attribute on the Virtuoso element. */
@ -96,6 +98,7 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
  onScrollToTop,
  onLoadMore,
  className,
+  listClassName,
  itemClassName,
  id,
  hasMore,
@ -233,9 +236,10 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
      itemContent={renderItem}
      initialTopMostItemIndex={initialIndex}
      rangeChanged={handleRangeChange}
+      className={className}
      style={style}
      context={{
-        listClassName: className,
+        listClassName,
        itemClassName,
      }}
      components={{
--- a/src/components/status-list.tsx
+++ b/src/components/status-list.tsx
@ -232,7 +232,7 @@ const StatusList: React.FC<IStatusList> = ({
      placeholderComponent={() => <PlaceholderStatus variant={divideType === 'border' ? 'slim' : 'rounded'} />}
      placeholderCount={20}
      ref={node}
-      className={clsx('divide-y divide-solid divide-gray-200 dark:divide-gray-800', {
+      listClassName={clsx('divide-y divide-solid divide-gray-200 dark:divide-gray-800', {
        'divide-none': divideType !== 'border',
      }, className)}
      itemClassName={clsx({
--- a/src/components/ui/accordion/accordion.tsx
+++ b/src/components/ui/accordion/accordion.tsx
@ -81,7 +81,7 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
      <div
        className={
          clsx({
-            'p-4 rounded-b-lg border-t border-solid border-gray-100 dark:border-primary-900': true,
+            'p-4 rounded-b-lg border-t border-solid border-gray-100 dark:border-primary-900 black:border-black': true,
            'h-0 hidden': !expanded,
          })
        }
--- a/src/components/ui/checkbox/checkbox.tsx
+++ b/src/components/ui/checkbox/checkbox.tsx
@ -9,7 +9,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, ICheckbox>((props, ref) => {
      {...props}
      ref={ref}
      type='checkbox'
-      className='h-4 w-4 rounded border-2 border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-800 dark:bg-gray-900'
+      className='h-4 w-4 rounded border-2 border-gray-300 text-primary-600 focus:ring-primary-500 black:bg-black dark:border-gray-800 dark:bg-gray-900'
    />
  );
 });
--- a/src/features/admin/moderation-log.tsx
+++ b/src/features/admin/moderation-log.tsx
@ -56,7 +56,7 @@ const ModerationLog = () => {
        emptyMessage={intl.formatMessage(messages.emptyMessage)}
        hasMore={hasMore}
        onLoadMore={handleLoadMore}
-        className='divide-y divide-solid divide-gray-200 dark:divide-gray-800'
+        listClassName='divide-y divide-solid divide-gray-200 dark:divide-gray-800'
      >
        {items.map(item => item && (
          <LogItem key={item.id} log={item} />
--- a/src/features/admin/tabs/awaiting-approval.tsx
+++ b/src/features/admin/tabs/awaiting-approval.tsx
@ -33,7 +33,7 @@ const AwaitingApproval: React.FC = () => {
      showLoading={showLoading}
      scrollKey='awaiting-approval'
      emptyMessage={intl.formatMessage(messages.emptyMessage)}
-      className='divide-y divide-solid divide-gray-200 dark:divide-gray-800'
+      listClassName='divide-y divide-solid divide-gray-200 dark:divide-gray-800'
    >
      {accountIds.map(id => (
        <div key={id} className='px-5 py-4'>
--- a/src/features/admin/tabs/reports.tsx
+++ b/src/features/admin/tabs/reports.tsx
@ -35,7 +35,7 @@ const Reports: React.FC = () => {
      showLoading={showLoading}
      scrollKey='admin-reports'
      emptyMessage={intl.formatMessage(messages.emptyMessage)}
-      className='divide-y divide-solid divide-gray-200 dark:divide-gray-800'
+      listClassName='divide-y divide-solid divide-gray-200 dark:divide-gray-800'
    >
      {reports.map(report => report && <Report id={report} key={report} />)}
    </ScrollableList>
--- a/src/features/auth-login/components/consumers-list.tsx
+++ b/src/features/auth-login/components/consumers-list.tsx
@ -16,7 +16,7 @@ const ConsumersList: React.FC<IConsumersList> = () => {

  if (providers.length > 0) {
    return (
-      <Card className='bg-gray-50 p-4 sm:rounded-xl dark:bg-primary-800'>
+      <Card className='bg-gray-50 p-4 black:bg-black sm:rounded-xl dark:bg-primary-800'>
        <Text size='xs' theme='muted'>
          <FormattedMessage id='oauth_consumers.title' defaultMessage='Other ways to sign in' />
        </Text>
--- a/src/features/directory/components/account-card.tsx
+++ b/src/features/directory/components/account-card.tsx
@ -1,4 +1,3 @@
-import clsx from 'clsx';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';

@ -57,7 +56,7 @@ const AccountCard: React.FC<IAccountCard> = ({ id }) => {
        <Text
          truncate
          align='left'
-          className={clsx('[&_br]:hidden [&_p:first-child]:inline [&_p:first-child]:truncate [&_p]:hidden')}
+          className='[&_br]:hidden [&_p:first-child]:inline [&_p:first-child]:truncate [&_p]:hidden'
          dangerouslySetInnerHTML={{ __html: account.note_emojified || '&nbsp;' }}
        />
      </Stack>
--- a/src/features/domain-blocks/index.tsx
+++ b/src/features/domain-blocks/index.tsx
@ -45,7 +45,7 @@ const DomainBlocks: React.FC = () => {
        onLoadMore={() => handleLoadMore(dispatch)}
        hasMore={hasMore}
        emptyMessage={emptyMessage}
-        className='divide-y divide-gray-200 dark:divide-gray-800'
+        listClassName='divide-y divide-gray-200 dark:divide-gray-800'
      >
        {domains.map((domain) =>
          <Domain key={domain} domain={domain} />,
--- a/src/features/group/group-tags.tsx
+++ b/src/features/group/group-tags.tsx
@ -35,7 +35,7 @@ const GroupTopics: React.FC<IGroupTopics> = (props) => {
      showLoading={!group || isLoading && tags.length === 0}
      placeholderComponent={PlaceholderAccount}
      placeholderCount={3}
-      className='divide-y divide-solid divide-gray-300 dark:divide-gray-800'
+      listClassName='divide-y divide-solid divide-gray-300 dark:divide-gray-800'
      itemClassName='py-3 last:pb-0'
      emptyMessage={
        <Stack space={4} className='pt-6' justifyContent='center' alignItems='center'>
--- a/src/features/notifications/index.tsx
+++ b/src/features/notifications/index.tsx
@ -164,7 +164,7 @@ const Notifications = () => {
      onLoadMore={handleLoadOlder}
      onScrollToTop={handleScrollToTop}
      onScroll={handleScroll}
-      className={clsx({
+      listClassName={clsx({
        'divide-y divide-gray-200 black:divide-gray-800 dark:divide-primary-800 divide-solid': notifications.size > 0,
        'space-y-2': notifications.size === 0,
      })}
--- a/src/features/soapbox-config/components/icon-picker-menu.tsx
+++ b/src/features/soapbox-config/components/icon-picker-menu.tsx
@ -79,7 +79,7 @@ const IconPickerMenu: React.FC<IIconPickerMenu> = ({ icons, onClose, onPick, sty

  return (
    <div
-      className={clsx('absolute z-[101] -my-0.5')}
+      className='absolute z-[101] -my-0.5'
      style={{ transform: 'translateX(calc(-1 * env(safe-area-inset-right)))', ...style }}
      ref={setRef}
    >
--- a/src/features/status/components/thread-status.tsx
+++ b/src/features/status/components/thread-status.tsx
@ -31,7 +31,7 @@ const ThreadStatus: React.FC<IThreadStatus> = (props): JSX.Element => {

    return (
      <div
-        className={clsx('absolute left-5 z-[1] hidden w-0.5 bg-gray-200 rtl:left-auto rtl:right-5 dark:bg-primary-800', {
+        className={clsx('absolute left-5 z-[1] hidden w-0.5 bg-gray-200 black:bg-gray-800 rtl:left-auto rtl:right-5 dark:bg-primary-800', {
          '!block top-[calc(12px+42px)] h-[calc(100%-42px-8px-1rem)]': isConnectedBottom,
        })}
      />
--- a/src/features/status/components/thread.tsx
+++ b/src/features/status/components/thread.tsx
@ -382,7 +382,7 @@ const Thread = (props: IThread) => {

          {!isUnderReview ? (
            <>
-              <hr className='-mx-4 mb-2 max-w-[100vw] border-t-2 dark:border-gray-800' />
+              <hr className='-mx-4 mb-2 max-w-[100vw] border-t-2 black:border-t dark:border-gray-800' />

              <StatusActionBar
                status={status}
@ -396,7 +396,7 @@ const Thread = (props: IThread) => {
      </HotKeys>

      {hasDescendants && (
-        <hr className='-mx-4 mt-2 max-w-[100vw] border-t-2 dark:border-gray-800' />
+        <hr className='-mx-4 mt-2 max-w-[100vw] border-t-2 black:border-t dark:border-gray-800' />
      )}
    </div>
  );
@ -445,7 +445,7 @@ const Thread = (props: IThread) => {
          initialTopMostItemIndex={initialTopMostItemIndex}
          useWindowScroll={useWindowScroll}
          itemClassName={itemClassName}
-          className={
+          listClassName={
            clsx({
              'h-full': !useWindowScroll,
            })
--- a/src/features/ui/components/modals/birthdays-modal.tsx
+++ b/src/features/ui/components/modals/birthdays-modal.tsx
@ -28,7 +28,7 @@ const BirthdaysModal = ({ onClose }: IBirthdaysModal) => {
      <ScrollableList
        scrollKey='birthdays'
        emptyMessage={emptyMessage}
-        className='max-w-full'
+        listClassName='max-w-full'
        itemClassName='pb-3'
      >
        {accountIds.map(id =>
--- a/src/features/ui/components/modals/dislikes-modal.tsx
+++ b/src/features/ui/components/modals/dislikes-modal.tsx
@ -40,7 +40,7 @@ const DislikesModal: React.FC<IDislikesModal> = ({ onClose, statusId }) => {
      <ScrollableList
        scrollKey='dislikes'
        emptyMessage={emptyMessage}
-        className='max-w-full'
+        listClassName='max-w-full'
        itemClassName='pb-3'
      >
        {accountIds.map(id =>
--- a/src/features/ui/components/modals/event-participants-modal.tsx
+++ b/src/features/ui/components/modals/event-participants-modal.tsx
@ -40,7 +40,7 @@ const EventParticipantsModal: React.FC<IEventParticipantsModal> = ({ onClose, st
      <ScrollableList
        scrollKey='event_participations'
        emptyMessage={emptyMessage}
-        className='max-w-full'
+        listClassName='max-w-full'
        itemClassName='pb-3'
      >
        {accountIds.map(id =>
--- a/src/features/ui/components/modals/favourites-modal.tsx
+++ b/src/features/ui/components/modals/favourites-modal.tsx
@ -47,7 +47,7 @@ const FavouritesModal: React.FC<IFavouritesModal> = ({ onClose, statusId }) => {
      <ScrollableList
        scrollKey='favourites'
        emptyMessage={emptyMessage}
-        className='max-w-full'
+        listClassName='max-w-full'
        itemClassName='pb-3'
        style={{ height: '80vh' }}
        useWindowScroll={false}
--- a/src/features/ui/components/modals/mentions-modal.tsx
+++ b/src/features/ui/components/modals/mentions-modal.tsx
@ -41,7 +41,7 @@ const MentionsModal: React.FC<IMentionsModal> = ({ onClose, statusId }) => {
    body = (
      <ScrollableList
        scrollKey='mentions'
-        className='max-w-full'
+        listClassName='max-w-full'
        itemClassName='pb-3'
      >
        {accountIds.map(id =>
--- a/src/features/ui/components/modals/reactions-modal.tsx
+++ b/src/features/ui/components/modals/reactions-modal.tsx
@ -98,9 +98,10 @@ const ReactionsModal: React.FC<IReactionsModal> = ({ onClose, statusId, reaction
      <ScrollableList
        scrollKey='reactions'
        emptyMessage={emptyMessage}
-        className={clsx('max-w-full', {
+        className={clsx({
          'mt-4': reactions.size > 0,
        })}
+        listClassName='max-w-full'
        itemClassName='pb-3'
      >
        {accounts.map((account) =>
--- a/src/features/ui/components/modals/reblogs-modal.tsx
+++ b/src/features/ui/components/modals/reblogs-modal.tsx
@ -48,7 +48,7 @@ const ReblogsModal: React.FC<IReblogsModal> = ({ onClose, statusId }) => {
      <ScrollableList
        scrollKey='reblogs'
        emptyMessage={emptyMessage}
-        className='max-w-full'
+        listClassName='max-w-full'
        itemClassName='pb-3'
        style={{ height: '80vh' }}
        useWindowScroll={false}