Added components and logic to dynamically change theme

test/App.test.tsx

@@ -1,6 +1,8 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Route } from 'react-router-dom';
 import { identity } from 'ramda';
+import { Mock } from 'ts-mockery';
+import { Settings } from '../src/settings/reducers/settings';
 import appFactory from '../src/App';
 
 describe('<App />', () => {
@@ -10,7 +12,7 @@ describe('<App />', () => {
   beforeEach(() => {
     const App = appFactory(MainHeader, () => null, () => null, () => null, () => null, () => null, () => null);
 
-    wrapper = shallow(<App fetchServers={identity} servers={{}} />);
+    wrapper = shallow(<App fetchServers={identity} servers={{}} settings={Mock.all<Settings>()} />);
   });
   afterEach(() => wrapper.unmount());
 

test/settings/reducers/settings.test.ts

@@ -3,12 +3,14 @@ import reducer, {
   toggleRealTimeUpdates,
   setRealTimeUpdatesInterval,
   setShortUrlCreationSettings,
+  setUiSettings,
 } from '../../../src/settings/reducers/settings';
 
 describe('settingsReducer', () => {
   const realTimeUpdates = { enabled: true };
   const shortUrlCreation = { validateUrls: false };
-  const settings = { realTimeUpdates, shortUrlCreation };
+  const ui = { theme: 'light' };
+  const settings = { realTimeUpdates, shortUrlCreation, ui };
 
   describe('reducer', () => {
     it('returns realTimeUpdates when action is SET_SETTINGS', () => {
@@ -39,4 +41,12 @@ describe('settingsReducer', () => {
       expect(result).toEqual({ type: SET_SETTINGS, shortUrlCreation: { validateUrls: true } });
     });
   });
+
+  describe('setUiSettings', () => {
+    it('creates action to set ui settings', () => {
+      const result = setUiSettings({ theme: 'dark' });
+
+      expect(result).toEqual({ type: SET_SETTINGS, ui: { theme: 'dark' } });
+    });
+  });
 });