bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'next' into 'next'

Browse source 
Styles, dark mode

See merge request soapbox-pub/soapbox-fe!1162
This commit is contained in:
Alex Gleason 2022-03-30 13:47:08 +00:00
commit e788722405
16 changed files with 73 additions and 104 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/soapbox/components/poll.tsx
View file

@ -71,7 +71,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
onChange={handleOptionChange} onChange={handleOptionChange}
/> />
<HStack alignItems='center' className='p-1'> <HStack alignItems='center' className='p-1 text-gray-900 dark:text-gray-300'>
{!showResults && ( {!showResults && (
<span <span
className={classNames('inline-block w-4 h-4 mr-2.5 border border-solid border-primary-600 rounded-full', { className={classNames('inline-block w-4 h-4 mr-2.5 border border-solid border-primary-600 rounded-full', {

10
app/soapbox/components/thumb_navigation.js
View file

@ -51,7 +51,7 @@ class ThumbNavigation extends React.PureComponent {
src={require('icons/feed.svg')} src={require('icons/feed.svg')}
className={classNames({ className={classNames({
'h-5 w-5': true, 'h-5 w-5': true,
'text-gray-600': location.pathname !== '/', 'text-gray-600 dark:text-gray-300': location.pathname !== '/',
'text-primary-600': location.pathname === '/', 'text-primary-600': location.pathname === '/',
})} })}
/> />
@ -66,7 +66,7 @@ class ThumbNavigation extends React.PureComponent {
src={require('@tabler/icons/icons/search.svg')} src={require('@tabler/icons/icons/search.svg')}
className={classNames({ className={classNames({
'h-5 w-5': true, 'h-5 w-5': true,
'text-gray-600': location.pathname !== '/search', 'text-gray-600 dark:text-gray-300': location.pathname !== '/search',
'text-primary-600': location.pathname === '/search', 'text-primary-600': location.pathname === '/search',
})} })}
/> />
@ -82,7 +82,7 @@ class ThumbNavigation extends React.PureComponent {
src={require('@tabler/icons/icons/bell.svg')} src={require('@tabler/icons/icons/bell.svg')}
className={classNames({ className={classNames({
'h-5 w-5': true, 'h-5 w-5': true,
'text-gray-600': location.pathname !== '/notifications', 'text-gray-600 dark:text-gray-300': location.pathname !== '/notifications',
'text-primary-600': location.pathname === '/notifications', 'text-primary-600': location.pathname === '/notifications',
})} })}
count={notificationCount} count={notificationCount}
@ -101,7 +101,7 @@ class ThumbNavigation extends React.PureComponent {
src={require('@tabler/icons/icons/messages.svg')} src={require('@tabler/icons/icons/messages.svg')}
className={classNames({ className={classNames({
'h-5 w-5': true, 'h-5 w-5': true,
'text-gray-600': location.pathname !== '/chats', 'text-gray-600 dark:text-gray-300': location.pathname !== '/chats',
'text-primary-600': location.pathname === '/chats', 'text-primary-600': location.pathname === '/chats',
})} })}
count={chatsCount} count={chatsCount}
@ -116,7 +116,7 @@ class ThumbNavigation extends React.PureComponent {
src={require('@tabler/icons/icons/mail.svg')} src={require('@tabler/icons/icons/mail.svg')}
className={classNames({ className={classNames({
'h-5 w-5': true, 'h-5 w-5': true,
'text-gray-600': !['/messages', '/conversations'].includes(location.pathname), 'text-gray-600 dark:text-gray-300': !['/messages', '/conversations'].includes(location.pathname),
'text-primary-600': ['/messages', '/conversations'].includes(location.pathname), 'text-primary-600': ['/messages', '/conversations'].includes(location.pathname),
})} })}
/> />

2
app/soapbox/components/ui/column/column.tsx
View file

@ -32,7 +32,7 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
const renderChildren = () => { const renderChildren = () => {
if (transparent) { if (transparent) {
return <div className='bg-white sm:bg-transparent'>{children}</div>; return <div className='bg-white dark:bg-slate-800 sm:bg-transparent sm:dark:bg-transparent'>{children}</div>;
} }
return ( return (

10
app/soapbox/components/ui/menu/menu.css
View file

@ -1,5 +1,5 @@
[data-reach-menu-popover] { [data-reach-menu-popover] {
@apply origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none; @apply origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-slate-900 ring-1 ring-black ring-opacity-5 focus:outline-none;
z-index: 1003; z-index: 1003;
} }
@ -9,7 +9,7 @@ div:focus[data-reach-menu-list] {
} }
[data-reach-menu-item][data-selected] { [data-reach-menu-item][data-selected] {
@apply bg-gray-100; @apply bg-gray-100 dark:bg-slate-700;
} }
[data-reach-menu-list] { [data-reach-menu-list] {
@ -18,11 +18,11 @@ div:focus[data-reach-menu-list] {
[data-reach-menu-item], [data-reach-menu-item],
[data-reach-menu-link] { [data-reach-menu-link] {
@apply block px-4 py-2.5 text-sm text-gray-700 cursor-pointer; @apply block px-4 py-2.5 text-sm text-gray-700 dark:text-gray-400 cursor-pointer;
} }
[data-reach-menu-link] { [data-reach-menu-link] {
@apply hover:bg-gray-100; @apply hover:bg-gray-100 dark:hover:bg-slate-700;
} }
[data-reach-menu-item][data-disabled], [data-reach-menu-item][data-disabled],
@ -31,5 +31,5 @@ div:focus[data-reach-menu-list] {
} }
[data-reach-menu-popover] hr { [data-reach-menu-popover] hr {
@apply my-1 mx-2 border-t border-gray-100; @apply my-1 mx-2 border-t border-gray-100 dark:border-slate-600;
} }

2
app/soapbox/components/ui/menu/menu.tsx
View file

@ -20,7 +20,7 @@ const MenuList = (props: IMenuList) => (
<MenuPopover position={props.position === 'left' ? positionDefault : positionRight}> <MenuPopover position={props.position === 'left' ? positionDefault : positionRight}>
<MenuItems <MenuItems
onKeyDown={(event) => event.nativeEvent.stopImmediatePropagation()} onKeyDown={(event) => event.nativeEvent.stopImmediatePropagation()}
className='py-1 bg-white rounded-lg shadow-menu' className='py-1 bg-white dark:bg-slate-900 rounded-lg shadow-menu'
{...props} {...props}
/> />
</MenuPopover> </MenuPopover>

16
app/soapbox/features/developers/developers_menu.js
View file

@ -31,32 +31,32 @@ const Developers = () => {
return ( return (
<Column label={intl.formatMessage(messages.heading)}> <Column label={intl.formatMessage(messages.heading)}>
<div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2'> <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2'>
<Link to='/developers/apps/create' className='bg-gray-200 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'> <Link to='/developers/apps/create' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
<InlineSVG src={require('@tabler/icons/icons/apps.svg')} /> <InlineSVG src={require('@tabler/icons/icons/apps.svg')} className='dark:text-gray-100' />
<Text> <Text>
<FormattedMessage id='developers.navigation.app_create_label' defaultMessage='Create an app' /> <FormattedMessage id='developers.navigation.app_create_label' defaultMessage='Create an app' />
</Text> </Text>
</Link> </Link>
<Link to='/developers/settings_store' className='bg-gray-200 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'> <Link to='/developers/settings_store' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
<InlineSVG src={require('@tabler/icons/icons/code-plus.svg')} /> <InlineSVG src={require('@tabler/icons/icons/code-plus.svg')} className='dark:text-gray-100' />
<Text> <Text>
<FormattedMessage id='developers.navigation.settings_store_label' defaultMessage='Settings store' /> <FormattedMessage id='developers.navigation.settings_store_label' defaultMessage='Settings store' />
</Text> </Text>
</Link> </Link>
<Link to='/error' className='bg-gray-200 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'> <Link to='/error' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
<InlineSVG src={require('@tabler/icons/icons/mood-sad.svg')} /> <InlineSVG src={require('@tabler/icons/icons/mood-sad.svg')} className='dark:text-gray-100' />
<Text> <Text>
<FormattedMessage id='developers.navigation.intentional_error_label' defaultMessage='Trigger an error' /> <FormattedMessage id='developers.navigation.intentional_error_label' defaultMessage='Trigger an error' />
</Text> </Text>
</Link> </Link>
<button onClick={leaveDevelopers} className='bg-gray-200 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'> <button onClick={leaveDevelopers} className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
<InlineSVG src={require('@tabler/icons/icons/logout.svg')} /> <InlineSVG src={require('@tabler/icons/icons/logout.svg')} className='dark:text-gray-100' />
<Text> <Text>
<FormattedMessage id='developers.navigation.leave_developers_label' defaultMessage='Leave developers' /> <FormattedMessage id='developers.navigation.leave_developers_label' defaultMessage='Leave developers' />

7
app/soapbox/features/directory/components/account_card.js
View file

@ -11,6 +11,7 @@ import Avatar from 'soapbox/components/avatar';
import DisplayName from 'soapbox/components/display_name'; import DisplayName from 'soapbox/components/display_name';
import Permalink from 'soapbox/components/permalink'; import Permalink from 'soapbox/components/permalink';
import RelativeTimestamp from 'soapbox/components/relative_timestamp'; import RelativeTimestamp from 'soapbox/components/relative_timestamp';
import { Text } from 'soapbox/components/ui';
import ActionButton from 'soapbox/features/ui/components/action_button'; import ActionButton from 'soapbox/features/ui/components/action_button';
import { makeGetAccount } from 'soapbox/selectors'; import { makeGetAccount } from 'soapbox/selectors';
import { shortNumberFormat } from 'soapbox/utils/numbers'; import { shortNumberFormat } from 'soapbox/utils/numbers';
@ -73,9 +74,9 @@ class AccountCard extends ImmutablePureComponent {
</div> </div>
<div className='directory__card__extra'> <div className='directory__card__extra'>
<div className='accounts-table__count'>{shortNumberFormat(account.get('statuses_count'))} <small><FormattedMessage id='account.posts' defaultMessage='Toots' /></small></div> <div className='accounts-table__count'><Text theme='primary' size='sm'>{shortNumberFormat(account.get('statuses_count'))}</Text> <small><FormattedMessage id='account.posts' defaultMessage='Toots' /></small></div>
<div className='accounts-table__count'>{shortNumberFormat(account.get('followers_count'))} <small><FormattedMessage id='account.followers' defaultMessage='Followers' /></small></div> <div className='accounts-table__count'><Text theme='primary' size='sm'>{shortNumberFormat(account.get('followers_count'))}</Text> <small><FormattedMessage id='account.followers' defaultMessage='Followers' /></small></div>
<div className='accounts-table__count'>{account.get('last_status_at') === null ? <FormattedMessage id='account.never_active' defaultMessage='Never' /> : <RelativeTimestamp timestamp={account.get('last_status_at')} />} <small><FormattedMessage id='account.last_status' defaultMessage='Last active' /></small></div> <div className='accounts-table__count'>{account.get('last_status_at') === null ? <Text theme='primary' size='sm'><FormattedMessage id='account.never_active' defaultMessage='Never' /></Text> : <RelativeTimestamp className='text-primary-600' timestamp={account.get('last_status_at')} />} <small><FormattedMessage id='account.last_status' defaultMessage='Last active' /></small></div>
</div> </div>
</div> </div>
); );

2
app/soapbox/features/placeholder/components/placeholder_notification.js
View file

@ -5,7 +5,7 @@ import PlaceholderDisplayName from './placeholder_display_name';
import PlaceholderStatusContent from './placeholder_status_content'; import PlaceholderStatusContent from './placeholder_status_content';
const PlaceholderNotification = () => ( const PlaceholderNotification = () => (
<div className='bg-white px-4 py-6 sm:p-6'> <div className='bg-white dark:bg-slate-800 px-4 py-6 sm:p-6'>
<div className='w-full animate-pulse'> <div className='w-full animate-pulse'>
<div className='mb-2'> <div className='mb-2'>
<PlaceholderStatusContent minLength={20} maxLength={20} /> <PlaceholderStatusContent minLength={20} maxLength={20} />

4
app/soapbox/features/ui/components/column_forbidden.js
View file

@ -3,7 +3,6 @@ import React from 'react';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import Column from './column'; import Column from './column';
import ColumnHeader from './column_header';
const messages = defineMessages({ const messages = defineMessages({
title: { id: 'column_forbidden.title', defaultMessage: 'Forbidden' }, title: { id: 'column_forbidden.title', defaultMessage: 'Forbidden' },
@ -20,8 +19,7 @@ class ColumnForbidden extends React.PureComponent {
const { intl: { formatMessage } } = this.props; const { intl: { formatMessage } } = this.props;
return ( return (
<Column> <Column label={formatMessage(messages.title)}>
<ColumnHeader icon='exclamation-circle' type={formatMessage(messages.title)} />
<div className='error-column'> <div className='error-column'>
{formatMessage(messages.body)} {formatMessage(messages.body)}
</div> </div>

2
app/styles/accounts.scss
View file

@ -73,8 +73,8 @@
text-align: left; text-align: left;
strong { strong {
@apply text-black dark:text-white;
font-size: 15px; font-size: 15px;
color: var(--primary-text-color);
font-weight: 500; font-weight: 500;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

3
app/styles/components/accordion.scss
View file

@ -3,10 +3,9 @@
} }
.accordion { .accordion {
color: var(--primary-text-color); @apply text-black dark:text-white bg-gray-100 dark:bg-slate-800;
padding: 15px 20px; padding: 15px 20px;
font-size: 14px; font-size: 14px;
background-color: var(--brand-color--faint);
border-radius: 8px; border-radius: 8px;
margin: 0; margin: 0;
position: relative; position: relative;

54
app/styles/components/compose-form.scss
View file

@ -362,14 +362,7 @@
} }
.privacy-dropdown__dropdown { .privacy-dropdown__dropdown {
font-size: 14px; @apply absolute bg-white dark:bg-slate-900 z-40 rounded-md shadow-lg ml-10 text-sm;
position: absolute;
background: var(--foreground-color);
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
border-radius: 4px;
margin-left: 40px;
overflow: hidden;
z-index: 10000;
&.top { &.top {
transform-origin: 50% 100%; transform-origin: 50% 100%;
@ -381,50 +374,38 @@
} }
.privacy-dropdown__option { .privacy-dropdown__option {
color: var(--primary-text-color); @apply flex p-2.5 text-sm text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-slate-800 cursor-pointer;
padding: 10px;
cursor: pointer; &.active {
display: flex; @apply bg-gray-100 dark:bg-slate-800;
}
&:hover, &:hover,
&.active { &.active {
background: var(--brand-color--med); .privacy-dropdown__option__content,
color: var(--primary-text-color); .privacy-dropdown__option__content strong {
outline: 0; @apply text-black dark:text-white;
.privacy-dropdown__option__content {
color: var(--primary-text-color);
strong {
color: var(--primary-text-color);
}
} }
} }
&.active:hover { &.active {
background: hsla(var(--brand-color_hsl), 0.5); @apply hover:bg-gray-200 dark:hover:bg-slate-700;
} }
} }
.privacy-dropdown__option__icon { .privacy-dropdown__option__icon {
display: flex; @apply flex items-center justify-center mr-2.5;
align-items: center;
justify-content: center;
margin-right: 10px;
} }
.privacy-dropdown__option__content { .privacy-dropdown__option__content {
flex: 1 1 auto; @apply flex-auto text-primary-600 dark:text-primary-400;
color: var(--highlight-text-color);
strong { strong {
font-weight: 500; @apply block font-medium text-black dark:text-white;
display: block;
color: var(--primary-text-color);
@each $lang in $cjk-langs { @each $lang in $cjk-langs {
&:lang(#{$lang}) { &:lang(#{$lang}) {
font-weight: 700; @apply font-bold;
} }
} }
} }
@ -450,12 +431,11 @@
} }
&.top .privacy-dropdown__value { &.top .privacy-dropdown__value {
border-radius: 0 0 4px 4px; @apply rounded-t-md;
} }
.privacy-dropdown__dropdown { .privacy-dropdown__dropdown {
display: block; @apply block shadow-md;
box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1);
} }
} }

13
app/styles/components/directory.scss
View file

@ -31,11 +31,10 @@
} }
&__card { &__card {
@apply rounded-lg bg-gray-100 dark:bg-slate-700;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 0; margin-bottom: 0;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
border-radius: 10px;
background: var(--foreground-color);
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@ -54,9 +53,9 @@
} }
&__img { &__img {
@apply bg-primary-200 dark:bg-slate-600;
height: 125px; height: 125px;
position: relative; position: relative;
background: var(--brand-color--med);
img { img {
display: block; display: block;
@ -68,9 +67,9 @@
} }
&__bar { &__bar {
@apply bg-primary-200 dark:bg-slate-600;
display: flex; display: flex;
align-items: center; align-items: center;
background: var(--brand-color--med);
padding: 10px; padding: 10px;
&__name { &__name {
@ -104,17 +103,17 @@
text-align: left; text-align: left;
strong { strong {
@apply text-black dark:text-white;
font-size: 15px; font-size: 15px;
color: var(--primary-text-color);
font-weight: 500; font-weight: 500;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
span:not(.verified-icon) { span:not(.verified-icon) {
@apply text-gray-500 dark:text-gray-400;
display: block; display: block;
font-size: 14px; font-size: 14px;
color: var(--primary-text-color--faint);
font-weight: 400; font-weight: 400;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -145,9 +144,9 @@
} }
.account__header__content { .account__header__content {
@apply border-b border-solid border-gray-200 dark:border-slate-600;
box-sizing: border-box; box-sizing: border-box;
padding: 15px 10px; padding: 15px 10px;
border-bottom: 1px solid var(--brand-color--med);
width: 100%; width: 100%;
min-height: 50px; min-height: 50px;
white-space: nowrap; white-space: nowrap;

21
app/styles/components/dropdown-menu.scss
View file

@ -1,5 +1,5 @@
.dropdown-menu { .dropdown-menu {
@apply absolute bg-white z-40 rounded-md shadow-lg py-1 w-56; @apply absolute bg-white dark:bg-slate-900 z-40 rounded-md shadow-lg py-1 w-56;
&.left { transform-origin: 100% 50%; } &.left { transform-origin: 100% 50%; }
&.top { transform-origin: 50% 100%; } &.top { transform-origin: 50% 100%; }
@ -11,31 +11,31 @@
border: 0 solid transparent; border: 0 solid transparent;
&.left { &.left {
@apply border-l-white dark:border-l-slate-900;
right: -5px; right: -5px;
margin-top: -5px; margin-top: -5px;
border-width: 5px 0 5px 5px; border-width: 5px 0 5px 5px;
border-left-color: #fff;
} }
&.top { &.top {
@apply border-t-white dark:border-t-slate-900;
bottom: -5px; bottom: -5px;
margin-left: -5px; margin-left: -5px;
border-width: 5px 5px 0; border-width: 5px 5px 0;
border-top-color: #fff;
} }
&.bottom { &.bottom {
@apply border-b-white dark:border-b-slate-900;
top: -5px; top: -5px;
margin-left: -5px; margin-left: -5px;
border-width: 0 5px 5px; border-width: 0 5px 5px;
border-bottom-color: #fff;
} }
&.right { &.right {
@apply border-r-white dark:border-r-slate-900;
left: -5px; left: -5px;
margin-top: -5px; margin-top: -5px;
border-width: 5px 5px 5px 0; border-width: 5px 5px 5px 0;
border-right-color: #fff;
} }
} }
@ -45,27 +45,24 @@
&__item { &__item {
a { a {
@apply flex px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer; @apply flex px-4 py-2.5 text-sm text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-slate-800 cursor-pointer;
}
a {
> .svg-icon:first-child { > .svg-icon:first-child {
@apply h-5 w-5 mr-2.5 transition-none; @apply h-5 w-5 mr-2.5 transition-none;
svg { svg {
stroke-width: 1.5; @apply stroke-[1.5px] transition-none;
transition: none;
} }
} }
} }
&.destructive a { &.destructive a {
@apply text-danger-600; @apply text-danger-600 dark:text-danger-400;
} }
} }
&__separator { &__separator {
@apply block my-2 h-[1px] bg-gray-200; @apply block my-2 h-[1px] bg-gray-200 dark:bg-gray-600;
} }
} }
// end .dropdown-menu // end .dropdown-menu

27
app/styles/emoji_picker.scss
View file

@ -5,7 +5,7 @@
} }
.emoji-mart { .emoji-mart {
@apply text-base inline-block text-gray-900 rounded bg-white shadow-lg; @apply text-base inline-block text-gray-900 dark:text-gray-100 rounded bg-white dark:bg-slate-900 shadow-lg;
} }
.emoji-mart .emoji-mart-emoji { .emoji-mart .emoji-mart-emoji {
@ -33,7 +33,7 @@
} }
.emoji-mart-anchor { .emoji-mart-anchor {
@apply relative block flex-auto text-gray-400 text-center overflow-hidden transition-colors py-3 px-1; @apply relative block flex-auto text-gray-400 dark:text-gray-500 text-center overflow-hidden transition-colors py-3 px-1;
} }
.emoji-mart-anchor:focus { outline: 0; } .emoji-mart-anchor:focus { outline: 0; }
@ -41,7 +41,7 @@
.emoji-mart-anchor:hover, .emoji-mart-anchor:hover,
.emoji-mart-anchor:focus, .emoji-mart-anchor:focus,
.emoji-mart-anchor-selected { .emoji-mart-anchor-selected {
@apply text-gray-600; @apply text-gray-600 dark:text-gray-300;
} }
.emoji-mart-anchor-selected .emoji-mart-anchor-bar { .emoji-mart-anchor-selected .emoji-mart-anchor-bar {
@ -73,11 +73,11 @@
} }
.emoji-mart-search { .emoji-mart-search {
@apply relative mt-1.5 p-2.5 pr-12 bg-white; @apply relative mt-1.5 p-2.5 pr-12 bg-white dark:bg-slate-900;
} }
.emoji-mart-search input { .emoji-mart-search input {
@apply text-sm pr-9 block w-full border-gray-300 rounded-full focus:ring-primary-500 focus:border-primary-500; @apply text-sm pr-9 block w-full border-gray-300 dark:border-gray-600 rounded-full focus:ring-primary-500 focus:border-primary-500;
&::-moz-focus-inner { &::-moz-focus-inner {
border: 0; border: 0;
@ -125,6 +125,7 @@
} }
.emoji-mart-category .emoji-mart-emoji:hover::before { .emoji-mart-category .emoji-mart-emoji:hover::before {
@apply bg-gray-50 dark:bg-slate-800;
z-index: 0; z-index: 0;
content: ""; content: "";
position: absolute; position: absolute;
@ -132,7 +133,6 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #f4f4f4;
border-radius: 100%; border-radius: 100%;
} }
@ -145,12 +145,11 @@
} }
.emoji-mart-category-label span { .emoji-mart-category-label span {
@apply bg-white dark:bg-slate-900;
display: block; display: block;
width: 100%; width: 100%;
font-weight: 500; font-weight: 500;
padding: 5px 6px; padding: 5px 6px;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.95);
} }
.emoji-mart-category-list { .emoji-mart-category-list {
@ -181,7 +180,7 @@
} }
.emoji-mart-no-results { .emoji-mart-no-results {
@apply text-sm text-center text-gray-600; @apply text-sm text-center text-gray-600 dark:text-gray-300;
padding-top: 70px; padding-top: 70px;
} }
@ -242,22 +241,18 @@
} }
.emoji-picker-dropdown__modifiers__menu { .emoji-picker-dropdown__modifiers__menu {
@apply absolute bg-white rounded-3xl shadow overflow-hidden; @apply absolute bg-white dark:bg-slate-900 rounded-3xl shadow overflow-hidden;
z-index: 4; z-index: 4;
top: -4px; top: -4px;
left: -8px; left: -8px;
button { button {
display: block; @apply block cursor-pointer border-0 px-2 py-1 bg-transparent;
cursor: pointer;
border: 0;
padding: 4px 8px;
background: transparent;
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: hsla(var(--background-color_hsl), 0.4); @apply bg-gray-300 dark:bg-slate-600;
} }
} }

2
app/styles/navigation.scss
View file

@ -86,7 +86,7 @@
} }
.thumb-navigation { .thumb-navigation {
@apply fixed lg:hidden bottom-0 bg-white border-t border-solid border-gray-200 left-0 right-0 shadow-2xl w-full flex z-50; @apply fixed lg:hidden bottom-0 bg-white dark:bg-slate-800 border-t border-solid border-gray-200 dark:border-gray-700 left-0 right-0 shadow-2xl w-full flex z-50;
padding-bottom: env(safe-area-inset-bottom); /* iOS PWA */ padding-bottom: env(safe-area-inset-bottom); /* iOS PWA */
overflow-x: auto; overflow-x: auto;
scrollbar-width: thin; scrollbar-width: thin;