Merge pull request #42 from TailUFPB/style/new-theme

Style/new theme

src/App.css

@@ -1,4 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");
-.font-roboto {
- font-family: "Roboto Mono", monospace;
-}

src/Shared/apexChartsOptions.ts

@@ -10,46 +10,47 @@ export const ReactApexChartsDefaultOptions = {
  xaxis: {
  labels: {
  style: {
- colors: "#ffffff",
+ colors: "#000",
  },
  },
  title: {
  text: "Epoch",
  style: {
- color: "#ffffff",
+ color: "#000",
  },
  },
  },
  yaxis: {
  labels: {
  formatter: (value: number) => value.toFixed(4),
  style: {
- colors: "#ffffff",
+ colors: "#000",
  },
  },
  title: {
  text: "Loss",
  style: {
- color: "#ffffff",
+ color: "#000",
  },
  },
  },
  tooltip: {
  theme: "dark",
  },
  grid: {
- borderColor: "#ffffff",
+ borderColor: "#777",
+ strokeDashArray: 1,
  },
  title: {
  text: "Loss vs Epochs",
  align: 'center' as 'center',
  style: {
- color: "#ffffff",
+ color: "#000",
  },
  },
  legend: {
  labels: {
- colors: "#ffffff", // Muda a cor das legendas
+ colors: "#000", // Muda a cor das legendas
  },
  },
 };

src/components/csvTable/csvTable.tsx

@@ -1,50 +1,37 @@
 import React from "react";
