From 27ae71da091c73e4a2953c53010c260942700add Mon Sep 17 00:00:00 2001 From: kvakazyambra Date: Wed, 28 Jun 2023 01:47:47 +0300 Subject: [PATCH] Feed page style fixes + icons --- public/icons/bell-white-hover.svg | 3 + public/icons/bell-white.svg | 5 +- public/icons/bookmark-hover.svg | 3 + public/icons/bookmark.svg | 4 +- public/icons/comment-hover.svg | 3 + public/icons/comment.svg | 4 +- public/icons/ellipsis.svg | 6 +- public/icons/eye-hover.svg | 3 + public/icons/eye.svg | 7 +- public/icons/feed-all-hover.svg | 3 + public/icons/feed-all.svg | 4 +- public/icons/feed-collaborate-hover.svg | 3 + public/icons/feed-collaborate.svg | 4 +- public/icons/feed-discussion-hover.svg | 3 + public/icons/feed-discussion.svg | 4 +- public/icons/feed-drafts-hover.svg | 3 + public/icons/feed-drafts.svg | 4 +- public/icons/feed-my-hover.svg | 3 + public/icons/feed-my.svg | 4 +- public/icons/feed-notifications-hover.svg | 3 + public/icons/feed-notifications.svg | 4 +- public/icons/hash-hover.svg | 3 + public/icons/hash.svg | 5 +- public/icons/inbox-white-hover.svg | 3 + public/icons/inbox-white.svg | 5 +- public/icons/knowledge-base-bullet-hover.svg | 3 + public/icons/knowledge-base-bullet.svg | 4 +- public/icons/pencil-outline-hover.svg | 3 + public/icons/pencil-outline.svg | 4 +- public/icons/search.svg | 5 +- public/icons/settings-hover.svg | 3 + public/icons/settings.svg | 4 +- public/icons/share-outline-hover.svg | 3 + public/icons/share-outline.svg | 4 +- src/components/Article/Article.module.scss | 4 + .../Article/ShoutRatingControl.module.scss | 38 ++++---- src/components/Author/AuthorCard.module.scss | 3 +- src/components/Author/Userpic.module.scss | 6 +- src/components/Feed/ArticleCard.module.scss | 91 +++++++++++-------- src/components/Feed/ArticleCard.tsx | 9 +- .../Feed/FeedArticlePopup.module.scss | 3 +- .../Feed/Sidebar/Sidebar.module.scss | 10 +- src/components/Feed/Sidebar/Sidebar.tsx | 28 ++++-- .../Nav/AuthModal/SocialProviders.module.scss | 2 +- src/components/Nav/Header.module.scss | 39 +++----- src/components/Nav/HeaderAuth.tsx | 7 ++ src/components/Views/Feed.module.scss | 47 +++++----- src/components/Views/Feed.tsx | 9 +- src/styles/app.scss | 5 +- 49 files changed, 257 insertions(+), 173 deletions(-) create mode 100644 public/icons/bell-white-hover.svg create mode 100644 public/icons/bookmark-hover.svg create mode 100644 public/icons/comment-hover.svg create mode 100644 public/icons/eye-hover.svg create mode 100644 public/icons/feed-all-hover.svg create mode 100644 public/icons/feed-collaborate-hover.svg create mode 100644 public/icons/feed-discussion-hover.svg create mode 100644 public/icons/feed-drafts-hover.svg create mode 100644 public/icons/feed-my-hover.svg create mode 100644 public/icons/feed-notifications-hover.svg create mode 100644 public/icons/hash-hover.svg create mode 100644 public/icons/inbox-white-hover.svg create mode 100644 public/icons/knowledge-base-bullet-hover.svg create mode 100644 public/icons/pencil-outline-hover.svg create mode 100644 public/icons/settings-hover.svg create mode 100644 public/icons/share-outline-hover.svg diff --git a/public/icons/bell-white-hover.svg b/public/icons/bell-white-hover.svg new file mode 100644 index 00000000..0b7341ac --- /dev/null +++ b/public/icons/bell-white-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/bell-white.svg b/public/icons/bell-white.svg index edc6fc3b..fb1c3452 100644 --- a/public/icons/bell-white.svg +++ b/public/icons/bell-white.svg @@ -1,4 +1,3 @@ - - + + diff --git a/public/icons/bookmark-hover.svg b/public/icons/bookmark-hover.svg new file mode 100644 index 00000000..0be2eeb1 --- /dev/null +++ b/public/icons/bookmark-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/bookmark.svg b/public/icons/bookmark.svg index c5670137..ed778238 100644 --- a/public/icons/bookmark.svg +++ b/public/icons/bookmark.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/icons/comment-hover.svg b/public/icons/comment-hover.svg new file mode 100644 index 00000000..91543763 --- /dev/null +++ b/public/icons/comment-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/comment.svg b/public/icons/comment.svg index 54fdc046..45c858f1 100644 --- a/public/icons/comment.svg +++ b/public/icons/comment.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/icons/ellipsis.svg b/public/icons/ellipsis.svg index c45ab2f3..1de15e18 100644 --- a/public/icons/ellipsis.svg +++ b/public/icons/ellipsis.svg @@ -1,5 +1,3 @@ - - - - + + diff --git a/public/icons/eye-hover.svg b/public/icons/eye-hover.svg new file mode 100644 index 00000000..81f9f0ab --- /dev/null +++ b/public/icons/eye-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/eye.svg b/public/icons/eye.svg index b13c2ac6..ad5749d8 100644 --- a/public/icons/eye.svg +++ b/public/icons/eye.svg @@ -1,6 +1,3 @@ - - - + + diff --git a/public/icons/feed-all-hover.svg b/public/icons/feed-all-hover.svg new file mode 100644 index 00000000..d6183ffd --- /dev/null +++ b/public/icons/feed-all-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/feed-all.svg b/public/icons/feed-all.svg index bf43645b..486d1409 100644 --- a/public/icons/feed-all.svg +++ b/public/icons/feed-all.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/icons/feed-collaborate-hover.svg b/public/icons/feed-collaborate-hover.svg new file mode 100644 index 00000000..2a0f4dc4 --- /dev/null +++ b/public/icons/feed-collaborate-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/feed-collaborate.svg b/public/icons/feed-collaborate.svg index 624212bc..363f00e5 100644 --- a/public/icons/feed-collaborate.svg +++ b/public/icons/feed-collaborate.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/icons/feed-discussion-hover.svg b/public/icons/feed-discussion-hover.svg new file mode 100644 index 00000000..82d27ceb --- /dev/null +++ b/public/icons/feed-discussion-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/feed-discussion.svg b/public/icons/feed-discussion.svg index 33487b34..890cfc18 100644 --- a/public/icons/feed-discussion.svg +++ b/public/icons/feed-discussion.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/icons/feed-drafts-hover.svg b/public/icons/feed-drafts-hover.svg new file mode 100644 index 00000000..ba6bab9a --- /dev/null +++ b/public/icons/feed-drafts-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/feed-drafts.svg b/public/icons/feed-drafts.svg index 09f21898..ba6bab9a 100644 --- a/public/icons/feed-drafts.svg +++ b/public/icons/feed-drafts.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/icons/feed-my-hover.svg b/public/icons/feed-my-hover.svg new file mode 100644 index 00000000..8a6fe949 --- /dev/null +++ b/public/icons/feed-my-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/feed-my.svg b/public/icons/feed-my.svg index 0f3b6ab3..a69be10a 100644 --- a/public/icons/feed-my.svg +++ b/public/icons/feed-my.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/icons/feed-notifications-hover.svg b/public/icons/feed-notifications-hover.svg new file mode 100644 index 00000000..57309b70 --- /dev/null +++ b/public/icons/feed-notifications-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/feed-notifications.svg b/public/icons/feed-notifications.svg index 18f1f252..394a2393 100644 --- a/public/icons/feed-notifications.svg +++ b/public/icons/feed-notifications.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/icons/hash-hover.svg b/public/icons/hash-hover.svg new file mode 100644 index 00000000..b4c863f8 --- /dev/null +++ b/public/icons/hash-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/hash.svg b/public/icons/hash.svg index 1c9a012e..b4c863f8 100644 --- a/public/icons/hash.svg +++ b/public/icons/hash.svg @@ -1,4 +1,3 @@ - - + + diff --git a/public/icons/inbox-white-hover.svg b/public/icons/inbox-white-hover.svg new file mode 100644 index 00000000..d197b4fa --- /dev/null +++ b/public/icons/inbox-white-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/inbox-white.svg b/public/icons/inbox-white.svg index 6643ea6e..eca43639 100644 --- a/public/icons/inbox-white.svg +++ b/public/icons/inbox-white.svg @@ -1,4 +1,3 @@ - - + + diff --git a/public/icons/knowledge-base-bullet-hover.svg b/public/icons/knowledge-base-bullet-hover.svg new file mode 100644 index 00000000..d159c4de --- /dev/null +++ b/public/icons/knowledge-base-bullet-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/knowledge-base-bullet.svg b/public/icons/knowledge-base-bullet.svg index 2e6d6db6..e581bf8c 100644 --- a/public/icons/knowledge-base-bullet.svg +++ b/public/icons/knowledge-base-bullet.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/icons/pencil-outline-hover.svg b/public/icons/pencil-outline-hover.svg new file mode 100644 index 00000000..ae3a2249 --- /dev/null +++ b/public/icons/pencil-outline-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/pencil-outline.svg b/public/icons/pencil-outline.svg index b03787a4..fe4eccf9 100644 --- a/public/icons/pencil-outline.svg +++ b/public/icons/pencil-outline.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/icons/search.svg b/public/icons/search.svg index eca3eaee..045492d0 100644 --- a/public/icons/search.svg +++ b/public/icons/search.svg @@ -1,4 +1,3 @@ - - + + diff --git a/public/icons/settings-hover.svg b/public/icons/settings-hover.svg new file mode 100644 index 00000000..45cba8b8 --- /dev/null +++ b/public/icons/settings-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/settings.svg b/public/icons/settings.svg index da3e6951..4f9e9bdf 100644 --- a/public/icons/settings.svg +++ b/public/icons/settings.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/icons/share-outline-hover.svg b/public/icons/share-outline-hover.svg new file mode 100644 index 00000000..0f0d893c --- /dev/null +++ b/public/icons/share-outline-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/share-outline.svg b/public/icons/share-outline.svg index 75d67fea..874b8b70 100644 --- a/public/icons/share-outline.svg +++ b/public/icons/share-outline.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/components/Article/Article.module.scss b/src/components/Article/Article.module.scss index d7fd82e4..b502176e 100644 --- a/src/components/Article/Article.module.scss +++ b/src/components/Article/Article.module.scss @@ -56,6 +56,10 @@ img { font-weight: bold; line-height: 1.4; } + + figure { + gap: 0; + } } .shoutMediaBody { diff --git a/src/components/Article/ShoutRatingControl.module.scss b/src/components/Article/ShoutRatingControl.module.scss index bd8a218a..0f5dee2d 100644 --- a/src/components/Article/ShoutRatingControl.module.scss +++ b/src/components/Article/ShoutRatingControl.module.scss @@ -8,6 +8,25 @@ border-color: #000; color: #fff; } + + .ratingControl { + align-items: center; + border: 2px solid; + border-radius: 100%; + display: flex; + justify-content: center; + height: 0.9em; + line-height: 0; + font-size: 1.6em; + padding: 0; + width: 0.9em; + + &:hover { + background: #000; + border-color: #000; + color: #fff; + } + } } .ratingValue { @@ -21,22 +40,3 @@ color: #fff; } } - -.ratingControl { - align-items: center; - border: 2px solid; - border-radius: 100%; - display: flex; - justify-content: center; - height: 0.9em; - line-height: 0; - font-size: 1.6em; - padding: 0; - width: 0.9em; - - &:hover { - background: #000; - border-color: #000; - color: #fff; - } -} diff --git a/src/components/Author/AuthorCard.module.scss b/src/components/Author/AuthorCard.module.scss index bd7d5fbb..96914a9e 100644 --- a/src/components/Author/AuthorCard.module.scss +++ b/src/components/Author/AuthorCard.module.scss @@ -349,7 +349,8 @@ } .feedMode { - margin-bottom: 0.6rem; + align-items: center; + margin-bottom: 0.4rem; .authorName { @include font-size(1.2rem); diff --git a/src/components/Author/Userpic.module.scss b/src/components/Author/Userpic.module.scss index 8e9f37f6..3ff3c966 100644 --- a/src/components/Author/Userpic.module.scss +++ b/src/components/Author/Userpic.module.scss @@ -34,7 +34,9 @@ width: 20px !important; } - a { + a:link { + display: block; + height: 100%; padding: 0; &:hover { @@ -76,6 +78,8 @@ .feedMode { .userpic { + font-size: 0.8rem; + line-height: 12px; min-width: 16px; max-width: 16px; } diff --git a/src/components/Feed/ArticleCard.module.scss b/src/components/Feed/ArticleCard.module.scss index a2311873..c7009357 100644 --- a/src/components/Feed/ArticleCard.module.scss +++ b/src/components/Feed/ArticleCard.module.scss @@ -17,13 +17,31 @@ } } - a { - border: none; + .icon { + display: inline-block; + height: 24px; + width: 24px; } - .icon { - height: 1.5em; - width: 100%; + .iconHover { + display: none; + } + + button, + a:link { + border: none; + + &:hover { + color: var(--default-color); + + .icon { + display: none; + } + + .iconHover { + display: inline-block; + } + } } .feedControlIcon { @@ -54,8 +72,8 @@ &:hover { .shoutCardTitle .shoutCardLinkContainer { - background-color: #000; - color: #fff; + background-color: var(--default-color); + color: var(--link-hover-color); } } } @@ -129,7 +147,7 @@ .shoutCardTitle { @include font-size(2.2rem); font-weight: 700; - line-height: 1.1; + line-height: 1.2; margin-bottom: 0.8rem; :global(.col-md-12) & { @@ -148,7 +166,7 @@ .shoutCardTitlesContainerFeedMode & { @include font-size(3.2rem); - line-height: 1.1; + line-height: 1.25; } } @@ -208,8 +226,6 @@ } .shoutCardType { - background: #fff; - border-radius: 100%; height: 3.2rem; position: absolute; right: 0.8rem; @@ -219,11 +235,19 @@ width: 3.2rem; z-index: 2; - &:hover { - background: #000; + a:link { + background: #fff; + border-radius: 100%; + display: block; + height: 100%; + width: 100%; - .icon { - filter: invert(1); + &:hover { + background: #000; + + .icon { + filter: invert(1); + } } } @@ -450,7 +474,11 @@ } .shoutCardFeed { - margin-bottom: 4em; + margin: 4em 0; + + &:first-of-type { + margin-top: 0; + } .shoutCardContent { margin-bottom: 0; @@ -489,7 +517,7 @@ .shoutCardDetailsItem { align-items: center; display: flex; - margin-right: 1.4em; + margin-right: 1.2rem; white-space: nowrap; &:last-child { @@ -500,17 +528,12 @@ vertical-align: middle; } - a, - button { - &:hover { - img { - opacity: 0.5; - } - } - } - - a { + a:link { border: none; + + &:hover { + background: none; + } } } @@ -520,29 +543,21 @@ display: flex; .icon { - display: inline-block; margin: 0 0.5em 0 0; vertical-align: middle; } - a { + a:link { &:hover { background: none; - color: rgb(0 0 0 / 60%); - img { - filter: none; + .shoutCardLinkContainer { + background: var(--default-color); } } } } -.shoutCardDetailsViewed { - .icon { - margin-top: -0.1em; - } -} - .shoutCardVertical { aspect-ratio: auto; height: 100%; diff --git a/src/components/Feed/ArticleCard.tsx b/src/components/Feed/ArticleCard.tsx index f0970492..9ca6a19f 100644 --- a/src/components/Feed/ArticleCard.tsx +++ b/src/components/Feed/ArticleCard.tsx @@ -124,6 +124,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
+
@@ -196,6 +197,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
+
@@ -220,7 +222,8 @@ export const ArticleCard = (props: ArticleCardProps) => {
scrollToComments(event)}> - {stat?.commented || t('Add comment')} + + {stat?.commented || t('Add comment')}
@@ -231,6 +234,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
+
)} @@ -241,6 +245,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
)} @@ -259,6 +264,7 @@ export const ArticleCard = (props: ArticleCardProps) => { trigger={ } /> @@ -277,6 +283,7 @@ export const ArticleCard = (props: ArticleCardProps) => { trigger={ } /> diff --git a/src/components/Feed/FeedArticlePopup.module.scss b/src/components/Feed/FeedArticlePopup.module.scss index 197e42d4..ad53350b 100644 --- a/src/components/Feed/FeedArticlePopup.module.scss +++ b/src/components/Feed/FeedArticlePopup.module.scss @@ -11,7 +11,8 @@ } button { - color: #696969; + font-size: inherit; + font-weight: 500; &:hover { background: #000; diff --git a/src/components/Feed/Sidebar/Sidebar.module.scss b/src/components/Feed/Sidebar/Sidebar.module.scss index a7deba7a..89f57bbe 100644 --- a/src/components/Feed/Sidebar/Sidebar.module.scss +++ b/src/components/Feed/Sidebar/Sidebar.module.scss @@ -18,7 +18,6 @@ .counter { @include font-size(1.2rem); - align-items: center; align-self: flex-start; background: #f6f6f6; @@ -74,11 +73,11 @@ .icon { display: inline-block; line-height: 1; - height: 2rem; - margin-right: 0.5em; + height: 2.4rem; + margin-right: 0.8rem; vertical-align: middle; text-align: center; - width: 2.2rem; + width: 2.4rem; img { height: 100%; @@ -90,7 +89,6 @@ h4 { @include font-size(1.2rem); - font-weight: bold; color: #9fa1a7; cursor: pointer; @@ -127,9 +125,7 @@ img { display: inline-block; - height: 1.6rem; vertical-align: middle; - width: 1.6rem; } } } diff --git a/src/components/Feed/Sidebar/Sidebar.tsx b/src/components/Feed/Sidebar/Sidebar.tsx index 3554800c..1622c4cb 100644 --- a/src/components/Feed/Sidebar/Sidebar.tsx +++ b/src/components/Feed/Sidebar/Sidebar.tsx @@ -78,15 +78,27 @@ export const Sidebar = (props: FeedSidebarProps) => {
@@ -189,6 +195,7 @@ export const HeaderAuth = (props: HeaderAuthProps) => { {/*FIXME: replace with route*/}
+
diff --git a/src/components/Views/Feed.module.scss b/src/components/Views/Feed.module.scss index 38be8403..e1ecedbf 100644 --- a/src/components/Views/Feed.module.scss +++ b/src/components/Views/Feed.module.scss @@ -1,10 +1,9 @@ .feedFilter { - margin: 0 0 1.6rem; + margin: 0.2em 0 1.6rem; } .feedNavigation { @include font-size(1.6rem); - font-weight: 500; h4 { @@ -26,7 +25,8 @@ white-space: nowrap; width: 100%; - a { + a, + strong { display: flex; justify-content: space-between; } @@ -38,11 +38,12 @@ } .feedAside { + margin-top: -1.1em; + h4 { @include font-size(2.2rem); - font-weight: bold; - margin-bottom: 2.4rem; + margin-bottom: 2rem; } } @@ -54,7 +55,6 @@ .topic { @include font-size(1.2rem); - background: transparentize(#2638d9, 0.95); display: inline-block; font-weight: bold; @@ -91,39 +91,44 @@ ul { @include font-size(1.4rem); - font-weight: bold; margin: 1rem 0 0; line-height: 1.3; li { - margin-bottom: 1.2rem; - padding-left: 2.6rem; + margin-bottom: 1.6rem; + padding-left: 3.4rem; position: relative; - &::before { - background: url(/public/icons/knowledge-base-bullet.svg) no-repeat; - content: ''; - height: 1.6rem; - left: 0; - position: absolute; - width: 2rem; - } - &:last-child { margin-bottom: 0; } } } - a { + a:link { border: none; + + &::before { + background: url(/public/icons/knowledge-base-bullet.svg) no-repeat; + content: ''; + height: 2.4rem; + left: 0; + position: absolute; + top: -0.1em; + width: 2.4rem; + } + + &:hover { + &:before { + background-image: url(/public/icons/knowledge-base-bullet-hover.svg); + } + } } } .comment { @include font-size(1.5rem); - line-height: 1.4; margin-bottom: 2.4rem; @@ -144,7 +149,6 @@ .commentBody { @include font-size(1.4rem); - margin-bottom: 1.2rem; line-clamp: 3; -webkit-line-clamp: 3; @@ -171,6 +175,5 @@ .commentArticleTitle, .commentAuthor { @include font-size(1.2rem); - font-weight: 500; } diff --git a/src/components/Views/Feed.tsx b/src/components/Views/Feed.tsx index 1f693558..e0ba8337 100644 --- a/src/components/Views/Feed.tsx +++ b/src/components/Views/Feed.tsx @@ -18,6 +18,7 @@ import styles from './Feed.module.scss' import stylesTopic from '../Feed/CardTopic.module.scss' import stylesBeside from '../../components/Feed/Beside.module.scss' import { CommentDate } from '../Article/CommentDate' +import {Beside} from "../Feed/Beside"; export const FEED_PAGE_SIZE = 20 @@ -122,7 +123,13 @@ export const FeedView = () => { {(author) => (
  • - +
    • )}     diff --git a/src/styles/app.scss b/src/styles/app.scss index 35be5115..2fb367ed 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -179,7 +179,8 @@ a:link { cursor: pointer; } -a { +a:visited, +a:link { color: var(--link-color); padding-bottom: 0.1em; transition: color 0.2s, background-color 0.2s; @@ -474,7 +475,7 @@ form { &:-webkit-autofill, &:not(:placeholder-shown) { & ~ label { - font-size: 60%; + font-size: 80%; transform: translateY(-1.7em) !important; } }