WJ-75 - New: EnvironmentLabel;

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 = () => {
     <>
       <Router>
         <AppProvider>
+          <EnvironmentLabel />
           <Routes />
         </AppProvider>
 

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 <Container>Ambiente: Desenvolvimento</Container>;
+};
+
+export default EnvironmentLabel;

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);
+`;

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';

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;