basic styling

humanitec · Nov 24, 2020 · 480cd91 · 480cd91
1 parent 60c1b9e
commit 480cd91
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 9 deletions.
diff --git a/env-config.js b/env-config.js
@@ -1,5 +1,5 @@
 window.env = {
   API_URL: 'http://api.example.com',
-  API_URL2: 'http://api.example.com',
-  API_URL3: 'http://api.example.com',
+  WEBSOCKET_URL: 'wss://api.example.com',
+  ENVIRONMENT_NAME: 'local',
 };
diff --git a/public/env-config.js b/public/env-config.js
@@ -1,5 +1,5 @@
 window.env = {
   API_URL: 'http://api.example.com',
-  API_URL2: 'http://api.example.com',
-  API_URL3: 'http://api.example.com',
+  WEBSOCKET_URL: 'wss://api.example.com',
+  ENVIRONMENT_NAME: 'local',
 };
diff --git a/src/App.tsx b/src/App.tsx
@@ -6,6 +6,21 @@ const AppWrapper = styled.div`
   font-family: Lexend Deca;
 `;
 
+const EnvVariablesList = styled.ul`
+  width: 50%;
+  padding: 0;
+`;
+
+const EnvVariable = styled.li`
+  font-size: 14px;
+  background-color: aliceblue;
+  border: 1px solid cornflowerblue;
+  border-radius: 5px;
+  margin: 10px 0;
+  padding: 10px 8px;
+  list-style: none;
+`;
+
 const EnvVariableValue = styled.span`
   font-size: 14px;
 `;
@@ -14,15 +29,15 @@ const App = () => {
   return (
     <AppWrapper>
       <h2> Environment Variables </h2>
-      <ul>
+      <EnvVariablesList>
         {Object.entries(windowEnv).map(([key, value]: any) => {
           return (
-            <li key={key}>
-              {key} : <EnvVariableValue>{value}</EnvVariableValue>
-            </li>
+            <EnvVariable key={key}>
+              {key}: <EnvVariableValue>{value}</EnvVariableValue>
+            </EnvVariable>
           );
         })}
-      </ul>
+      </EnvVariablesList>
     </AppWrapper>
   );
 };