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 + ' '} + +
+{feedbackText}
@@ -291,17 +294,19 @@ export const ModerationNotification = (props) => {
{getLink(translatedReportText(numReports), commentUrl)}
-{commentText}
+ } +{commentText}
+