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

Merge branch 'next' into 'next'

Browse source 
Dark mode, chats thumbnav link styles

See merge request soapbox-pub/soapbox-fe!1159
This commit is contained in:
Alex Gleason 2022-03-29 14:15:18 +00:00
commit 9da47fe4d3
17 changed files with 37 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/soapbox/components/autosuggest_textarea.js
View file

@ -257,7 +257,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
<Textarea
ref={this.setTextarea}
className={classNames('dark:bg-slate-800 px-0 border-0 text-gray-800 dark:text-white placeholder:text-color-400 resize-none w-full focus:shadow-none focus:border-0 focus:ring-0', {
className={classNames('dark:bg-slate-800 px-0 border-0 text-gray-800 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 resize-none w-full focus:shadow-none focus:border-0 focus:ring-0', {
'min-h-[100px]': !condensed,
})}
id={id}

4
app/soapbox/components/list.js
View file

@ -43,10 +43,10 @@ const ListItem = ({ label, hint, children, onClick }) => {
{...linkProps}
>
<div className='flex flex-col py-1.5 pr-4'>
<LabelComp htmlFor={domId}>{label}</LabelComp>
<LabelComp className='text-black dark:text-white' htmlFor={domId}>{label}</LabelComp>
{hint ? (
<span className='text-sm text-gray-500'>{hint}</span>
<span className='text-sm text-gray-500 dark:text-gray-400'>{hint}</span>
) : null}
</div>

2
app/soapbox/components/scrollable_list.js
View file

@ -276,7 +276,7 @@ class ScrollableList extends PureComponent {
<div className={classNames('mt-2', className)} ref={this.setRef}>
{alwaysPrepend && prepend}
<div className='bg-primary-50 mt-2 rounded-lg text-center p-8'>
<div className='bg-primary-50 dark:bg-slate-700 mt-2 rounded-lg text-center p-8'>
<Text>{emptyMessage}</Text>
</div>
</div>

2
app/soapbox/components/status.js
View file

@ -381,7 +381,7 @@ class Status extends ImmutablePureComponent {
defaultMessage='{name} reposted'
values={{
name: <bdi className='max-w-[100px] truncate pr-1'>
<strong className='text-gray-800' dangerouslySetInnerHTML={displayNameHtml} />
<strong className='text-gray-800 dark:text-gray-200' dangerouslySetInnerHTML={displayNameHtml} />
</bdi>,
}}
/>

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

@ -99,12 +99,16 @@ class ThumbNavigation extends React.PureComponent {
<NavLink to='/chats' className='thumb-navigation__link'>
<IconWithCounter
src={require('@tabler/icons/icons/messages.svg')}
className={classNames({ 'svg-icon--active': location.pathname === '/chats' })}
className={classNames({
'h-5 w-5': true,
'text-gray-600': location.pathname !== '/chats',
'text-primary-600': location.pathname === '/chats',
})}
count={chatsCount}
/>
<span>
<Text tag='span' size='xs'>
<FormattedMessage id='navigation.chats' defaultMessage='Chats' />
</span>
</Text>
</NavLink>
) : (
<NavLink to='/messages' className='thumb-navigation__link'>

4
app/soapbox/components/ui/form-group/form-group.tsx
View file

@ -24,12 +24,12 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
<div>
<label
htmlFor={formFieldId}
className='block text-sm font-medium text-gray-700'
className='block text-sm font-medium text-gray-700 dark:text-gray-400'
>
{labelText}
</label>
<div className='mt-1'>
<div className='mt-1 dark:text-white'>
{firstChild}
{inputChildren.filter((_, i) => i !== 0)}

4
app/soapbox/components/ui/modal/modal.tsx
View file

@ -46,11 +46,11 @@ const Modal: React.FC<IModal> = ({
}, [buttonRef]);
return (
<div className='block w-full max-w-xl p-6 mx-auto overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl pointer-events-auto'>
<div className='block w-full max-w-xl p-6 mx-auto overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-slate-800 shadow-xl rounded-2xl pointer-events-auto'>
<div className='sm:flex sm:items-start w-full justify-between'>
<div className='w-full'>
<div className='w-full flex flex-row justify-between items-center'>
<h3 className='text-lg leading-6 font-medium text-gray-900'>
<h3 className='text-lg leading-6 font-medium text-gray-900 dark:text-white'>
{title}
</h3>

4
app/soapbox/components/ui/tabs/tabs.css
View file

@ -12,9 +12,9 @@
[data-reach-tab] {
@apply flex-1 flex justify-center py-4 px-1 text-center font-medium text-sm
text-gray-500 hover:text-gray-700;
text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200;
}
[data-reach-tab][data-selected] {
@apply text-gray-900;
@apply text-gray-900 dark:text-white;
}

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

@ -40,7 +40,7 @@ const AnimatedTabs: React.FC<IAnimatedInterface> = ({ children, ...rest }) => {
ref={ref}
>
<div
className='w-full h-[3px] bg-primary-200 absolute'
className='w-full h-[3px] bg-primary-200 dark:bg-slate-600 absolute'
style={{ top }}
/>
<div

16
app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_form-test.js.snap
View file

@ -20,13 +20,13 @@ exports[`<LoginForm /> renders for Mastodon 1`] = `
>
<div>
<label
className="block text-sm font-medium text-gray-700"
className="block text-sm font-medium text-gray-700 dark:text-gray-400"
htmlFor="field-1"
>
Email address
</label>
<div
className="mt-1"
className="mt-1 dark:text-white"
>
<div
className="mt-1 relative rounded-md shadow-sm"
@ -48,13 +48,13 @@ exports[`<LoginForm /> renders for Mastodon 1`] = `
</div>
<div>
<label
className="block text-sm font-medium text-gray-700"
className="block text-sm font-medium text-gray-700 dark:text-gray-400"
htmlFor="field-1"
>
Password
</label>
<div
className="mt-1"
className="mt-1 dark:text-white"
>
<div
className="mt-1 relative rounded-md shadow-sm"
@ -153,13 +153,13 @@ exports[`<LoginForm /> renders for Pleroma 1`] = `
>
<div>
<label
className="block text-sm font-medium text-gray-700"
className="block text-sm font-medium text-gray-700 dark:text-gray-400"
htmlFor="field-1"
>
Email address
</label>
<div
className="mt-1"
className="mt-1 dark:text-white"
>
<div
className="mt-1 relative rounded-md shadow-sm"
@ -181,13 +181,13 @@ exports[`<LoginForm /> renders for Pleroma 1`] = `
</div>
<div>
<label
className="block text-sm font-medium text-gray-700"
className="block text-sm font-medium text-gray-700 dark:text-gray-400"
htmlFor="field-1"
>
Password
</label>
<div
className="mt-1"
className="mt-1 dark:text-white"
>
<div
className="mt-1 relative rounded-md shadow-sm"

8
app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_page-test.js.snap
View file

@ -21,13 +21,13 @@ exports[`<LoginPage /> renders correctly on load 1`] = `
>
<div>
<label
className="block text-sm font-medium text-gray-700"
className="block text-sm font-medium text-gray-700 dark:text-gray-400"
htmlFor="field-1"
>
Email address
</label>
<div
className="mt-1"
className="mt-1 dark:text-white"
>
<div
className="mt-1 relative rounded-md shadow-sm"
@ -49,13 +49,13 @@ exports[`<LoginPage /> renders correctly on load 1`] = `
</div>
<div>
<label
className="block text-sm font-medium text-gray-700"
className="block text-sm font-medium text-gray-700 dark:text-gray-400"
htmlFor="field-1"
>
Password
</label>
<div
className="mt-1"
className="mt-1 dark:text-white"
>
<div
className="mt-1 relative rounded-md shadow-sm"

2
app/soapbox/features/chats/components/audio_toggle.js
View file

@ -40,7 +40,7 @@ class AudioToggle extends React.PureComponent {
render() {
const { intl, checked, showLabel } = this.props;
const id ='chats-audio-toggle';
const id = 'chats-audio-toggle';
const label = intl.formatMessage(checked ? messages.switchOff : messages.switchOn);
return (

2
app/soapbox/features/compose/components/reply_indicator.js
View file

@ -43,7 +43,7 @@ export default class ReplyIndicator extends ImmutablePureComponent {
}
return (
<Stack space={2} className='p-4 rounded-lg bg-gray-100'>
<Stack space={2} className='p-4 rounded-lg bg-gray-100 dark:bg-slate-700'>
<AccountContainer
{...actions}
id={status.getIn(['account', 'id'])}

2
app/soapbox/features/notifications/components/notification.js
View file

@ -27,7 +27,7 @@ function FormattedMessageFixed(props) {
const buildLink = (account) => (
<bdi>
<Permalink
className='text-gray-800 font-bold hover:underline'
className='text-gray-800 dark:text-gray-200 font-bold hover:underline'
href={`/@${account.get('acct')}`}
title={account.get('acct')}
to={`/@${account.get('acct')}`}

2
app/soapbox/features/notifications/index.js
View file

@ -216,7 +216,7 @@ class Notifications extends React.PureComponent {
onScrollToTop={this.handleScrollToTop}
onScroll={this.handleScroll}
className={classNames({
'divide-y divide-gray-200 divide-solid': notificationsToRender.size > 0,
'divide-y divide-gray-200 dark:divide-gray-600 divide-solid': notificationsToRender.size > 0,
'space-y-2': notificationsToRender.size === 0,
})}
>

2
app/soapbox/features/ui/components/confirmation_modal.js
View file

@ -63,7 +63,7 @@ class ConfirmationModal extends React.PureComponent {
secondaryText={secondary}
sectondaryAction={this.handleSecondary}
>
<p className='text-gray-600'>{message}</p>
<p className='text-gray-600 dark:text-gray-300'>{message}</p>
<div className='mt-2'>
{checkbox && <div className='confirmation-modal__checkbox'>

2
app/styles/components/display-name.scss
View file

@ -10,7 +10,7 @@
.status__display-name,
.account__display-name {
strong {
color: var(--primary-text-color);
@apply text-gray-800 dark:text-gray-200;
}
}