added some basic dev info

.env.example

@@ -6,4 +6,5 @@ REACT_APP_FIREBASE_MESSAGING_SENDER_ID=
 REACT_APP_FIREBASE_APP_ID=
 REACT_APP_SENTRY_DNS=
 REACT_APP_AUTH0_DOMAIN=
-REACT_APP_AUTH0_CLIENT_ID=
+REACT_APP_AUTH0_CLIENT_ID=
+REACT_APP_DEV_ENV=true

.gitignore

@@ -1,5 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+generatedGitInfo.json
+
 # dependencies
 /node_modules
 /.pnp

package.json

@@ -51,9 +51,10 @@
     "typescript": "^4.4.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "git-info": "node src/gitInfo.js",
+    "start": "npm run git-info && react-scripts start",
+    "build": "npm run git-info && react-scripts build",
+    "test": "npm run git-info && react-scripts test",
     "eject": "react-scripts eject",
     "serve": "serve -s build"
   },

src/components/navigation/NavigationMenu.tsx

@@ -2,7 +2,7 @@ import React, {createContext, useEffect, useState} from 'react';
 import styles from './NavigationMenu.module.scss';
 import appStyles from 'styles.module.scss';
 import classNames from 'classnames';
-import {Layout, Menu, message, Spin, Typography} from 'antd';
+import {Layout, Menu, message, Spin, Tag, Typography} from 'antd';
 import {AppRoute, AppRoutes, HomeRoute} from 'routes';
 import {Route, Routes, useLocation, useNavigate} from 'react-router';
 import {auth, firestore} from 'config/firebase/firebase';
@@ -15,6 +15,7 @@ import {abteilungenCollection} from 'config/firebase/collections';
 import {setGroupDates} from 'util/GroupUtil';
 import {VerifyEmail} from './VerifyEmail';
 import { useParams } from "react-router-dom";
+import generatedGitInfo from 'generatedGitInfo.json';
 
 const {Header, Content, Footer, Sider} = Layout;
 
@@ -168,11 +169,12 @@ const NavigationMenu: React.FC = () => {
                                     </Routes>
                         }
                     </Content>
-                    <Footer style={{textAlign: 'center'}}>
+                    <Footer style={{textAlign: 'center', backgroundColor: process.env.REACT_APP_DEV_ENV === 'true' ? '#FF4B91' : 'unset'}}>
                         Designed by <a href='https://cevi.tools' target='_blank'>Cevi Tools</a> | &copy; Cevi
                         Tools {(new Date()).getFullYear()}
                         {process.env.REACT_APP_DEV_ENV === 'true' && <> |
-                            DEV
+                            Branch: <Tag>{generatedGitInfo.gitBranch}</Tag>
+                            Git Hash: <Tag>{generatedGitInfo.gitCommitHash}</Tag>
                         </>}
                     </Footer>
                 </Layout>

src/gitInfo.js

@@ -0,0 +1,31 @@
+const fs = require('fs');
+const path = require('path');
+const {execSync} = require('child_process');
+
+const execSyncWrapper = (command) => {
+  let stdout = null;
+  try {
+    stdout = execSync(command).toString().trim();
+  } catch (error) {
+    console.error(error);
+  }
+  return stdout;
+};
+
+const main = () => {
+  let gitBranch = execSyncWrapper('git rev-parse --abbrev-ref HEAD');
+  let gitCommitHash = execSyncWrapper('git rev-parse --short=7 HEAD');
+
+  const obj = {
+    gitBranch,
+    gitCommitHash
+  };
+
+  const filePath = path.resolve('src', 'generatedGitInfo.json');
+  const fileContents = JSON.stringify(obj, null, 2);
+
+  fs.writeFileSync(filePath, fileContents);
+  console.log(`Wrote the following contents to ${filePath}\n${fileContents}`);
+};
+
+main();