more controls popup stuff

src/__tests__/controls_popup_test.tsx

@@ -3,9 +3,21 @@ import { ControlsPopup } from "../controls_popup";
 import { render } from "enzyme";
 
 describe("<ControlsPopup />", () => {
-  it("renders a controls menu", () => {
-    let popup = render(<ControlsPopup />);
+
+  let popup = render(<ControlsPopup />);
+  let container = popup.find("controls-popupp");
+
+  it("Has correct amount of children elements", () => {
     let divs = popup.find("div");
     expect(divs.length).toEqual(1);
   });
+
+  it("Has correct classname", () => {
+    expect(container).toBeTruthy();
+  });
+
+  it("Has public render", () => {
+    expect(popup).toHaveProperty("render");
+  });
+
 });

src/__tests__/test_history.ts

@@ -1,12 +1,12 @@
 import { history, push } from "../history";
 
 describe("push()", () => {
-    it("calls history with a URL", () => {
-        const URL = "/wow.html";
-        let oldFn = history.push;
-        history.push = jest.fn();
-        push(URL);
-        expect(history.push).toHaveBeenCalledWith(URL);
-        history.push = oldFn;
-    });
+  it("calls history with a URL", () => {
+    const URL = "/wow.html";
+    let oldFn = history.push;
+    history.push = jest.fn();
+    push(URL);
+    expect(history.push).toHaveBeenCalledWith(URL);
+    history.push = oldFn;
+  });
 });

src/controls_popup.tsx

@@ -1,10 +1,15 @@
 import * as React from "react";
 
-export class ControlsPopup extends React.Component {
+export class ControlsPopup extends React.Component<{}, {}> {
   public render() {
     return (
-      <div>
-        {/*Popup!*/}
+      <div className="controls-popup">
+        <i className="fa fa-plus" />
+        <div className="controls-popup-menu-outer">
+          <div className="controls-popup-menu-inner">
+            Content
+          </div>
+        </div>
       </div>
     );
   }

src/css/global.scss

@@ -356,6 +356,49 @@ ul {
   font-size: 1.2rem;
 }
 
+.controls-popup,
+.controls-popup-menu {
+  position: absolute;
+  background: blue;
+  padding: 2rem;
+  border-radius: 3rem;
+  height: 6rem;
+  width: 6rem;
+  cursor: pointer;
+}
+
+.controls-popup {
+  right: 6rem;
+  bottom: 4rem;
+  transition: all 0.4s ease-in-out;
+  color: $white;
+  i {
+    z-index: 1;
+    position: absolute;
+    font-size: 2.4rem;
+    top: 1.8rem;
+    margin-bottom: 2rem;
+    transition: all 0.4s ease-in-out;
+  }
+  &:hover {
+    i {
+      transform: rotate(-225deg);
+    }
+    .controls-popup-menu {
+      transition-delay: 1s;
+      opacity: 1;
+      width: 26rem;
+    }
+  }
+}
+
+.controls-popup-menu {
+  transition: all 0.4s ease-in-out;
+  right: 0;
+  bottom: 0;
+  opacity: 0;
+}
+
 @keyframes page-transition {
   0% {
     opacity: 0;