Better blank avatar in dark mode and hover states for pagination

- The blank avatar needed some work in dark mode and removed bits from svg file
- Added in some hover states for the pagination buttons

refs https://github.com/TryGhost/Team/issues/1703

apps/comments-ui/src/components/Avatar.js

@@ -69,8 +69,8 @@ const Avatar = (props) => {
     return (
         props.isBlank ?
             (<figure className={`relative ${dimensionClasses}`}>
-                <div className={`flex justify-center items-center rounded-full bg-neutral-300 ${dimensionClasses}`}>
-                    <AvatarIcon />
+                <div className={`flex justify-center items-center rounded-full bg-neutral-300 dark:opacity-70 ${dimensionClasses}`}>
+                    <AvatarIcon className="stroke-white dark:stroke-neutral-600" />
                 </div>
             </figure>) :
             (<figure className={`relative ${dimensionClasses}`}>

apps/comments-ui/src/components/Pagination.js

@@ -19,7 +19,7 @@ const Pagination = (props) => {
     }
 
     return (
-        <button className="w-full rounded-md bg-neutral-100 text-neutral-700 font-semibold px-3 py-3.5 mb-12 font-sans text-md text-center dark:bg-[rgba(255,255,255,0.08)] dark:text-white" onClick={loadMore}>
+        <button className="transition-[background-color] duration-200 ease-out w-full rounded-md bg-neutral-100 hover:bg-neutral-200 text-neutral-700 font-semibold px-3 py-3.5 mb-12 font-sans text-md text-center dark:bg-[rgba(255,255,255,0.08)] dark:text-white" onClick={loadMore}>
             ↑ Show {left} previous comments
         </button>
     );

apps/comments-ui/src/components/RepliesPagination.js

@@ -5,9 +5,9 @@ const RepliesPagination = (props) => {
     const count = props.count;
 
     return (
-        <button className="w-full text-neutral-700 font-semibold px-0 pt-0 pb-3 mb-10 font-sans text-md text-left dark:text-white flex items-center " onClick={loadMore}>
+        <button className="group w-full text-neutral-700 font-semibold px-0 pt-0 pb-3 mb-10 font-sans text-md text-left dark:text-white flex items-center " onClick={loadMore}>
             <span className="whitespace-nowrap mr-4">↓ Show {count} more replies</span>
-            <span className="inline-block w-full bg-neutral-100 dark:bg-[rgba(255,255,255,0.08)] rounded h-[3px] mt-[3px]" />
+            <span className="transition-[background-color] duration-200 ease-out inline-block w-full bg-neutral-100 group-hover:bg-neutral-200 dark:bg-[rgba(255,255,255,0.08)] rounded h-[3px] mt-[3px]" />
         </button>
     );
 };

apps/comments-ui/src/images/icons/avatar.svg

@@ -1,11 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_173_611)">
-<path d="M5.58984 7.32143C5.58984 8.15157 5.75335 8.97358 6.07103 9.74053C6.38872 10.5075 6.85435 11.2044 7.44135 11.7914C8.02834 12.3783 8.72521 12.844 9.49216 13.1617C10.2591 13.4793 11.0811 13.6429 11.9113 13.6429C12.7414 13.6429 13.5634 13.4793 14.3304 13.1617C15.0973 12.844 15.7942 12.3783 16.3812 11.7914C16.9682 11.2044 17.4338 10.5075 17.7515 9.74053C18.0692 8.97358 18.2327 8.15157 18.2327 7.32143C18.2327 6.49128 18.0692 5.66927 17.7515 4.90232C17.4338 4.13537 16.9682 3.4385 16.3812 2.8515C15.7942 2.2645 15.0973 1.79887 14.3304 1.48119C13.5634 1.16351 12.7414 1 11.9113 1C11.0811 1 10.2591 1.16351 9.49216 1.48119C8.72521 1.79887 8.02834 2.2645 7.44135 2.8515C6.85435 3.4385 6.38872 4.13537 6.07103 4.90232C5.75335 5.66927 5.58984 6.49128 5.58984 7.32143V7.32143Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M1.5 26.2858C1.5 23.5244 2.59695 20.8761 4.54953 18.9236C6.50212 16.971 9.15039 15.874 11.9118 15.874C14.6731 15.874 17.3214 16.971 19.274 18.9236C21.2266 20.8761 22.3235 23.5244 22.3235 26.2858H1.5Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.58984 7.32143C5.58984 8.15157 5.75335 8.97358 6.07103 9.74053C6.38872 10.5075 6.85435 11.2044 7.44135 11.7914C8.02834 12.3783 8.72521 12.844 9.49216 13.1617C10.2591 13.4793 11.0811 13.6429 11.9113 13.6429C12.7414 13.6429 13.5634 13.4793 14.3304 13.1617C15.0973 12.844 15.7942 12.3783 16.3812 11.7914C16.9682 11.2044 17.4338 10.5075 17.7515 9.74053C18.0692 8.97358 18.2327 8.15157 18.2327 7.32143C18.2327 6.49128 18.0692 5.66927 17.7515 4.90232C17.4338 4.13537 16.9682 3.4385 16.3812 2.8515C15.7942 2.2645 15.0973 1.79887 14.3304 1.48119C13.5634 1.16351 12.7414 1 11.9113 1C11.0811 1 10.2591 1.16351 9.49216 1.48119C8.72521 1.79887 8.02834 2.2645 7.44135 2.8515C6.85435 3.4385 6.38872 4.13537 6.07103 4.90232C5.75335 5.66927 5.58984 6.49128 5.58984 7.32143V7.32143Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.5 26.2858C1.5 23.5244 2.59695 20.8761 4.54953 18.9236C6.50212 16.971 9.15039 15.874 11.9118 15.874C14.6731 15.874 17.3214 16.971 19.274 18.9236C21.2266 20.8761 22.3235 23.5244 22.3235 26.2858H1.5Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </g>
-<defs>
-<clipPath id="clip0_173_611">
-<rect width="24" height="24" fill="white"/>
-</clipPath>
-</defs>
 </svg>