🔁 ordem dos elementos na tela

unb-mds · Dec 1, 2023 · 0a670c1 · 0a670c1
1 parent d4cff37
commit 0a670c1
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 22 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/components/Pages/Home.tsx b/src/components/Pages/Home.tsx
@@ -35,7 +35,7 @@ export const Home: React.FC<TitleProps> = ({ ano }) => {
 
   return (
     <div className="flex">
-      <div className="bg-[#7f1d1d] w-80 h-screen p-4 text-white">
+      <div className="bg-[#410c0c] w-80 h-screen p-4 text-white">
         <p className="text-white font-bold text-2xl mt-4 mb-4">Confira a quantidade de avisos de licitação nos municípios do Ceará.</p>
         <p className="text-white mt-4">Este projeto foi realizado pelo Squad 07 durante o segundo semestre de 2023 na disciplina Métodos de Desenvolvimento de Software da Universidade de Brasília.</p>
         <Image
@@ -45,35 +45,40 @@ export const Home: React.FC<TitleProps> = ({ ano }) => {
           src="https://i.pinimg.com/originals/84/a7/86/84a786798c453d6a536f31cba73e5409.png"
         />
       </div>
-      <div className="p-4 text-2xl 2xl:text-3xl 3xl:text-[2.4375rem] font-semibold lg:w-[42.93rem] leading-10">
-        <div>
-          <label>Selecione o Município:</label>
+      <div className="p-4 text-2xl 2xl:text-3xl 3xl:text-[2.4375rem] font-semibold lg:w-[42.93rem] leading-10 ml-32">
+        <div className="info-text">
+          {ano === "geral" ? (
+            <>
+              Acompanhe a quantidade de avisos de licitação que ocorreram em todos os meses de 2023 em
+              <span className="text-[#410c0c]">{(" " + titleText) as string}</span>
+            </>
+          ) : (
+            <>
+              Acompanhe a quantidade de avisos de licitação que ocorreram em 2023 em
+              <span className="text-[#4AA381]">{(" " + titleText) as string} - {(" " + ano) as string}</span>
+            </>
+          )}
+        </div>
+        <div className="municipio-selector mt-4">
+          <label className="block text-sm font-medium text-gray-700">Selecione o Município:</label>
           <select
             onChange={handleMunicipioChange}
             value={selectedMunicipio || ''}
+            className="mt-1 block w-full p-2 border rounded-md focus:outline-none focus:border-blue-500"
           >
-            <option value="">Todos</option>
+            <option value="">Selecione</option>
             {municipios.map((municipio) => (
               <option key={municipio} value={municipio}>
                 {municipio}
               </option>
             ))}
           </select>
         </div>
-        {ano === "geral" ? (
-          <>
-            Acompanhe a quantidade de avisos de licitação que ocorreram em todos os meses de 2023 em
-            <span className="text-[#802323]">{(" " + titleText) as string}</span>
-          </>
-        ) : (
-          <>
-            Acompanhe a quantidade de avisos de licitação que ocorreram em 2023 em
-            <span className="text-[#4AA381]">{(" " + titleText) as string} - {(" " + ano) as string}</span>
-          </>
-        )}
-        <br />
-        <GraphComponent municipio={selectedMunicipio || ''} />
+        <div className="graph-component mt-8">
+          <GraphComponent municipio={selectedMunicipio || ''} />
+        </div>
       </div>
     </div>
   );
 };
+
diff --git a/src/components/Pages/Sobre.tsx b/src/components/Pages/Sobre.tsx
@@ -3,7 +3,7 @@ import Image from "next/image";
 export const Sobre = () => {
     return (
         <div className="flex">
-            <div className="bg-[#7f1d1d]  w-80 h-screen p-4 text-white"> 
+            <div className="bg-[#410c0c]  w-80 h-screen p-4 text-white"> 
                 <p className="text-white font-bold text-2xl mt-4 mb-4">Confira a quantidade de avisos de licitação nos municípios do Ceará.</p>
                 <p className="text-white mt-4">Este projeto foi realizado pelo Squad 07 durante o segundo semestre de 2023 na disciplina Métodos de Desenvolvimento de Software da Universidade de Brasília.</p>
                 {/* Logo da Universidade com dois espaços */}

diff --git a/src/components/Pages/favicon.ico b/src/components/Pages/favicon.ico
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,11 +1,14 @@
-import type { Config } from 'tailwindcss'
+import type { Config } from 'tailwindcss';
 
 const config: Config = {
   content: [
     "./src/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
+      fontFamily: {
+        roboto: ['Roboto', 'sans-serif'],
+      },
       backgroundImage: {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
         'gradient-conic':
@@ -17,5 +20,6 @@ const config: Config = {
   daisyui: {
     themes: ["corporate"],
   },
-}
-export default config
+};
+
+export default config;