Feat: web app dark mode (#14732)

web/app/components/share/text-generation/run-batch/index.tsx

@@ -1,17 +1,16 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import {
-  PlayIcon,
-} from '@heroicons/react/24/solid'
 import { useTranslation } from 'react-i18next'
 import {
   RiLoader2Line,
+  RiPlayLargeLine,
 } from '@remixicon/react'
 import CSVReader from './csv-reader'
 import CSVDownload from './csv-download'
-import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import cn from '@/utils/classnames'
 export type IRunBatchProps = {
   vars: { name: string }[]
   onSend: (data: string[][]) => void
@@ -24,6 +23,8 @@ const RunBatch: FC<IRunBatchProps> = ({
   isAllFinished,
 }) => {
   const { t } = useTranslation()
+  const media = useBreakpoints()
+  const isPC = media === MediaType.pc
 
   const [csvData, setCsvData] = React.useState<string[][]>([])
   const [isParsed, setIsParsed] = React.useState(false)
@@ -36,16 +37,15 @@ const RunBatch: FC<IRunBatchProps> = ({
   const handleSend = () => {
     onSend(csvData)
   }
-  const Icon = isAllFinished ? PlayIcon : RiLoader2Line
+  const Icon = isAllFinished ? RiPlayLargeLine : RiLoader2Line
   return (
     <div className='pt-4'>
       <CSVReader onParsed={handleParsed} />
       <CSVDownload vars={vars} />
-      <div className='mt-4 h-[1px] bg-gray-100'></div>
       <div className='flex justify-end'>
         <Button
           variant="primary"
-          className='mt-4 pl-3 pr-4'
+          className={cn('mt-4 pl-3 pr-4', !isPC && 'grow')}
           onClick={handleSend}
           disabled={!isParsed || !isAllFinished}
         >