diff --git a/app/soapbox/components/column.js b/app/soapbox/components/column.js index f7466c15e8..02cc087433 100644 Binary files a/app/soapbox/components/column.js and b/app/soapbox/components/column.js differ diff --git a/app/soapbox/features/notifications/components/notification.js b/app/soapbox/features/notifications/components/notification.js index fd9ab525b6..fe25af0540 100644 Binary files a/app/soapbox/features/notifications/components/notification.js and b/app/soapbox/features/notifications/components/notification.js differ diff --git a/app/soapbox/features/notifications/index.js b/app/soapbox/features/notifications/index.js index d4f06eeeb4..5de2151b59 100644 Binary files a/app/soapbox/features/notifications/index.js and b/app/soapbox/features/notifications/index.js differ diff --git a/app/styles/components/emoji-reacts.scss b/app/styles/components/emoji-reacts.scss index c22a47dd82..c912d21e3e 100644 --- a/app/styles/components/emoji-reacts.scss +++ b/app/styles/components/emoji-reacts.scss @@ -25,14 +25,13 @@ vertical-align: middle; display: inline-flex; - i.fa { - color: var(--highlight-text-color); - font-size: 20px; - margin-right: 0.2em; - } - .svg-icon { margin-right: 0.2em; + color: var(--highlight-text-color); + + svg { + stroke-width: 3px; + } } } diff --git a/app/styles/components/notification.scss b/app/styles/components/notification.scss index bf4376d65b..0a1e58a092 100644 --- a/app/styles/components/notification.scss +++ b/app/styles/components/notification.scss @@ -1,3 +1,12 @@ +.notification { + border-bottom: 1px solid var(--brand-color--med); + padding: 10px 0; +} + +.notification-mention { + padding: 15px 0; +} + .notification-favourite { .status.status-direct { background: transparent; @@ -28,12 +37,22 @@ } } -.notification__favourite-icon-wrapper { +.notification__icon-wrapper { left: -26px; position: absolute; - .star-icon { - color: $gold-star; + .svg-icon { + width: 20px; + height: 20px; + color: var(--highlight-text-color); + + svg.icon-tabler-thumb-up { + color: $gold-star; + } + + svg.feather-repeat { + color: var(--highlight-text-color); + } } } @@ -55,3 +74,18 @@ .notification .status__wrapper { box-shadow: none; } + +.notification { + .status-container { + padding: 0; + } + + .status__wrapper { + border-radius: 0; + padding: 0; + } + + .status { + padding-bottom: 8px !important; + } +} diff --git a/app/styles/ui.scss b/app/styles/ui.scss index a858b1480c..926900deab 100644 --- a/app/styles/ui.scss +++ b/app/styles/ui.scss @@ -444,6 +444,7 @@ flex: 1 1 auto; position: relative; min-height: 120px; + padding: 30px 15px; } }