mirror_maker
/
soapbox
mirror of https://gitlab.com/soapbox-pub/soapbox
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

styles

Browse Source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
next-interactions
marcin mikołajczak 3 years ago
parent 84cc259a8b
commit 0661ca25be
22 changed files with 158 additions and 234 deletions
Show Stats Download Patch File Download Diff File

2
app/soapbox/components/list.js
Unescape View File

@ -51,7 +51,7 @@ const ListItem = ({ label, hint, children, onClick }) => {
</div>
{onClick ? (
<div className='flex flex-row items-center text-gray-500'>
<div className='flex flex-row items-center text-gray-500 dark:text-gray-400'>
{children}
<Icon src={require('@tabler/icons/icons/chevron-right.svg')} className='ml-1' />

2
app/soapbox/components/ui/input/input.tsx
Unescape View File

@ -50,7 +50,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
type={revealed ? 'text' : type}
ref={ref}
className={classNames({
'block w-full sm:text-sm border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500':
'dark:bg-slate-800 block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md focus:ring-indigo-500 focus:border-indigo-500':
true,
'pr-7': isPassword,
'pl-8': typeof icon !== 'undefined',

28
app/soapbox/features/aliases/index.js
Unescape View File

@ -7,11 +7,10 @@ import { connect } from 'react-redux';
import { fetchAliases, removeFromAliases } from 'soapbox/actions/aliases';
import Icon from 'soapbox/components/icon';
import ScrollableList from 'soapbox/components/scrollable_list';
import { CardHeader, CardTitle, Column, HStack, Text } from 'soapbox/components/ui';
import { makeGetAccount } from 'soapbox/selectors';
import { getFeatures } from 'soapbox/utils/features';
import Column from '../ui/components/column';
import ColumnSubheading from '../ui/components/column_subheading';
import Account from './components/account';
import Search from './components/search';
@ -71,7 +70,9 @@ class Aliases extends ImmutablePureComponent {
return (
<Column className='aliases-settings-panel' icon='suitcase' label={intl.formatMessage(messages.heading)}>
<ColumnSubheading text={intl.formatMessage(messages.subheading_add_new)} />
<CardHeader>
<CardTitle title={intl.formatMessage(messages.subheading_add_new)} />
</CardHeader>
<Search />
{
loaded && searchAccountIds.size === 0 ? (
@ -84,23 +85,26 @@ class Aliases extends ImmutablePureComponent {
</div>
)
}
<ColumnSubheading text={intl.formatMessage(messages.subheading_aliases)} />
<CardHeader>
<CardTitle title={intl.formatMessage(messages.subheading_aliases)} />
</CardHeader>
<div className='aliases-settings-panel'>
<ScrollableList
scrollKey='aliases'
emptyMessage={emptyMessage}
>
{aliases.map((alias, i) => (
<div key={i} className='alias__container'>
<div className='alias__details'>
<span className='alias__list-label'><FormattedMessage id='aliases.account_label' defaultMessage='Old account:' /></span>
<span className='alias__list-value'>{alias}</span>
<HStack alignItems='center' justifyContent='between' space={1} key={i} className='p-2'>
<div>
<Text tag='span' theme='muted'><FormattedMessage id='aliases.account_label' defaultMessage='Old account:' /></Text>
{' '}
<Text tag='span'>{alias}</Text>
</div>
<div className='alias__delete' role='button' tabIndex='0' onClick={this.handleFilterDelete} data-value={alias} aria-label={intl.formatMessage(messages.delete)}>
<Icon className='alias__delete-icon' id='times' size={40} />
<span className='alias__delete-label'><FormattedMessage id='aliases.aliases_list_delete' defaultMessage='Unlink alias' /></span>
<div className='flex items-center' role='button' tabIndex='0' onClick={this.handleFilterDelete} data-value={alias} aria-label={intl.formatMessage(messages.delete)}>
<Icon className='pr-1.5 text-lg' id='times' size={40} />
<Text weight='bold' theme='muted'><FormattedMessage id='aliases.aliases_list_delete' defaultMessage='Unlink alias' /></Text>
</div>
</div>
</HStack>
))}
</ScrollableList>
</div>

1
app/soapbox/features/bookmarks/index.js
Unescape View File

@ -74,6 +74,7 @@ class Bookmarks extends ImmutablePureComponent {
shouldUpdateScroll={shouldUpdateScroll}
emptyMessage={emptyMessage}
bindToDocument={!multiColumn}
divideType='space'
/>
</Column>
);

9
app/soapbox/features/chats/chat_room.js
Unescape View File

@ -5,11 +5,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { injectIntl } from 'react-intl';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { fetchChat, markChatRead } from 'soapbox/actions/chats';
import Avatar from 'soapbox/components/avatar';
import ColumnBackButton from 'soapbox/components/column_back_button';
import { Column } from 'soapbox/components/ui';
import { makeGetChat } from 'soapbox/selectors';
import { getAcct } from 'soapbox/utils/accounts';
@ -78,8 +75,8 @@ class ChatRoom extends ImmutablePureComponent {
const account = chat.get('account');
return (
<Column>
<div className='chatroom__back'>
<Column label={`@${getAcct(account, displayFqn)}`}>
{/* <div className='chatroom__back'>
<ColumnBackButton />
<Link to={`/@${account.get('acct')}`} className='chatroom__header'>
<Avatar account={account} size={18} />
@ -87,7 +84,7 @@ class ChatRoom extends ImmutablePureComponent {
@{getAcct(account, displayFqn)}
</div>
</Link>
</div>
</div> */}
<ChatBox
chatId={chat.get('id')}
onSetInputRef={this.handleInputRef}

16
app/soapbox/features/chats/components/chat_box.js
Unescape View File

@ -174,13 +174,11 @@ class ChatBox extends ImmutablePureComponent {
const { resetFileKey } = this.state;
return this.canSubmit() ? (
<div className='chat-box__send'>
<IconButton
src={require('@tabler/icons/icons/send.svg')}
title={intl.formatMessage(messages.send)}
onClick={this.sendMessage}
/>
</div>
<IconButton
src={require('@tabler/icons/icons/send.svg')}
title={intl.formatMessage(messages.send)}
onClick={this.sendMessage}
/>
) : (
<UploadButton onSelectFile={this.handleFiles} resetFileKey={resetFileKey} />
);
@ -197,7 +195,9 @@ class ChatBox extends ImmutablePureComponent {
{this.renderAttachment()}
<UploadProgress active={isUploading} progress={uploadProgress*100} />
<div className='chat-box__actions simple_form'>
{this.renderActionButton()}
<div className='chat-box__send'>
{this.renderActionButton()}
</div>
<textarea
rows={1}
placeholder={intl.formatMessage(messages.placeholder)}

6
app/soapbox/features/chats/components/chat_message_list.js
Unescape View File

@ -12,6 +12,7 @@ import { createSelector } from 'reselect';
import { fetchChatMessages, deleteChatMessage } from 'soapbox/actions/chats';
import { openModal } from 'soapbox/actions/modals';
import { initReportById } from 'soapbox/actions/reports';
import { Text } from 'soapbox/components/ui';
import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
import emojify from 'soapbox/features/emoji/emoji';
import Bundle from 'soapbox/features/ui/components/bundle';
@ -293,10 +294,7 @@ class ChatMessageList extends ImmutablePureComponent {
tabIndex={0}
>
{this.maybeRenderMedia(chatMessage)}
<span
className='chat-message__content'
dangerouslySetInnerHTML={{ __html: this.parseContent(chatMessage) }}
/>
<Text size='sm' dangerouslySetInnerHTML={{ __html: this.parseContent(chatMessage) }} />
<div className='chat-message__menu'>
<DropdownMenuContainer
items={menu}

1
app/soapbox/features/community_timeline/index.js
Unescape View File

@ -87,6 +87,7 @@ class CommunityTimeline extends React.PureComponent {
onLoadMore={this.handleLoadMore}
onRefresh={this.handleRefresh}
emptyMessage={<FormattedMessage id='empty_column.community' defaultMessage='The local timeline is empty. Write something publicly to get the ball rolling!' />}
divideType='space'
/>
</Column>
);

2
app/soapbox/features/compose/components/search.tsx
Unescape View File

@ -120,7 +120,7 @@ const Search = (props: ISearch) => {
<div className='relative'>
<Component
className='block w-full pl-3 pr-10 py-2 border border-gray-100 dark:border-slate-600 rounded-full leading-5 bg-gray-100 placeholder-gray-500 dark:bg-slate-900 focus:bg-white focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm'
className='block w-full pl-3 pr-10 py-2 border border-gray-100 dark:border-slate-600 rounded-full leading-5 bg-gray-100 dark:text-white placeholder-gray-500 dark:placeholder-gray-300 dark:bg-slate-900 focus:bg-white focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm'
type='text'
id='search'
placeholder={intl.formatMessage(messages.placeholder)}

19
app/soapbox/features/list_editor/index.js
Unescape View File

@ -2,12 +2,12 @@ import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { injectIntl, defineMessages } from 'react-intl';
import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import IconButton from 'soapbox/components/icon_button';
import { setupListEditor, clearListSuggestions, resetListEditor } from 'soapbox/actions/lists';
import { Modal } from 'soapbox/components/ui';
import { setupListEditor, clearListSuggestions, resetListEditor } from '../../actions/lists';
import ColumnSubheading from '../ui/components/column_subheading';
import Account from './components/account';
@ -66,13 +66,10 @@ class ListEditor extends ImmutablePureComponent {
const { accountIds, searchAccountIds, intl } = this.props;
return (
<div className='modal-root__modal compose-modal'>
<div className='compose-modal__header'>
<h3 className='compose-modal__header__title'>
{intl.formatMessage(messages.editList)}
</h3>
<IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={this.onClickClose} />
</div>
<Modal
title={<FormattedMessage id='lists.edit' defaultMessage='Edit list' />}
onClose={this.onClickClose}
>
<div className='compose-modal__content list-editor__content'>
<div className='list-editor'>
<ColumnSubheading text={intl.formatMessage(messages.changeTitle)} />
@ -97,7 +94,7 @@ class ListEditor extends ImmutablePureComponent {
</div>
</div>
</div>
</div>
</Modal>
);
}

1
app/soapbox/features/list_timeline/index.js
Unescape View File

@ -149,6 +149,7 @@ class ListTimeline extends React.PureComponent {
timelineId={`list:${id}`}
onLoadMore={this.handleLoadMore}
emptyMessage={emptyMessage}
divideType='space'
/>
</Column>
);

15
app/soapbox/features/lists/index.js
Unescape View File

@ -6,13 +6,14 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { fetchLists } from 'soapbox/actions/lists';
import ScrollableList from 'soapbox/components/scrollable_list';
import { Spinner } from 'soapbox/components/ui';
import { CardHeader, CardTitle } from 'soapbox/components/ui';
import { fetchLists } from '../../actions/lists';
import ScrollableList from '../../components/scrollable_list';
import Column from '../ui/components/column';
import ColumnLink from '../ui/components/column_link';
import ColumnSubheading from '../ui/components/column_subheading';
import NewListForm from './components/new_list_form';
@ -65,10 +66,14 @@ class Lists extends ImmutablePureComponent {
return (
<Column icon='list-ul' label={intl.formatMessage(messages.heading)}>
<br />
<ColumnSubheading text={intl.formatMessage(messages.add)} />
<CardHeader>
<CardTitle title={intl.formatMessage(messages.add)} />
</CardHeader>
<NewListForm />
<br />
<ColumnSubheading text={intl.formatMessage(messages.subheading)} />
<CardHeader>
<CardTitle title={intl.formatMessage(messages.subheading)} />
</CardHeader>
<ScrollableList
scrollKey='lists'
emptyMessage={emptyMessage}

100
app/soapbox/features/migration/index.js
Unescape View File

@ -7,9 +7,8 @@ import { Link } from 'react-router-dom';
import { moveAccount } from 'soapbox/actions/security';
import snackbar from 'soapbox/actions/snackbar';
import ShowablePassword from 'soapbox/components/showable_password';
import { FieldsGroup, SimpleForm, TextInput } from 'soapbox/features/forms';
import Column from 'soapbox/features/ui/components/column';
// import Column from 'soapbox/features/ui/components/column';
import { Button, Column, Form, FormActions, FormGroup, Input, Text } from 'soapbox/components/ui';
const messages = defineMessages({
heading: { id: 'column.migration', defaultMessage: 'Account migration' },
@ -63,51 +62,56 @@ class Migration extends ImmutablePureComponent {
return (
<Column label={intl.formatMessage(messages.heading)}>
<SimpleForm onSubmit={this.handleSubmit}>
<fieldset disabled={this.state.isLoading}>
<FieldsGroup>
<p className='hint'>
<FormattedMessage
id='migration.hint'
defaultMessage='This will move your followers to the new account. No other data will be moved. To perform migration, you need to {link} on your new account first.'
values={{
link: (
<Link to='/settings/aliases'>
<FormattedMessage
id='migration.hint.link'
defaultMessage='create an account alias'
/>
</Link>
),
}}
/>
</p>
<TextInput
label={intl.formatMessage(messages.acctFieldLabel)}
placeholder={intl.formatMessage(messages.acctFieldPlaceholder)}
name='targetAccount'
value={this.state.targetAccount}
onChange={this.handleInputChange}
/>
<ShowablePassword
label={intl.formatMessage(messages.currentPasswordFieldLabel)}
name='password'
value={this.state.password}
onChange={this.handleInputChange}
/>
<div className='actions'>
<button
name='button'
type='submit'
className='btn button button-primary'
disabled={!this.state.password || !this.state.targetAccount}
>
{intl.formatMessage(messages.submit)}
</button>
</div>
</FieldsGroup>
</fieldset>
</SimpleForm>
<Form onSubmit={this.handleSubmit}>
<Text theme='muted'>
<FormattedMessage
id='migration.hint'
defaultMessage='This will move your followers to the new account. No other data will be moved. To perform migration, you need to {link} on your new account first.'
values={{
link: (
<Link
className='hover:underline text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-500'
to='/settings/aliases'
>
<FormattedMessage
id='migration.hint.link'
defaultMessage='create an account alias'
/>
</Link>
),
}}
/>
</Text>
<FormGroup
labelText={intl.formatMessage(messages.acctFieldLabel)}
>
<Input
name='targetAccount'
placeholder={intl.formatMessage(messages.acctFieldPlaceholder)}
onChange={this.handleInputChange}
value={this.state.targetAccount}
required
/>
</FormGroup>
<FormGroup
labelText={intl.formatMessage(messages.currentPasswordFieldLabel)}
>
<Input
type='password'
name='password'
onChange={this.handleInputChange}
value={this.state.password}
required
/>
</FormGroup>
<FormActions>
<Button
theme='primary'
text={intl.formatMessage(messages.submit)}
onClick={this.handleSubmit}
/>
</FormActions>
</Form>
</Column>
);
}

1
app/soapbox/features/public_timeline/index.js
Unescape View File

@ -136,6 +136,7 @@ class CommunityTimeline extends React.PureComponent {
onLoadMore={this.handleLoadMore}
onRefresh={this.handleRefresh}
emptyMessage={<FormattedMessage id='empty_column.public' defaultMessage='There is nothing here! Write something publicly, or manually follow users from other servers to fill it up' />}
divideType='space'
/>
</Column>
);

1
app/soapbox/features/remote_timeline/index.js
Unescape View File

@ -107,6 +107,7 @@ class RemoteTimeline extends React.PureComponent {
values={{ instance }}
/>
}
divideType='space'
/>
</Column>
);

21
app/soapbox/features/ui/components/hotkeys_modal.js
Unescape View File

@ -1,13 +1,9 @@
import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { injectIntl, FormattedMessage } from 'react-intl';
import IconButton from 'soapbox/components/icon_button';
const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
});
import { Modal } from 'soapbox/components/ui';
export default @injectIntl
class HotkeysModal extends ImmutablePureComponent {
@ -18,14 +14,13 @@ class HotkeysModal extends ImmutablePureComponent {
};
render() {
const { intl, onClose } = this.props;
const { onClose } = this.props;
return (
<div className='modal-root__modal hotkeys-modal'>
<div className='compose-modal__header'>
<h3 className='compose-modal__header__title'><FormattedMessage id='keyboard_shortcuts.heading' defaultMessage='Keyboard shortcuts' /></h3>
<IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
</div>
<Modal
title={<FormattedMessage id='keyboard_shortcuts.heading' defaultMessage='Keyboard shortcuts' />}
onClose={onClose}
>
<div className='compose-modal__content'>
<table>
<thead>
@ -159,7 +154,7 @@ class HotkeysModal extends ImmutablePureComponent {
</tbody>
</table>
</div>
</div>
</Modal>
);
}

23
app/soapbox/features/ui/components/reactions_modal.js
Unescape View File

@ -7,9 +7,8 @@ import { connect } from 'react-redux';
import { fetchFavourites, fetchReactions } from 'soapbox/actions/interactions';
import FilterBar from 'soapbox/components/filter_bar';
import IconButton from 'soapbox/components/icon_button';
import ScrollableList from 'soapbox/components/scrollable_list';
import { Spinner } from 'soapbox/components/ui';
import { Modal, Spinner } from 'soapbox/components/ui';
import AccountContainer from 'soapbox/containers/account_container';
const messages = defineMessages({
@ -89,7 +88,7 @@ class ReactionsModal extends React.PureComponent {
}
render() {
const { intl, reactions } = this.props;
const { reactions } = this.props;
const { reaction } = this.state;
const accounts = reactions && (reaction
@ -118,20 +117,12 @@ class ReactionsModal extends React.PureComponent {
return (
<div className='modal-root__modal reactions-modal'>
<div className='compose-modal__header'>
<h3 className='compose-modal__header__title'>
<FormattedMessage id='column.reactions' defaultMessage='Reactions' />
</h3>
<IconButton
className='compose-modal__close'
title={intl.formatMessage(messages.close)}
src={require('@tabler/icons/icons/x.svg')}
onClick={this.onClickClose} size={20}
/>
</div>
<Modal
title={<FormattedMessage id='column.reactions' defaultMessage='Reactions' />}
onClose={this.onClickClose}
>
{body}
</div>
</Modal>
);
}

24
app/soapbox/features/ui/components/report_modal.js
Unescape View File

@ -7,15 +7,15 @@ import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import { connect } from 'react-redux';
import Toggle from 'react-toggle';
import { blockAccount } from 'soapbox/actions/accounts';
import { changeReportComment, changeReportForward, changeReportBlock, submitReport } from 'soapbox/actions/reports';
import { expandAccountTimeline } from 'soapbox/actions/timelines';
import { Button, Modal } from 'soapbox/components/ui';
import { makeGetAccount } from 'soapbox/selectors';
import { isRemote, getDomain } from 'soapbox/utils/accounts';
import { getFeatures } from 'soapbox/utils/features';
import { blockAccount } from '../../../actions/accounts';
import { changeReportComment, changeReportForward, changeReportBlock, submitReport } from '../../../actions/reports';
import { expandAccountTimeline } from '../../../actions/timelines';
import IconButton from '../../../components/icon_button';
import { Button } from '../../../components/ui';
import { makeGetAccount } from '../../../selectors';
import StatusCheckBox from '../../report/containers/status_check_box_container';
const messages = defineMessages({
@ -107,12 +107,10 @@ class ReportModal extends ImmutablePureComponent {
}
return (
<div className='modal-root__modal report-modal'>
<div className='report-modal__target'>
<IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
<FormattedMessage id='report.target' defaultMessage='Reporting {target}' values={{ target: <strong>{account.get('acct')}</strong> }} />
</div>
<Modal
title={<FormattedMessage id='report.target' defaultMessage='Reporting {target}' values={{ target: <strong>{account.get('acct')}</strong> }} />}
onClose={onClose}
>
<div className='report-modal__container'>
<div className='report-modal__comment'>
<p><FormattedMessage id='report.hint' defaultMessage='The report will be sent to your server moderators. You can provide an explanation of why you are reporting this account below:' /></p>
@ -156,7 +154,7 @@ class ReportModal extends ImmutablePureComponent {
</div>
</div>
</div>
</div>
</Modal>
);
}

52
app/styles/chats.scss
Unescape View File

@ -30,13 +30,7 @@
}
&__header {
@apply bg-primary-900 text-white;
box-sizing: border-box;
padding: 0 10px;
font-weight: bold;
border-radius: 6px 6px 0 0;
display: flex;
align-items: center;
@apply flex items-center py-0 px-2.5 box-border rounded-t-md font-bold bg-primary-600 text-white;
height: 31px;
.account__avatar {
@ -151,11 +145,8 @@
display: flex;
&__bubble {
font-size: 15px;
padding: 4px 10px;
@apply px-2.5 py-1 rounded-lg bg-primary-50 dark:bg-slate-700;
max-width: 70%;
border-radius: 10px;
background-color: var(--background-color);
text-overflow: ellipsis;
overflow-wrap: break-word;
white-space: break-spaces;
@ -185,8 +176,8 @@
}
&--me .chat-message__bubble {
@apply bg-primary-200 dark:bg-primary-900;
margin-left: auto;
background-color: hsla(var(--brand-color_hsl), 0.2);
}
&--pending .chat-message__bubble {
@ -286,25 +277,6 @@
padding: 6px;
position: relative;
.icon-button {
color: var(--primary-text-color);
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: auto;
height: auto;
background: transparent !important;
border: 0;
padding: 0;
margin: 0;
.svg-icon {
width: 18px;
height: 18px;
}
}
textarea {
width: 100%;
height: 100%;
@ -320,6 +292,20 @@
overflow: hidden;
}
}
&__send {
.icon-button,
button {
@apply absolute right-2.5 w-auto h-auto border-0 p-0 m-0 text-black dark:text-white;
top: 50%;
transform: translateY(-50%);
.svg-icon,
svg {
@apply w-[18px] h-[18px];
}
}
}
}
.ui--chatroom {
@ -491,9 +477,7 @@
}
.chat-messages__divider {
text-align: center;
text-transform: uppercase;
@apply pt-3.5 pb-0.5 text-center uppercase text-black dark:text-white;
font-size: 13px;
padding: 14px 0 2px;
opacity: 0.8;
}

47
app/styles/components/aliases.scss
Unescape View File

@ -51,53 +51,6 @@
}
}
.alias__container {
padding: 20px;
display: flex;
justify-content: space-between;
font-size: 14px;
span.alias__list-label {
padding-right: 5px;
color: var(--primary-text-color--faint);
}
span.alias__list-value span {
padding-right: 5px;
text-transform: capitalize;
&::after {
content: ',';
}
&:last-of-type {
&::after {
content: '';
}
}
}
.alias__delete {
display: flex;
align-items: baseline;
cursor: pointer;
span.alias__delete-label {
color: var(--primary-text-color--faint);
font-size: 14px;
font-weight: 800;
}
.alias__delete-icon {
background: none;
color: var(--primary-text-color--faint);
padding: 0 5px;
margin: 0 auto;
font-size: 16px;
}
}
}
.slist--flex {
height: 100%;
}

15
app/styles/components/compose-form.scss
Unescape View File

@ -28,21 +28,14 @@
}
&__warning {
color: var(--primary-text-color);
margin-bottom: 10px;
background: var(--brand-color--faint);
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
padding: 8px 10px;
border-radius: 4px;
font-size: 13px;
font-weight: 400;
@apply text-xs mb-2.5 px-2.5 py-2 shadow-md rounded bg-accent-300 text-white;
strong {
color: var(--primary-text-color);
font-weight: 500;
@apply font-medium;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
font-weight: 700;
@apply font-bold;
}
}
}

6
app/styles/components/snackbar.scss
Unescape View File

@ -3,7 +3,7 @@
}
.notification-bar {
@apply max-w-sm w-full flex flex-row items-center bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden;
@apply max-w-sm w-full flex flex-row items-center bg-white dark:bg-slate-900 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden;
&::before {
font-family: 'Font Awesome 5 Free';
@ -44,11 +44,11 @@
}
.notification-bar-title {
@apply mb-1 text-sm font-medium text-gray-900;
@apply mb-1 text-sm font-medium text-gray-900 dark:text-gray-300;
}
.notification-bar-message {
@apply text-sm text-gray-700;
@apply text-sm text-gray-700 dark:text-gray-400;
}
.notification-bar-action a {

Write Preview
Loading…
Cancel
Save