From e61b07a4971767483bc1a67b6f2c4f7596e53647 Mon Sep 17 00:00:00 2001
From: Thor <thor.ellefsen@knowit.no>
Date: Thu, 18 Feb 2021 09:09:10 +0100
Subject: [PATCH 1/2] Makes icons clickable; useful for mobile, where
 touchhover behavior was glitchy

---
 src/icons/iconController.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/icons/iconController.tsx b/src/icons/iconController.tsx
index 87bf896f..c03b3827 100644
--- a/src/icons/iconController.tsx
+++ b/src/icons/iconController.tsx
@@ -12,7 +12,7 @@ import { ReactComponent as M2 } from "../icons/M - vedbehov.svg"
 import { ReactComponent as M1 } from "../icons/M - nja.svg"
 import { ReactComponent as M0 } from "../icons/M - nei.svg"
 
-import React, { Fragment } from "react";
+import React, { Fragment, useState } from "react";
 import { Tooltip } from "@material-ui/core"
 
 const getIconDescription = (knowledge: boolean, level: number): string => {
@@ -39,6 +39,7 @@ const getIconDescription = (knowledge: boolean, level: number): string => {
 };
 
 const CreateHover = (knowledge: boolean, level: number, className?: string, key?: number): JSX.Element => {
+
     let element: JSX.Element = <Fragment />;
     if(knowledge){
         switch(level){
@@ -59,9 +60,19 @@ const CreateHover = (knowledge: boolean, level: number, className?: string, key?
             case 5: element = <M5 className={className} />; break;
         }
     }
-    return <Tooltip key={key ? key : null} title={getIconDescription(knowledge, level)}>{element}</Tooltip>;
+
+    return <ClickableTooltip key={key} knowledge={knowledge} level={level} element={element} />;
 };
 
+const ClickableTooltip = (props: {key?: number, knowledge: boolean, level: number, element: JSX.Element}) => {
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+    const handleClick = () => {
+        setIsOpen(true);
+        setTimeout(() => setIsOpen(false), 2000);
+    }
+    return <Tooltip onClick={handleClick} open={isOpen} disableTouchListener={false} key={props.key ? props.key : null} title={getIconDescription(props.knowledge, props.level)}>{props.element}</Tooltip>;
+}
+
 export {K0, K1, K2, K3, K4, K5, M0, M1, M2, M3, M4, M5}
 
 export const GetIcons = (knowledge: boolean, className?: string): JSX.Element[] => {

From 22f746217bd4e37d8a7d692c5a9df42f7fca9fa1 Mon Sep 17 00:00:00 2001
From: Thor <thor.ellefsen@knowit.no>
Date: Thu, 18 Feb 2021 10:29:24 +0100
Subject: [PATCH 2/2] CreateClickableIcon and CreateHover separated

---
 src/icons/iconController.tsx | 73 +++++++++++++++++++++++++++++++++---
 1 file changed, 68 insertions(+), 5 deletions(-)

diff --git a/src/icons/iconController.tsx b/src/icons/iconController.tsx
index c03b3827..af6872e6 100644
--- a/src/icons/iconController.tsx
+++ b/src/icons/iconController.tsx
@@ -13,7 +13,8 @@ import { ReactComponent as M1 } from "../icons/M - nja.svg"
 import { ReactComponent as M0 } from "../icons/M - nei.svg"
 
 import React, { Fragment, useState } from "react";
-import { Tooltip } from "@material-ui/core"
+import { makeStyles, Tooltip } from "@material-ui/core"
+import { KnowitColors } from "../styles"
 
 const getIconDescription = (knowledge: boolean, level: number): string => {
     if(knowledge){
@@ -61,16 +62,62 @@ const CreateHover = (knowledge: boolean, level: number, className?: string, key?
         }
     }
 
-    return <ClickableTooltip key={key} knowledge={knowledge} level={level} element={element} />;
+    return <Tooltip key={key ? key : null} title={getIconDescription(knowledge, level)}>{element}</Tooltip>;
 };
 
-const ClickableTooltip = (props: {key?: number, knowledge: boolean, level: number, element: JSX.Element}) => {
+const CreateClickable = (knowledge: boolean, level: number, className?: string, key?: number): JSX.Element => {
+
+    let element: JSX.Element = <Fragment />;
+    if(knowledge){
+        switch(level){
+            case 0: element = <K0 className={className} />; break;
+            case 1: element = <K1 className={className} />; break;
+            case 2: element = <K2 className={className} />; break;
+            case 3: element = <K3 className={className} />; break;
+            case 4: element = <K4 className={className} />; break;
+            case 5: element = <K5 className={className} />; break;
+        }
+    } else {
+        switch(level){
+            case 0: element = <M0 className={className} />; break;
+            case 1: element = <M1 className={className} />; break;
+            case 2: element = <M2 className={className} />; break;
+            case 3: element = <M3 className={className} />; break;
+            case 4: element = <M4 className={className} />; break;
+            case 5: element = <M5 className={className} />; break;
+        }
+    }
+
+    return <ClickableTooltip key={`${getIconDescription(knowledge, level)}-${key}`} knowledge={knowledge} level={level} element={element} />;
+};
+
+const useStyles = makeStyles(theme => ({
+    tooltip: {
+        backgroundColor: KnowitColors.white,
+        padding: 5,
+        paddingLeft: 10,
+        paddingRight: 10,
+        opacity: 0.9,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderStyle: "solid",
+        color: KnowitColors.darkBrown,
+        borderColor: KnowitColors.darkBrown
+    },
+}));
+
+const ClickableTooltip = (props: {knowledge: boolean, level: number, element: JSX.Element}) => {
     const [isOpen, setIsOpen] = useState<boolean>(false);
     const handleClick = () => {
         setIsOpen(true);
         setTimeout(() => setIsOpen(false), 2000);
     }
-    return <Tooltip onClick={handleClick} open={isOpen} disableTouchListener={false} key={props.key ? props.key : null} title={getIconDescription(props.knowledge, props.level)}>{props.element}</Tooltip>;
+
+    const classes = useStyles();
+
+    const desc = getIconDescription(props.knowledge, props.level);
+
+    return <Tooltip classes={classes} onClick={handleClick} placement={"top"} open={isOpen} disableTouchListener={false} title={desc}>{props.element}</Tooltip>;
 }
 
 export {K0, K1, K2, K3, K4, K5, M0, M1, M2, M3, M4, M5}
@@ -87,6 +134,22 @@ export const GetIcons = (knowledge: boolean, className?: string): JSX.Element[]
     return els;
 };
 
-export const GetIcon = (knowledge: boolean, level: number, className?: string): JSX.Element => {
+export const GetClickableIcons = (knowledge: boolean, className?: string): JSX.Element[] => {
+    let els = [
+        GetClickableIcon(knowledge, 0, className, 0),
+        GetClickableIcon(knowledge, 1, className, 1),
+        GetClickableIcon(knowledge, 2, className, 2),
+        GetClickableIcon(knowledge, 3, className, 3),
+        GetClickableIcon(knowledge, 4, className, 4),
+        GetClickableIcon(knowledge, 5, className, 5)
+    ];
+    return els;
+};
+
+export const GetIcon = (knowledge: boolean, level: number, className?: string, key?: number): JSX.Element => {
     return CreateHover(knowledge, level, className);
 };
+
+export const GetClickableIcon = (knowledge: boolean, level: number, className?: string, key?: number): JSX.Element => {
+    return CreateClickable(knowledge, level, className);
+};