diff --git a/app/javascript/flavours/glitch/actions/blocks.js b/app/javascript/flavours/glitch/actions/blocks.js index e293657ad3..54296d0905 100644 --- a/app/javascript/flavours/glitch/actions/blocks.js +++ b/app/javascript/flavours/glitch/actions/blocks.js @@ -12,8 +12,6 @@ export const BLOCKS_EXPAND_REQUEST = 'BLOCKS_EXPAND_REQUEST'; export const BLOCKS_EXPAND_SUCCESS = 'BLOCKS_EXPAND_SUCCESS'; export const BLOCKS_EXPAND_FAIL = 'BLOCKS_EXPAND_FAIL'; -export const BLOCKS_INIT_MODAL = 'BLOCKS_INIT_MODAL'; - export function fetchBlocks() { return (dispatch, getState) => { dispatch(fetchBlocksRequest()); @@ -90,11 +88,12 @@ export function expandBlocksFail(error) { export function initBlockModal(account) { return dispatch => { - dispatch({ - type: BLOCKS_INIT_MODAL, - account, - }); - - dispatch(openModal({ modalType: 'BLOCK' })); + dispatch(openModal({ + modalType: 'BLOCK', + modalProps: { + accountId: account.get('id'), + acct: account.get('acct'), + }, + })); }; } diff --git a/app/javascript/flavours/glitch/actions/domain_blocks.js b/app/javascript/flavours/glitch/actions/domain_blocks.js index 718002613f..55c0a6ce9d 100644 --- a/app/javascript/flavours/glitch/actions/domain_blocks.js +++ b/app/javascript/flavours/glitch/actions/domain_blocks.js @@ -1,6 +1,8 @@ import api, { getLinks } from '../api'; import { blockDomainSuccess, unblockDomainSuccess } from "./domain_blocks_typed"; +import { openModal } from './modal'; + export * from "./domain_blocks_typed"; @@ -150,3 +152,12 @@ export function expandDomainBlocksFail(error) { error, }; } + +export const initDomainBlockModal = account => dispatch => dispatch(openModal({ + modalType: 'DOMAIN_BLOCK', + modalProps: { + domain: account.get('acct').split('@')[1], + acct: account.get('acct'), + accountId: account.get('id'), + }, +})); diff --git a/app/javascript/flavours/glitch/actions/mutes.js b/app/javascript/flavours/glitch/actions/mutes.js index fb041078b8..99c113f414 100644 --- a/app/javascript/flavours/glitch/actions/mutes.js +++ b/app/javascript/flavours/glitch/actions/mutes.js @@ -12,10 +12,6 @@ export const MUTES_EXPAND_REQUEST = 'MUTES_EXPAND_REQUEST'; export const MUTES_EXPAND_SUCCESS = 'MUTES_EXPAND_SUCCESS'; export const MUTES_EXPAND_FAIL = 'MUTES_EXPAND_FAIL'; -export const MUTES_INIT_MODAL = 'MUTES_INIT_MODAL'; -export const MUTES_TOGGLE_HIDE_NOTIFICATIONS = 'MUTES_TOGGLE_HIDE_NOTIFICATIONS'; -export const MUTES_CHANGE_DURATION = 'MUTES_CHANGE_DURATION'; - export function fetchMutes() { return (dispatch, getState) => { dispatch(fetchMutesRequest()); @@ -92,26 +88,12 @@ export function expandMutesFail(error) { export function initMuteModal(account) { return dispatch => { - dispatch({ - type: MUTES_INIT_MODAL, - account, - }); - - dispatch(openModal({ modalType: 'MUTE' })); - }; -} - -export function toggleHideNotifications() { - return dispatch => { - dispatch({ type: MUTES_TOGGLE_HIDE_NOTIFICATIONS }); - }; -} - -export function changeMuteDuration(duration) { - return dispatch => { - dispatch({ - type: MUTES_CHANGE_DURATION, - duration, - }); + dispatch(openModal({ + modalType: 'MUTE', + modalProps: { + accountId: account.get('id'), + acct: account.get('acct'), + }, + })); }; } diff --git a/app/javascript/flavours/glitch/components/check_box.tsx b/app/javascript/flavours/glitch/components/check_box.tsx new file mode 100644 index 0000000000..7da8ef0ac5 --- /dev/null +++ b/app/javascript/flavours/glitch/components/check_box.tsx @@ -0,0 +1,39 @@ +import classNames from 'classnames'; + +import DoneIcon from '@/material-icons/400-24px/done.svg?react'; + +import { Icon } from './icon'; + +interface Props { + value: string; + checked: boolean; + name: string; + onChange: (event: React.ChangeEvent) => void; + label: React.ReactNode; +} + +export const CheckBox: React.FC = ({ + name, + value, + checked, + onChange, + label, +}) => { + return ( + + ); +}; diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/header.jsx b/app/javascript/flavours/glitch/features/account_timeline/components/header.jsx index eb2ddbdd80..37258d9d83 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/header.jsx +++ b/app/javascript/flavours/glitch/features/account_timeline/components/header.jsx @@ -72,11 +72,7 @@ class Header extends ImmutablePureComponent { }; handleBlockDomain = () => { - const domain = this.props.account.get('acct').split('@')[1]; - - if (!domain) return; - - this.props.onBlockDomain(domain); + this.props.onBlockDomain(this.props.account); }; handleUnblockDomain = () => { diff --git a/app/javascript/flavours/glitch/features/account_timeline/containers/header_container.jsx b/app/javascript/flavours/glitch/features/account_timeline/containers/header_container.jsx index c3a3de71ed..d42bb2c251 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/containers/header_container.jsx +++ b/app/javascript/flavours/glitch/features/account_timeline/containers/header_container.jsx @@ -15,7 +15,7 @@ import { mentionCompose, directCompose, } from '../../../actions/compose'; -import { blockDomain, unblockDomain } from '../../../actions/domain_blocks'; +import { initDomainBlockModal, unblockDomain } from '../../../actions/domain_blocks'; import { openModal } from '../../../actions/modal'; import { initMuteModal } from '../../../actions/mutes'; import { initReport } from '../../../actions/reports'; @@ -138,15 +138,8 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ } }, - onBlockDomain (domain) { - dispatch(openModal({ - modalType: 'CONFIRM', - modalProps: { - message: {domain} }} />, - confirm: intl.formatMessage(messages.blockDomainConfirm), - onConfirm: () => dispatch(blockDomain(domain)), - }, - })); + onBlockDomain (account) { + dispatch(initDomainBlockModal(account)); }, onUnblockDomain (domain) { diff --git a/app/javascript/flavours/glitch/features/ui/components/block_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/block_modal.jsx index cfac692324..af5479b5fa 100644 --- a/app/javascript/flavours/glitch/features/ui/components/block_modal.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/block_modal.jsx @@ -1,100 +1,87 @@ import PropTypes from 'prop-types'; -import { PureComponent } from 'react'; +import { useCallback } from 'react'; -import { injectIntl, FormattedMessage } from 'react-intl'; +import { FormattedMessage } from 'react-intl'; -import { connect } from 'react-redux'; +import { useDispatch } from 'react-redux'; -import { blockAccount } from '../../../actions/accounts'; -import { closeModal } from '../../../actions/modal'; -import { initReport } from '../../../actions/reports'; -import { Button } from '../../../components/button'; -import { makeGetAccount } from '../../../selectors'; +import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react'; +import BlockIcon from '@/material-icons/400-24px/block.svg?react'; +import CampaignIcon from '@/material-icons/400-24px/campaign.svg?react'; +import ReplyIcon from '@/material-icons/400-24px/reply.svg?react'; +import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react'; +import { blockAccount } from 'flavours/glitch/actions/accounts'; +import { closeModal } from 'flavours/glitch/actions/modal'; +import { Button } from 'flavours/glitch/components/button'; +import { Icon } from 'flavours/glitch/components/icon'; -const makeMapStateToProps = () => { - const getAccount = makeGetAccount(); +export const BlockModal = ({ accountId, acct }) => { + const dispatch = useDispatch(); - const mapStateToProps = state => ({ - account: getAccount(state, state.getIn(['blocks', 'new', 'account_id'])), - }); + const handleClick = useCallback(() => { + dispatch(closeModal({ modalType: undefined, ignoreFocus: false })); + dispatch(blockAccount(accountId)); + }, [dispatch, accountId]); - return mapStateToProps; -}; + const handleCancel = useCallback(() => { + dispatch(closeModal({ modalType: undefined, ignoreFocus: false })); + }, [dispatch]); -const mapDispatchToProps = dispatch => { - return { - onConfirm(account) { - dispatch(blockAccount(account.get('id'))); - }, + return ( +
+
+
+
+ +
- onBlockAndReport(account) { - dispatch(blockAccount(account.get('id'))); - dispatch(initReport(account)); - }, - - onClose() { - dispatch(closeModal({ - modalType: undefined, - ignoreFocus: false, - })); - }, - }; -}; - -class BlockModal extends PureComponent { - - static propTypes = { - account: PropTypes.object.isRequired, - onClose: PropTypes.func.isRequired, - onBlockAndReport: PropTypes.func.isRequired, - onConfirm: PropTypes.func.isRequired, - intl: PropTypes.object.isRequired, - }; - - handleClick = () => { - this.props.onClose(); - this.props.onConfirm(this.props.account); - }; - - handleSecondary = () => { - this.props.onClose(); - this.props.onBlockAndReport(this.props.account); - }; - - handleCancel = () => { - this.props.onClose(); - }; - - render () { - const { account } = this.props; - - return ( -
-
-

- @{account.get('acct')} }} - /> -

+
+

+
@{acct}
+
-
-
+ +
+
+ - - + +
- ); - } +
+ ); +}; -} +BlockModal.propTypes = { + accountId: PropTypes.string.isRequired, + acct: PropTypes.string.isRequired, +}; -export default connect(makeMapStateToProps, mapDispatchToProps)(injectIntl(BlockModal)); +export default BlockModal; diff --git a/app/javascript/flavours/glitch/features/ui/components/domain_block_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/domain_block_modal.jsx new file mode 100644 index 0000000000..b1ab81dab5 --- /dev/null +++ b/app/javascript/flavours/glitch/features/ui/components/domain_block_modal.jsx @@ -0,0 +1,106 @@ +import PropTypes from 'prop-types'; +import { useCallback } from 'react'; + +import { FormattedMessage } from 'react-intl'; + +import { useDispatch } from 'react-redux'; + +import CampaignIcon from '@/material-icons/400-24px/campaign.svg?react'; +import DomainDisabledIcon from '@/material-icons/400-24px/domain_disabled.svg?react'; +import HistoryIcon from '@/material-icons/400-24px/history.svg?react'; +import PersonRemoveIcon from '@/material-icons/400-24px/person_remove.svg?react'; +import ReplyIcon from '@/material-icons/400-24px/reply.svg?react'; +import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react'; +import { blockAccount } from 'flavours/glitch/actions/accounts'; +import { blockDomain } from 'flavours/glitch/actions/domain_blocks'; +import { closeModal } from 'flavours/glitch/actions/modal'; +import { Button } from 'flavours/glitch/components/button'; +import { Icon } from 'flavours/glitch/components/icon'; + +export const DomainBlockModal = ({ domain, accountId, acct }) => { + const dispatch = useDispatch(); + + const handleClick = useCallback(() => { + dispatch(closeModal({ modalType: undefined, ignoreFocus: false })); + dispatch(blockDomain(domain)); + }, [dispatch, domain]); + + const handleSecondaryClick = useCallback(() => { + dispatch(closeModal({ modalType: undefined, ignoreFocus: false })); + dispatch(blockAccount(accountId)); + }, [dispatch, accountId]); + + const handleCancel = useCallback(() => { + dispatch(closeModal({ modalType: undefined, ignoreFocus: false })); + }, [dispatch]); + + return ( +
+
+
+
+ +
+ +
+

+
{domain}
+
+
+ +
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+ +
+
+ + +
+ + + + +
+
+
+ ); +}; + +DomainBlockModal.propTypes = { + domain: PropTypes.string.isRequired, + accountId: PropTypes.string.isRequired, + acct: PropTypes.string.isRequired, +}; + +export default DomainBlockModal; diff --git a/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx b/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx index 4ecf07b030..3f7e291e7b 100644 --- a/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx @@ -7,6 +7,7 @@ import Base from 'flavours/glitch/components/modal_root'; import { MuteModal, BlockModal, + DomainBlockModal, ReportModal, SettingsModal, EmbedModal, @@ -48,6 +49,7 @@ export const MODAL_COMPONENTS = { 'CONFIRM': () => Promise.resolve({ default: ConfirmationModal }), 'MUTE': MuteModal, 'BLOCK': BlockModal, + 'DOMAIN_BLOCK': DomainBlockModal, 'REPORT': ReportModal, 'SETTINGS': SettingsModal, 'DEPRECATED_SETTINGS': () => Promise.resolve({ default: DeprecatedSettingsModal }), diff --git a/app/javascript/flavours/glitch/features/ui/components/mute_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/mute_modal.jsx index fa81ea81a3..a161e24861 100644 --- a/app/javascript/flavours/glitch/features/ui/components/mute_modal.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/mute_modal.jsx @@ -1,138 +1,154 @@ import PropTypes from 'prop-types'; -import { PureComponent } from 'react'; +import { useCallback, useState } from 'react'; -import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import { defineMessages, useIntl, FormattedMessage } from 'react-intl'; -import { connect } from 'react-redux'; +import classNames from 'classnames'; -import Toggle from 'react-toggle'; +import { useDispatch } from 'react-redux'; -import { muteAccount } from '../../../actions/accounts'; -import { closeModal } from '../../../actions/modal'; -import { toggleHideNotifications, changeMuteDuration } from '../../../actions/mutes'; -import { Button } from '../../../components/button'; + +import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react'; +import CampaignIcon from '@/material-icons/400-24px/campaign.svg?react'; +import ReplyIcon from '@/material-icons/400-24px/reply.svg?react'; +import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react'; +import VolumeOffIcon from '@/material-icons/400-24px/volume_off.svg?react'; +import { muteAccount } from 'flavours/glitch/actions/accounts'; +import { closeModal } from 'flavours/glitch/actions/modal'; +import { Button } from 'flavours/glitch/components/button'; +import { CheckBox } from 'flavours/glitch/components/check_box'; +import { Icon } from 'flavours/glitch/components/icon'; +import { RadioButton } from 'flavours/glitch/components/radio_button'; const messages = defineMessages({ minutes: { id: 'intervals.full.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}}' }, hours: { id: 'intervals.full.hours', defaultMessage: '{number, plural, one {# hour} other {# hours}}' }, days: { id: 'intervals.full.days', defaultMessage: '{number, plural, one {# day} other {# days}}' }, - indefinite: { id: 'mute_modal.indefinite', defaultMessage: 'Indefinite' }, + indefinite: { id: 'mute_modal.indefinite', defaultMessage: 'Until I unmute them' }, + hideFromNotifications: { id: 'mute_modal.hide_from_notifications', defaultMessage: 'Hide from notifications' }, }); -const mapStateToProps = state => { - return { - account: state.getIn(['mutes', 'new', 'account']), - notifications: state.getIn(['mutes', 'new', 'notifications']), - muteDuration: state.getIn(['mutes', 'new', 'duration']), - }; +const RadioButtonLabel = ({ name, value, currentValue, onChange, label }) => ( + +); + +RadioButtonLabel.propTypes = { + name: PropTypes.string, + value: PropTypes.oneOf([PropTypes.string, PropTypes.number, PropTypes.bool]), + currentValue: PropTypes.oneOf([PropTypes.string, PropTypes.number, PropTypes.bool]), + checked: PropTypes.bool, + onChange: PropTypes.func, + label: PropTypes.node, }; -const mapDispatchToProps = dispatch => { - return { - onConfirm(account, notifications, muteDuration) { - dispatch(muteAccount(account.get('id'), notifications, muteDuration)); - }, +export const MuteModal = ({ accountId, acct }) => { + const intl = useIntl(); + const dispatch = useDispatch(); + const [notifications, setNotifications] = useState(true); + const [muteDuration, setMuteDuration] = useState('0'); + const [expanded, setExpanded] = useState(false); - onClose() { - dispatch(closeModal({ - modalType: undefined, - ignoreFocus: false, - })); - }, + const handleClick = useCallback(() => { + dispatch(closeModal({ modalType: undefined, ignoreFocus: false })); + dispatch(muteAccount(accountId, notifications, muteDuration)); + }, [dispatch, accountId, notifications, muteDuration]); - onToggleNotifications() { - dispatch(toggleHideNotifications()); - }, + const handleCancel = useCallback(() => { + dispatch(closeModal({ modalType: undefined, ignoreFocus: false })); + }, [dispatch]); - onChangeMuteDuration(e) { - dispatch(changeMuteDuration(e.target.value)); - }, - }; -}; + const handleToggleNotifications = useCallback(({ target }) => { + setNotifications(target.checked); + }, [setNotifications]); -class MuteModal extends PureComponent { + const handleChangeMuteDuration = useCallback(({ target }) => { + setMuteDuration(target.value); + }, [setMuteDuration]); - static propTypes = { - account: PropTypes.object.isRequired, - notifications: PropTypes.bool.isRequired, - onClose: PropTypes.func.isRequired, - onConfirm: PropTypes.func.isRequired, - onToggleNotifications: PropTypes.func.isRequired, - intl: PropTypes.object.isRequired, - muteDuration: PropTypes.number.isRequired, - onChangeMuteDuration: PropTypes.func.isRequired, - }; + const handleToggleSettings = useCallback(() => { + setExpanded(!expanded); + }, [expanded, setExpanded]); - handleClick = () => { - this.props.onClose(); - this.props.onConfirm(this.props.account, this.props.notifications, this.props.muteDuration); - }; - - handleCancel = () => { - this.props.onClose(); - }; - - toggleNotifications = () => { - this.props.onToggleNotifications(); - }; - - changeMuteDuration = (e) => { - this.props.onChangeMuteDuration(e); - }; - - render () { - const { account, notifications, muteDuration, intl } = this.props; - - return ( -
-
-

- @{account.get('acct')} }} - /> -

-

- -

-
- - + return ( +
+
+
+
+
-
- : - +
+

+
@{acct}
-
-
+ +
+
+
+ + + + +
+ +
+ +
+
+ +
+ + +
+ + - + +
- ); - } +
+ ); +}; -} +MuteModal.propTypes = { + accountId: PropTypes.string.isRequired, + acct: PropTypes.string.isRequired, +}; -export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(MuteModal)); +export default MuteModal; diff --git a/app/javascript/flavours/glitch/features/ui/util/async-components.js b/app/javascript/flavours/glitch/features/ui/util/async-components.js index 14d46d7043..6a140e3fd7 100644 --- a/app/javascript/flavours/glitch/features/ui/util/async-components.js +++ b/app/javascript/flavours/glitch/features/ui/util/async-components.js @@ -126,6 +126,10 @@ export function BlockModal () { return import(/* webpackChunkName: "flavours/glitch/async/block_modal" */'../components/block_modal'); } +export function DomainBlockModal () { + return import(/* webpackChunkName: "flavours/glitch/async/modals/domain_block_modal" */'../components/domain_block_modal'); +} + export function ReportModal () { return import(/* webpackChunkName: "flavours/glitch/async/report_modal" */'../components/report_modal'); } diff --git a/app/javascript/flavours/glitch/reducers/blocks.js b/app/javascript/flavours/glitch/reducers/blocks.js deleted file mode 100644 index 1b65071634..0000000000 --- a/app/javascript/flavours/glitch/reducers/blocks.js +++ /dev/null @@ -1,22 +0,0 @@ -import Immutable from 'immutable'; - -import { - BLOCKS_INIT_MODAL, -} from '../actions/blocks'; - -const initialState = Immutable.Map({ - new: Immutable.Map({ - account_id: null, - }), -}); - -export default function mutes(state = initialState, action) { - switch (action.type) { - case BLOCKS_INIT_MODAL: - return state.withMutations((state) => { - state.setIn(['new', 'account_id'], action.account.get('id')); - }); - default: - return state; - } -} diff --git a/app/javascript/flavours/glitch/reducers/index.ts b/app/javascript/flavours/glitch/reducers/index.ts index 1049a39900..c67349e51f 100644 --- a/app/javascript/flavours/glitch/reducers/index.ts +++ b/app/javascript/flavours/glitch/reducers/index.ts @@ -7,7 +7,6 @@ import { accountsReducer } from './accounts'; import accounts_map from './accounts_map'; import alerts from './alerts'; import announcements from './announcements'; -import blocks from './blocks'; import boosts from './boosts'; import compose from './compose'; import contexts from './contexts'; @@ -27,7 +26,6 @@ import markers from './markers'; import media_attachments from './media_attachments'; import meta from './meta'; import { modalReducer } from './modal'; -import mutes from './mutes'; import { notificationPolicyReducer } from './notification_policy'; import { notificationRequestsReducer } from './notification_requests'; import notifications from './notifications'; @@ -65,8 +63,6 @@ const reducers = { settings, local_settings, push_notifications, - mutes, - blocks, boosts, server, contexts, diff --git a/app/javascript/flavours/glitch/reducers/mutes.js b/app/javascript/flavours/glitch/reducers/mutes.js deleted file mode 100644 index a9eb61ff83..0000000000 --- a/app/javascript/flavours/glitch/reducers/mutes.js +++ /dev/null @@ -1,31 +0,0 @@ -import Immutable from 'immutable'; - -import { - MUTES_INIT_MODAL, - MUTES_TOGGLE_HIDE_NOTIFICATIONS, - MUTES_CHANGE_DURATION, -} from '../actions/mutes'; - -const initialState = Immutable.Map({ - new: Immutable.Map({ - account: null, - notifications: true, - duration: 0, - }), -}); - -export default function mutes(state = initialState, action) { - switch (action.type) { - case MUTES_INIT_MODAL: - return state.withMutations((state) => { - state.setIn(['new', 'account'], action.account); - state.setIn(['new', 'notifications'], true); - }); - case MUTES_TOGGLE_HIDE_NOTIFICATIONS: - return state.updateIn(['new', 'notifications'], (old) => !old); - case MUTES_CHANGE_DURATION: - return state.setIn(['new', 'duration'], Number(action.duration)); - default: - return state; - } -} diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index 147a88cf14..3501777873 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -106,17 +106,17 @@ } &.button-secondary { - color: $ui-button-secondary-color; + color: $highlight-text-color; background: transparent; padding: 6px 17px; - border: 1px solid $ui-button-secondary-border-color; + border: 1px solid $highlight-text-color; &:active, &:focus, &:hover { - border-color: $ui-button-secondary-focus-background-color; - color: $ui-button-secondary-focus-color; - background-color: $ui-button-secondary-focus-background-color; + border-color: lighten($highlight-text-color, 4%); + color: lighten($highlight-text-color, 4%); + background-color: transparent; text-decoration: none; } @@ -5978,6 +5978,10 @@ a.status-card { pointer-events: auto; user-select: text; display: flex; + + @media screen and (max-width: $no-gap-breakpoint) { + margin-top: auto; + } } .video-modal .video-player { @@ -6309,6 +6313,145 @@ a.status-card { margin-inline-start: 10px; } +.safety-action-modal { + width: 600px; + flex-direction: column; + + &__top, + &__bottom { + display: flex; + gap: 8px; + padding: 24px; + flex-direction: column; + background: var(--modal-background-color); + backdrop-filter: var(--background-filter); + border: 1px solid var(--modal-border-color); + } + + &__top { + border-radius: 16px 16px 0 0; + border-bottom: 0; + gap: 16px; + } + + &__bottom { + border-radius: 0 0 16px 16px; + border-top: 0; + + @media screen and (max-width: $no-gap-breakpoint) { + border-radius: 0; + border-bottom: 0; + padding-bottom: 32px; + } + } + + &__header { + display: flex; + gap: 16px; + align-items: center; + font-size: 14px; + line-height: 20px; + color: $darker-text-color; + + &__icon { + border-radius: 64px; + background: $ui-highlight-color; + color: $white; + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + flex-shrink: 0; + + .icon { + width: 24px; + height: 24px; + } + } + + h1 { + font-size: 22px; + line-height: 28px; + color: $primary-text-color; + } + } + + &__bullet-points { + display: flex; + flex-direction: column; + gap: 8px; + font-size: 16px; + line-height: 24px; + + & > div { + display: flex; + gap: 16px; + align-items: center; + } + + &__icon { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + + .icon { + width: 24px; + height: 24px; + } + } + } + + &__field-group { + display: flex; + flex-direction: column; + + label { + display: flex; + gap: 16px; + align-items: center; + font-size: 16px; + line-height: 24px; + height: 32px; + padding: 0 12px; + } + } + + &__bottom { + padding-top: 0; + + &__collapsible { + display: none; + flex-direction: column; + gap: 16px; + } + + &.active { + background: var(--modal-background-variant-color); + padding-top: 24px; + + .safety-action-modal__bottom__collapsible { + display: flex; + } + } + } + + &__actions { + display: flex; + align-items: center; + gap: 8px; + justify-content: flex-end; + + .link-button { + padding: 10px 12px; + font-weight: 600; + } + } +} + .doodle-modal, .boost-modal, .confirmation-modal, @@ -7694,7 +7837,8 @@ img.modal-warning { display: flex; } -.radio-button { +.radio-button, +.check-box { font-size: 14px; position: relative; display: inline-flex; @@ -7713,17 +7857,19 @@ img.modal-warning { } &__input { - display: block; + display: flex; + align-items: center; + justify-content: center; position: relative; border: 2px solid $secondary-text-color; box-sizing: border-box; - width: 18px; - height: 18px; + width: 20px; + height: 20px; flex: 0 0 auto; border-radius: 50%; &.checked { - border-color: $secondary-text-color; + border-color: $ui-highlight-color; &::before { position: absolute; @@ -7732,9 +7878,31 @@ img.modal-warning { content: ''; display: block; border-radius: 50%; - width: 10px; - height: 10px; - background: $secondary-text-color; + width: 12px; + height: 12px; + background: $ui-highlight-color; + } + } + + .icon { + width: 18px; + height: 18px; + } + } +} + +.check-box { + &__input { + width: 18px; + height: 18px; + border-radius: 2px; + + &.checked { + background: $ui-highlight-color; + color: $white; + + &::before { + display: none; } } } @@ -9220,22 +9388,36 @@ noscript { } } +.safety-action-modal, .interaction-modal { max-width: 90vw; width: 600px; - background: var(--modal-background-color); - border: 1px solid var(--modal-border-color); - border-radius: 8px; +} + +.interaction-modal { overflow: visible; position: relative; display: block; - padding: 40px; + border-radius: 16px; + background: var(--modal-background-color); + backdrop-filter: var(--background-filter); + border: 1px solid var(--modal-border-color); + padding: 24px; + + @media screen and (max-width: $no-gap-breakpoint) { + border-radius: 16px 16px 0 0; + border-bottom: 0; + padding-bottom: 32px; + } h3 { font-size: 22px; line-height: 33px; font-weight: 700; - text-align: center; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; } p { @@ -9256,7 +9438,9 @@ noscript { &__icon { color: $highlight-text-color; - margin: 0 5px; + display: flex; + align-items: center; + justify-content: center; } &__lead { @@ -9289,6 +9473,7 @@ noscript { border: 0; padding: 15px - 4px 15px - 6px; flex: 1 1 auto; + min-width: 0; &::placeholder { color: lighten($darker-text-color, 4%); diff --git a/app/javascript/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/variables.scss index 70bd86d33c..54dc54ac02 100644 --- a/app/javascript/flavours/glitch/styles/variables.scss +++ b/app/javascript/flavours/glitch/styles/variables.scss @@ -46,10 +46,10 @@ $ui-button-focus-background-color: $blurple-600 !default; $ui-button-focus-outline-color: $blurple-400 !default; $ui-button-focus-outline: solid 2px $ui-button-focus-outline-color !default; -$ui-button-secondary-color: $grey-100 !default; -$ui-button-secondary-border-color: $grey-100 !default; -$ui-button-secondary-focus-background-color: $grey-600 !default; -$ui-button-secondary-focus-color: $white !default; +$ui-button-secondary-color: $blurple-500 !default; +$ui-button-secondary-border-color: $blurple-500 !default; +$ui-button-secondary-focus-border-color: $blurple-300 !default; +$ui-button-secondary-focus-color: $blurple-300 !default; $ui-button-tertiary-color: $blurple-300 !default; $ui-button-tertiary-border-color: $blurple-300 !default; @@ -104,7 +104,8 @@ $dismiss-overlay-width: 4rem; --dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)}; --dropdown-shadow: 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)}, 0 8px 10px -6px #{rgba($base-shadow-color, 0.25)}; - --modal-background-color: #{darken($ui-base-color, 4%)}; + --modal-background-color: #{rgba(darken($ui-base-color, 8%), 0.7)}; + --modal-background-variant-color: #{rgba($ui-base-color, 0.7)}; --modal-border-color: #{lighten($ui-base-color, 4%)}; --background-border-color: #{lighten($ui-base-color, 4%)}; --background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);