style: added theme adaptable RetryIcon component to Retry btn

This commit is contained in:
utin-francis-peter 2024-06-08 03:29:18 +01:00
parent 2f580f7800
commit 32c06414c5
2 changed files with 28 additions and 1 deletions

View File

@ -0,0 +1,17 @@
import * as React from 'react';
import { SVGProps } from 'react';
const RetryIcon = (props: SVGProps<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
xmlSpace="preserve"
width={16}
height={16}
fill={props.fill}
stroke={props.stroke}
viewBox="0 0 383.748 383.748"
{...props}
>
<path d="M62.772 95.042C90.904 54.899 137.496 30 187.343 30c83.743 0 151.874 68.13 151.874 151.874h30C369.217 81.588 287.629 0 187.343 0c-35.038 0-69.061 9.989-98.391 28.888a182.423 182.423 0 0 0-47.731 44.705L2.081 34.641v113.365h113.91L62.772 95.042zM381.667 235.742h-113.91l53.219 52.965c-28.132 40.142-74.724 65.042-124.571 65.042-83.744 0-151.874-68.13-151.874-151.874h-30c0 100.286 81.588 181.874 181.874 181.874 35.038 0 69.062-9.989 98.391-28.888a182.443 182.443 0 0 0 47.731-44.706l39.139 38.952V235.742z" />
</svg>
);
export default RetryIcon;

View File

@ -19,6 +19,7 @@ import { FEEDBACK, Query } from './conversationModels';
import { sendFeedback } from './conversationApi'; import { sendFeedback } from './conversationApi';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import ArrowDown from './../assets/arrow-down.svg'; import ArrowDown from './../assets/arrow-down.svg';
import RetryIcon from '../components/RetryIcon';
export default function Conversation() { export default function Conversation() {
const queries = useSelector(selectQueries); const queries = useSelector(selectQueries);
const status = useSelector(selectStatus); const status = useSelector(selectStatus);
@ -229,12 +230,21 @@ export default function Conversation() {
There was an error during generation There was an error during generation
</p> </p>
<button <button
className="mt-3 rounded-full border-2 border-gray-400 py-3 px-8 text-lg text-gray-500 transition-colors delay-100 hover:border-gray-700 disabled:cursor-not-allowed dark:text-bright-gray" className="mt-3 flex items-center justify-center gap-3 rounded-full border-2 border-gray-400 py-3 px-8 text-lg text-gray-500 transition-colors delay-100 hover:border-gray-500 disabled:cursor-not-allowed dark:text-bright-gray"
disabled={status === 'loading'} disabled={status === 'loading'}
onClick={() => onClick={() =>
handleQuestion(queries[queries.length - 1].prompt, true) handleQuestion(queries[queries.length - 1].prompt, true)
} }
> >
{/* <img
src={Retry}
alt="Reload icon"
className="w-4 dark:text-red-900"
/> */}
<RetryIcon
fill={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
stroke={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
/>
Retry Retry
</button> </button>
</div> </div>