-import './csvTable.css';
 
 interface Props {
- head: any[];
+ head: string[];
  data: any[][];
 }
 
 export default function CsvTable({ data, head }: Props) {
  return (
- <div className="csv-div border-grey">
- <table className="csv-table min-w-full">
- <thead>
- <tr className="rounded-3xl bg-main-darker">
- {head.map((headTitle, index) => {
- return (
- <th key={index} className={`border-grey ${index === 0 ? `` : `border-l-2`}`}>
- {headTitle}
- </th>
- );
- })}
+ <div className="overflow-x-auto w-full">
+ <table className="w-full bg-gray-100 border-collapse">
+ <thead className="bg-gray-100 h-[120px]">
+ <tr>
+ {head.map((headTitle, index) => (
+ <th key={index} className="px-4 py-2 text-left border-2 bg-gray-100 border-gray-300 align-top">
+ {headTitle}
+ </th>
+ ))}
  </tr>
  </thead>
  <tbody>
- {data.map((row, index) => {
- return (
- <tr
- key={index}
- className={`${
- index % 2 ? `bg-main-bold` : `bg-main-medium`
- } border-t-2`}
- >
- {row.map((cell, cellIndex) => {
- return (
- <td
- key={cellIndex}
- className={`px-5 py-1 border-grey ${
- cellIndex === 0 ? `` : `border-l-2`
- }`}
- >
+ {data.map((row, rowIndex) => (
+ <tr key={rowIndex} className={"bg-gray-100"}>
+ {
+ row.map((cell, cellIndex) => (
+ <td key={cellIndex} className="px-4 py-2 text-center border-2 border-gray-300">
+ <div className="line-clamp-3">
  {cell}
- </td>
- );
- })}
- </tr>
- );
- })}
+ </div>
+ </td>
+ ))
+ }
+ </tr>
+ ))}
  </tbody>
  </table>
  </div>

src/components/menu/menu.tsx

@@ -1,20 +1,45 @@
 import React, { useState } from "react";
-import { HiOutlineMenu, HiOutlineX } from "react-icons/hi"; // Importando ícones do React Icons
-import { Link } from "react-router-dom";
+import { HiOutlineMenu, HiOutlineX } from "react-icons/hi";
+import { Link, useLocation } from "react-router-dom";
 import { CSSTransition } from "react-transition-group";
 import "./menu.css";
 
 export function Menu() {
  const [isExpanded, setIsExpanded] = useState(false);
+ const location = useLocation();
 
  const toggleMenu = () => {
  setIsExpanded(!isExpanded);
  };
 
+ const menuItems = [
+ {
+ path: "/",
+ title: "Classificar",
+ description: "Utilize modelos pré-treinados ou use os seus próprios modelos para classificar texto",
+ },
+ {
+ path: "/train",
+ title: "Treinar Classificador",
+ description: "Faça upload dos seus dados e treine o seu próprio classificador textual",
+ },
+ {
+ path: "/about",
+ title: "Sobre",
+ description: "Detalhes sobre o projeto",
+ },
+ {
+ path: "https://forms.gle/Snud46RwuwT16Mrb9",
+ title: "Feedback",
+ description: "Envie sua opinião",
+ external: true,
+ },
+ ];
+
  return (
- <>
+ <div className="flex">
  <button
- className="text-white fixed top-0 left-0 p-4 focus:outline-none focus:text-white hover:text-blue-300 transition"
+ className="text-black fixed top-0 left-0 p-4 focus:outline-none focus:text-white hover:text-blue-300 transition"
  onClick={toggleMenu}
  >
  {isExpanded ? (
@@ -29,34 +54,43 @@ export function Menu() {
  classNames="menu"
  unmountOnExit
  >
- <nav className="text-white fixed top-0 left-0 bottom-0 z-50 overflow-y-auto w-64 bg-gray-800">
+ <nav className="text-black fixed top-0 left-0 bottom-0 z-50 overflow-y-auto w-80 bg-gray-50 border-2">
  <div className="p-4 flex justify-between items-center">
  <div className="text-2xl font-bold">Menu</div>
  <button
- className="text-white focus:outline-none p-2 hover:text-blue-300 transition"
+ className="text-black focus:outline-none p-2 hover:text-blue-300 transition"
  onClick={toggleMenu}
  >
  <HiOutlineX className="h-6 w-6" />
  </button>
  </div>
  <ul className="p-4">
- <li className="my-2 hover:text-blue-300 transition">
- <Link to="/">Classificar</Link>
- </li>
- <li className="my-2 hover:text-blue-300 transition">
- <Link to="/train">Treinar</Link>
- </li>
- <li className="my-2 hover:text-blue-300 transition">
- <Link to="/about">Sobre</Link>
- </li>
- <li className="my-2 hover:text-blue-300 transition">
- <a href="https://forms.gle/Snud46RwuwT16Mrb9" target="_blank">
- Feedback
- </a>
- </li>
+ {menuItems.map((item) => (
+ <li key={item.path} className="my-4">
+ {item.external ? (
+ <a
+ href={item.path}
+ target="_blank"
+ className={`block p-2 rounded transition ${location.pathname === item.path ? 'bg-blue-100' : 'bg-gray-200'} hover:bg-blue-200`}
+ rel="noopener noreferrer"
+ >
+ <div className="font-bold">{item.title}</div>
+ <div className="text-sm text-gray-600">{item.description}</div>
+ </a>
+ ) : (
+ <Link
+ to={item.path}
+ className={`block p-2 rounded transition ${location.pathname === item.path ? 'bg-blue-100' : 'bg-gray-200'} hover:bg-blue-200`}
+ >
+ <div className="font-bold">{item.title}</div>
+ <div className="text-sm text-gray-600">{item.description}</div>
+ </Link>
+ )}
+ </li>
+ ))}
  </ul>
  </nav>
  </CSSTransition>
- </>
+ </div>
  );
 }

src/components/resultTable/resultTable.tsx

@@ -1,43 +1,23 @@
 import React from "react";
+import CsvTable from "../csvTable/csvTable";
+
+interface TableData {
+ Coluna: string;
+ Valor: any;
+}
 
 interface Props {
  data: { [key: string]: any };
  classifierName: string;
 }
 
 export default function ResultTable({ data, classifierName }: Props) {
- return (
- <div className="w-11/12 overflow-hidden rounded-3xl border-2 border-grey">
- <table className="w-full">
- <thead>
- <tr className="rounded-3xl bg-main-darker">
- <th>{"Index"}</th>
- <th className={`border-grey border-l-2`}>{"Input"}</th>
+ const tableData: TableData[] = Object.entries(data).map(([key, value]) => ({
+ Coluna: key,
+ Valor: value,
+ }));
+
+ const convertedTableData: any[][] = tableData.slice(0, 4).map((item) => [item.Coluna, item.Valor]);
 
- <th className={`border-grey border-l-2`}>{"Output"}</th>
- </tr>
- </thead>
- <tbody>
- {Object.keys(data)
- .slice(0, 10)
- .map((row: any, index: number) => {
- return (
- <tr
- key={row}
- className={`${
- index % 2 ? `bg-main-bold` : `bg-main-medium`
- } border-t-2`}
- >
- <td className={`px-5 py-1 border-grey`}>{index}</td>
- <td className={`px-5 py-1 border-grey border-l-2`}>{row}</td>
- <td className={`px-5 py-1 border-grey border-l-2`}>
- {data[row]}
- </td>
- </tr>
- );
- })}
- </tbody>
- </table>
- </div>
- );
+ return <CsvTable data={convertedTableData} head={["Input", "Output"]} />;
 }