some reformattings

added badges

src/elements/AddTagPopup/AddTagPopup.test.js

@@ -0,0 +1,17 @@
+import React from "react";
+import ReactDom from 'react-dom'
+
+import {render, cleanup} from '@testing-library/react'
+import "@testing-library/jest-dom"
+
+import AddTagPopup from "./AddTagPopup";
+
+afterEach(cleanup);
+
+describe('<AddTagPopup/>', function () {
+    it('renders without crashing ', function () {
+        const div = document.createElement("div");
+        ReactDom.render(<AddTagPopup/>,div);
+        ReactDom.unmountComponentAtNode(div);
+    });
+});

src/elements/SideBar/SideBar.css

@@ -0,0 +1,24 @@
+.sideinfo {
+    width: 20%;
+    float: left;
+    padding: 20px;
+    margin-top: 25px;
+    margin-left: 15px;
+    background-color: #b4c7fe;
+    border-radius: 20px;
+    border: 2px #3574fe solid;
+    overflow: hidden;
+}
+
+.sidebartitle {
+    font-weight: bold;
+    font-size: larger;
+}
+
+.sidebarinfo {
+    margin-top: 5px;
+    background-color: #8ca3fc;
+    border-radius: 5px;
+    padding: 2px 10px 2px 15px;
+    width: 220px;
+}

src/elements/SideBar/SideBar.js

@@ -1,5 +1,5 @@
 import React from "react";
-import "../css/SideBar.css"
+import "./SideBar.css"
 
 class SideBar extends React.Component {
     render() {

src/elements/SideBar/SideBar.test.js

@@ -0,0 +1,20 @@
+import React from "react";
+import ReactDom from 'react-dom'
+import SideBar from "./SideBar";
+
+import {render} from '@testing-library/react'
+import "@testing-library/jest-dom"
+
+describe('<SideBar/>', function () {
+    it('renders without crashing ', function () {
+        const div = document.createElement("div");
+        ReactDom.render(<SideBar/>,div);
+        ReactDom.unmountComponentAtNode(div);
+    });
+
+    it('renders childs correctly', function () {
+        const {getByText} = render(<SideBar>test</SideBar>);
+        const randomElement = getByText(/test/i);
+        expect(randomElement).toBeInTheDocument();
+    });
+});

src/elements/Tag/Tag.css

@@ -0,0 +1,19 @@
+.tagbtn {
+    color: white;
+    margin: 10px;
+    background-color: #3574fe;
+    border: none;
+    border-radius: 10px;
+    padding: 5px 15px 5px 15px;
+    /*font-weight: bold;*/
+    display: block;
+}
+
+.tagbtn:focus {
+    background-color: #004eff;
+    outline: none;
+}
+
+.tagbtn:hover {
+    background-color: #004eff;
+}

src/elements/Tag/Tag.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-import "../css/Tag.css"
+import "./Tag.css"
 
 class Tag extends React.Component {