diff --git a/app/soapbox/features/chats/components/chat-page/components/welcome.tsx b/app/soapbox/features/chats/components/chat-page/components/welcome.tsx index 0cc172e81..6de9f821f 100644 --- a/app/soapbox/features/chats/components/chat-page/components/welcome.tsx +++ b/app/soapbox/features/chats/components/chat-page/components/welcome.tsx @@ -37,7 +37,7 @@ const Welcome = () => { return ( -
+
{intl.formatMessage(messages.title, { br:
})}
@@ -77,4 +77,4 @@ const Welcome = () => { ); }; -export default Welcome; \ No newline at end of file +export default Welcome; diff --git a/app/soapbox/features/compose/components/text-icon-button.tsx b/app/soapbox/features/compose/components/text-icon-button.tsx deleted file mode 100644 index fd49d4ed0..000000000 --- a/app/soapbox/features/compose/components/text-icon-button.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; - -interface ITextIconButton { - label: string, - title: string, - active: boolean, - onClick: () => void, - ariaControls: string, - unavailable: boolean, -} - -const TextIconButton: React.FC = ({ - label, - title, - active, - ariaControls, - unavailable, - onClick, -}) => { - const handleClick: React.MouseEventHandler = (e) => { - e.preventDefault(); - onClick(); - }; - - if (unavailable) { - return null; - } - - return ( - - ); -}; - -export default TextIconButton; diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss index ea2d3cbe0..ac50e7fa9 100644 --- a/app/styles/accounts.scss +++ b/app/styles/accounts.scss @@ -10,14 +10,6 @@ @media screen and (max-width: $no-gap-breakpoint) { box-shadow: none; } - - &:hover, - &:active, - &:focus { - .card__bar { - background-color: var(--brand-color--faint); - } - } } } @@ -28,19 +20,6 @@ &:not(:last-of-type) { border-bottom: 1px solid var(--brand-color--med); } - - .account__display-name { - flex: 1 1 auto; - display: block; - color: var(--primary-text-color--faint); - overflow: hidden; - text-decoration: none; - font-size: 14px; - - .display-name__name { - display: flex; - } - } } .account-authorize__avatar { diff --git a/app/styles/application.scss b/app/styles/application.scss index c6d633905..9d4532f14 100644 --- a/app/styles/application.scss +++ b/app/styles/application.scss @@ -46,7 +46,6 @@ @import 'components/react-toggle'; @import 'components/video-player'; @import 'components/audio-player'; -@import 'components/profile-hover-card'; @import 'components/filters'; @import 'components/snackbar'; @import 'components/admin'; diff --git a/app/styles/components/aliases.scss b/app/styles/components/aliases.scss index 8b84327e1..8f15165d4 100644 --- a/app/styles/components/aliases.scss +++ b/app/styles/components/aliases.scss @@ -2,12 +2,6 @@ &__accounts { overflow-y: auto; - .account__display-name { - &:hover strong { - text-decoration: none; - } - } - &.empty-column-indicator { min-height: unset; overflow-y: unset; @@ -17,16 +11,4 @@ .aliases-settings-panel { flex: 1; - - .item-list article { - border-bottom: 1px solid var(--primary-text-color--faint); - - &:last-child { - border-bottom: 0; - } - } - - .slist--flex { - height: 100%; - } } diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss index a31b25cf2..2e4546092 100644 --- a/app/styles/components/columns.scss +++ b/app/styles/components/columns.scss @@ -1,4 +1,3 @@ - .column { width: 350px; position: relative; @@ -66,218 +65,6 @@ margin-right: 5px; } -.column-link__badge { - display: inline-block; - border-radius: 4px; - font-size: 12px; - line-height: 19px; - font-weight: 500; - background: var(--brand-color--med); - padding: 4px 8px; - margin: -6px 10px; -} - -.column-subheading { - background: var(--brand-color--med); - color: var(--primary-text-color--faint); - padding: 8px 20px; - font-size: 12px; - font-weight: 500; - text-transform: uppercase; - cursor: default; -} - -.column-header__wrapper { - position: relative; - flex: 0 0 auto; - overflow: hidden; - - &.active { - &::before { - display: block; - content: ""; - position: absolute; - top: 35px; - left: 0; - right: 0; - margin: 0 auto; - width: 60%; - pointer-events: none; - height: 28px; - z-index: 1; - background: radial-gradient(ellipse, hsla(var(--brand-color_hsl), 0.23) 0%, hsla(var(--brand-color_hsl), 0) 60%); - } - } -} - -.column-header { - display: flex; - font-size: 16px; - flex: 0 0 auto; - cursor: pointer; - position: relative; - z-index: 2; - outline: 0; - overflow-x: auto; - - & > button, - & > .btn { - margin: 0; - border: 0; - padding: 15px; - color: inherit; - background: transparent; - font: inherit; - text-align: left; - text-decoration: none; - white-space: nowrap; - position: relative; - display: flex; - align-items: center; - justify-content: center; - transition: 0.2s; - - &--sub { - font-size: 14px; - padding: 6px 10px; - } - - &.grouped { - margin: 6px; - color: var(--primary-text-color--faint); - } - - &.active { - color: var(--primary-text-color); - - &::before { - height: 100%; - opacity: 1; - } - } - - &::before { - content: ''; - display: block; - position: absolute; - width: 100%; - background-color: var(--accent-color--faint); - border-radius: 10px; - transition: 0.2s; - opacity: 0; - z-index: -1; - } - - @media screen and (max-width: $nav-breakpoint-2) { - padding: 8px; - font-size: 14px; - - &.grouped { - margin: 6px 2px 6px 6px; - } - - &.active { - border-radius: 5px; - } - } - } - - &:hover .btn.grouped { - &::before { - height: 70% !important; - opacity: 0 !important; - } - - &:hover::before { - height: 100% !important; - opacity: 1 !important; - } - - &:hover { - color: var(--primary-text-color); - } - } - - &.active { - box-shadow: 0 1px 0 hsla(var(--highlight-text-color_hsl), 0.3); - - .column-header__icon { - color: var(--highlight-text-color); - text-shadow: 0 0 10px hsla(var(--highlight-text-color_hsl), 0.4); - } - } - - &:focus, - &:active { - outline: 0; - } -} - -.column-header__buttons { - height: 48px; - display: flex; - margin-left: auto; -} - -.column-header__links .text-btn { - margin-right: 10px; -} - -.column-header__button { - cursor: pointer; - border: 0; - padding: 0 15px; - font-size: 16px; - color: var(--primary-text-color--faint); - background: transparent; - - &:hover, - &:focus { - color: hsla(var(--primary-text-color_hsl), 0.8); - } - - &.active { - color: var(--primary-text-color); - background: var(--accent-color--med); - - &:hover { - color: var(--primary-text-color); - background: var(--accent-color--med); - } - } -} - -.column-header__collapsible { - max-height: 70vh; - overflow: hidden; - overflow-y: auto; - color: var(--primary-text-color--faint); - transition: max-height 150ms ease-in-out, opacity 300ms linear; - opacity: 1; - - &.collapsed { - max-height: 0; - opacity: 0.5; - } - - &.animating { - overflow-y: hidden; - } - - hr { - height: 0; - background: transparent; - border: 0; - border-top: 1px solid var(--brand-color--med); - margin: 10px 0; - } -} - -.column-header__collapsible-inner { - background: var(--background-color); - padding: 15px; -} - .column-header__setting-btn { &--link { text-decoration: none; @@ -293,77 +80,6 @@ } } -.column-header__icon { - display: inline-block; - margin-right: 5px; - font-size: 20px; -} - -.column-settings { - width: 100%; - display: flex; - flex-direction: column; - - &__header { - border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.2); - padding: 10px 20px; - display: flex; - align-items: center; - } - - &__title { - font-weight: bold; - color: var(--primary-text-color--faint); - } - - &__content { - padding: 10px 20px; - overflow-y: auto; - } - - &__description { - font-size: 14px; - margin: 5px 0 15px; - color: var(--primary-text-color--faint); - } - - &__close { - display: flex; - align-items: center; - justify-content: center; - margin-left: auto; - - .svg-icon { - width: 20px; - height: 20px; - margin-right: -10px; - } - } -} - -.column-settings__section { - color: var(--primary-text-color--faint); - cursor: default; - display: block; - font-weight: 500; - margin-bottom: 10px; -} - -.column-settings__row { - .text-btn { - margin-bottom: 15px; - - &.column-header__setting-btn { - display: flex; - align-items: center; - - .svg-icon { - margin-right: 10px; - } - } - } -} - .empty-column-indicator, .error-column { @apply bg-primary-50 dark:bg-gray-700 text-gray-900 dark:text-gray-300 text-center p-10 flex flex-1 items-center justify-center min-h-[160px] rounded-lg; @@ -390,49 +106,3 @@ margin-bottom: 30px; } } - -.column__switch .audio-toggle { - @apply absolute top-3 right-[14px] rtl:left-[14px] rtl:right-auto z-10; - - .react-toggle-track-check { - @apply left-1.5; - } - - .react-toggle-track-x { - @apply right-2; - } -} - -.column--better { - .column__top { - display: flex; - align-items: center; - border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.2); - } - - .column-header { - margin-right: auto; - } - - .column__menu { - display: flex; - align-items: center; - justify-content: center; - - &, - > div, - button { - height: 100%; - } - - button { - padding: 0 15px; - - > div { - display: flex; - align-items: center; - justify-content: center; - } - } - } -} diff --git a/app/styles/components/display-name.scss b/app/styles/components/display-name.scss index 72d36903a..4f4e26796 100644 --- a/app/styles/components/display-name.scss +++ b/app/styles/components/display-name.scss @@ -1,25 +1,3 @@ -.account__display-name { - text-decoration: none; -} - -.account__display-name { - strong { - @apply text-gray-800 dark:text-gray-200; - } -} - -a.account__display-name { - &:hover strong { - text-decoration: underline; - } -} - -.account__display-name strong { - display: block; - overflow: hidden; - text-overflow: ellipsis; -} - .display-name { display: block; max-width: 100%; @@ -33,11 +11,8 @@ a.account__display-name { } } -.display-name__html { - font-weight: 600; - padding-right: 4px; -} - .display-name__account { + position: relative; font-size: 14px; + font-weight: 600; } diff --git a/app/styles/components/filters.scss b/app/styles/components/filters.scss index afa3555a5..45bd60e7f 100644 --- a/app/styles/components/filters.scss +++ b/app/styles/components/filters.scss @@ -1,12 +1,4 @@ .filter-settings-panel { - .item-list article { - border-bottom: 1px solid var(--primary-text-color--faint); - - &:last-child { - border-bottom: 0; - } - } - .fields-group .two-col { display: flex; align-items: flex-start; diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss index a26668bb3..d7d4b6931 100644 --- a/app/styles/components/modal.scss +++ b/app/styles/components/modal.scss @@ -327,10 +327,6 @@ display: flex; flex-direction: column; row-gap: 10px; - - .unauthorized-modal-content__button { - margin: 0 auto; - } } &__fields { diff --git a/app/styles/components/profile-hover-card.scss b/app/styles/components/profile-hover-card.scss deleted file mode 100644 index cc2dbbc9b..000000000 --- a/app/styles/components/profile-hover-card.scss +++ /dev/null @@ -1,4 +0,0 @@ -.display-name__account { - position: relative; - font-weight: 600; -} diff --git a/app/styles/dyslexic.scss b/app/styles/dyslexic.scss index dce8b33c1..e36600baa 100644 --- a/app/styles/dyslexic.scss +++ b/app/styles/dyslexic.scss @@ -2,13 +2,3 @@ font-family: 'OpenDyslexic' !important; margin-bottom: 8px; } - -body.dyslexic { - - @media screen and (max-width: $nav-breakpoint-2) { - .column-header > button, - .column-header > .btn { - font-size: 11px; - } - } -} diff --git a/app/styles/forms.scss b/app/styles/forms.scss index a23bfcfad..7ae47230b 100644 --- a/app/styles/forms.scss +++ b/app/styles/forms.scss @@ -22,14 +22,6 @@ select { margin-left: -1px; } -$no-columns-breakpoint: 600px; - -.form-container { - max-width: 400px; - padding: 20px; - margin: 0 auto; -} - .simple_form { .input { &.hidden { @@ -194,31 +186,6 @@ $no-columns-breakpoint: 600px; } } - .input.font_icon_picker { - width: 52px; - } - - .input.with_block_label { - max-width: none; - - & > label { - font-family: inherit; - font-size: 16px; - color: var(--primary-text-color); - display: block; - font-weight: 500; - padding-top: 5px; - } - - .hint { - margin-bottom: 15px; - } - - ul { - columns: 2; - } - } - .required abbr { text-decoration: none; color: lighten($error-value-color, 12%); @@ -236,48 +203,6 @@ $no-columns-breakpoint: 600px; } } - .fields-row { - display: flex; - margin: 0 -10px; - padding-top: 5px; - margin-bottom: 25px; - - .input { - max-width: none; - } - - &__column { - box-sizing: border-box; - padding: 0 10px; - flex: 1 1 auto; - min-height: 1px; - - &-6 { - max-width: 50%; - } - } - - .fields-group:last-child, - .fields-row__column.fields-group { - margin-bottom: 0; - } - - @media screen and (max-width: $no-columns-breakpoint) { - display: block; - margin-bottom: 0; - - &__column { - max-width: none; - } - - .fields-group:last-child, - .fields-row__column.fields-group, - .fields-row__column { - margin-bottom: 25px; - } - } - } - .input.radio_buttons .radio label { margin-bottom: 5px; font-family: inherit; @@ -390,11 +315,6 @@ $no-columns-breakpoint: 600px; margin-top: 20px; display: flex; justify-content: flex-end; - - &.actions--top { - margin-top: 0; - margin-bottom: 30px; - } } // button, @@ -483,96 +403,8 @@ $no-columns-breakpoint: 600px; // padding-top: 0.5rem; // } - .select-wrapper { - display: flex; - align-items: center; - - &::after { - display: flex; - align-items: center; - font-family: 'Font Awesome 5 Free'; - content: ""; - position: absolute; - right: 12px; - height: calc(100% - 8px); - padding-left: 12px; - pointer-events: none; - margin-top: 8px; - font-weight: 900; - } - } - - .label_input { - &__color { - display: inline-flex; - font-size: 14px; - - .color-swatch { - width: 32px; - height: 16px; - margin-left: 12px; - } - } - - &__wrapper { - position: relative; - } - - &__append { - position: absolute; - right: 3px; - top: 1px; - padding: 10px; - padding-bottom: 9px; - font-size: 16px; - color: var(--primary-text-color); - font-family: inherit; - pointer-events: none; - cursor: default; - max-width: 140px; - white-space: nowrap; - overflow: hidden; - - &::after { - content: ''; - display: block; - position: absolute; - top: 0; - right: 0; - bottom: 1px; - width: 5px; - background-image: linear-gradient(to right, hsla(var(--background-color_hsl), 0), var(--background-color)); - } - } - } - - &__overlay-area { + .label_input__wrapper { position: relative; - - &__overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - background: var(--background-color); - backdrop-filter: blur(2px); - border-radius: 4px; - - &__content { - text-align: center; - - &.rich-formatting { - &, - p { - color: var(--primary-text-color); - } - } - } - } } h2 { @@ -637,52 +469,6 @@ $no-columns-breakpoint: 600px; } } -.file-picker img { - max-width: 100px; - max-height: 100px; -} - -.code-editor { - textarea { - font-family: monospace; - white-space: pre; - } - - &--invalid textarea { - border-color: $error-red !important; - color: $error-red; - } - - .input { - margin-bottom: 0; - } - - .hint { - margin-top: 10px; - } -} - -.delete-account { - margin-top: 50px; - display: flex; - justify-content: center; -} - -.input .row > .svg-icon.delete-field { - height: 20px; - width: 20px; - position: absolute; - right: 13px; - cursor: pointer; - color: $error-red; - transform: translateY(-11px); -} - -.input .row > .input.with_label + .svg-icon.delete-field { - right: 5px; - transform: translateY(7px); -} - .input.with_label.toggle .label_input { display: flex; font-size: 14px; @@ -692,48 +478,3 @@ $no-columns-breakpoint: 600px; margin-left: 10px; } } - -.actions.add-row { - margin: 10px 0 0; - - .button { - display: flex; - align-items: center; - border: 0; - background: transparent; - - &:hover { - color: var(--primary-text-color); - } - - .svg-icon { - height: 20px; - width: 20px; - } - } -} - -.copyable-input { - display: flex; - align-items: center; - justify-content: center; - height: 38px; - - input { - flex: 1; - font-size: 14px !important; - border-radius: 4px 0 0 4px !important; - height: 100%; - } - - button { - width: auto; - font-size: 14px; - margin: 0; - border-radius: 0 4px 4px 0; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - } -} diff --git a/app/styles/placeholder.scss b/app/styles/placeholder.scss index 709926650..816234750 100644 --- a/app/styles/placeholder.scss +++ b/app/styles/placeholder.scss @@ -31,16 +31,6 @@ 100% { background-position-x: 0; } } -.chat-list-item--placeholder .chat__last-message { - letter-spacing: -1px; - color: var(--brand-color) !important; - opacity: 0.1; -} - -.slist { - position: relative; -} - .media-gallery.media-gallery--placeholder { background: none; diff --git a/app/styles/rtl.scss b/app/styles/rtl.scss index ae2de194b..61a6ae71d 100644 --- a/app/styles/rtl.scss +++ b/app/styles/rtl.scss @@ -1,14 +1,7 @@ body.rtl { direction: rtl; - .column-header > button { - text-align: right; - padding-left: 0; - padding-right: 15px; - } - - .column-link__icon, - .column-header__icon { + .column-link__icon { margin-right: 0; margin-left: 5px; } @@ -18,28 +11,6 @@ body.rtl { left: 10px; } - .column-header__buttons { - left: 0; - right: auto; - margin-left: 0; - margin-right: -15px; - } - - .column-inline-form .icon-button { - margin-left: 0; - margin-right: 5px; - } - - .column-header__links .text-btn { - margin-left: 10px; - margin-right: 0; - } - - .setting-toggle__label { - margin-left: 0; - margin-right: 8px; - } - .status { padding-left: 10px; padding-right: 68px; @@ -112,21 +83,6 @@ body.rtl { } } - .public-layout { - .header { - .nav-button { - margin-left: 8px; - margin-right: 0; - } - } - } - - .card__bar .display-name { - margin-left: 0; - margin-right: 15px; - text-align: right; - } - .fa-chevron-left::before { content: "\F054"; } diff --git a/app/styles/ui.scss b/app/styles/ui.scss index c49c54562..8f791f3fd 100644 --- a/app/styles/ui.scss +++ b/app/styles/ui.scss @@ -88,45 +88,6 @@ } } -.text-icon-button { - color: var(--primary-text-color--faint); - border: 0; - background: transparent; - cursor: pointer; - font-weight: 600; - font-size: 11px; - padding: 0 3px; - line-height: 27px; - outline: 0; - transition: color 100ms ease-in; - - &:hover, - &:active, - &:focus { - color: var(--primary-text-color); - transition: color 200ms ease-out; - } - - &.disabled { - color: var(--primary-text-color--faint); - cursor: default; - } - - &.active { - color: var(--highlight-text-color); - } - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus, - &:active { - outline: 0 !important; - } -} - .invisible { font-size: 0 !important; line-height: 0 !important; @@ -151,10 +112,6 @@ .ellipsis::after { content: "…"; } -.no-reduce-motion .spoiler-input { - transition: height 0.4s ease, opacity 0.4s ease; -} - .image-loader { position: relative; width: 100%; @@ -205,39 +162,10 @@ width: 100%; padding: 0 0 calc(var(--thumb-navigation-height) + 86px); - .bg-shape-container { - position: fixed; - left: 0; - right: 0; - top: 0; - bottom: 0; - } - .page { display: flex; flex-direction: column; width: 100%; - - &__top { - @include standard-panel-shadow; - display: flex; - width: 100%; - height: auto; - z-index: 1000; - background: var(--foreground-color); - - @media (min-width: 896px) { - top: -290px; - position: sticky; - } - } - - &__columns { - display: flex; - flex-direction: column; - width: 100%; - height: 100%; - } } } @@ -254,17 +182,10 @@ } } -.slist { - &--flex { - display: flex; - flex-direction: column; - } - - &__append { - flex: 1 1 auto; - position: relative; - padding: 30px 15px; - } +.slist__append { + flex: 1 1 auto; + position: relative; + padding: 30px 15px; } .setting-text { @@ -290,34 +211,6 @@ } } -.morefollows-indicator { - text-align: center; - font-size: 16px; - font-weight: 500; - color: var(--primary-text-color); - background: var(--brand-color--med); - cursor: default; - display: flex; - flex: 1 1 auto; - align-items: center; - justify-content: center; - padding: 20px; - - & > div { - width: 100%; - background: transparent; - padding-top: 0; - } - - &__label { - strong { - display: block; - margin-bottom: 10px; - color: var(--primary-text-color); - } - } -} - .text-btn { display: inline-block; padding: 0; @@ -334,165 +227,6 @@ text-align: center; } -.emoji-button { - display: block; - font-size: 24px; - line-height: 24px; - margin-left: 2px; - width: 24px; - outline: 0; - cursor: pointer; - - &:active, - &:focus { - outline: 0 !important; - } - - img { - filter: grayscale(100%); - opacity: 0.8; - display: block; - margin: 0; - width: 22px; - height: 22px; - margin-top: 2px; - } - - &:hover, - &:active, - &:focus { - img { - opacity: 1; - filter: none; - } - } -} - -.attachment-list { - display: flex; - font-size: 14px; - border: 1px solid var(--brand-color--med); - border-radius: 4px; - margin-top: 14px; - overflow: hidden; - - &__icon { - flex: 0 0 auto; - color: var(--primary-text-color); - padding: 8px 18px; - cursor: default; - border-right: 1px solid var(--brand-color--med); - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: 26px; - - .fa { - display: block; - } - } - - &__list { - list-style: none; - padding: 4px 0; - padding-left: 8px; - display: flex; - flex-direction: column; - justify-content: center; - overflow: hidden; - white-space: nowrap; - - li { - display: block; - padding: 4px 0; - overflow: hidden; - text-overflow: ellipsis; - } - - a { - text-decoration: none; - color: var(--primary-text-color); - font-weight: 500; - - &:hover { - text-decoration: underline; - } - } - } - - &.compact { - border: 0; - margin-top: 4px; - - .attachment-list__list { - padding: 0; - display: block; - } - - .fa { - color: var(--primary-text-color); - } - } -} - -.filter-bar { - cursor: default; - display: flex; - flex-shrink: 0; - - button { - border: 0; - margin: 0; - } - - button, - a { - @apply block flex-1 text-gray-500 py-4 text-sm font-semibold text-center relative no-underline; - - &:active, - &:focus, - &:hover, - &.active { - @apply text-gray-900; - } - - .svg-icon { - width: 18px; - height: 18px; - margin: 0 auto; - } - } -} - -.filter-bar { - @apply relative; - - &__active { - @apply absolute h-[3px] bottom-0 bg-primary-600; - } - - &__bottom { - @apply absolute h-[3px] w-full bottom-0 bg-primary-200; - } -} - -.no-reduce-motion .filter-bar__active { - transition: all 0.3s; -} - -.reaction__filter-bar { - overflow-x: auto; - overflow-y: hidden; - - button, - a { - flex: unset; - padding: 15px 24px; - min-width: max-content; - } -} - ::-webkit-scrollbar-thumb { border-radius: 0; } @@ -502,11 +236,3 @@ 30% { opacity: 0.75; } 100% { opacity: 1; } } - -.text-muted { - color: var(--gray-500); -} - -.mb-10 { - margin-bottom: 10px; -}