use flexbox to wrap settings tiles correctly

new icon for different tags
ignore test files in codeclimate test

src/elements/AddTagPopup/AddTagPopup.test.js

@@ -39,7 +39,7 @@ describe('<AddTagPopup/>', function () {
         global.fetch = prepareFetchApi({result: "success"});
 
         wrapper.setProps({
-            submit: jest.fn((arg1, arg2) => {}),
+            submit: jest.fn(() => {}),
             onHide: jest.fn()
         }, () => {
             wrapper.instance().addTag(1, "test");
@@ -62,7 +62,7 @@ describe('<AddTagPopup/>', function () {
         global.fetch = prepareFetchApi({result: "fail"});
 
         wrapper.setProps({
-            submit: jest.fn((arg1, arg2) => {}),
+            submit: jest.fn(() => {}),
             onHide: jest.fn()
         }, () => {
             wrapper.instance().addTag(1, "test");

src/elements/InfoHeaderItem/InfoHeaderItem.js

@@ -0,0 +1,34 @@
+import React from "react";
+import style from './InfoHeaderItem.module.css';
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {Spinner} from "react-bootstrap";
+
+/**
+ * a component to display one of the short quickinfo tiles on dashboard
+ */
+class InfoHeaderItem extends React.Component {
+    render() {
+        return (
+            <div onClick={() => {
+                // call clicklistener if defined
+                if (this.props.onClick != null) this.props.onClick();
+            }} className={style.infoheaderitem} style={{backgroundColor: this.props.backColor}}>
+                <div className={style.icon}>
+                    <FontAwesomeIcon style={{
+                        verticalAlign: "middle",
+                        lineHeight: "130px"
+                    }} icon={this.props.icon} size='5x'/>
+                </div>
+                {this.props.text !== null && this.props.text !== undefined ?
+                    <>
+                        <div className={style.maintext}>{this.props.text}</div>
+                        <div className={style.subtext}>{this.props.subtext}</div>
+                    </>
+                    : <span className={style.loadAnimation}><Spinner animation='border'/></span>
+                }
+            </div>
+        );
+    }
+}
+
+export default InfoHeaderItem;

src/elements/InfoHeaderItem/InfoHeaderItem.module.css

@@ -0,0 +1,58 @@
+/* styling for tile */
+.infoheaderitem {
+    background-color: lightblue;
+    border-radius: 5px;
+    flex: calc(25% - 10px);
+    margin: 5px;
+}
+
+/* On screens that are 1317px wide or less, go from four columns to two columns */
+@media screen and (max-width: 1317px) {
+    .infoheaderitem {
+        flex: calc(50% - 10px);
+    }
+}
+
+/* change opacity of icon when hovering whole tile */
+.infoheaderitem:hover .icon {
+    opacity: 0.75;
+    transition: opacity linear 0.4s;
+}
+
+/* change cursor on hover */
+.infoheaderitem:hover {
+    cursor: pointer;
+}
+
+.icon {
+    float: left;
+    height: 130px;
+    margin-left: 5px;
+    margin-right: 17px;
+    margin-top: 20px;
+    opacity: 0.5;
+    text-align: center;
+
+    width: 30%;
+}
+
+/* big main text in tile */
+.maintext {
+    font-size: x-large;
+    font-weight: bold;
+    margin-top: 30px;
+}
+
+/* small subtext in tile */
+.subtext {
+    font-size: large;
+    margin-top: 5px;
+    opacity: 0.7;
+}
+
+.loadAnimation {
+    display: inline-block;
+    line-height: 145px;
+    margin-left: calc(25% - 15px);
+    vertical-align: middle;
+}

src/elements/InfoHeaderItem/InfoHeaderItem.test.js

@@ -0,0 +1,43 @@
+import {shallow} from "enzyme";
+import React from "react";
+import InfoHeaderItem from "./InfoHeaderItem";
+
+describe('<InfoHeaderItem/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<InfoHeaderItem/>);
+        wrapper.unmount();
+    });
+
+    it('renders correct text', function () {
+        const wrapper = shallow(<InfoHeaderItem text='mytext'/>);
+        expect(wrapper.find(".maintext").text()).toBe("mytext");
+    });
+
+    it('renders correct subtext', function () {
+        const wrapper = shallow(<InfoHeaderItem text='mimi' subtext='testtext'/>);
+        expect(wrapper.find(".subtext").text()).toBe("testtext");
+    });
+
+    it('test no subtext if no text defined', function () {
+        const wrapper = shallow(<InfoHeaderItem subtext='testi'/>);
+        expect(wrapper.find(".subtext")).toHaveLength(0);
+    });
+
+    it('test custom click handler', function () {
+        const func = jest.fn();
+        const wrapper = shallow(<InfoHeaderItem onClick={() => func()}/>);
+        expect(func).toBeCalledTimes(0);
+        wrapper.simulate("click");
+        expect(func).toBeCalledTimes(1);
+    });
+
+    it('test insertion of loading spinner', function () {
+        const wrapper = shallow(<InfoHeaderItem text={null}/>);
+        expect(wrapper.find("Spinner").length).toBe(1);
+    });
+
+    it('test loading spinner if undefined', function () {
+        const wrapper = shallow(<InfoHeaderItem/>);
+        expect(wrapper.find("Spinner").length).toBe(1);
+    });
+});

src/elements/NewTagPopup/NewTagPopup.js

@@ -18,21 +18,21 @@ class NewTagPopup extends React.Component {
                 <Modal
                     show={this.props.show}
                     onHide={this.props.onHide}
-                    size="lg"
-                    aria-labelledby="contained-modal-title-vcenter"
+                    size='lg'
+                    aria-labelledby='contained-modal-title-vcenter'
                     centered>
                     <Modal.Header closeButton>
-                        <Modal.Title id="contained-modal-title-vcenter">
+                        <Modal.Title id='contained-modal-title-vcenter'>
                             Create a new Tag!
                         </Modal.Title>
                     </Modal.Header>
                     <Modal.Body>
                         <Form.Group>
                             <Form.Label>Tag Name:</Form.Label>
-                            <Form.Control id='namefield' type="text" placeholder="Enter Tag name" onChange={(v) => {
+                            <Form.Control id='namefield' type='text' placeholder='Enter Tag name' onChange={(v) => {
                                 this.value = v.target.value
                             }}/>
-                            <Form.Text className="text-muted">
+                            <Form.Text className='text-muted'>
                                 This Tag will automatically show up on category page.
                             </Form.Text>
                         </Form.Group>

src/elements/Preview/Preview.js

@@ -48,7 +48,7 @@ class Preview extends React.Component {
                         <img className={style.previewimage}
                              src={this.state.previewpicture}
                              alt='Pic loading.'/> :
-                        <span className={style.loadAnimation}><Spinner animation="border"/></span>}
+                        <span className={style.loadAnimation}><Spinner animation='border'/></span>}
 
                 </div>
                 <div className={style.previewbottom}>

src/elements/Tag/Tag.js

@@ -10,7 +10,7 @@ class Tag extends React.Component {
     render() {
         return (
             <button className={styles.tagbtn} onClick={() => this.TagClick()}
-                    data-testid="Test-Tag">{this.props.children}</button>
+                    data-testid='Test-Tag'>{this.props.children}</button>
         );
     }