diff --git a/.eslintcache b/.eslintcache
index 2eaf30145f619f82bfe01fa6d12da9da0ae547e0..b23a70755594103b11fe273a8169159fca80054b 100644
--- a/.eslintcache
+++ b/.eslintcache
@@ -1 +1 @@
-[{"/home/pedro/biod-ui-react/src/index.jsx":"1","/home/pedro/biod-ui-react/src/App.jsx":"2","/home/pedro/biod-ui-react/src/routes.jsx":"3","/home/pedro/biod-ui-react/src/pages/homePage.jsx":"4","/home/pedro/biod-ui-react/src/components/footer/footer.jsx":"5","/home/pedro/biod-ui-react/src/components/header/header.jsx":"6","/home/pedro/biod-ui-react/src/pages/aboutPage.jsx":"7","/home/pedro/biod-ui-react/src/pages/docsPage.jsx":"8","/home/pedro/biod-ui-react/src/pages/installPage.jsx":"9","/home/pedro/biod-ui-react/src/pages/tutorialPage.jsx":"10","/home/pedro/biod-ui-react/src/chatbot/chatPage.jsx":"11","/home/pedro/biod-ui-react/src/chatbot/MessageParser.js":"12","/home/pedro/biod-ui-react/src/chatbot/ActionProvider.jsx":"13","/home/pedro/biod-ui-react/src/chatbot/config.js":"14","/home/pedro/biod-ui-react/src/chatbot/LearningOptions.jsx":"15","/home/pedro/biod-ui-react/src/chatbot/LinkList.jsx":"16"},{"size":225,"mtime":1612875575239,"results":"17","hashOfConfig":"18"},{"size":269,"mtime":1612875575143,"results":"19","hashOfConfig":"18"},{"size":1104,"mtime":1612877404899,"results":"20","hashOfConfig":"18"},{"size":2569,"mtime":1612875575255,"results":"21","hashOfConfig":"18"},{"size":1109,"mtime":1612875575143,"results":"22","hashOfConfig":"18"},{"size":1737,"mtime":1612875575175,"results":"23","hashOfConfig":"18"},{"size":7787,"mtime":1612875575251,"results":"24","hashOfConfig":"18"},{"size":5345,"mtime":1612875575251,"results":"25","hashOfConfig":"18"},{"size":4384,"mtime":1612875575255,"results":"26","hashOfConfig":"18"},{"size":6246,"mtime":1612875575279,"results":"27","hashOfConfig":"18"},{"size":755,"mtime":1612880871673,"results":"28","hashOfConfig":"18"},{"size":405,"mtime":1612878736619,"results":"29","hashOfConfig":"18"},{"size":881,"mtime":1612878333366,"results":"30","hashOfConfig":"18"},{"size":1448,"mtime":1612878675782,"results":"31","hashOfConfig":"18"},{"size":1116,"mtime":1612879365913,"results":"32","hashOfConfig":"18"},{"size":453,"mtime":1612878620646,"results":"33","hashOfConfig":"18"},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"qwbqjt",{"filePath":"36","messages":"37","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"40","messages":"41","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"42","messages":"43","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"44","messages":"45","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"46","messages":"47","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"48","messages":"49","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"50","messages":"51","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"52","messages":"53","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"54","messages":"55","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"56","messages":"57","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"58","messages":"59","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"60","messages":"61","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"62","messages":"63","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"64","messages":"65","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/pedro/biod-ui-react/src/index.jsx",[],"/home/pedro/biod-ui-react/src/App.jsx",["66","67"],"/home/pedro/biod-ui-react/src/routes.jsx",[],"/home/pedro/biod-ui-react/src/pages/homePage.jsx",[],"/home/pedro/biod-ui-react/src/components/footer/footer.jsx",["68","69"],"/home/pedro/biod-ui-react/src/components/header/header.jsx",[],"/home/pedro/biod-ui-react/src/pages/aboutPage.jsx",[],"/home/pedro/biod-ui-react/src/pages/docsPage.jsx",[],"/home/pedro/biod-ui-react/src/pages/installPage.jsx",[],"/home/pedro/biod-ui-react/src/pages/tutorialPage.jsx",[],"/home/pedro/biod-ui-react/src/chatbot/chatPage.jsx",[],"/home/pedro/biod-ui-react/src/chatbot/MessageParser.js",[],"/home/pedro/biod-ui-react/src/chatbot/ActionProvider.jsx",[],"/home/pedro/biod-ui-react/src/chatbot/config.js",[],"/home/pedro/biod-ui-react/src/chatbot/LearningOptions.jsx",[],"/home/pedro/biod-ui-react/src/chatbot/LinkList.jsx",[],{"ruleId":"70","severity":1,"message":"71","line":1,"column":17,"nodeType":"72","messageId":"73","endLine":1,"endColumn":26},{"ruleId":"70","severity":1,"message":"74","line":3,"column":27,"nodeType":"72","messageId":"73","endLine":3,"endColumn":33},{"ruleId":"70","severity":1,"message":"75","line":4,"column":8,"nodeType":"72","messageId":"73","endLine":4,"endColumn":18},{"ruleId":"76","severity":1,"message":"77","line":52,"column":5,"nodeType":"78","endLine":52,"endColumn":47},"no-unused-vars","'Component' is defined but never used.","Identifier","unusedVar","'Router' is defined but never used.","'Typography' is defined but never used.","jsx-a11y/alt-text","img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.","JSXOpeningElement"]
\ No newline at end of file
+[{"/home/pedro/biod-ui-react/src/index.jsx":"1","/home/pedro/biod-ui-react/src/App.jsx":"2","/home/pedro/biod-ui-react/src/routes.jsx":"3","/home/pedro/biod-ui-react/src/pages/homePage.jsx":"4","/home/pedro/biod-ui-react/src/components/footer/footer.jsx":"5","/home/pedro/biod-ui-react/src/components/header/header.jsx":"6","/home/pedro/biod-ui-react/src/pages/aboutPage.jsx":"7","/home/pedro/biod-ui-react/src/pages/docsPage.jsx":"8","/home/pedro/biod-ui-react/src/pages/installPage.jsx":"9","/home/pedro/biod-ui-react/src/pages/tutorialPage.jsx":"10","/home/pedro/biod-ui-react/src/chatbot/chatPage.jsx":"11","/home/pedro/biod-ui-react/src/chatbot/MessageParser.js":"12","/home/pedro/biod-ui-react/src/chatbot/ActionProvider.jsx":"13","/home/pedro/biod-ui-react/src/chatbot/config.js":"14","/home/pedro/biod-ui-react/src/chatbot/LearningOptions.jsx":"15","/home/pedro/biod-ui-react/src/chatbot/LinkList.jsx":"16","/home/pedro/biod-ui-react/src/chatbot/BaseList.jsx":"17"},{"size":225,"mtime":1612875575239,"results":"18","hashOfConfig":"19"},{"size":269,"mtime":1612875575143,"results":"20","hashOfConfig":"19"},{"size":1104,"mtime":1619531270471,"results":"21","hashOfConfig":"19"},{"size":835,"mtime":1619533579786,"results":"22","hashOfConfig":"19"},{"size":1628,"mtime":1619533496552,"results":"23","hashOfConfig":"19"},{"size":1859,"mtime":1619536369291,"results":"24","hashOfConfig":"19"},{"size":8090,"mtime":1619536055044,"results":"25","hashOfConfig":"19"},{"size":5640,"mtime":1619535754299,"results":"26","hashOfConfig":"19"},{"size":4680,"mtime":1619536120939,"results":"27","hashOfConfig":"19"},{"size":6543,"mtime":1619536158367,"results":"28","hashOfConfig":"19"},{"size":755,"mtime":1612880871673,"results":"29","hashOfConfig":"19"},{"size":403,"mtime":1612962707731,"results":"30","hashOfConfig":"19"},{"size":1046,"mtime":1612962697711,"results":"31","hashOfConfig":"19"},{"size":751,"mtime":1612963214062,"results":"32","hashOfConfig":"19"},{"size":1292,"mtime":1612961889899,"results":"33","hashOfConfig":"19"},{"size":919,"mtime":1612961370694,"results":"34","hashOfConfig":"19"},{"size":1301,"mtime":1612963427902,"results":"35","hashOfConfig":"19"},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"38"},"qwbqjt",{"filePath":"39","messages":"40","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"41","usedDeprecatedRules":"38"},{"filePath":"42","messages":"43","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"38"},{"filePath":"44","messages":"45","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"46","messages":"47","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"48","messages":"49","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"50","messages":"51","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"38"},{"filePath":"52","messages":"53","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"38"},{"filePath":"54","messages":"55","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"56","messages":"57","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"58","messages":"59","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"38"},{"filePath":"60","messages":"61","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"38"},{"filePath":"62","messages":"63","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"38"},{"filePath":"64","messages":"65","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"38"},{"filePath":"66","messages":"67","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"38"},{"filePath":"68","messages":"69","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"70","messages":"71","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"38"},"/home/pedro/biod-ui-react/src/index.jsx",[],["72","73"],"/home/pedro/biod-ui-react/src/App.jsx",["74","75"],"import React, { Component } from 'react';\nimport Routes from './routes';\nimport { BrowserRouter as Router } from \"react-router-dom\";\nimport './global.css';\n\nfunction App() {\n return (\n <div className=\"App\">\n <Routes />\n </div>\n );\n}\n\nexport default App;\n\n","/home/pedro/biod-ui-react/src/routes.jsx",[],"/home/pedro/biod-ui-react/src/pages/homePage.jsx",[],"/home/pedro/biod-ui-react/src/components/footer/footer.jsx",["76","77"],"/home/pedro/biod-ui-react/src/components/header/header.jsx",[],"/home/pedro/biod-ui-react/src/pages/aboutPage.jsx",[],"/home/pedro/biod-ui-react/src/pages/docsPage.jsx",[],"/home/pedro/biod-ui-react/src/pages/installPage.jsx",[],"/home/pedro/biod-ui-react/src/pages/tutorialPage.jsx",[],"/home/pedro/biod-ui-react/src/chatbot/chatPage.jsx",[],"/home/pedro/biod-ui-react/src/chatbot/MessageParser.js",[],"/home/pedro/biod-ui-react/src/chatbot/ActionProvider.jsx",[],"/home/pedro/biod-ui-react/src/chatbot/config.js",[],"/home/pedro/biod-ui-react/src/chatbot/LearningOptions.jsx",[],"/home/pedro/biod-ui-react/src/chatbot/LinkList.jsx",[],"/home/pedro/biod-ui-react/src/chatbot/BaseList.jsx",[],{"ruleId":"78","replacedBy":"79"},{"ruleId":"80","replacedBy":"81"},{"ruleId":"82","severity":1,"message":"83","line":1,"column":17,"nodeType":"84","messageId":"85","endLine":1,"endColumn":26},{"ruleId":"82","severity":1,"message":"86","line":3,"column":27,"nodeType":"84","messageId":"85","endLine":3,"endColumn":33},{"ruleId":"82","severity":1,"message":"87","line":32,"column":10,"nodeType":"84","messageId":"85","endLine":32,"endColumn":19},{"ruleId":"88","severity":1,"message":"89","line":54,"column":7,"nodeType":"90","endLine":54,"endColumn":49},"no-native-reassign",["91"],"no-negated-in-lhs",["92"],"no-unused-vars","'Component' is defined but never used.","Identifier","unusedVar","'Router' is defined but never used.","'Copyright' is defined but never used.","jsx-a11y/alt-text","img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.","JSXOpeningElement","no-global-assign","no-unsafe-negation"]
\ No newline at end of file
diff --git a/home.txt b/home.txt
new file mode 100644
index 0000000000000000000000000000000000000000..4ae8cfb6ec3f0d1dbb357a90dcae689afdccdc0d
--- /dev/null
+++ b/home.txt
@@ -0,0 +1,66 @@
+
+
+
+ <Typography variant="body1" gutterBottom align="justify" paragraph>
+ <ul>
+ <li>
+ <Link href="https://biod.c3sl.ufpr.br/api/v1/" onClick={preventDefault}>
+ https://biod.c3sl.ufpr.br/api/v1/
+ </Link>
+ </li>
+ </ul>
+ </Typography>
+
+ <Typography variant="h6" component="h5" gutterBottom> Tags </Typography>
+
+ <Typography variant="body1" gutterBottom align="justify" paragraph>
+ <ul>
+ <li>tags</li>
+ </ul>
+
+ Uma tag representa a classificação dos dados contidos no repositório por conteúdo, facilitando assim o acesso ao banco de dados. Esta rota permite ao usuário listar todas as tags disponíveis no repositório e suas descrições, tendo atualmente 29 tags. Também é permitido especificar o parâmetro format, que retorna o conteúdo no formato desejado pelo usuário.
+ Métricas
+
+ <ul>
+ <li>Métricas</li>
+ </ul>
+
+ Uma métrica representa uma estatística que pode ser consultada para gerar relatórios a partir dos dados, ou seja, é o tipo de agregação que será requerida na consulta ao repositório. Esta rota permite ao usuário listar todas as métricas disponíveis no repositório e suas descrições, sendo permitido também a especificação dos parâmetros format e tags para refinar o resultado retornado. Atualmente estão disponíveis 685 métricas, que podem ser de cinco tipos: contagem (COUNT), máximo (MAX), mínimo (MIN), soma (SUM) e média (AVG).
+ Dimensões
+
+ <ul>
+ <li>Dimensões</li>
+ </ul>
+
+ Uma dimensão permite que os dados sejam agregados por uma ou mais colunas, ou seja, define a granularidade requerida na consulta ao repositório. Esta rota permite ao usuário listar todas as dimensões disponíveis no repositório e suas descrições, sendo permitido também a especificação dos parâmetros format e tags para refinar o resultados retornado. Atualmente, estão disponíveis 903 dimensões.
+ Consulta
+
+ <ul>
+ <li>Data</li>
+ </ul>
+
+ Esta é a rota principal da API, onde de fato será realizado a consulta ao banco de dados. Sendo assim, o usuário pode consultá-la para obter relatórios de dados, especificando os atributos desejados através das métricas e dimensões. Você também pode fornecer parâmetros de consulta adicionais para refinar o resultado retornado, como sort (ordenação) e filters (filtros), além do format e tags.
+ </Typography>
+
+ <Typography variant="h6" component="h5" gutterBottom> Parâmetros </Typography>
+
+ <Typography variant="body1" gutterBottom align="justify" paragraph>
+
+ <ul>
+ <li><b>dimensions</b> : granularidade</li>
+
+ <li><b>metrics</b> : agregações (COUNT, MAX, MIN, SUM e AVG)</li>
+
+ <li><b>filters</b> : filtros restritivos para a consulta (AND = ; e OR = ,)</li>
+
+ <li><b>tags</b> : classificação do conteúdo</li>
+
+ <li><b>format</b> : formato da resposta (json, csv, ssv, tsv)</li>
+
+ <li><b>sort</b> : ordenação da resposta</li>
+ </ul>
+ </Typography>
+ </div>
+ </ThemeProvider>
+ )
+}
diff --git a/src/chatbot/ActionProvider.jsx b/src/chatbot/ActionProvider.jsx
index 13435feca704cef332649a747f33dc8d27dfb9ef..dba157c5ce6563145d3239de850b35ebef1ab4a0 100644
--- a/src/chatbot/ActionProvider.jsx
+++ b/src/chatbot/ActionProvider.jsx
@@ -4,11 +4,17 @@ class ActionProvider {
this.setState = setStateFunc;
}
- handleJavascriptList = () => {
+ handleHello = () => {
+ const message = this.createChatBotMessage("Olá, bem vindo ao BIOD, como eu poderia te ajudar hoje?")
+
+ this.updateChatbotState(message)
+ }
+
+ handleBlenDB = () => {
const message = this.createChatBotMessage(
- "Fantastic, I've got the following resources for you on Javascript:",
+ "Ótimo, em qual base de dados você gostaria de fazer sua pesquisa?",
{
- widget: "javascriptLinks",
+ widget: "BlendDBOptions",
}
);
diff --git a/src/chatbot/BaseList.jsx b/src/chatbot/BaseList.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..a9063e50294c1e50fbc693884f68631cc3f1696c
--- /dev/null
+++ b/src/chatbot/BaseList.jsx
@@ -0,0 +1,66 @@
+import React from "react";
+import { makeStyles} from '@material-ui/core/styles';
+
+
+const useStyles = makeStyles({
+ learningContainer: {
+ display: 'flex',
+ alignItems: 'flex-start',
+ flexWrap: 'wrap',
+ },
+
+ learningButton: {
+ padding: '0.5rem',
+ borderRadius: '25px',
+ background: 'transparent',
+ border: '1px solid green',
+ margin: '3px',
+ },
+
+ linkList: {
+ padding: 0,
+ },
+
+
+ linkListItem: {
+ textAlign: 'left',
+ fontSize: '0.9rem',
+ },
+
+ linkListUrl: {
+ textDecoration: 'none',
+ margin: '6px',
+ display: 'block',
+ color: '#1d1d1d',
+ backgroundColor: '#f1f1f1',
+ padding: '8px',
+ borderRadius: '3px',
+ boxShadow: '2px 2px 4px rgba(150, 149, 149, 0.4)',
+ },
+
+})
+
+const BaseList = (props) => {
+ const classes = useStyles();
+
+ const options = [
+ { text: "ANA", handler: () => {}, id: 1 },
+ { text: "Simmic", handler: () => {}, id: 2 },
+ ];
+
+ const optionsMarkup = options.map((option) => (
+ <li key={option.id} className={classes.linkListItem}>
+ <button
+ className={classes.linkListUrl}
+ key={option.id}
+ onClick={option.handler}
+ >
+ {option.text}
+ </button>
+ </li>
+ ));
+
+ return <ul className={classes.linkList}>{optionsMarkup}</ul>;
+};
+
+export default BaseList;
diff --git a/src/chatbot/LearningOptions.jsx b/src/chatbot/LearningOptions.jsx
index c3d30fb1099de2b6180e77b3fbd982aad2ba09bf..86f322d2f896b2c459ace6c407c43d07c1a37bf5 100644
--- a/src/chatbot/LearningOptions.jsx
+++ b/src/chatbot/LearningOptions.jsx
@@ -1,5 +1,7 @@
import React from "react";
import { makeStyles} from '@material-ui/core/styles';
+import { useHistory } from "react-router-dom";
+
const useStyles = makeStyles({
learningContainer: {
@@ -20,17 +22,18 @@ const useStyles = makeStyles({
const LearningOptions = (props) => {
const classes = useStyles();
+ let history = useHistory();
const options = [
{
- text: "Javascript",
- handler: props.actionProvider.handleJavascriptList,
+ text: "Consulta no BlenDB",
+ handler: props.actionProvider.handleBlenDB,
id: 1,
},
- { text: "Data visualization", handler: () => {}, id: 2 },
- { text: "APIs", handler: () => {}, id: 3 },
- { text: "Security", handler: () => {}, id: 4 },
- { text: "Interview prep", handler: () => {}, id: 5 },
+ { text: "tutorial", handler: () => { history.push("/tutorial") }, id: 2 },
+ { text: "Instalação", handler: () => { history.push("/install") }, id: 3 },
+ { text: "Sobre", handler: () => { history.push("/about") }, id: 4 },
+ { text: "Documentação", handler: () => { history.push("/docs") }, id: 5 },
];
const optionsMarkup = options.map((option) => (
diff --git a/src/chatbot/LinkList.css b/src/chatbot/LinkList.css
deleted file mode 100644
index db3191fc297d75392076a7f6fe3505dfa1c3d27d..0000000000000000000000000000000000000000
--- a/src/chatbot/LinkList.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.link-list {
- padding: 0;
-}
-
-.link-list-item {
- text-align: left;
- font-size: 0.9rem;
-}
-
-.link-list-item-url {
- text-decoration: none;
- margin: 6px;
- display: block;
- color: #1d1d1d;
- background-color: #f1f1f1;
- padding: 8px;
- border-radius: 3px;
- box-shadow: 2px 2px 4px rgba(150, 149, 149, 0.4);
-}
diff --git a/src/chatbot/LinkList.jsx b/src/chatbot/LinkList.jsx
index 052d75211d2e6a87737910fc5263f3c3ab40aa75..3462bfe1ee684bfd28cf366a6f235c56d8bd6ed9 100644
--- a/src/chatbot/LinkList.jsx
+++ b/src/chatbot/LinkList.jsx
@@ -1,22 +1,47 @@
import React from "react";
+import { makeStyles} from '@material-ui/core/styles';
-import "./LinkList.css";
+const useStyles = makeStyles({
+ linkList: {
+ padding: 0,
+ },
+
+
+ linkListItem: {
+ textAlign: 'left',
+ fontSize: '0.9rem',
+ },
+
+ linkListUrl: {
+ textDecoration: 'none',
+ margin: '6px',
+ display: 'block',
+ color: '#1d1d1d',
+ backgroundColor: '#f1f1f1',
+ padding: '8px',
+ borderRadius: '3px',
+ boxShadow: '2px 2px 4px rgba(150, 149, 149, 0.4)',
+ },
+
+})
const LinkList = (props) => {
+ const classes = useStyles()
+
const linkMarkup = props.options.map((link) => (
- <li key={link.id} className="link-list-item">
+ <li key={link.id} className={classes.linkListItem}>
<a
href={link.url}
target="_blank"
rel="noopener noreferrer"
- className="link-list-item-url"
+ className={classes.linkListUrl}
>
{link.text}
</a>
</li>
));
- return <ul className="link-list">{linkMarkup}</ul>;
+ return <ul className={classes.linkList}>{linkMarkup}</ul>;
};
export default LinkList;
\ No newline at end of file
diff --git a/src/chatbot/MessageParser.js b/src/chatbot/MessageParser.js
index 15ee942fd5199f2db8d348ccb9faf012757d9dba..f566557c484dc80a21e688b508d5f064bc45ae49 100644
--- a/src/chatbot/MessageParser.js
+++ b/src/chatbot/MessageParser.js
@@ -7,11 +7,11 @@ class MessageParser {
const lowerCaseMessage = message.toLowerCase();
if (lowerCaseMessage.includes("hello")) {
- this.actionProvider.greet();
+ this.actionProvider.handleHello();
}
if (lowerCaseMessage.includes("javascript")) {
- this.actionProvider.handleJavascriptList();
+ this.actionProvider.handleBlenDB();
}
}
}
diff --git a/src/chatbot/config.js b/src/chatbot/config.js
index 181e7b88e364e9ff58544c7ffa996be358de9ba4..abb903179d9f53f45c6a41e3befa17087a12aa90 100644
--- a/src/chatbot/config.js
+++ b/src/chatbot/config.js
@@ -2,13 +2,13 @@ import React from "react";
import { createChatBotMessage } from "react-chatbot-kit";
import LearningOptions from "./LearningOptions";
-import LinkList from "./LinkList";
+import BaseList from "./BaseList";
const config = {
- botName: "LearningBot",
+ botName: "BIODbot",
initialMessages: [
- createChatBotMessage("Hi, I'm here to help. What do you want to learn?", {
+ createChatBotMessage("Olá, como eu poderia te ajudar hoje?", {
widget: "learningOptions",
}),
],
@@ -28,33 +28,8 @@ const config = {
widgetFunc: (props) => <LearningOptions {...props} />,
},
{
- widgetName: "javascriptLinks",
- widgetFunc: (props) => <LinkList {...props} />,
- },
- {
- widgetName: "javascriptLinks",
- widgetFunc: (props) => <LinkList {...props} />,
- props: {
- options: [
- {
- text: "Introduction to JS",
- url:
- "https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/",
- id: 1,
- },
- {
- text: "Mozilla JS Guide",
- url:
- "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide",
- id: 2,
- },
- {
- text: "Frontend Masters",
- url: "https://frontendmasters.com",
- id: 3,
- },
- ],
- },
+ widgetName: "BlendDBOptions",
+ widgetFunc: (props) => <BaseList {...props} />,
},
],
};
diff --git a/src/components/footer/footer.jsx b/src/components/footer/footer.jsx
index 5186f474997074347530cb03a5e8a46372e02617..48d1d2b20d1697b9884f03479bd95c0946ca2481 100644
--- a/src/components/footer/footer.jsx
+++ b/src/components/footer/footer.jsx
@@ -3,32 +3,25 @@ import { makeStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import Logo from "../../data/c3sl.png";
+import CssBaseline from '@material-ui/core/CssBaseline';
+import Container from '@material-ui/core/Container';
+import Link from '@material-ui/core/Link';
+
const useStyles = makeStyles(theme => ({
- footer: {
- background: "#000000",
- left: 0,
- position: "fixed",
- bottom: 0,
- right: 0,
- width: "100%",
- height: "10vh",
+ root: {
+ display: 'flex',
+ flexDirection: 'column',
+ },
+ footer: {
+ padding: theme.spacing(2, 2),
+ marginTop: 'auto',
+ backgroundColor:
+ theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[800],
},
img: {
width: "50px",
- display: "block",
- marginTop: "auto",
- marginBottom: "auto",
- marginLeft: "auto",
- marginRight: "auto",
- },
-
- item: {
- display: "flex",
- justifyContent: "space-evenly",
- flexDirection: "column",
-
},
link: {
@@ -36,24 +29,49 @@ const useStyles = makeStyles(theme => ({
},
}));
-function Footer() {
- const classes = useStyles();
-
+function Copyright() {
return (
+ <Typography variant="body2" color="textSecondary">
+ {'Copyright © '}
+ <Link color="inherit" href="https://material-ui.com/">
+ Your Website
+ </Link>{' '}
+ {new Date().getFullYear()}
+ {'.'}
+ </Typography>
+ );
+}
- <Grid container className={classes.footer}>
-
- <Grid item xs={12} sm={12} className={classes.item}>
+function C3Image() {
+ const classes = useStyles();
+ return(
+<Grid item xs={12} sm={12} className={classes.item}>
- <a href="https://www.c3sl.ufpr.br/"
- title="Ir para a página inicial do C3SL"
- className={classes.link}>
-
- <img src={Logo} className={classes.img} />
- </a>
-
- </Grid>
+ <a href="https://www.c3sl.ufpr.br/"
+ title="Ir para a página inicial do C3SL"
+ className={classes.link}>
+
+ <img src={Logo} className={classes.img} />
+ </a>
+
</Grid>
+
+ )
+}
+
+
+function Footer() {
+ const classes = useStyles();
+
+ return (
+ <div className={classes.root}>
+ <CssBaseline />
+ <footer className={classes.footer}>
+ <Container maxWidth="xs">
+ <C3Image />
+ </Container>
+ </footer>
+ </div>
);
}
diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx
index 05d3202124b420f72af38d0bb752fd18859d84fc..75af6f3ea72a3d4697ad6e99a0978177dc400940 100644
--- a/src/components/header/header.jsx
+++ b/src/components/header/header.jsx
@@ -9,11 +9,13 @@ import GetAppIcon from '@material-ui/icons/GetApp';
import CreateIcon from '@material-ui/icons/Create';
import InfoIcon from '@material-ui/icons/Info';
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
root: {
width: "100%",
+ backgroundColor:
+ theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[800],
},
-});
+}));
export default function SimpleBottomNavigation() {
const classes = useStyles();
diff --git a/src/pages/aboutPage.jsx b/src/pages/aboutPage.jsx
index 54f2f239d96ff50e8bad85d72801c340d7533d1f..3189d3e1eddc5cc1378daaeb4fa812960f93c9c9 100644
--- a/src/pages/aboutPage.jsx
+++ b/src/pages/aboutPage.jsx
@@ -1,28 +1,35 @@
import React from "react";
import { makeStyles, ThemeProvider } from '@material-ui/core/styles';
import { createMuiTheme } from '@material-ui/core/styles';
+import Container from '@material-ui/core/Container';
import Typography from '@material-ui/core/Typography';
+import CssBaseline from '@material-ui/core/CssBaseline';
import Link from '@material-ui/core/Link';
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme) => ({
root: {
- marginRight:'auto',
- marginLeft: 'auto',
- width: '22em',
- marginBottom: '13vh',
+ display: 'flex',
+ flexDirection: 'column',
+ minHeight: '100vh',
'@media (min-width:540px)': {
- width: '36em',
+ width: '38em',
},
'@media (min-width:820px)': {
- width: '56em',
+ width: '70em',
},
},
-});
-const theme = createMuiTheme({
+ main: {
+ marginTop: theme.spacing(8),
+ marginBottom: theme.spacing(2),
+ },
+
+}));
+
+const tema = createMuiTheme({
overrides: {
MuiTypography: {
gutterBottom: {
@@ -30,39 +37,38 @@ const theme = createMuiTheme({
},
paragraph:{
- marginBottom: '3em'
+ marginBottom: '2em'
}
},
},
});
-theme.typography.h4 = {
- fontSize: '1.8rem',
+tema.typography.h4 = {
+ fontSize: '2.2rem',
'@media (min-width:600px)': {
- fontSize: '2.4rem',
+ fontSize: '2.6rem',
},
- [theme.breakpoints.up('md')]: {
- fontSize: '2.8rem',
+ [tema.breakpoints.up('md')]: {
+ fontSize: '3.4rem',
},
};
-
-theme.typography.h5 = {
- fontSize: '1.4rem',
+tema.typography.h6 = {
+ fontSize: '1.6rem',
'@media (min-width:600px)': {
fontSize: '2rem',
},
- [theme.breakpoints.up('md')]: {
+ [tema.breakpoints.up('md')]: {
fontSize: '2.4rem',
},
};
-theme.typography.body1 = {
- fontSize: '0.9rem',
+tema.typography.body1 = {
+ fontSize: '1rem',
'@media (min-width:600px)': {
- fontSize: '1rem',
+ fontSize: '1.2rem',
},
- [theme.breakpoints.up('md')]: {
- fontSize: '1.3rem',
+ [tema.breakpoints.up('md')]: {
+ fontSize: '1.5rem',
},
};
@@ -71,15 +77,18 @@ export default function AboutPage(){
const preventDefault = (event) => event.preventDefault();
return(
- <div className={classes.root}>
- <ThemeProvider theme={theme}>
+ <ThemeProvider theme={tema}>
+ <CssBaseline />
+ <Container component="main" className={classes.main} maxWidth="md">
+ <div className={classes.root}>
+
<Typography variant="h4" component="h3" gutterBottom={true}>Sobre</Typography>
<Typography variant="body1" gutterBottom align="justify" paragraph>
O projeto Blended Integrated Open Data (BIOD) foi criado pelo grupo <Link href="https://www.c3sl.ufpr.br/" onClick={preventDefault}>C3SL</Link> (Center of Computer Science and Free Software) da Universidade Federal do Paraná, para tornar os dados abertos mais acessı́veis e aumentar a utilização de grande massa de dados abertos.
</Typography>
- <Typography variant="h5" component="h4" gutterBottom>Desafios</Typography>
+ <Typography variant="h6" component="h5" gutterBottom>Desafios</Typography>
<Typography variant="body1" gutterBottom align="justify" paragraph>
Diversas instituições públicas utilizam portais governamentais, para a disponibilização de grande quantidade de dados e microdados abertamente, com a finalidade do desenvolvimento de indicadores importantes para o uso em políticas públicas. Por exemplo, <Link href="https://dados.gov.br/" onClick={preventDefault}> o Portal Brasileiro de Dados Abertos</Link> ou o Portal do <Link href="https://www.gov.br/inep/pt-br/acesso-a-informacao/dados-abertos/microdados" onClick={preventDefault}> INEP</Link> (Instituto Nacional de Estudos e Pesquisas Educacionais) com microdados educacionais.
@@ -87,7 +96,7 @@ export default function AboutPage(){
Entretanto, não existe um padrão de divulgação de dados abertos, nem uma ferramenta que permita encontrar essas bases facilmente e realizar o cruzamento de dados entre elas. Esse tipo de processo é complexo, difícil de se implementar e realizar a manutenção ao longo do tempo. Consequentemente o esforço necessário para acessar, integrar e consultar esses dados é muito grande, reduzindo a quantidade de possíveis usuários da base de dados.
</Typography>
- <Typography variant="h5" component="h4" gutterBottom>Objetivo</Typography>
+ <Typography variant="h6" component="h5" gutterBottom>Objetivo</Typography>
<Typography variant="body1" gutterBottom align="justify" paragraph>
O projeto BIOD tem objetivo de facilitar o acesso a dados abertos públicos. O projeto integra e disponibiliza mais de 300 Gb de dados, constituído por bilhões de registros extraídos de diferentes bases de dados abertas, permitindo e facilitando a realização de consultas que envolvem diferentes bases, possibilitando a recuperação de informações relacionadas em bases originalmente desconectadas
@@ -95,7 +104,7 @@ export default function AboutPage(){
Para atingir esse objetivo, o projeto criou um repositório composto de diversas bases de dados abertas distintas e utilizou uma ferramenta que permite o acesso integrado a essas bases de dados. Além da disponibilização das bases de dados, essas bases foram padronizadas e integradas, com a finalidade de aumentar ainda mais a usabilidade desses dados.
</Typography>
- <Typography variant="h5" component="h4" gutterBottom>Base de Dados</Typography>
+ <Typography variant="h6" component="h5" gutterBottom>Base de Dados</Typography>
<Typography variant="body1" gutterBottom align="justify" paragraph>
O dados disponíveis no repositório de dados integrados são sobre: escolaridade, economia, população e utilização de internet por programas de inclusão digital brasileiro. Esses dados foram extraı́dos das bases de dados abertos dos projetos SIMMCTIC e LDE. No total, são 24 tabelas diferentes, mais de 900 atributos e quase 3 bilhões de registros armazenados e integrados de forma inédita.
@@ -107,7 +116,7 @@ export default function AboutPage(){
Além da manutenção do repositório, isto é, atualização do conteúdo do repositório conforme mais dados são liberados pelas fontes originais, espera-se que esse repositório seja um dos primeiros passos na criação de um repositório colaborativo de dados abertos.
</Typography>
- <Typography variant="h5" component="h4" gutterBottom>Armazenamento e Disponibilização</Typography>
+ <Typography variant="h6" component="h5" gutterBottom>Armazenamento e Disponibilização</Typography>
<Typography variant="body1" gutterBottom align="justify" paragraph>
Para que os dados pudessem ser acessados de forma eficiente o BIOD utiliza o SGBD <Link href="https://www.monetdb.org/" onClick={preventDefault}> MonetDB 11 </Link> como ferramenta de armazenamento dos dados e para disponibilizar os dados foi utilizada uma ferramenta chamada <Link href="https://gitlab.c3sl.ufpr.br/c3sl/blendb" onClick={preventDefault}> BlenDB </Link>. Essa ferramenta permite que o banco de dados seja acessado através de uma API RESTful, utilizando uma linguagem de consulta simplificada, viabilizando a consulta de dados abertos de forma eficiente, unificada e transparente.
@@ -115,12 +124,13 @@ export default function AboutPage(){
Essencialmente, a consulta consiste da seleção dos atributos desejados, divididos em dois grupos, métricas e dimensões. As métricas representam os dados que serão pré-agregados e as dimensões a granularidade do dado. Se a granularidade informada na consulta for menor que a dos dados originais, o dado fornecido será pré-agregado. A base completa pode ser recuperada usando todas as dimensões em uma determinada requisição.
</Typography>
- <Typography variant="h5" component="h4" gutterBottom align="justify">Mais sobre</Typography>
+ <Typography variant="h6" component="h5" gutterBottom align="justify">Mais sobre</Typography>
<Typography variant="body1" gutterBottom>
Para mais informações, o artigo sobre o projeto BIOD está disponível <Link href="https://arxiv.org/pdf/1909.00743.pdf" onClick={preventDefault}>aqui</Link>.
</Typography>
+ </div>
+ </Container>
</ThemeProvider>
- </div>
)
}
diff --git a/src/pages/docsPage.jsx b/src/pages/docsPage.jsx
index 53fb5552bda0a71937367c3335e93438f913d22e..7446505f15bb39688948fd1cbd92e495c2ea5f75 100644
--- a/src/pages/docsPage.jsx
+++ b/src/pages/docsPage.jsx
@@ -1,28 +1,35 @@
import React from "react";
import { makeStyles, ThemeProvider } from '@material-ui/core/styles';
import { createMuiTheme } from '@material-ui/core/styles';
+import Container from '@material-ui/core/Container';
import Typography from '@material-ui/core/Typography';
+import CssBaseline from '@material-ui/core/CssBaseline';
import Link from '@material-ui/core/Link';
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme) => ({
root: {
- marginRight:'auto',
- marginLeft: 'auto',
- width: '22em',
- marginBottom: '13vh',
+ display: 'flex',
+ flexDirection: 'column',
+ minHeight: '100vh',
'@media (min-width:540px)': {
- width: '36em',
+ width: '38em',
},
'@media (min-width:820px)': {
- width: '56em',
+ width: '70em',
},
},
-});
-const theme = createMuiTheme({
+ main: {
+ marginTop: theme.spacing(8),
+ marginBottom: theme.spacing(2),
+ },
+
+}));
+
+const tema = createMuiTheme({
overrides: {
MuiTypography: {
gutterBottom: {
@@ -30,38 +37,38 @@ const theme = createMuiTheme({
},
paragraph:{
- marginBottom: '2.4em'
+ marginBottom: '2em'
}
},
},
});
-theme.typography.h4 = {
- fontSize: '1.8rem',
+tema.typography.h4 = {
+ fontSize: '2.2rem',
'@media (min-width:600px)': {
- fontSize: '2.4rem',
+ fontSize: '2.6rem',
},
- [theme.breakpoints.up('md')]: {
- fontSize: '2.8rem',
+ [tema.breakpoints.up('md')]: {
+ fontSize: '3.4rem',
},
};
-theme.typography.h6 = {
- fontSize: '1.2rem',
+tema.typography.h6 = {
+ fontSize: '1.6rem',
'@media (min-width:600px)': {
- fontSize: '1.6rem',
- },
- [theme.breakpoints.up('md')]: {
fontSize: '2rem',
},
+ [tema.breakpoints.up('md')]: {
+ fontSize: '2.4rem',
+ },
};
-theme.typography.body1 = {
- fontSize: '0.9rem',
+tema.typography.body1 = {
+ fontSize: '1rem',
'@media (min-width:600px)': {
- fontSize: '1rem',
+ fontSize: '1.2rem',
},
- [theme.breakpoints.up('md')]: {
- fontSize: '1.3rem',
+ [tema.breakpoints.up('md')]: {
+ fontSize: '1.5rem',
},
};
@@ -71,7 +78,9 @@ export default function DocsPage(){
const preventDefault = (event) => event.preventDefault();
return(
- <ThemeProvider theme={theme}>
+ <ThemeProvider theme={tema}>
+ <CssBaseline />
+ <Container component="main" className={classes.main} maxWidth="md">
<div className={classes.root}>
<Typography variant="h4" component="h3" gutterBottom> Documentação </Typography>
<Typography variant="body1" gutterBottom align="justify" paragraph>
@@ -140,6 +149,7 @@ export default function DocsPage(){
</ul>
</Typography>
</div>
+ </Container>
</ThemeProvider>
)
}
diff --git a/src/pages/homePage.jsx b/src/pages/homePage.jsx
index df9f845c299fef91e3624496f308188ca6610c09..054d9c093d730bf2bf8e9c040f94eb5cdefc1a0a 100644
--- a/src/pages/homePage.jsx
+++ b/src/pages/homePage.jsx
@@ -1,117 +1,34 @@
-import React from "react";
-import { makeStyles, ThemeProvider } from '@material-ui/core/styles';
-import { createMuiTheme } from '@material-ui/core/styles';
+import React from 'react';
+import CssBaseline from '@material-ui/core/CssBaseline';
import Typography from '@material-ui/core/Typography';
-import Grid from "@material-ui/core/Grid";
-import Link from '@material-ui/core/Link';
-import BlenDB from "../data/blenDB.png"
-import c3sl from "../data/c3sl.png"
+import { makeStyles } from '@material-ui/core/styles';
+import Container from '@material-ui/core/Container';
-const useStyles = makeStyles({
- root: {
- marginRight:'auto',
- marginLeft: 'auto',
- width: '22em',
- marginBottom: '13vh',
-
- '@media (min-width:540px)': {
- width: '36em',
- },
-
- '@media (min-width:820px)': {
- width: '56em',
- },
- },
- home: {
- position: "fixed",
- },
-
- img: {
- width: "10em",
- display: "block",
- marginTop: "5em"
- },
-
- item: {
- display: "flex",
- justifyContent: "space-evenly",
- flexDirection: "column",
-
- },
-});
-
-const theme = createMuiTheme({
- overrides: {
- MuiTypography: {
- gutterBottom: {
- marginBottom: '0.6em',
- },
-
- paragraph:{
- marginBottom: '4.5em'
- }
- },
- },
-});
-
-theme.typography.h4 = {
- fontSize: '1.8rem',
- '@media (min-width:600px)': {
- fontSize: '2.4rem',
- },
- [theme.breakpoints.up('md')]: {
- fontSize: '2.8rem',
- },
-};
-
-theme.typography.h5 = {
- fontSize: '1.4rem',
- '@media (min-width:600px)': {
- fontSize: '1.8rem',
+const useStyles = makeStyles((theme) => ({
+ root: {
+ display: 'flex',
+ flexDirection: 'column',
+ minHeight: '86vh',
},
- [theme.breakpoints.up('md')]: {
- fontSize: '2.2rem',
+ main: {
+ marginTop: theme.spacing(8),
+ marginBottom: theme.spacing(2),
},
-};
-theme.typography.body1 = {
- fontSize: '0.9rem',
- '@media (min-width:600px)': {
- fontSize: '1rem',
- },
- [theme.breakpoints.up('md')]: {
- fontSize: '1.3rem',
- },
-};
+}));
-export default function HomePage(){
+export default function StickyFooter() {
const classes = useStyles();
- return(
- <ThemeProvider theme={theme}>
- <Typography variant="h2" component="h3" gutterBottom align='center'> Bem vindo ao BIOD</Typography>
-
- <Grid container className={classes.home}>
-
- <Grid item xs={3} sm={3} md={3} lg={2} xl={2} className={classes.item}>
- </Grid>
-
- <Grid item xs={9} sm={1} md={6} lg={4} xl={4} className={classes.item}>
- <Link href="https://www.c3sl.ufpr.br/">
- <img src={c3sl} alt="" className={classes.img}/>
- </Link>
- </Grid>
-
- <Grid item xs={3} sm={3} md={3} lg={2} xl={2} className={classes.item}>
- </Grid>
-
- <Grid item xs={9} sm={9} md={6} lg={4} xl={4} className={classes.item}>
- <Link href="https://gitlab.c3sl.ufpr.br/c3sl/blendb">
- <img src={BlenDB} alt="" className={classes.img}/>
- </Link>
- </Grid>
- </Grid>
- </ThemeProvider>
- )
-}
+ return (
+ <div className={classes.root}>
+ <CssBaseline />
+ <Container component="main" className={classes.main} maxWidth="sm">
+ <Typography variant="h2" component="h1" gutterBottom>
+ Bem vindo ao BIOD!
+ </Typography>
+ </Container>
+ </div>
+ );
+}
\ No newline at end of file
diff --git a/src/pages/installPage.jsx b/src/pages/installPage.jsx
index 714c2801eeff38dc4b3484010f138477ecf7bf30..b179736a7c8edc6ef687683d6c4e741a2aeb3715 100644
--- a/src/pages/installPage.jsx
+++ b/src/pages/installPage.jsx
@@ -1,28 +1,35 @@
import React from "react";
import { makeStyles, ThemeProvider } from '@material-ui/core/styles';
import { createMuiTheme } from '@material-ui/core/styles';
+import Container from '@material-ui/core/Container';
import Typography from '@material-ui/core/Typography';
+import CssBaseline from '@material-ui/core/CssBaseline';
import Link from '@material-ui/core/Link';
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme) => ({
root: {
- marginRight:'auto',
- marginLeft: 'auto',
- width: '22em',
- marginBottom: '13vh',
+ display: 'flex',
+ flexDirection: 'column',
+ minHeight: '100vh',
'@media (min-width:540px)': {
- width: '36em',
+ width: '38em',
},
'@media (min-width:820px)': {
- width: '56em',
+ width: '70em',
},
},
-});
-const theme = createMuiTheme({
+ main: {
+ marginTop: theme.spacing(8),
+ marginBottom: theme.spacing(2),
+ },
+
+}));
+
+const tema = createMuiTheme({
overrides: {
MuiTypography: {
gutterBottom: {
@@ -30,48 +37,49 @@ const theme = createMuiTheme({
},
paragraph:{
- marginBottom: '2.4em'
+ marginBottom: '2em'
}
},
},
});
-theme.typography.h4 = {
- fontSize: '1.8rem',
+tema.typography.h4 = {
+ fontSize: '2.2rem',
'@media (min-width:600px)': {
- fontSize: '2.4rem',
+ fontSize: '2.6rem',
},
- [theme.breakpoints.up('md')]: {
- fontSize: '2.8rem',
+ [tema.breakpoints.up('md')]: {
+ fontSize: '3.4rem',
},
};
-theme.typography.h6 = {
- fontSize: '1.2rem',
+tema.typography.h6 = {
+ fontSize: '1.6rem',
'@media (min-width:600px)': {
- fontSize: '1.6rem',
- },
- [theme.breakpoints.up('md')]: {
fontSize: '2rem',
},
+ [tema.breakpoints.up('md')]: {
+ fontSize: '2.4rem',
+ },
};
-theme.typography.body1 = {
- fontSize: '0.9rem',
+tema.typography.body1 = {
+ fontSize: '1rem',
'@media (min-width:600px)': {
- fontSize: '1rem',
+ fontSize: '1.2rem',
},
- [theme.breakpoints.up('md')]: {
- fontSize: '1.3rem',
+ [tema.breakpoints.up('md')]: {
+ fontSize: '1.5rem',
},
};
-
export default function InstallPage(){
const classes = useStyles();
const preventDefault = (event) => event.preventDefault();
return(
- <ThemeProvider theme={theme}>
+ <ThemeProvider theme={tema}>
+ <CssBaseline />
+ <Container component="main" className={classes.main} maxWidth="md">
<div className={classes.root}>
<Typography variant="h4" component="h3" gutterBottom>Instalação</Typography>
@@ -132,6 +140,7 @@ export default function InstallPage(){
</ul>
</Typography>
</div>
+ </Container>
</ThemeProvider>
)
}
diff --git a/src/pages/tutorialPage.jsx b/src/pages/tutorialPage.jsx
index 4a404f68a6f00b594707669e1899a606817d8c9a..0d3c828bfbfb2007d1fce9222f636a1ee7443210 100644
--- a/src/pages/tutorialPage.jsx
+++ b/src/pages/tutorialPage.jsx
@@ -1,28 +1,35 @@
import React from "react";
import { makeStyles, ThemeProvider } from '@material-ui/core/styles';
import { createMuiTheme } from '@material-ui/core/styles';
+import Container from '@material-ui/core/Container';
import Typography from '@material-ui/core/Typography';
+import CssBaseline from '@material-ui/core/CssBaseline';
import Link from '@material-ui/core/Link';
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme) => ({
root: {
- marginRight:'auto',
- marginLeft: 'auto',
- width: '22em',
- marginBottom: '13vh',
+ display: 'flex',
+ flexDirection: 'column',
+ minHeight: '100vh',
'@media (min-width:540px)': {
- width: '36em',
+ width: '38em',
},
'@media (min-width:820px)': {
- width: '56em',
+ width: '70em',
},
},
-});
-const theme = createMuiTheme({
+ main: {
+ marginTop: theme.spacing(8),
+ marginBottom: theme.spacing(2),
+ },
+
+}));
+
+const tema = createMuiTheme({
overrides: {
MuiTypography: {
gutterBottom: {
@@ -30,38 +37,38 @@ const theme = createMuiTheme({
},
paragraph:{
- marginBottom: '2.4em'
+ marginBottom: '2em'
}
},
},
});
-theme.typography.h4 = {
- fontSize: '1.8rem',
+tema.typography.h4 = {
+ fontSize: '2.2rem',
'@media (min-width:600px)': {
- fontSize: '2.4rem',
+ fontSize: '2.6rem',
},
- [theme.breakpoints.up('md')]: {
- fontSize: '2.8rem',
+ [tema.breakpoints.up('md')]: {
+ fontSize: '3.4rem',
},
};
-theme.typography.h6 = {
- fontSize: '1.2rem',
+tema.typography.h6 = {
+ fontSize: '1.6rem',
'@media (min-width:600px)': {
- fontSize: '1.6rem',
- },
- [theme.breakpoints.up('md')]: {
fontSize: '2rem',
},
+ [tema.breakpoints.up('md')]: {
+ fontSize: '2.4rem',
+ },
};
-theme.typography.body1 = {
- fontSize: '0.9rem',
+tema.typography.body1 = {
+ fontSize: '1rem',
'@media (min-width:600px)': {
- fontSize: '1rem',
+ fontSize: '1.2rem',
},
- [theme.breakpoints.up('md')]: {
- fontSize: '1.3rem',
+ [tema.breakpoints.up('md')]: {
+ fontSize: '1.5rem',
},
};
@@ -71,7 +78,9 @@ export default function TutorialPage(){
const preventDefault = (event) => event.preventDefault();
return(
- <ThemeProvider theme={theme}>
+ <ThemeProvider theme={tema}>
+ <CssBaseline />
+ <Container component="main" className={classes.main} maxWidth="md">
<div className={classes.root}>
<Typography variant="h4" component="h3" gutterBottom>Tutorial</Typography>
@@ -163,6 +172,7 @@ export default function TutorialPage(){
</ul>
</Typography>
</div>
+ </Container>
</ThemeProvider>
)
}