remove dashboard filter disclousere

app/javascript/pages/dashboard/Filters.tsx

@@ -1,12 +1,12 @@
-import React, {FC, Fragment} from 'react'
-import {Disclosure, Transition} from "@headlessui/react"
-import {ChevronDownIcon, XIcon} from "@heroicons/react/outline"
-import {useForm} from "react-hook-form"
+import React, { FC, Fragment } from 'react'
+import { Disclosure, Transition } from "@headlessui/react"
+import { ChevronDownIcon, XIcon } from "@heroicons/react/outline"
+import { useForm } from "react-hook-form"
 
-import {QuestionWhereInput} from "../../__generated__/graphql-schema"
-import {useDashboardContext, whereDefaultState} from "./DashboardContext"
-import {useCurrentUser} from "../../contexts"
-import {Button, Input} from "../../components"
+import { QuestionWhereInput } from "../../__generated__/graphql-schema"
+import { useDashboardContext, whereDefaultState } from "./DashboardContext"
+import { useCurrentUser } from "../../contexts"
+import { Button, Input } from "../../components"
 
 type FilterBarForm = {
   fromOtherUsers?: boolean
@@ -36,12 +36,12 @@ const mapFilter = (values: FilterBarForm, userId?: string): QuestionWhereInput =
 })
 
 const FiltersForm: FC = () => {
-  const {register, handleSubmit, reset, getValues, formState} = useForm({
+  const { register, handleSubmit, reset, getValues, formState } = useForm({
     defaultValues: formDefaultValues,
   })
-  const {setWhere} = useDashboardContext()
+  const { setWhere } = useDashboardContext()
   const userContext = useCurrentUser()
-  const {user, isOnlyTeacher} = userContext
+  const { user, isOnlyTeacher } = userContext
 
   const onSubmit = (values: FilterBarForm) => {
     reset(getValues())
@@ -58,50 +58,50 @@ const FiltersForm: FC = () => {
       onSubmit={handleSubmit(onSubmit)}
       className={"flex justify-between"}
     >
-        <span>
-          <label className={"pl-2 pt-2"}>Data de Criação</label>
-          <div className={"grid grid-cols-2 gap-2 border p-2 m-2 rounded-md border-gray-300"}>
-            <Input
-              type="date"
-              placeholder="createDate.startAt"
-              {...register('createDate.startAt',{
-                maxLength: 10,
-                minLength: 10,
-              })}
-              name={"createDate.startAt"}
-              label={"A Partir De"}
-            />
-            <Input
-              type="date"
-              placeholder="createDate.endAt"
-              {...register('createDate.endAt', {
-                maxLength: 10,
-                minLength: 10,
-              })}
-              label={"Até"}
-            />
-          </div>
-        </span>
+      <span>
+        <label className={"pl-2 pt-2"}>Data de Criação</label>
+        <div className={"grid grid-cols-2 gap-2 border p-2 m-2 rounded-md border-gray-300"}>
+          <Input
+            type="date"
+            placeholder="createDate.startAt"
+            {...register('createDate.startAt', {
+              maxLength: 10,
+              minLength: 10,
+            })}
+            name={"createDate.startAt"}
+            label={"A Partir De"}
+          />
+          <Input
+            type="date"
+            placeholder="createDate.endAt"
+            {...register('createDate.endAt', {
+              maxLength: 10,
+              minLength: 10,
+            })}
+            label={"Até"}
+          />
+        </div>
+      </span>
       {!isOnlyTeacher && (
         <span className={"flex items-center"}>
-            <label
-              htmlFor={"fromOtherUsers"}
-              children={"Apenas questões próprias?"}
-              className={"mr-3"}
-            />
-            <input
-              id={"fromOtherUsers"}
-              type="checkbox"
-              placeholder="fromOtherUsers"
-              {...register('fromOtherUsers')}
-            />
-          </span>
+          <label
+            htmlFor={"fromOtherUsers"}
+            children={"Apenas questões próprias?"}
+            className={"mr-3"}
+          />
+          <input
+            id={"fromOtherUsers"}
+            type="checkbox"
+            placeholder="fromOtherUsers"
+            {...register('fromOtherUsers')}
+          />
+        </span>
       )}
       <div className={"grid grid-cols-2 gap-2 place-items-center"}>
         <div>
           <Button type={'tertiary'} onClick={handleClean}>
             <span className={"flex"}>
-              <XIcon className={"w-5 h-5 text-gray-800"}/>
+              <XIcon className={"w-5 h-5 text-gray-800"} />
               Limpar filtro
             </span>
           </Button>
@@ -117,35 +117,7 @@ const FiltersForm: FC = () => {
 }
 
 export const Filters: FC = () => (
-  <Disclosure>
-    {({open}) => (
-      <div className="m-auto bg-white rounded-md shadow-sm hover:shadow transition-shadow duration-300">
-        <Disclosure.Button as={Fragment}>
-          <button className="flex p-2 w-full justify-between">
-            <div className="grid place-items-center pl-4">
-              Filtros
-            </div>
-            <div className={"pr-4"}>
-              <ChevronDownIcon
-                className={`${open ? 'transform rotate-180' : ''} w-5 h-5 text-gray-800`}
-              />
-            </div>
-          </button>
-        </Disclosure.Button>
-        <Transition
-          show={open}
-          enter="transition duration-100 ease-out"
-          enterFrom="transform scale-95 opacity-0"
-          enterTo="transform scale-100 opacity-100"
-          leave="transition duration-75 ease-out"
-          leaveFrom="transform scale-100 opacity-100"
-          leaveTo="transform scale-95 opacity-0"
-        >
-          <Disclosure.Panel className={"p-4"}>
-            <FiltersForm/>
-          </Disclosure.Panel>
-        </Transition>
-      </div>
-    )}
-  </Disclosure>
+  <div className="p-4 m-auto bg-white rounded-md shadow-sm hover:shadow transition-shadow duration-300">
+    <FiltersForm />
+  </div>
 )

app/javascript/pages/dashboard/components/charts/Pie.tsx

@@ -13,8 +13,8 @@ type Props = {
 export const Pie: FC<Props> = ({title, data}) => {
   return (
     <div
-      className="m-auto bg-white rounded-md p-4 shadow-sm hover:shadow transition-shadow duration-300"
-      style={{ height: '36rem', width: '36rem' }}
+      className="m-auto bg-white rounded-md p-4 shadow-sm hover:shadow transition-shadow duration-300 w-full"
+      style={{ height: '36rem' }}
     >
       <h3 className="text-lg leading-6 font-medium text-gray-900">{title}</h3>
       {data.length ? (