misc style enhancements

.github/workflows/e2e.yml

@@ -40,7 +40,7 @@ jobs:
             ${{ runner.os }}-mix-${{ env.cache-name }}-
             ${{ runner.os }}-mix-
       - name: Restore Elixir build folder
-        uses: actions/cache@v1
+        uses: actions/cache@v3
         with:
           path: ./api/build
           key: ${{ runner.os }}-mix-${{ env.cache-name }}-${{ hashFiles('**/mix.lock') }}

app/components/Comments/Source.jsx

@@ -49,11 +49,13 @@ export const Source = ({ source: { url, title, site_name }, withoutPlayer }) =>
   return (
     <ExternalLinkNewTab
       href={url}
-      className="inline-block max-w-full p-3 px-5 mt-2 text-sm border border-primary-600/20 border-l-4 border-l-blue-400 rounded-r-md shadow-sm transition-all duration-200 hover:shadow-md hover:translate-x-0.5 hover:bg-gradient-to-br hover:from-primary-700/90 hover:to-primary-800/90 group"
+      className="inline-block max-w-full p-3 px-5 mt-2 text-sm border border-primary-600/20 border-l-4 border-l-blue-400 rounded-r-md shadow-sm transition-all duration-200 hover:shadow-md hover:translate-x-0.5 hover:bg-gradient-to-br hover:from-primary-700/90 hover:to-primary-800/90 group bg-blue-50"
     >
-      <div className="flex items-center gap-1 fond-semibold text-[1.05em] truncate group-hover:underline decoration-primary-400/60">
-        <ExternalLink size="1em" />
-        {site_name ? site_name.toUpperCase() : getDisplayableHostname(url)}
+      <div className="flex items-center gap-1">
+        <ExternalLink className="flex-grow-0 flex-shrink-0 basis-[14x]" size={14} />
+        <span className="font-semibold truncate group-hover:underline">
+          {site_name ? site_name.toUpperCase() : getDisplayableHostname(url)}
+        </span>
       </div>
       <span className="italic text-[0.95em]">{title}</span>
     </ExternalLinkNewTab>

app/components/Comments/Vote.tsx

@@ -10,7 +10,7 @@ import Spinner from '../ui/spinner'
 
 const Score = ({ isVoting, isReported, score }) => {
   return (
-    <Badge variant="outline" className="min-w-9 h-[22px] justify-center">
+    <Badge variant="outline" className="min-w-9 h-[22px] justify-center bg-white">
       {isVoting ? <Spinner size={13} /> : isReported ? <Ban size={13} /> : <span>{score}</span>}
     </Badge>
   )

app/components/Statements/StatementComments.jsx

@@ -4,6 +4,7 @@ import { withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
 
 import { Badge } from '@/components/ui/badge'
+import { cn } from '@/lib/css-utils'
 
 import { classifyComments } from '../../state/video_debate/comments/selectors'
 import { CommentsList } from '../Comments/CommentsList'
@@ -43,7 +44,7 @@ export default class StatementComments extends React.PureComponent {
     const hasSpeakerComments = speakerComments.size > 0
 
     return !hasCommunityComments ? null : (
-      <React.Fragment>
+      <div className="bg-[#fefefe]">
         {hasSpeakerComments && (
           <div className="bg-neutral-100 text-center flex justify-center items-center gap-2 p-1">
             <Users size={14} />
@@ -53,16 +54,16 @@ export default class StatementComments extends React.PureComponent {
         <Separator />
         {hasSourcedComments && this.renderSourcedComments()}
         {hasRegularComments && this.renderRegularComments()}
-      </React.Fragment>
+      </div>
     )
   }
 
   renderSourcedComments() {
     const { approvingFacts, refutingFacts, setReplyToComment } = this.props
     return (
-      <div className="flex flex-wrap">
+      <div className="flex flex-wrap shadow-[0_5px_5px_-5px_#bdbdbd] mb-2">
         <CommentsList
-          className="w-full md:w-1/2 flex-grow basis-[450px] flex-col"
+          className="w-full md:w-1/2 flex-grow basis-[450px] flex-col bg-red-100/5 pb-2"
           comments={refutingFacts}
           setReplyToComment={setReplyToComment}
           header={this.renderCommentsListHeader(
@@ -73,8 +74,11 @@ export default class StatementComments extends React.PureComponent {
           statementID={this.props.statement.id}
           commentType="refute"
         />
+        <div className="hidden md:flex items-stretch self-stretch my-2">
+          <Separator orientation="vertical" className="bg-neutral-100" />
+        </div>
         <CommentsList
-          className="w-full md:w-1/2 flex-grow basis-[450px] flex-col"
+          className="w-full md:w-1/2 flex-grow basis-[450px] flex-col bg-green-100/5 pb-2"
           comments={approvingFacts}
           setReplyToComment={setReplyToComment}
           header={this.renderCommentsListHeader(
@@ -92,7 +96,7 @@ export default class StatementComments extends React.PureComponent {
   renderRegularComments() {
     const { comments, setReplyToComment } = this.props
     return (
-      <div className="p-3">
+      <div className="px-3">
         <CommentsList
           comments={comments}
           setReplyToComment={setReplyToComment}
@@ -104,9 +108,13 @@ export default class StatementComments extends React.PureComponent {
   }
 
   renderCommentsListHeader(label, variant, score = null) {
+    const separatorClassName = cn(
+      'flex-1 mx-2',
+      variant === 'destructive' ? 'bg-red-800/30' : variant === 'success' ? 'bg-green-700/30' : '',
+    )
     return (
       <div className="flex mt-2 mb-3 items-center">
-        <Separator className="flex-1 mx-2" />
+        <Separator className={separatorClassName} />
         <div className="flex items-center gap-2 font-bold">
           <span>{this.props.t(label)}</span>
           {score !== null && (
@@ -115,7 +123,7 @@ export default class StatementComments extends React.PureComponent {
             </Badge>
           )}
         </div>
-        <Separator className="flex-1 mx-2" />
+        <Separator className={separatorClassName} />
       </div>
     )
   }

app/components/Users/UserPicture.tsx

@@ -32,6 +32,7 @@ const UserPicture = ({
   <Avatar
     data-cy="user-picture"
     className={cn(
+      'border',
       size === USER_PICTURE_SMALL
         ? 'w-6 h-6'
         : size === USER_PICTURE_LARGE