diff --git a/.stylelintrc.json b/.stylelintrc.json index 403345750..c8a71a164 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -10,7 +10,7 @@ "font-family-no-missing-generic-family-keyword": [true, { "ignoreFontFamilies": ["ForkAwesome", "Font Awesome 5 Free", "OpenDyslexic", "soapbox"] }], "no-descending-specificity": null, "no-duplicate-selectors": null, - "scss/at-rule-no-unknown": [true, { "ignoreAtRules": ["/tailwind/"]}], - "no-invalid-position-at-import-rule": [true, { "ignoreAtRules": ["/tailwind/"]}] + "scss/at-rule-no-unknown": [true, { "ignoreAtRules": ["/tailwind/", "layer"]}], + "no-invalid-position-at-import-rule": null } } diff --git a/app/soapbox/components/autosuggest_textarea.js b/app/soapbox/components/autosuggest_textarea.js index 6bd4c7d97..f64609b60 100644 --- a/app/soapbox/components/autosuggest_textarea.js +++ b/app/soapbox/components/autosuggest_textarea.js @@ -257,7 +257,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent { ); @@ -643,7 +643,7 @@ class StatusActionBar extends ImmutablePureComponent { title={replyTitle} src={require('@tabler/icons/icons/message-circle.svg')} onClick={this.handleReplyClick} - className='text-gray-400 hover:text-gray-600' + className='text-gray-400 hover:text-gray-600 dark:hover:text-white' /> {replyCount !== 0 ? ( @@ -672,7 +672,7 @@ class StatusActionBar extends ImmutablePureComponent { /> */} {this.renderScrollableContent()} diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx index 31f8e6931..ab5123455 100644 --- a/app/soapbox/components/ui/card/card.tsx +++ b/app/soapbox/components/ui/card/card.tsx @@ -26,7 +26,7 @@ const Card: React.FC = React.forwardRef(({ children, variant, size = 'md' {...filteredProps} className={classNames({ 'space-y-4': true, - 'bg-white sm:shadow-lg overflow-hidden': variant === 'rounded', + 'bg-white dark:bg-slate-800 sm:shadow-lg dark:sm:shadow-inset overflow-hidden': variant === 'rounded', [sizes[size]]: true, [className]: typeof className !== 'undefined', })} diff --git a/app/soapbox/components/ui/column/__tests__/__snapshots__/column.test.js.snap b/app/soapbox/components/ui/column/__tests__/__snapshots__/column.test.js.snap index e33e9b74b..4c5b293fa 100644 --- a/app/soapbox/components/ui/column/__tests__/__snapshots__/column.test.js.snap +++ b/app/soapbox/components/ui/column/__tests__/__snapshots__/column.test.js.snap @@ -6,7 +6,7 @@ exports[` renders correctly with minimal props 1`] = ` role="region" > <> - {/* */} + {themeCss && } diff --git a/app/soapbox/features/placeholder/components/placeholder_avatar.js b/app/soapbox/features/placeholder/components/placeholder_avatar.js index 820db7abb..47cb346aa 100644 --- a/app/soapbox/features/placeholder/components/placeholder_avatar.js +++ b/app/soapbox/features/placeholder/components/placeholder_avatar.js @@ -15,7 +15,7 @@ const PlaceholderAvatar = ({ size }) => { return ( diff --git a/app/soapbox/features/placeholder/components/placeholder_display_name.js b/app/soapbox/features/placeholder/components/placeholder_display_name.js index 37259eac8..ed71f6420 100644 --- a/app/soapbox/features/placeholder/components/placeholder_display_name.js +++ b/app/soapbox/features/placeholder/components/placeholder_display_name.js @@ -8,7 +8,7 @@ const PlaceholderDisplayName = ({ minLength, maxLength }) => { const acctLength = randomIntFromInterval(maxLength, minLength); return ( - + {generateText(length)} {generateText(acctLength)} diff --git a/app/soapbox/features/placeholder/components/placeholder_status.tsx b/app/soapbox/features/placeholder/components/placeholder_status.tsx index ab370b1bd..a11823f8a 100644 --- a/app/soapbox/features/placeholder/components/placeholder_status.tsx +++ b/app/soapbox/features/placeholder/components/placeholder_status.tsx @@ -12,8 +12,8 @@ interface IPlaceholderStatus { const PlaceholderStatus = ({ thread = false }: IPlaceholderStatus) => ( diff --git a/app/soapbox/features/placeholder/components/placeholder_status_content.js b/app/soapbox/features/placeholder/components/placeholder_status_content.js index 5da2122fd..84772ccf2 100644 --- a/app/soapbox/features/placeholder/components/placeholder_status_content.js +++ b/app/soapbox/features/placeholder/components/placeholder_status_content.js @@ -7,7 +7,7 @@ const PlaceholderStatusContent = ({ minLength, maxLength }) => { const length = randomIntFromInterval(maxLength, minLength); return ( - + {generateText(length)} ); diff --git a/app/soapbox/features/ui/components/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx index dfe76a541..75b76a12c 100644 --- a/app/soapbox/features/ui/components/navbar.tsx +++ b/app/soapbox/features/ui/components/navbar.tsx @@ -27,7 +27,7 @@ const Navbar = () => { const onOpenSidebar = () => dispatch(openSidebar()); return ( - + {account && ( diff --git a/app/styles/application.scss b/app/styles/application.scss index 243894ca5..64478a2f5 100644 --- a/app/styles/application.scss +++ b/app/styles/application.scss @@ -104,6 +104,12 @@ @tailwind components; @tailwind utilities; +@layer utilities { + .shadow-inset { + box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%); + } +} + @import 'forms'; @import 'utilities'; @import 'components/datepicker'; diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss index 8a85c3067..f2d2e8951 100644 --- a/app/styles/components/status.scss +++ b/app/styles/components/status.scss @@ -160,7 +160,7 @@ } .status-link { - @apply hover:underline text-primary-600 hover:text-primary-800; + @apply hover:underline text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-500; } .status { @@ -238,7 +238,7 @@ } .status__wrapper { - @apply bg-white px-4 py-6 sm:shadow-xl sm:p-5 sm:rounded-xl; + @apply bg-white dark:bg-slate-800 px-4 py-6 sm:shadow-xl dark:sm:shadow-inset sm:p-5 sm:rounded-xl; } [column-type=filled] .status__wrapper, @@ -379,7 +379,7 @@ .status__content, .reply-indicator__content { - @apply text-gray-900 break-words text-ellipsis overflow-hidden relative; + @apply text-gray-900 dark:text-gray-300 break-words text-ellipsis overflow-hidden relative; &:focus { @apply outline-none; @@ -410,7 +410,7 @@ } a { - @apply text-primary-600 hover:underline; + @apply text-primary-600 dark:text-primary-400 hover:underline; .fa { color: var(--primary-text-color); @@ -469,11 +469,11 @@ } .status-card { - @apply flex text-sm border border-solid border-gray-200 rounded-lg text-gray-800 mt-3 min-h-[150px] no-underline overflow-hidden; + @apply flex text-sm border border-solid border-gray-200 dark:border-gray-700 rounded-lg text-gray-800 dark:text-gray-200 mt-3 min-h-[150px] no-underline overflow-hidden; } a.status-card { - @apply cursor-pointer hover:bg-gray-50 hover:no-underline; + @apply cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-900 hover:no-underline; } .status-card-photo { @@ -489,7 +489,7 @@ a.status-card { } .status-card__title { - @apply block font-medium mb-2 text-gray-800 no-underline; + @apply block font-medium mb-2 text-gray-800 dark:text-gray-200 no-underline; } .status-card__content { @@ -497,7 +497,7 @@ a.status-card { } .status-card__description { - @apply text-gray-500; + @apply text-gray-500 dark:text-gray-400; } .status-card__host { @@ -549,7 +549,7 @@ a.status-card { } .status-card.compact { - @apply border-gray-200; + @apply border-gray-200 dark:border-gray-700; } .status-card__image-image {
{generateText(length)}
{generateText(acctLength)}