iconify like, delete and addtag buttons

fix lukas/openmediacenter#45

src/elements/GPElements/Button.module.css

@@ -2,7 +2,10 @@
     background-color: green;
     border-radius: 5px;
     border-width: 0;
-    color: white;
     margin-right: 15px;
     padding: 6px;
 }
+
+.button:hover{
+    opacity: 0.7;
+}

src/elements/GPElements/Button.test.js

@@ -1,14 +1,6 @@
 import {shallow} from 'enzyme';
 import React from 'react';
-import {Button} from './Button';
-
-function prepareFetchApi(response) {
-    const mockJsonPromise = Promise.resolve(response);
-    const mockFetchPromise = Promise.resolve({
-        json: () => mockJsonPromise
-    });
-    return (jest.fn().mockImplementation(() => mockFetchPromise));
-}
+import {Button, IconButton} from './Button';
 
 describe('<Button/>', function () {
     it('renders without crashing ', function () {
@@ -30,3 +22,24 @@ describe('<Button/>', function () {
         expect(func).toHaveBeenCalledTimes(1);
     });
 });
+
+describe('<IconButton/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<IconButton onClick={() => {}} title='test'/>);
+        wrapper.unmount();
+    });
+
+    it('renders title', function () {
+        const wrapper = shallow(<IconButton onClick={() => {}} title='test1'/>);
+        expect(wrapper.text()).toBe('<FontAwesomeIcon />test1');
+    });
+
+    it('test onclick handling', () => {
+        const func = jest.fn();
+        const wrapper = shallow(<IconButton onClick={func} title='test1'/>);
+
+        wrapper.find('button').simulate('click');
+
+        expect(func).toHaveBeenCalledTimes(1);
+    });
+});

src/elements/GPElements/Button.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
 import style from './Button.module.css';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {IconDefinition} from '@fortawesome/fontawesome-common-types';
+import GlobalInfos from '../../utils/GlobalInfos';
 
 interface ButtonProps {
     title: string | JSX.Element;
@@ -8,9 +11,30 @@ interface ButtonProps {
 }
 
 export function Button(props: ButtonProps): JSX.Element {
+    const theme = GlobalInfos.getThemeStyle();
+
     return (
-        <button className={style.button} style={props.color} onClick={props.onClick}>
+        <button className={style.button + ' ' + theme.textcolor} style={props.color} onClick={props.onClick}>
             {props.title}
         </button>
     );
 }
+
+interface IconButtonProps {
+    title: string | JSX.Element;
+    onClick?: () => void;
+    icon: IconDefinition;
+}
+
+export function IconButton(props: IconButtonProps): JSX.Element {
+    const theme = GlobalInfos.getThemeStyle();
+
+    return (
+        <button className={style.button + ' ' + theme.textcolor} style={{backgroundColor: '#00000000'}} onClick={props.onClick}>
+            <span style={{fontSize: 12}}>
+                <FontAwesomeIcon className={theme.textcolor} icon={props.icon} size='2x' />
+            </span>
+            <span style={{marginLeft: 10}}>{props.title}</span>
+        </button>
+    );
+}