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

Styles, dark mode

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2022-03-30 15:07:17 +02:00
parent 8dfda97fea
commit 9022651a67
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}
/>
<HStack alignItems='center' className='p-1'>
<HStack alignItems='center' className='p-1 text-gray-900 dark:text-gray-300'>
{!showResults && (
<span
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')}
className={classNames({
'h-5 w-5': true,
'text-gray-600': location.pathname !== '/',
'text-gray-600 dark:text-gray-300': location.pathname !== '/',
'text-primary-600': location.pathname === '/',
})}
/>
@ -66,7 +66,7 @@ class ThumbNavigation extends React.PureComponent {
src={require('@tabler/icons/icons/search.svg')}
className={classNames({
'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',
})}
/>
@ -82,7 +82,7 @@ class ThumbNavigation extends React.PureComponent {
src={require('@tabler/icons/icons/bell.svg')}
className={classNames({
'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',
})}
count={notificationCount}
@ -101,7 +101,7 @@ class ThumbNavigation extends React.PureComponent {
src={require('@tabler/icons/icons/messages.svg')}
className={classNames({
'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',
})}
count={chatsCount}
@ -116,7 +116,7 @@ class ThumbNavigation extends React.PureComponent {
src={require('@tabler/icons/icons/mail.svg')}
className={classNames({
'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),
})}
/>

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 = () => {
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 (

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

@ -1,5 +1,5 @@
[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;
}
@ -9,7 +9,7 @@ div:focus[data-reach-menu-list] {
}
[data-reach-menu-item][data-selected] {
@apply bg-gray-100;
@apply bg-gray-100 dark:bg-slate-700;
}
[data-reach-menu-list] {
@ -18,11 +18,11 @@ div:focus[data-reach-menu-list] {
[data-reach-menu-item],
[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] {
@apply hover:bg-gray-100;
@apply hover:bg-gray-100 dark:hover:bg-slate-700;
}
[data-reach-menu-item][data-disabled],
@ -31,5 +31,5 @@ div:focus[data-reach-menu-list] {
}
[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}>
<MenuItems
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}
/>
</MenuPopover>

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

@ -31,32 +31,32 @@ const Developers = () => {
return (
<Column label={intl.formatMessage(messages.heading)}>
<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'>
<InlineSVG src={require('@tabler/icons/icons/apps.svg')} />
<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')} className='dark:text-gray-100' />
<Text>
<FormattedMessage id='developers.navigation.app_create_label' defaultMessage='Create an app' />
</Text>
</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'>
<InlineSVG src={require('@tabler/icons/icons/code-plus.svg')} />
<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')} className='dark:text-gray-100' />
<Text>
<FormattedMessage id='developers.navigation.settings_store_label' defaultMessage='Settings store' />
</Text>
</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'>
<InlineSVG src={require('@tabler/icons/icons/mood-sad.svg')} />
<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')} className='dark:text-gray-100' />
<Text>
<FormattedMessage id='developers.navigation.intentional_error_label' defaultMessage='Trigger an error' />
</Text>
</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'>
<InlineSVG src={require('@tabler/icons/icons/logout.svg')} />
<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')} className='dark:text-gray-100' />
<Text>
<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 Permalink from 'soapbox/components/permalink';
import RelativeTimestamp from 'soapbox/components/relative_timestamp';
import { Text } from 'soapbox/components/ui';
import ActionButton from 'soapbox/features/ui/components/action_button';
import { makeGetAccount } from 'soapbox/selectors';
import { shortNumberFormat } from 'soapbox/utils/numbers';
@ -73,9 +74,9 @@ class AccountCard extends ImmutablePureComponent {
</div>
<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'>{shortNumberFormat(account.get('followers_count'))} <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'><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'><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 ? <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>
);

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

2
app/styles/accounts.scss
View file

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

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

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

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

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

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

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

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

@ -1,5 +1,5 @@
.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%; }
&.top { transform-origin: 50% 100%; }
@ -11,31 +11,31 @@
border: 0 solid transparent;
&.left {
@apply border-l-white dark:border-l-slate-900;
right: -5px;
margin-top: -5px;
border-width: 5px 0 5px 5px;
border-left-color: #fff;
}
&.top {
@apply border-t-white dark:border-t-slate-900;
bottom: -5px;
margin-left: -5px;
border-width: 5px 5px 0;
border-top-color: #fff;
}
&.bottom {
@apply border-b-white dark:border-b-slate-900;
top: -5px;
margin-left: -5px;
border-width: 0 5px 5px;
border-bottom-color: #fff;
}
&.right {
@apply border-r-white dark:border-r-slate-900;
left: -5px;
margin-top: -5px;
border-width: 5px 5px 5px 0;
border-right-color: #fff;
}
}
@ -45,27 +45,24 @@
&__item {
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 {
@apply h-5 w-5 mr-2.5 transition-none;
svg {
stroke-width: 1.5;
transition: none;
@apply stroke-[1.5px] transition-none;
}
}
}
&.destructive a {
@apply text-danger-600;
@apply text-danger-600 dark:text-danger-400;
}
}
&__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

27
app/styles/emoji_picker.scss
View file

@ -5,7 +5,7 @@
}
.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 {
@ -33,7 +33,7 @@
}
.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; }
@ -41,7 +41,7 @@
.emoji-mart-anchor:hover,
.emoji-mart-anchor:focus,
.emoji-mart-anchor-selected {
@apply text-gray-600;
@apply text-gray-600 dark:text-gray-300;
}
.emoji-mart-anchor-selected .emoji-mart-anchor-bar {
@ -73,11 +73,11 @@
}
.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 {
@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 {
border: 0;
@ -125,6 +125,7 @@
}
.emoji-mart-category .emoji-mart-emoji:hover::before {
@apply bg-gray-50 dark:bg-slate-800;
z-index: 0;
content: "";
position: absolute;
@ -132,7 +133,6 @@
left: 0;
width: 100%;
height: 100%;
background-color: #f4f4f4;
border-radius: 100%;
}
@ -145,12 +145,11 @@
}
.emoji-mart-category-label span {
@apply bg-white dark:bg-slate-900;
display: block;
width: 100%;
font-weight: 500;
padding: 5px 6px;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.95);
}
.emoji-mart-category-list {
@ -181,7 +180,7 @@
}
.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;
}
@ -242,22 +241,18 @@
}
.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;
top: -4px;
left: -8px;
button {
display: block;
cursor: pointer;
border: 0;
padding: 4px 8px;
background: transparent;
@apply block cursor-pointer border-0 px-2 py-1 bg-transparent;
&:hover,
&:focus,
&: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 {
@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 */
overflow-x: auto;
scrollbar-width: thin;