diff --git a/src/components/Footer/__snapshots__/test.js.snap b/src/components/Footer/__snapshots__/test.js.snap
index 84d9b51..0c60bc5 100644
--- a/src/components/Footer/__snapshots__/test.js.snap
+++ b/src/components/Footer/__snapshots__/test.js.snap
@@ -40,5 +40,10 @@ exports[`Footer rendering 1`] = `
+
+ example build id
+
`;
diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
index fd3bade..aaa0bfa 100644
--- a/src/components/Footer/index.js
+++ b/src/components/Footer/index.js
@@ -1,7 +1,7 @@
import React from 'react';
import { translate, Trans } from 'react-i18next';
-import './style.css';
+import style from './style.css';
const Footer = () => (
);
diff --git a/src/components/Footer/style.css b/src/components/Footer/style.css
index 4107fa5..21b16cb 100644
--- a/src/components/Footer/style.css
+++ b/src/components/Footer/style.css
@@ -1,11 +1,13 @@
@import url('../../globals.css');
footer {
+ display: flex;
margin: var(--spacing-margin) 0;
& ul {
@apply --inline-list;
@apply --with-separator;
+ flex: 1;
}
& img {
@@ -13,4 +15,9 @@ footer {
width: 80px;
height: 15px;
}
+
+ & .buildId {
+ align-self: flex-end;
+ color: color(var(--color-brown) blend(var(--color-tan) 25%));
+ }
}
diff --git a/src/components/Footer/test.js b/src/components/Footer/test.js
index 3816e96..367587c 100644
--- a/src/components/Footer/test.js
+++ b/src/components/Footer/test.js
@@ -4,6 +4,10 @@ import { shallow } from 'enzyme';
import { Footer } from 'components/Footer';
describe('Footer', () => {
+ beforeEach(() => {
+ process.env.BUILD_ID = 'example build id';
+ });
+
test('rendering', () => {
const component = shallow(