From 51b05631c3508f269a51c7688da4c6e30e6888e4 Mon Sep 17 00:00:00 2001
From: spencerwooo <spencer.woo@outlook.com>
Date: Sat, 18 Dec 2021 09:43:24 +0800
Subject: [PATCH] use aspect ratios in tailwind 3.0 and remove css hacks

---
 components/FileListing.tsx              |  2 +-
 components/previews/AudioPreview.tsx    |  2 +-
 components/previews/MarkdownPreview.tsx |  4 ++--
 components/previews/VideoPreview.tsx    | 18 ++++++++----------
 4 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/components/FileListing.tsx b/components/FileListing.tsx
index 9de1167..56c4eac 100644
--- a/components/FileListing.tsx
+++ b/components/FileListing.tsx
@@ -334,7 +334,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
     return (
       <div className="dark:bg-gray-900 dark:text-gray-100 bg-white rounded">
         <div className="dark:border-gray-700 grid items-center grid-cols-12 px-3 space-x-2 border-b border-gray-200">
-          <div className="md:col-span-6 col-span-12 font-bold">Name</div>
+          <div className="md:col-span-6 col-span-12 font-bold py-3">Name</div>
           <div className="md:block hidden col-span-3 font-bold">Last Modified</div>
           <div className="md:block hidden font-bold">Size</div>
           <div className="md:block hidden font-bold">Actions</div>
diff --git a/components/previews/AudioPreview.tsx b/components/previews/AudioPreview.tsx
index 73b5198..87549e7 100644
--- a/components/previews/AudioPreview.tsx
+++ b/components/previews/AudioPreview.tsx
@@ -18,7 +18,7 @@ const AudioPreview: FunctionComponent<{ file: any }> = ({ file }) => {
     <>
       <div className="dark:bg-gray-900 dark:text-white w-full p-3 bg-white rounded">
         <div className="md:flex-row md:space-x-4 flex flex-col space-y-4">
-          <div className="dark:bg-gray-700 h-72 md:w-40 md:h-36 flex items-center justify-center w-full transition-all duration-75 bg-gray-100 rounded">
+          <div className="dark:bg-gray-700 aspect-square flex items-center justify-center w-full md:w-40 transition-all duration-75 bg-gray-100 rounded">
             {playerStatus === PlayerState.Loading ? (
               <div>
                 <svg
diff --git a/components/previews/MarkdownPreview.tsx b/components/previews/MarkdownPreview.tsx
index 0c80e5b..a8e4cfa 100644
--- a/components/previews/MarkdownPreview.tsx
+++ b/components/previews/MarkdownPreview.tsx
@@ -67,14 +67,14 @@ const MarkdownPreview: FunctionComponent<{ file: any; path: string; standalone?:
 
   if (error) {
     return (
-      <div className={`${standalone ? 'shadow bg-white dark:bg-gray-900 rounded p-3' : ''}`}>
+      <div className={`${standalone ? 'bg-white dark:bg-gray-900 rounded p-3' : ''}`}>
         <FourOhFour errorMsg={error.message} />
       </div>
     )
   }
   if (!data) {
     return (
-      <div className={standalone ? 'shadow bg-white dark:bg-gray-900 rounded p-3' : ''}>
+      <div className={standalone ? 'bg-white dark:bg-gray-900 rounded p-3' : ''}>
         <Loading loadingText="Loading file content..." />
       </div>
     )
diff --git a/components/previews/VideoPreview.tsx b/components/previews/VideoPreview.tsx
index 69646f7..5a654fb 100644
--- a/components/previews/VideoPreview.tsx
+++ b/components/previews/VideoPreview.tsx
@@ -15,16 +15,14 @@ const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
   return (
     <>
       <div className="dark:bg-gray-900 p-3 bg-white rounded">
-        <div className="relative" style={{ paddingTop: '56.25%' }}>
-          <ReactPlayer
-            className="absolute top-0 left-0 w-full h-full"
-            url={file['@microsoft.graph.downloadUrl']}
-            controls
-            width="100%"
-            height="100%"
-            config={{ file: { forceVideo: true } }}
-          />
-        </div>
+        <ReactPlayer
+          className="aspect-video"
+          url={file['@microsoft.graph.downloadUrl']}
+          controls
+          width="100%"
+          height="100%"
+          config={{ file: { forceVideo: true } }}
+        />
       </div>
 
       <div className="flex flex-wrap justify-center mt-4 space-x-2">