diff --git a/public/icons/bookmark-x.svg b/public/icons/bookmark-x.svg index ab24ac7c..c5670137 100644 --- a/public/icons/bookmark-x.svg +++ b/public/icons/bookmark-x.svg @@ -1,4 +1,3 @@ - - + + diff --git a/public/icons/bookmark.svg b/public/icons/bookmark.svg index ab24ac7c..c5670137 100644 --- a/public/icons/bookmark.svg +++ b/public/icons/bookmark.svg @@ -1,4 +1,3 @@ - - + + diff --git a/public/icons/comment.svg b/public/icons/comment.svg index 9ea76718..54fdc046 100644 --- a/public/icons/comment.svg +++ b/public/icons/comment.svg @@ -1,4 +1,3 @@ - - + + diff --git a/public/icons/feed-all.svg b/public/icons/feed-all.svg index 91e4730a..bf43645b 100644 --- a/public/icons/feed-all.svg +++ b/public/icons/feed-all.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/icons/feed-collaborate.svg b/public/icons/feed-collaborate.svg index 900af627..624212bc 100644 --- a/public/icons/feed-collaborate.svg +++ b/public/icons/feed-collaborate.svg @@ -1,11 +1,3 @@ - - - - - - - - - - + + diff --git a/public/icons/feed-discussion.svg b/public/icons/feed-discussion.svg index b551ac5e..33487b34 100644 --- a/public/icons/feed-discussion.svg +++ b/public/icons/feed-discussion.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/icons/feed-drafts.svg b/public/icons/feed-drafts.svg index 77aa04bc..09f21898 100644 --- a/public/icons/feed-drafts.svg +++ b/public/icons/feed-drafts.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/icons/feed-my.svg b/public/icons/feed-my.svg index 51a98763..0f3b6ab3 100644 --- a/public/icons/feed-my.svg +++ b/public/icons/feed-my.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/icons/feed-notifications.svg b/public/icons/feed-notifications.svg index ad127830..18f1f252 100644 --- a/public/icons/feed-notifications.svg +++ b/public/icons/feed-notifications.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/icons/pencil-outline.svg b/public/icons/pencil-outline.svg index 95eda09a..b03787a4 100644 --- a/public/icons/pencil-outline.svg +++ b/public/icons/pencil-outline.svg @@ -1,4 +1,3 @@ - - + + diff --git a/public/icons/share-outline.svg b/public/icons/share-outline.svg index a12b4c26..75d67fea 100644 --- a/public/icons/share-outline.svg +++ b/public/icons/share-outline.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/components/Feed/Card.module.scss b/src/components/Feed/Card.module.scss index fad21354..bf4a3f02 100644 --- a/src/components/Feed/Card.module.scss +++ b/src/components/Feed/Card.module.scss @@ -22,12 +22,12 @@ } .icon { - height: 1.2em; + height: 1.5em; width: 100%; } .feedControlIcon { - max-width: 1.4em; + max-width: 2em; } } diff --git a/src/components/Feed/Sidebar.module.scss b/src/components/Feed/Sidebar.module.scss index a078d3fd..718e56a2 100644 --- a/src/components/Feed/Sidebar.module.scss +++ b/src/components/Feed/Sidebar.module.scss @@ -1,25 +1,30 @@ .sidebar { max-height: calc(100vh - 120px); - overflow: hidden; + overflow: auto; position: sticky; top: 120px; +} - &:hover { - overflow: scroll; - padding-right: 1rem; - } +.sidebarItemName { + margin-right: 0.5em; + position: relative; + overflow: hidden; + text-overflow: ellipsis; } .counter { @include font-size(1.2rem); - align-items: center; align-self: flex-start; background: #f6f6f6; border-radius: 0.8rem; display: flex; - font-weight: 500; - padding: 0.2em 0.5em; + font-weight: bold; + justify-content: center; + min-width: 2em; + margin-left: 0.5em; + padding: 0.25em 0.5em 0.15em; + transition: background-color 0.2s; } .unread { @@ -54,6 +59,10 @@ a { img { filter: invert(1); } + + .counter { + background: #000; + } } } diff --git a/src/components/Feed/Sidebar.tsx b/src/components/Feed/Sidebar.tsx index 72a9c2be..6c0d6771 100644 --- a/src/components/Feed/Sidebar.tsx +++ b/src/components/Feed/Sidebar.tsx @@ -35,52 +35,63 @@ export const FeedSidebar = (props: FeedSidebarProps) => { - - diff --git a/src/components/Views/Feed.module.scss b/src/components/Views/Feed.module.scss index ca371949..fb6d3c1e 100644 --- a/src/components/Views/Feed.module.scss +++ b/src/components/Views/Feed.module.scss @@ -1,6 +1,5 @@ .feedNavigation { @include font-size(1.5rem); - font-weight: 500; h4 { @@ -19,17 +18,13 @@ } li { - display: flex; - justify-content: space-between; margin: 0 0 1rem; white-space: nowrap; width: 100%; a { - margin-right: 0.5em; - position: relative; - overflow: hidden; - text-overflow: ellipsis; + display: flex; + justify-content: space-between; } }