From 1ba551b88b872c47d379362abb3fee459061d733 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Sun, 3 Apr 2022 19:27:08 +0200 Subject: [PATCH 1/4] styles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/components/ui/column/column.tsx | 8 +- .../directory/components/account_card.js | 2 +- .../export_data/components/csv_exporter.js | 23 ++- app/soapbox/features/filters/index.js | 183 +++++++++--------- .../import_data/components/csv_importer.js | 45 ++--- app/soapbox/features/ui/index.js | 8 +- app/styles/about.scss | 2 +- app/styles/components/directory.scss | 9 +- app/styles/components/filters.scss | 69 ++++--- app/styles/components/radio-button.scss | 15 +- app/styles/components/server-info.scss | 3 +- 11 files changed, 179 insertions(+), 188 deletions(-) diff --git a/app/soapbox/components/ui/column/column.tsx b/app/soapbox/components/ui/column/column.tsx index c66a57326..c647aa1f3 100644 --- a/app/soapbox/components/ui/column/column.tsx +++ b/app/soapbox/components/ui/column/column.tsx @@ -1,3 +1,4 @@ +import classNames from 'classnames'; import React from 'react'; import { useHistory } from 'react-router-dom'; @@ -10,10 +11,11 @@ interface IColumn { label?: string, transparent?: boolean, withHeader?: boolean, + className?: string, } const Column: React.FC = React.forwardRef((props, ref: React.ForwardedRef): JSX.Element => { - const { backHref, children, label, transparent = false, withHeader = true } = props; + const { backHref, children, label, transparent = false, withHeader = true, className } = props; const history = useHistory(); @@ -32,11 +34,11 @@ const Column: React.FC = React.forwardRef((props, ref: React.ForwardedR const renderChildren = () => { if (transparent) { - return
{children}
; + return
{children}
; } return ( - + {withHeader ? ( diff --git a/app/soapbox/features/directory/components/account_card.js b/app/soapbox/features/directory/components/account_card.js index b40d85190..83a48b256 100644 --- a/app/soapbox/features/directory/components/account_card.js +++ b/app/soapbox/features/directory/components/account_card.js @@ -67,7 +67,7 @@ class AccountCard extends ImmutablePureComponent {
-

') && 'empty')} dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }} /> diff --git a/app/soapbox/features/export_data/components/csv_exporter.js b/app/soapbox/features/export_data/components/csv_exporter.js index 87ca8ba50..bd47b83fb 100644 --- a/app/soapbox/features/export_data/components/csv_exporter.js +++ b/app/soapbox/features/export_data/components/csv_exporter.js @@ -4,7 +4,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import { injectIntl } from 'react-intl'; import { connect } from 'react-redux'; -import { SimpleForm } from 'soapbox/features/forms'; +import { Button, Form, FormActions, Text } from 'soapbox/components/ui'; export default @connect() @injectIntl @@ -36,15 +36,18 @@ class CSVExporter extends ImmutablePureComponent { const { intl, messages } = this.props; return ( - -

{intl.formatMessage(messages.input_label)}

-
-

{intl.formatMessage(messages.input_hint)}

- -
- + <> +
+ {intl.formatMessage(messages.input_label)} + {intl.formatMessage(messages.input_hint)} + + + + +
+ ); } diff --git a/app/soapbox/features/filters/index.js b/app/soapbox/features/filters/index.js index e54b5668e..00e32d5f0 100644 --- a/app/soapbox/features/filters/index.js +++ b/app/soapbox/features/filters/index.js @@ -4,22 +4,17 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { connect } from 'react-redux'; +import { fetchFilters, createFilter, deleteFilter } from 'soapbox/actions/filters'; import snackbar from 'soapbox/actions/snackbar'; import Icon from 'soapbox/components/icon'; +import ScrollableList from 'soapbox/components/scrollable_list'; import { Button } from 'soapbox/components/ui'; +import { CardHeader, CardTitle, Column, Form, FormActions, FormGroup, Input, Text } from 'soapbox/components/ui'; import { - SimpleForm, - SimpleInput, FieldsGroup, - SelectDropdown, Checkbox, } from 'soapbox/features/forms'; -import { fetchFilters, createFilter, deleteFilter } from '../../actions/filters'; -import ScrollableList from '../../components/scrollable_list'; -import Column from '../ui/components/column'; -import ColumnSubheading from '../ui/components/column_subheading'; - const messages = defineMessages({ heading: { id: 'column.filters', defaultMessage: 'Muted words' }, subheading_add_new: { id: 'column.filters.subheading_add_new', defaultMessage: 'Add New Filter' }, @@ -41,14 +36,14 @@ const messages = defineMessages({ delete: { id: 'column.filters.delete', defaultMessage: 'Delete' }, }); -const expirations = { - null: 'Never', - // 3600: '30 minutes', - // 21600: '1 hour', - // 43200: '12 hours', - // 86400 : '1 day', - // 604800: '1 week', -}; +// const expirations = { +// null: 'Never', +// // 3600: '30 minutes', +// // 21600: '1 hour', +// // 43200: '12 hours', +// // 86400 : '1 day', +// // 604800: '1 week', +// }; const mapStateToProps = state => ({ filters: state.get('filters'), @@ -136,91 +131,87 @@ class Filters extends ImmutablePureComponent { return ( - - -
-
- -
- -
- -
-
- + + + +
+ + + + {/* + + */} - - - - - -
- - - - -
+ + + + + + + +
+ + + + +
- + - - - - -
+ + + + - + + -
- - - + + + -
- -
-
- -
-
- -
-
- +
+ {intl.formatMessage(messages.input_label)} +
+ + {intl.formatMessage(messages.input_hint)}
- + + + +
); } diff --git a/app/soapbox/features/ui/index.js b/app/soapbox/features/ui/index.js index 8f3caa2f5..400cac95a 100644 --- a/app/soapbox/features/ui/index.js +++ b/app/soapbox/features/ui/index.js @@ -89,8 +89,8 @@ import { EmailConfirmation, DeleteAccount, SoapboxConfig, - // ExportData, - // ImportData, + ExportData, + ImportData, // Backups, MfaForm, ChatIndex, @@ -318,8 +318,8 @@ class SwitchingColumnsArea extends React.PureComponent { - {/* */} - {/* */} + + {features.accountAliasesAPI && } {features.accountMoving && } diff --git a/app/styles/about.scss b/app/styles/about.scss index 70b757bec..380c7179d 100644 --- a/app/styles/about.scss +++ b/app/styles/about.scss @@ -1105,9 +1105,9 @@ $fluid-breakpoint: $maximum-width + 20px; } .brand__tagline { + @apply text-black dark:text-white; display: block; width: 470px; - color: var(--primary-text-color); font-size: 24px; line-height: 1.4; margin-top: 25px; diff --git a/app/styles/components/directory.scss b/app/styles/components/directory.scss index b07dabdb3..fa6925df7 100644 --- a/app/styles/components/directory.scss +++ b/app/styles/components/directory.scss @@ -1,10 +1,11 @@ .directory { &__filter-form { display: flex; + gap: 30px; background: var(--foreground-color); &__column { - padding: 10px 15px; + padding-bottom: 10px; } .radio-button { @@ -17,7 +18,6 @@ grid-gap: 10px; grid-template-columns: minmax(0, 50%) minmax(0, 50%); width: 100%; - padding: 10px; transition: opacity 100ms ease-in; box-sizing: border-box; @@ -118,6 +118,11 @@ overflow: hidden; text-overflow: ellipsis; } + + .verified-icon div, + .verified-icon svg { + @apply inline; + } } } diff --git a/app/styles/components/filters.scss b/app/styles/components/filters.scss index 030b3f9d2..d978995ac 100644 --- a/app/styles/components/filters.scss +++ b/app/styles/components/filters.scss @@ -1,12 +1,4 @@ .filter-settings-panel { - h1 { - font-size: 18px; - line-height: 1.25; - color: var(--primary-text-color); - font-weight: 400; - margin: 20px auto; - } - .item-list article { border-bottom: 1px solid var(--primary-text-color--faint); @@ -43,62 +35,67 @@ } } + .input.boolean { + .label_input { + @apply relative pl-7 text-black dark:text-white; + + label { + @apply text-sm; + } + + &__wrapper { + @apply static; + } + + input[type="checkbox"] { + position: absolute; + top: 3px; + left: 0; + } + } + + .hint { + @apply block pl-7 text-xs text-gray-500 dark:text-gray-400; + } + } + .filter__container { - padding: 20px; - display: flex; - justify-content: space-between; - font-size: 14px; + @apply flex justify-between py-5 px-2 text-sm text-black dark:text-white; .filter__phrase, .filter__contexts, .filter__details { - padding: 5px 0; + @apply py-1; } span.filter__list-label { - padding-right: 5px; - color: var(--primary-text-color--faint); + @apply pr-1 text-gray-500 dark:text-gray-400; } span.filter__list-value span { - padding-right: 5px; - text-transform: capitalize; + @apply pr-1 capitalize; &::after { - content: ','; + content: ","; } &:last-of-type { &::after { - content: ''; + content: ""; } } } .filter__delete { - display: flex; - margin: 10px; - align-items: baseline; - cursor: pointer; - height: 20px; + @apply flex items-baseline h-5 m-2.5 cursor-pointer; span.filter__delete-label { - color: var(--primary-text-color--faint); - font-size: 14px; - font-weight: 800; + @apply text-gray-500 dark:text-gray-400 font-semibold; } .filter__delete-icon { - background: none; - color: var(--primary-text-color--faint); - padding: 0 5px; - margin: 0 auto; - font-size: 16px; + @apply px-1 mx-auto text-base text-gray-500 dark:text-gray-400; } } } - - // .simple_form select { - // margin-top: 0; - // } } diff --git a/app/styles/components/radio-button.scss b/app/styles/components/radio-button.scss index d1a303f3f..77fb82846 100644 --- a/app/styles/components/radio-button.scss +++ b/app/styles/components/radio-button.scss @@ -1,4 +1,5 @@ .radio-button { + @apply text-black dark:text-white; font-size: 14px; position: relative; display: inline-block; @@ -15,10 +16,7 @@ } &__input { - display: inline-block; - position: relative; - border: 1px solid var(--primary-text-color--faint); - box-sizing: border-box; + @apply inline-block relative box-border border border-solid border-primary-600; width: 18px; height: 18px; flex: 0 0 auto; @@ -28,8 +26,13 @@ vertical-align: middle; &.checked { - border-color: var(--brand-color); - background: var(--brand-color); + @apply bg-primary-600; + } + + &:active, + &:focus, + &:hover { + @apply border-4; } } } diff --git a/app/styles/components/server-info.scss b/app/styles/components/server-info.scss index f2714d68b..a24335eef 100644 --- a/app/styles/components/server-info.scss +++ b/app/styles/components/server-info.scss @@ -10,8 +10,7 @@ .info__brand { .brand h1 { - color: var(--primary-text-color); - font-size: 26px; + @apply text-2xl text-black dark:text-white; } .brand__tagline { From abf98cb75aa896a81209a1c208b1cdebf7950b66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Sun, 3 Apr 2022 19:33:56 +0200 Subject: [PATCH 2/4] Conditionally display some hotkeys MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- .../features/ui/components/hotkeys_modal.js | 161 ------------------ .../features/ui/components/hotkeys_modal.tsx | 159 +++++++++++++++++ 2 files changed, 159 insertions(+), 161 deletions(-) delete mode 100644 app/soapbox/features/ui/components/hotkeys_modal.js create mode 100644 app/soapbox/features/ui/components/hotkeys_modal.tsx diff --git a/app/soapbox/features/ui/components/hotkeys_modal.js b/app/soapbox/features/ui/components/hotkeys_modal.js deleted file mode 100644 index 08dd21199..000000000 --- a/app/soapbox/features/ui/components/hotkeys_modal.js +++ /dev/null @@ -1,161 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import ImmutablePureComponent from 'react-immutable-pure-component'; -import { injectIntl, FormattedMessage } from 'react-intl'; - -import { Modal } from 'soapbox/components/ui'; - -export default @injectIntl -class HotkeysModal extends ImmutablePureComponent { - - static propTypes = { - intl: PropTypes.object.isRequired, - onClose: PropTypes.func.isRequired, - }; - - render() { - const { onClose } = this.props; - - return ( - } - onClose={onClose} - > -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
r
m
p
f
e
b
enter, o
a
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
x
h
up, k
down, j
n
alt + n
backspace
s
esc
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
g + h
g + n
g + f
g + p
g + u
g + b
g + m
g + r
?
-
- - ); - } - -} diff --git a/app/soapbox/features/ui/components/hotkeys_modal.tsx b/app/soapbox/features/ui/components/hotkeys_modal.tsx new file mode 100644 index 000000000..50845ea59 --- /dev/null +++ b/app/soapbox/features/ui/components/hotkeys_modal.tsx @@ -0,0 +1,159 @@ +import React from 'react'; +import { FormattedMessage } from 'react-intl'; + +import { Modal } from 'soapbox/components/ui'; +import { useAppSelector } from 'soapbox/hooks'; +import { getFeatures } from 'soapbox/utils/features'; + +interface IHotkeysModal { + onClose: () => void, +} + +const HotkeysModal: React.FC = ({ onClose }) => { + const features = useAppSelector((state) => getFeatures(state.instance)); + + return ( + } + onClose={onClose} + > +
+ + + + + + + + + + + + + + + + + + + + + + + + {features.emojiReacts && ( + + + + + )} + + + + + + + + + + + + + +
r
m
p
f
e
b
enter, o
a
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
x
h
up, k
down, j
n
alt + n
backspace
s
esc
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
g + h
g + n
g + f
g + p
g + u
g + b
g + m
g + r
?
+
+ + ); +}; + +export default HotkeysModal; From 52ddbcdb730d78c49dff0a08514636170d3ba162 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Sun, 3 Apr 2022 19:39:36 +0200 Subject: [PATCH 3/4] styles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/styles/components/status.scss | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss index 331217824..5edbe2e52 100644 --- a/app/styles/components/status.scss +++ b/app/styles/components/status.scss @@ -406,15 +406,9 @@ } .status__content__spoiler-link { - background: var(--brand-color--med); + @apply bg-primary-100 dark:bg-primary-900 hover:bg-primary-300 dark:hover:bg-primary-600 focus:bg-primary-200 dark:focus:bg-primary-600 text-black dark:text-white hover:no-underline; transition: 0.2s; - &:hover, - &:focus { - background: hsla(var(--brand-color_hsl), 0.5); - text-decoration: none; - } - &::-moz-focus-inner { border: 0; } From 1f697dd8f26d03e5f9d414ff496e2e1f8f06d1ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Sun, 3 Apr 2022 19:40:06 +0200 Subject: [PATCH 4/4] hotkeys modal MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- .../features/ui/components/hotkeys_modal.tsx | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/app/soapbox/features/ui/components/hotkeys_modal.tsx b/app/soapbox/features/ui/components/hotkeys_modal.tsx index 50845ea59..5203e0e5c 100644 --- a/app/soapbox/features/ui/components/hotkeys_modal.tsx +++ b/app/soapbox/features/ui/components/hotkeys_modal.tsx @@ -68,14 +68,18 @@ const HotkeysModal: React.FC = ({ onClose }) => { - - x - - - - h - - + {features.spoilers && ( + + x + + + )} + {features.spoilers && ( + + h + + + )} up, k