diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss index 00b064e7e..3cc05b782 100644 --- a/webapp/assets/_new/styles/tokens.scss +++ b/webapp/assets/_new/styles/tokens.scss @@ -230,6 +230,7 @@ $space-small: 16px; $space-x-small: 8px; $space-xx-small: 4px; $space-xxx-small: 2px; +$space-none: 0; /** * @tokens Size Height diff --git a/webapp/components/features/FollowList/FollowList.spec.js b/webapp/components/features/FollowList/FollowList.spec.js index 620ac965e..44a855eed 100644 --- a/webapp/components/features/FollowList/FollowList.spec.js +++ b/webapp/components/features/FollowList/FollowList.spec.js @@ -137,8 +137,8 @@ describe('FollowList.vue', () => { expect(wrapper.findAll('.user-teaser')).toHaveLength(allConnectionsUser.followingCount) }) - it('renders the user-teasers in an overflow-container', () => { - expect(wrapper.find('.--overflow').is('div')).toBe(true) + it('renders the user-teasers as an overflowing list', () => { + expect(wrapper.find('.--overflow').is('ul')).toBe(true) }) it('renders a filter text input', () => { diff --git a/webapp/components/features/FollowList/FollowList.vue b/webapp/components/features/FollowList/FollowList.vue index be8c35e1a..633896e08 100644 --- a/webapp/components/features/FollowList/FollowList.vue +++ b/webapp/components/features/FollowList/FollowList.vue @@ -4,14 +4,15 @@
{{ userName | truncate(15) }} {{ $t(`profile.network.${type}`) }}
-
- +
  • -
  • + class="connections__item" + > + + + .connections__item { + padding: $space-xx-small; + + &.is-selected, + &:hover { + background-color: $background-color-primary-inverse; + } + } } .nobody-message { @@ -149,9 +161,5 @@ export default { > :nth-child(n):not(:last-child) { margin-bottom: $space-small; } - - .user-teaser { - margin-bottom: $space-x-small; - } }