From 39838e83ccc2a37a2912df50a3add54bc92c2711 Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Thu, 25 Aug 2022 19:29:32 -0700
Subject: [PATCH] replace style props with tailwind classes

---
 web/components/advanced-panel.tsx   | 38 -----------------------------
 web/components/analytics/charts.tsx | 13 +++++++---
 web/components/nav/sidebar.tsx      |  2 +-
 web/pages/simulator.tsx             |  5 ++--
 web/pages/stats.tsx                 |  6 ++---
 5 files changed, 14 insertions(+), 50 deletions(-)
 delete mode 100644 web/components/advanced-panel.tsx

diff --git a/web/components/advanced-panel.tsx b/web/components/advanced-panel.tsx
deleted file mode 100644
index 51caba67..00000000
--- a/web/components/advanced-panel.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import clsx from 'clsx'
-import { useState, ReactNode } from 'react'
-
-export function AdvancedPanel(props: { children: ReactNode }) {
-  const { children } = props
-  const [collapsed, setCollapsed] = useState(true)
-
-  return (
-    <div
-      tabIndex={0}
-      className={clsx(
-        'collapse collapse-arrow relative',
-        collapsed ? 'collapse-close' : 'collapse-open'
-      )}
-    >
-      <div
-        onClick={() => setCollapsed((collapsed) => !collapsed)}
-        className="cursor-pointer"
-      >
-        <div className="mt-4 mr-6 text-right text-sm text-gray-500">
-          Advanced
-        </div>
-        <div
-          className="collapse-title absolute h-0 min-h-0 w-0 p-0"
-          style={{
-            top: -2,
-            right: -15,
-            color: '#6a7280' /* gray-500 */,
-          }}
-        />
-      </div>
-
-      <div className="collapse-content m-0 !bg-transparent !p-0">
-        {children}
-      </div>
-    </div>
-  )
-}
diff --git a/web/components/analytics/charts.tsx b/web/components/analytics/charts.tsx
index 2f987d58..56e71257 100644
--- a/web/components/analytics/charts.tsx
+++ b/web/components/analytics/charts.tsx
@@ -1,4 +1,5 @@
 import { Point, ResponsiveLine } from '@nivo/line'
+import clsx from 'clsx'
 import dayjs from 'dayjs'
 import { zip } from 'lodash'
 import { useWindowSize } from 'web/hooks/use-window-size'
@@ -26,8 +27,10 @@ export function DailyCountChart(props: {
 
   return (
     <div
-      className="w-full overflow-hidden"
-      style={{ height: !small && (!width || width >= 800) ? 400 : 250 }}
+      className={clsx(
+        'h-[250px] w-full overflow-hidden',
+        !small && 'md:h-[400px]'
+      )}
     >
       <ResponsiveLine
         data={data}
@@ -78,8 +81,10 @@ export function DailyPercentChart(props: {
 
   return (
     <div
-      className="w-full overflow-hidden"
-      style={{ height: !small && (!width || width >= 800) ? 400 : 250 }}
+      className={clsx(
+        'h-[250px] w-full overflow-hidden',
+        !small && 'md:h-[400px]'
+      )}
     >
       <ResponsiveLine
         data={data}
diff --git a/web/components/nav/sidebar.tsx b/web/components/nav/sidebar.tsx
index ef9070d8..9659d00f 100644
--- a/web/components/nav/sidebar.tsx
+++ b/web/components/nav/sidebar.tsx
@@ -250,7 +250,7 @@ export default function Sidebar(props: { className?: string }) {
       <CreateQuestionButton user={user} />
       <Spacer h={4} />
       {user && (
-        <div className="w-full" style={{ minHeight: 80 }}>
+        <div className="min-h-[80px] w-full">
           <ProfileSummary user={user} />
         </div>
       )}
diff --git a/web/pages/simulator.tsx b/web/pages/simulator.tsx
index dc6ca873..756e483b 100644
--- a/web/pages/simulator.tsx
+++ b/web/pages/simulator.tsx
@@ -203,8 +203,7 @@ function NewBidTable(props: {
               <input
                 type="number"
                 placeholder="0"
-                className="input input-bordered"
-                style={{ maxWidth: 100 }}
+                className="input input-bordered max-w-[100px]"
                 value={newBid.toString()}
                 onChange={(e) => setNewBid(parseInt(e.target.value) || 0)}
                 onKeyUp={(e) => {
@@ -292,7 +291,7 @@ export default function Simulator() {
               YES
             </div>
           </h1>
-          <div className="mb-10 w-full" style={{ height: 500 }}>
+          <div className="mb-10 h-[500px] w-full">
             <ResponsiveLine
               data={data}
               yScale={{ min: 0, max: 100, type: 'linear' }}
diff --git a/web/pages/stats.tsx b/web/pages/stats.tsx
index 57c47843..bca0525a 100644
--- a/web/pages/stats.tsx
+++ b/web/pages/stats.tsx
@@ -375,11 +375,10 @@ export function FirebaseAnalytics() {
       </p>
       <Spacer h={4} />
       <iframe
-        className="w-full"
+        className="w-full border-0"
         height={2200}
         src="https://datastudio.google.com/embed/reporting/faeaf3a4-c8da-4275-b157-98dad017d305/page/Gg3"
         frameBorder="0"
-        style={{ border: 0 }}
         allowFullScreen
       />
     </>
@@ -400,11 +399,10 @@ export function WasabiCharts() {
       </p>
       <Spacer h={4} />
       <iframe
-        className="w-full"
+        className="w-full border-0"
         height={21000}
         src="https://wasabipesto.com/jupyter/manifold/"
         frameBorder="0"
-        style={{ border: 0 }}
         allowFullScreen
       />
     </>