diff --git a/src/App.tsx b/src/App.tsx index 4c93c44..dcf5077 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { BrowserRouter as Router } from 'react-router-dom'; +import { EnvironmentLabel } from 'components'; import AppProvider from 'hooks'; import Routes from './routes'; import GlobalStyle from './shared/styles/global'; @@ -10,6 +11,7 @@ const App: React.FC = () => { <> + diff --git a/src/components/EnvironmentLabel/index.tsx b/src/components/EnvironmentLabel/index.tsx new file mode 100644 index 0000000..34c558d --- /dev/null +++ b/src/components/EnvironmentLabel/index.tsx @@ -0,0 +1,13 @@ +import React from 'react'; + +import { Container } from './styles'; + +const EnvironmentLabel: React.FC = () => { + if (process.env.REACT_APP_IS_PRODUCTION === 'true') { + return null; + } + + return Ambiente: Desenvolvimento; +}; + +export default EnvironmentLabel; diff --git a/src/components/EnvironmentLabel/styles.ts b/src/components/EnvironmentLabel/styles.ts new file mode 100644 index 0000000..356aaa8 --- /dev/null +++ b/src/components/EnvironmentLabel/styles.ts @@ -0,0 +1,19 @@ +import styled from 'styled-components'; + +import { Color, Size } from 'shared/enums'; + +export const Container = styled.div` + display: flex; + width: 100%; + align-items: center; + justify-content: center; + background: ${Color.Secondary}; + color: ${Color.FillSecondary}; + padding: ${Size.Smallest}; + font-size: ${Size.Small}; + + position: fixed; + top: 0; + z-index: 50; + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); +`; diff --git a/src/components/index.ts b/src/components/index.ts index 778622c..4be78bd 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,4 +1,5 @@ export { default as Button } from './Button'; +export { default as EnvironmentLabel } from './EnvironmentLabel'; export { default as Input } from './Input'; export { default as Movie } from './Movie'; export { default as MovieHighlight } from './MovieHighlight'; diff --git a/src/shared/styles/global.ts b/src/shared/styles/global.ts index a388d1a..dcd1263 100644 --- a/src/shared/styles/global.ts +++ b/src/shared/styles/global.ts @@ -1,4 +1,4 @@ -import { createGlobalStyle } from 'styled-components'; +import { createGlobalStyle, css } from 'styled-components'; import { Color, Size } from 'shared/enums'; export default createGlobalStyle` @@ -26,6 +26,13 @@ export default createGlobalStyle` color: ${Color.Text}; font-size: ${Size.Default}; -webkit-font-smoothing: antialiased; + + ${ + process.env.REACT_APP_IS_PRODUCTION === 'false' && + css` + margin-top: ${Size.Large}; + ` + } } body, input, button { font-weight: 100;