From caad1d64f9b2eecf46053c14d4e66c879b4d6d69 Mon Sep 17 00:00:00 2001
From: Lucas Teixeira <lucas.teixeira@webjump.com.br>
Date: Sat, 17 Oct 2020 15:36:20 -0300
Subject: [PATCH] WJ-75 - New: EnvironmentLabel;

---
 src/App.tsx                               |  2 ++
 src/components/EnvironmentLabel/index.tsx | 13 +++++++++++++
 src/components/EnvironmentLabel/styles.ts | 19 +++++++++++++++++++
 src/components/index.ts                   |  1 +
 src/shared/styles/global.ts               |  9 ++++++++-
 5 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 src/components/EnvironmentLabel/index.tsx
 create mode 100644 src/components/EnvironmentLabel/styles.ts

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 = () => {
     <>
       <Router>
         <AppProvider>
+          <EnvironmentLabel />
           <Routes />
         </AppProvider>
 
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 <Container>Ambiente: Desenvolvimento</Container>;
+};
+
+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;