diff --git a/adhocracy-plus/assets/scss/components/_alerts.scss b/adhocracy-plus/assets/scss/components/_alerts.scss index 88eb507d1..657057071 100644 --- a/adhocracy-plus/assets/scss/components/_alerts.scss +++ b/adhocracy-plus/assets/scss/components/_alerts.scss @@ -27,7 +27,7 @@ $messages-margin-bottom: 25px; .alert--error, .alert--danger { - background-color: lighten($brand-danger, 50); + background-color: lighten($brand-danger, 57); color: $text-color; } diff --git a/adhocracy-plus/assets/scss/components/_button.scss b/adhocracy-plus/assets/scss/components/_button.scss index 9e5226068..5cccc88d6 100644 --- a/adhocracy-plus/assets/scss/components/_button.scss +++ b/adhocracy-plus/assets/scss/components/_button.scss @@ -92,10 +92,15 @@ &:focus, &:hover, - &:active { + &:active, + &:focus-within { background-color: transparent !important; text-decoration: underline; } + + &:focus-visible { + @include fake-focus-shadow; + } } .btn.btn--transparent--inverted { @@ -115,11 +120,19 @@ &:focus, &:hover, - &:active, + &:active { + box-shadow: none; + background-color: $bg-light; + } + + &:focus-visible { + @include fake-focus-shadow; + } + &:disabled, &.is-disabled { box-shadow: none; - background-color: $bg-light; + color: $text-muted; } // needed for toggle switch diff --git a/apps/userdashboard/assets/js/a4_candy_userdashboard/AIReportExplanation.jsx b/apps/userdashboard/assets/js/a4_candy_userdashboard/AIReportExplanation.jsx new file mode 100644 index 000000000..54a7b7a3c --- /dev/null +++ b/apps/userdashboard/assets/js/a4_candy_userdashboard/AIReportExplanation.jsx @@ -0,0 +1,41 @@ +import React, { useState } from 'react' +import django from 'django' + +const translated = { + intro: django.gettext('This comment contains disinformation. Defakts uses an Artificial ' + + 'Intelligence to scan content for disinformation. Disinformation often shows ' + + 'certain characteristics that allow for a reliable identification.'), + ariaReadMore: django.gettext('Click to view the AI explanation for reporting this comment.'), + ariaReadLess: django.gettext('Click to hide the AI explanation for reporting this comment.'), + readMore: django.gettext('Read more'), + readLess: django.gettext('Read less') +} + +export const AIReportExplanation = ({ AIReport }) => { + const [isExpanded, setIsExpanded] = useState() + + const toggleExpand = () => { + setIsExpanded(!isExpanded) + } + + return ( +
  • + +

    + {translated.intro + ' '} + {isExpanded && AIReport + ' '} + +

    +
  • + ) +} diff --git a/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationFeedback.jsx b/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationFeedback.jsx index 40ac8775a..12fb14d4b 100644 --- a/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationFeedback.jsx +++ b/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationFeedback.jsx @@ -12,7 +12,7 @@ export const ModerationFeedback = (props) => { } return ( -
    +
  • {translated.feedbackTitle}
    @@ -68,6 +68,6 @@ export const ModerationFeedback = (props) => {

    {feedbackText}

    -
  • + ) } diff --git a/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationNotification.jsx b/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationNotification.jsx index 0c2b9c5a7..17015c421 100644 --- a/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationNotification.jsx +++ b/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationNotification.jsx @@ -3,6 +3,7 @@ import django from 'django' import api from './api' import { ModerationFeedbackForm } from './ModerationFeedbackForm' import { ModerationFeedback } from './ModerationFeedback' +import { AIReportExplanation } from './AIReportExplanation' import { ModerationNotificationActionsBar } from './ModerationNotificationActionsBar' import { alert as Alert } from 'adhocracy4' @@ -21,7 +22,9 @@ const translated = { notificationRead: django.gettext('Notification successfully marked as read.'), notificationUnread: django.gettext('Notification successfully marked as unread.'), aiClassified: django.gettext('AI'), - postedComment: django.gettext('posted a {}comment{}') + postedComment: django.gettext('posted a {}comment{}'), + dummyText: django.gettext('Dummy text') + } export const ModerationNotification = (props) => { @@ -257,8 +260,8 @@ export const ModerationNotification = (props) => { return (
  • -
    -
    +
      +
    • {userImageDiv}

      @@ -291,17 +294,19 @@ export const ModerationNotification = (props) => {

    - +
  • {numReports > 0 && -
    +