diff --git a/app/soapbox/actions/remote_timeline.js b/app/soapbox/actions/remote_timeline.js index 65ec69e82c..38249c0090 100644 Binary files a/app/soapbox/actions/remote_timeline.js and b/app/soapbox/actions/remote_timeline.js differ diff --git a/app/soapbox/features/public_timeline/index.js b/app/soapbox/features/public_timeline/index.js index dc204f0eb0..a424ec9881 100644 Binary files a/app/soapbox/features/public_timeline/index.js and b/app/soapbox/features/public_timeline/index.js differ diff --git a/app/soapbox/features/remote_timeline/components/pinned_hosts_picker.js b/app/soapbox/features/remote_timeline/components/pinned_hosts_picker.js new file mode 100644 index 0000000000..0305268b02 Binary files /dev/null and b/app/soapbox/features/remote_timeline/components/pinned_hosts_picker.js differ diff --git a/app/soapbox/features/remote_timeline/index.js b/app/soapbox/features/remote_timeline/index.js index ee08192fff..5f22c49302 100644 Binary files a/app/soapbox/features/remote_timeline/index.js and b/app/soapbox/features/remote_timeline/index.js differ diff --git a/app/styles/components/remote-timeline.scss b/app/styles/components/remote-timeline.scss index 76e90b38d1..7150afb18e 100644 --- a/app/styles/components/remote-timeline.scss +++ b/app/styles/components/remote-timeline.scss @@ -27,3 +27,48 @@ padding-right: 10px; } } + +.pinned-hosts-picker { + margin-left: 10px; + display: inline-flex; + flex-wrap: wrap; + + .pinned-host { + margin-right: 10px; + margin-bottom: 10px; + } + + &:hover { + .pinned-host { + background: var(--background-color); + + &:hover { + background: var(--brand-color--faint); + } + } + } +} + +.pinned-host { + background: var(--background-color); + border-radius: 999px; + transition: 0.2s; + + &.active { + background: var(--brand-color--faint); + + a { + color: #fff; + } + } + + a { + display: block; + color: var(--primary-text-color); + text-decoration: none; + padding: 5px 11px; + max-width: 115px; + overflow: hidden; + text-overflow: ellipsis; + } +}