diff --git a/app/soapbox/components/ui/column/column.tsx b/app/soapbox/components/ui/column/column.tsx index c66a57326d..c647aa1f3c 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 b40d851905..83a48b256b 100644 Binary files a/app/soapbox/features/directory/components/account_card.js and b/app/soapbox/features/directory/components/account_card.js differ diff --git a/app/soapbox/features/export_data/components/csv_exporter.js b/app/soapbox/features/export_data/components/csv_exporter.js index 87ca8ba503..bd47b83fbd 100644 Binary files a/app/soapbox/features/export_data/components/csv_exporter.js and b/app/soapbox/features/export_data/components/csv_exporter.js differ diff --git a/app/soapbox/features/filters/index.js b/app/soapbox/features/filters/index.js index e54b5668e2..00e32d5f03 100644 Binary files a/app/soapbox/features/filters/index.js and b/app/soapbox/features/filters/index.js differ diff --git a/app/soapbox/features/import_data/components/csv_importer.js b/app/soapbox/features/import_data/components/csv_importer.js index c0cc0114f9..ff17cade40 100644 Binary files a/app/soapbox/features/import_data/components/csv_importer.js and b/app/soapbox/features/import_data/components/csv_importer.js differ 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 08dd211993..0000000000 Binary files a/app/soapbox/features/ui/components/hotkeys_modal.js and /dev/null differ 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 0000000000..5203e0e5c8 --- /dev/null +++ b/app/soapbox/features/ui/components/hotkeys_modal.tsx @@ -0,0 +1,163 @@ +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
+ + + + + + + + {features.spoilers && ( + + + + + )} + {features.spoilers && ( + + + + + )} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
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; diff --git a/app/soapbox/features/ui/index.js b/app/soapbox/features/ui/index.js index 8f3caa2f58..400cac95a6 100644 Binary files a/app/soapbox/features/ui/index.js and b/app/soapbox/features/ui/index.js differ diff --git a/app/styles/about.scss b/app/styles/about.scss index 70b757becc..380c7179dc 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 b07dabdb36..fa6925df70 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 030b3f9d2f..d978995ac7 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 d1a303f3f7..77fb828466 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 f2714d68b6..a24335eef0 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 { diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss index 331217824a..5edbe2e52d 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; }