(#5) Ajuste geral dos componentes

Co-authored-by: ServidioEC <52542729+ServidioEC@users.noreply.github.com>
UnBArqDsw2021-1 · Sep 17, 2021 · d597546 · d597546
1 parent c56435a
commit d597546
Show file tree

Hide file tree

Showing 13 changed files with 128 additions and 42 deletions.
diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
@@ -36,6 +36,13 @@
     "import/prefer-default-export": "off",
     "import/no-duplicates": "off",
     "@typescript-eslint/camelcase": "off",
+    "@typescript-eslint/naming-convention": [
+      "off",
+      {
+        "selector": "interface",
+        "format": ["camelCase"]
+      }
+    ],
     "@typescript-eslint/explicit-function-return-type": [
       "error",
       {

diff --git a/frontend/package.json b/frontend/package.json
@@ -12,6 +12,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.2.0",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
     "styled-components": "^5.3.1",
     "typescript": "^4.3.5",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -2,27 +2,16 @@ import React from 'react';
 
 import GlobalStyle from 'styles/global';
 
-import NavBar from 'components/NavBar';
-import Loading from 'components/Loading';
-import MenuItem from 'components/MenuItem';
+import Routes from 'routes';
+import AppProvider from 'hooks';
 
 const App: React.FC = () => {
   return (
     <>
-      <NavBar />
-      <MenuItem
-        id={0}
-        image="https://blog.finamac.com/wp-content/uploads/2019/10/309956-como-oferecer-os-melhores-sabores-de-milkshake-para-os-clientes-1280x640.jpg"
-        name="Milkshake"
-        price="16.90"
-        discount={0}
-        description={
-          'Disponível nos sabores morango, chocolate, oreo e creme de\
-                    avelã.'
-        }
-      />
-      <Loading />
-      <GlobalStyle />
+      <AppProvider>
+        <Routes />
+        <GlobalStyle />
+      </AppProvider>
     </>
   );
 };

diff --git a/frontend/src/components/NavBar/FifthNavBar/index.tsx b/frontend/src/components/NavBar/FifthNavBar/index.tsx
@@ -4,11 +4,10 @@ import { NavBarContainer } from 'components/NavBar/styles';
 
 const FifthNavBar: React.FC = () => {
   return (
-    <NavBarContainer>
+    <NavBarContainer style={{ marginBottom: '4rem' }}>
       <section>
         <span>Mesa</span>
       </section>
-
     </NavBarContainer>
   );
 };

diff --git a/frontend/src/components/NavBar/FourthNavBar/index.tsx b/frontend/src/components/NavBar/FourthNavBar/index.tsx
@@ -4,11 +4,7 @@ import { FiArrowLeft } from 'react-icons/fi';
 import { NavBarContainer } from 'components/NavBar/styles';
 
 const FourthNavBar: React.FC = () => {
-  return (
-    <NavBarContainer>
-
-    </NavBarContainer>
-  );
+  return <NavBarContainer style={{ marginBottom: '4rem' }} />;
 };
 
 export default FourthNavBar;
diff --git a/frontend/src/components/NavBar/SecondNavBar/index.tsx b/frontend/src/components/NavBar/SecondNavBar/index.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { FiArrowLeft } from 'react-icons/fi';
 
-import { NavBarContainer,NameContainer } from 'components/NavBar/styles';
+import { NavBarContainer, NameContainer } from 'components/NavBar/styles';
 
 const SecondNavBar: React.FC = () => {
   return (
-    <NavBarContainer>
+    <NavBarContainer style={{ marginBottom: '4rem' }}>
       <section>
         <FiArrowLeft />
         <span>Voltar</span>

diff --git a/frontend/src/components/NavBar/ThirdNavBar/index.tsx b/frontend/src/components/NavBar/ThirdNavBar/index.tsx
@@ -5,7 +5,7 @@ import { NavBarContainer } from 'components/NavBar/styles';
 
 const ThirdNavBar: React.FC = () => {
   return (
-    <NavBarContainer>
+    <NavBarContainer style={{ marginBottom: '4rem' }}>
       <section>
         <FiArrowLeft />
         <span>Voltar</span>

diff --git a/frontend/src/components/NavBar/index.tsx b/frontend/src/components/NavBar/index.tsx
@@ -5,7 +5,7 @@ import { NavBarContainer, NameContainer } from 'components/NavBar/styles';
 
 const NavBar: React.FC = () => {
   return (
-    <NavBarContainer>
+    <NavBarContainer style={{ marginBottom: '4rem' }}>
       <section>
         <FiArrowLeft />
         <span>Voltar</span>
@@ -18,4 +18,8 @@ const NavBar: React.FC = () => {
   );
 };
 
+NavBar.defaultProps = {
+  styles: {},
+};
+
 export default NavBar;
diff --git a/frontend/src/components/NavBar/styles.ts b/frontend/src/components/NavBar/styles.ts
@@ -21,7 +21,8 @@ export const NavBarContainer = styled.div`
     }
 
     span {
-      font-size: 1.5rem;
+      font-size: 2.4rem;
+      color: ${props => props.theme.black};
     }
   }
 `;
@@ -36,5 +37,6 @@ export const NameContainer = styled.div`
   span {
     font-size: 1.5rem;
     font-weight: 500;
+    color: ${props => props.theme.black};
   }
 `;
diff --git a/frontend/src/hooks/useFetch.tsx → frontend/src/hooks/useFetch.ts b/frontend/src/hooks/useFetch.tsx → frontend/src/hooks/useFetch.ts
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useState, useEffect, useCallback } from 'react';
 
 type Hook = (url: string, setMenuItem: (menuItem: string) => void) => boolean;

diff --git a/frontend/src/pages/Home/index.tsx b/frontend/src/pages/Home/index.tsx
@@ -2,27 +2,47 @@ import React from 'react';
 
 import { useUserTheme } from 'hooks/theme';
 
+import Loading from 'components/Loading';
+import MenuItem from 'components/MenuItem';
 import { Container } from './styles';
 
 import NavBar from '../../components/NavBar';
-//import SecondNavBar from '../../components/NavBar/SecondNavBar';
-//import ThirdNavBar from '../../components/NavBar/ThirdNavBar';
-//import FourthNavBar from '../../components/NavBar/FourthNavBar';
-//import FifthNavBar from '../../components/NavBar/FifthNavBar';
+import SecondNavBar from '../../components/NavBar/SecondNavBar';
+import ThirdNavBar from '../../components/NavBar/ThirdNavBar';
+import FourthNavBar from '../../components/NavBar/FourthNavBar';
+import FifthNavBar from '../../components/NavBar/FifthNavBar';
 
 const Home: React.FC = () => {
   const { switchTheme, theme } = useUserTheme();
 
   return (
     <Container>
-      <NavBar/>
+      <NavBar />
+      <SecondNavBar />
+      <ThirdNavBar />
+      {/* <FourthNavBar /> */}
+      <FifthNavBar />
+
       <h1>Tá na Mesa</h1>
 
       <button type="button" onClick={switchTheme}>
         Trocar tema
       </button>
 
       <h4>{theme.type}</h4>
+
+      <MenuItem
+        id={0}
+        image="https://blog.finamac.com/wp-content/uploads/2019/10/309956-como-oferecer-os-melhores-sabores-de-milkshake-para-os-clientes-1280x640.jpg"
+        name="Milkshake"
+        price="16.90"
+        discount={0}
+        description={
+          'Disponível nos sabores morango, chocolate, oreo e creme de\
+                    avelã.'
+        }
+      />
+      <Loading />
     </Container>
   );
 };

diff --git a/frontend/src/styles/taNaMesaDarkTheme.ts b/frontend/src/styles/taNaMesaDarkTheme.ts
@@ -14,5 +14,5 @@ export default {
 
   black: '#FFFFFF',
   white: '#000000',
-  gray: '#C4C4C4'
+  gray: '#C4C4C4',
 };
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -1157,7 +1157,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
   integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
@@ -6112,6 +6112,18 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
+history@^4.9.0:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
+  integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    loose-envify "^1.2.0"
+    resolve-pathname "^3.0.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+    value-equal "^1.0.1"
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -6121,7 +6133,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -7854,7 +7866,7 @@ lolex@^5.0.0:
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -8101,6 +8113,14 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
+mini-create-react-context@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz#072171561bfdc922da08a60c2197a497cc2d1d5e"
+  integrity sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    tiny-warning "^1.0.3"
+
 mini-css-extract-plugin@0.11.3:
   version "0.11.3"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz#15b0910a7f32e62ffde4a7430cfefbd700724ea6"
@@ -8894,7 +8914,7 @@ path-to-regexp@0.1.7:
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
   integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
 
-path-to-regexp@^1.0.3:
+path-to-regexp@^1.0.3, path-to-regexp@^1.7.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
   integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
@@ -9802,7 +9822,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.7.2:
+prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -10046,7 +10066,7 @@ react-icons@^4.2.0:
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.2.0.tgz#6dda80c8a8f338ff96a1851424d63083282630d0"
   integrity sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==
 
-react-is@^16.7.0, react-is@^16.8.1:
+react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -10061,6 +10081,35 @@ react-refresh@^0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
+react-router-dom@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.0.tgz#da1bfb535a0e89a712a93b97dd76f47ad1f32363"
+  integrity sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==
+  dependencies:
+    "@babel/runtime" "^7.12.13"
+    history "^4.9.0"
+    loose-envify "^1.3.1"
+    prop-types "^15.6.2"
+    react-router "5.2.1"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
+react-router@5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.1.tgz#4d2e4e9d5ae9425091845b8dbc6d9d276239774d"
+  integrity sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==
+  dependencies:
+    "@babel/runtime" "^7.12.13"
+    history "^4.9.0"
+    hoist-non-react-statics "^3.1.0"
+    loose-envify "^1.3.1"
+    mini-create-react-context "^0.4.0"
+    path-to-regexp "^1.7.0"
+    prop-types "^15.6.2"
+    react-is "^16.6.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
 react-scripts@4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-4.0.3.tgz#b1cafed7c3fa603e7628ba0f187787964cb5d345"
@@ -10402,6 +10451,11 @@ resolve-from@^5.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
+resolve-pathname@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
+  integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
+
 resolve-url-loader@^3.1.2:
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.4.tgz#3c16caebe0b9faea9c7cc252fa49d2353c412320"
@@ -11608,6 +11662,16 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tiny-invariant@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
+  integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
+
+tiny-warning@^1.0.0, tiny-warning@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -12087,6 +12151,11 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+value-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
+  integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
+
 vary@^1, vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"