A bunch more theme stuff

src-web/components/responseViewers/AudioViewer.tsx

@@ -0,0 +1,18 @@
+import { convertFileSrc } from '@tauri-apps/api/core';
+import React from 'react';
+import type { HttpResponse } from '../../lib/models';
+
+interface Props {
+  response: HttpResponse;
+}
+
+export function AudioViewer({ response }: Props) {
+  if (response.bodyPath === null) {
+    return <div>Empty response body</div>;
+  }
+
+  const src = convertFileSrc(response.bodyPath);
+
+  // eslint-disable-next-line jsx-a11y/media-has-caption
+  return <audio className="w-full" controls src={src}></audio>;
+}

src-web/components/responseViewers/ImageViewer.tsx

@@ -2,7 +2,6 @@ import { convertFileSrc } from '@tauri-apps/api/core';
 import classNames from 'classnames';
 import { useState } from 'react';
 import type { HttpResponse } from '../../lib/models';
-import { Button } from '../core/Button';
 
 interface Props {
   response: HttpResponse;
@@ -23,13 +22,9 @@ export function ImageViewer({ response, className }: Props) {
       <>
         <div className="text-sm italic text-fg-subtler">
           Response body is too large to preview.{' '}
-          <Button
-            className="cursor-pointer underline hover:text-fg"
-            color="secondary"
-            onClick={() => setShow(true)}
-          >
+          <button className="cursor-pointer underline hover:text-fg" onClick={() => setShow(true)}>
             Show anyway
-          </Button>
+          </button>
         </div>
       </>
     );

src-web/components/responseViewers/TextViewer.tsx

@@ -18,9 +18,10 @@ const extraExtensions = [hyperlink];
 interface Props {
   response: HttpResponse;
   pretty: boolean;
+  className?: string;
 }
 
-export function TextViewer({ response, pretty }: Props) {
+export function TextViewer({ response, pretty, className }: Props) {
   const [isSearching, toggleIsSearching] = useToggle();
   const [filterText, setDebouncedFilterText, setFilterText] = useDebouncedState<string>('', 400);
 
@@ -85,6 +86,7 @@ export function TextViewer({ response, pretty }: Props) {
   return (
     <Editor
       readOnly
+      className={className}
       forceUpdateKey={body}
       defaultValue={body}
       contentType={contentType}

src-web/components/responseViewers/VideoViewer.tsx

@@ -0,0 +1,18 @@
+import { convertFileSrc } from '@tauri-apps/api/core';
+import React from 'react';
+import type { HttpResponse } from '../../lib/models';
+
+interface Props {
+  response: HttpResponse;
+}
+
+export function VideoViewer({ response }: Props) {
+  if (response.bodyPath === null) {
+    return <div>Empty response body</div>;
+  }
+
+  const src = convertFileSrc(response.bodyPath);
+
+  // eslint-disable-next-line jsx-a11y/media-has-caption
+  return <video className="w-full" controls src={src}></video>;
+}