Merge pull request #149 from aws-samples/fix-transcribe-page

audio-to-text ページのデザインを微修正
aws-samples · Nov 2, 2023 · 831594f · 831594f
2 parents 9899d2a + a4c9a80
commit 831594f
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 9 deletions.
diff --git a/packages/web/src/components/Drawer.tsx b/packages/web/src/components/Drawer.tsx
@@ -31,7 +31,7 @@ const Item: React.FC<ItemProps> = (props) => {
   }, []);
   return (
     <Link
-      className={`hover:bg-aws-sky flex h-8 mt-0.5 items-center rounded p-2 ${
+      className={`hover:bg-aws-sky mt-0.5 flex h-8 items-center rounded p-2 ${
         location.pathname === props.to && 'bg-aws-sky'
       } ${props.className}`}
       to={props.to}

diff --git a/packages/web/src/pages/TranscribePage.tsx b/packages/web/src/pages/TranscribePage.tsx
@@ -41,20 +41,16 @@ const TranscribePage: React.FC = () => {
       <div className="col-span-12 col-start-1 mx-2 lg:col-span-10 lg:col-start-2 xl:col-span-10 xl:col-start-2">
         <Card label="ファイルアップロード">
           <input
-            className="block w-full cursor-pointer rounded-lg border border-gray-300 bg-gray-50
-            text-sm text-gray-900 file:mr-4 file:border-0 file:px-4 file:py-2 file:font-semibold
-            file:text-gray-700 focus:outline-none
-            dark:border-gray-600 dark:bg-gray-700
-            dark:text-gray-400 dark:placeholder:text-gray-400"
+            className="file:bg-aws-squid-ink block w-full cursor-pointer rounded-lg border
+            border-gray-400 text-sm text-gray-900 file:mr-4 file:cursor-pointer file:border-0
+            file:px-4 file:py-2 file:text-white focus:outline-none"
             onChange={onChangeFile}
             aria-describedby="file_input_help"
             id="file_input"
             type="file"
             accept=".mp3, .mp4, .wav, .flac, .ogg, .amr, .webm"
             ref={ref}></input>
-          <p
-            className="mt-1 text-sm text-gray-500 dark:text-gray-300"
-            id="file_input_help">
+          <p className="ml-0.5 mt-1 text-sm text-gray-500" id="file_input_help">
             mp3, mp4, wav, flac, ogg, amr, webm ファイルが利用可能です
           </p>
           <div className="flex justify-end gap-3">