From ab538e6b2b2e1ac08270849e6ca741b727434c28 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Tue, 18 May 2021 15:16:43 +0200
Subject: [PATCH 01/11] =?UTF-8?q?=F0=9F=8C=90=20Revert=20error=20translati?=
 =?UTF-8?q?on?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nest_frontend/hooks/useRepositoryEditor.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nest_frontend/hooks/useRepositoryEditor.js b/nest_frontend/hooks/useRepositoryEditor.js
index 91d8325..387ad3b 100644
--- a/nest_frontend/hooks/useRepositoryEditor.js
+++ b/nest_frontend/hooks/useRepositoryEditor.js
@@ -8,7 +8,7 @@ import ContextRepositoryEditor from "../contexts/ContextRepositoryEditor"
 export default function useRepositoryEditor() {
     const context = useContext(ContextRepositoryEditor)
     if(!context) {
-        throw new Error("Questo componente deve essere messo in un RepositoryEditor.")
+        throw new Error("This component must be placed inside a RepositoryEditor.")
     }
     return context
 }
\ No newline at end of file

From 22e8a3b94adb458ea3fbf13d9542193843aceaba Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Tue, 18 May 2021 16:10:32 +0200
Subject: [PATCH 02/11] =?UTF-8?q?=F0=9F=9A=A7=20Start=20working=20on=20Rep?=
 =?UTF-8?q?ositoryViewer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/providers/RepositoryViewer.js  | 22 +++++++++++++++++++
 .../providers/RepositoryViewer.module.css     | 16 ++++++++++++++
 .../contexts/ContextRepositoryViewer.js       |  7 ++++++
 nest_frontend/hooks/useRepositoryViewer.js    | 14 ++++++++++++
 4 files changed, 59 insertions(+)
 create mode 100644 nest_frontend/components/providers/RepositoryViewer.js
 create mode 100644 nest_frontend/components/providers/RepositoryViewer.module.css
 create mode 100644 nest_frontend/contexts/ContextRepositoryViewer.js
 create mode 100644 nest_frontend/hooks/useRepositoryViewer.js

diff --git a/nest_frontend/components/providers/RepositoryViewer.js b/nest_frontend/components/providers/RepositoryViewer.js
new file mode 100644
index 0000000..7d0fa6d
--- /dev/null
+++ b/nest_frontend/components/providers/RepositoryViewer.js
@@ -0,0 +1,22 @@
+import React  from "react"
+import Style from "./RepositoryViewer.module.css"
+import classNames from "classnames"
+import ContextRepositoryViewer from "../../contexts/ContextRepositoryViewer"
+
+
+export default function RepositoryViewer({
+                                             id,
+                                         }) {
+    return (
+        <ContextRepositoryViewer.Provider
+            value={{
+                id,
+
+            }}
+        >
+            <div className={classNames(Style.RepositoryViewer, className)}>
+
+            </div>
+        </ContextRepositoryViewer.Provider>
+    )
+}
diff --git a/nest_frontend/components/providers/RepositoryViewer.module.css b/nest_frontend/components/providers/RepositoryViewer.module.css
new file mode 100644
index 0000000..9bc7ea5
--- /dev/null
+++ b/nest_frontend/components/providers/RepositoryViewer.module.css
@@ -0,0 +1,16 @@
+.RepositoryViewer {
+    display: grid;
+
+    grid-template-areas:
+        "b c d"
+        "b e e"
+        "b f f"
+        "b g g";
+    grid-template-columns: 400px 1fr 1fr;
+    grid-template-rows: auto auto 1fr auto;
+
+    grid-gap: 10px;
+
+    width: 100%;
+    height: 100%;
+}
\ No newline at end of file
diff --git a/nest_frontend/contexts/ContextRepositoryViewer.js b/nest_frontend/contexts/ContextRepositoryViewer.js
new file mode 100644
index 0000000..abba378
--- /dev/null
+++ b/nest_frontend/contexts/ContextRepositoryViewer.js
@@ -0,0 +1,7 @@
+import { createContext } from "react"
+
+
+/**
+ * @todo Document this.
+ */
+export default createContext(null)
diff --git a/nest_frontend/hooks/useRepositoryViewer.js b/nest_frontend/hooks/useRepositoryViewer.js
new file mode 100644
index 0000000..bec8ab6
--- /dev/null
+++ b/nest_frontend/hooks/useRepositoryViewer.js
@@ -0,0 +1,14 @@
+import { useContext } from "react"
+import ContextRepositoryViewer from "../contexts/ContextRepositoryViewer"
+
+
+/**
+ * @todo Document this.
+ */
+export default function useRepositoryViewer() {
+    const context = useContext(ContextRepositoryViewer)
+    if(!context) {
+        throw new Error("This component must be placed inside a RepositoryViewer.")
+    }
+    return context
+}

From e2c32ad9c35333b8969d67bb0648732de8120489 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Tue, 18 May 2021 16:23:54 +0200
Subject: [PATCH 03/11] =?UTF-8?q?=F0=9F=94=A7=20Refactor=20Badge=20into=20?=
 =?UTF-8?q?its=20own=20base=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nest_frontend/components/base/Badge.js        | 28 ++++++++++++++
 .../components/base/Badge.module.css          | 38 +++++++++++++++++++
 .../{ConditionBadge.js => BadgeCondition.js}  | 31 ++++++---------
 ...e.module.css => BadgeCondition.module.css} |  0
 .../components/interactive/BoxConditions.js   |  6 +--
 5 files changed, 81 insertions(+), 22 deletions(-)
 create mode 100644 nest_frontend/components/base/Badge.js
 create mode 100644 nest_frontend/components/base/Badge.module.css
 rename nest_frontend/components/interactive/{ConditionBadge.js => BadgeCondition.js} (70%)
 rename nest_frontend/components/interactive/{ConditionBadge.module.css => BadgeCondition.module.css} (100%)

diff --git a/nest_frontend/components/base/Badge.js b/nest_frontend/components/base/Badge.js
new file mode 100644
index 0000000..c339860
--- /dev/null
+++ b/nest_frontend/components/base/Badge.js
@@ -0,0 +1,28 @@
+import React from "react"
+import Style from "./Badge.module.css"
+import classNames from "classnames"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import ButtonSmallX from "./ButtonSmallX"
+
+
+export default function Badge({ icon, color, onClickDelete, children, className, ...props }) {
+    return (
+        <div className={classNames(Style.Badge, Style[`Badge${color}`], className)} {...props}>
+            <div className={Style.Icon}>
+                <FontAwesomeIcon icon={icon}/>
+            </div>
+            <div className={Style.Text}>
+                {children}
+            </div>
+            {
+                onClickDelete ?
+                    <div>
+                        <ButtonSmallX
+                            onClick={onClickDelete}
+                        />
+                    </div>
+                : null
+            }
+        </div>
+    )
+}
diff --git a/nest_frontend/components/base/Badge.module.css b/nest_frontend/components/base/Badge.module.css
new file mode 100644
index 0000000..087d8ce
--- /dev/null
+++ b/nest_frontend/components/base/Badge.module.css
@@ -0,0 +1,38 @@
+.Badge {
+    display: inline-flex;
+
+    gap: 5px;
+    padding: 0 5px;
+    border-radius: 25px;
+    margin: 0 2px;
+}
+
+.BadgeRed {
+    background-color: var(--bg-red);
+    color: var(--fg-red)
+}
+
+.BadgeYellow {
+    background-color: var(--bg-yellow);
+    color: var(--fg-yellow)
+}
+
+.BadgeGrey {
+    background-color: var(--bg-grey);
+    color: var(--fg-grey)
+}
+
+.BadgeGreen {
+    background-color: var(--bg-green);
+    color: var(--fg-green)
+}
+
+.Text {
+    max-width: 350px;
+    overflow-x: hidden;
+}
+
+.Icon {
+    width: 15px;
+    text-align: center;
+}
diff --git a/nest_frontend/components/interactive/ConditionBadge.js b/nest_frontend/components/interactive/BadgeCondition.js
similarity index 70%
rename from nest_frontend/components/interactive/ConditionBadge.js
rename to nest_frontend/components/interactive/BadgeCondition.js
index 973cede..40c40d0 100644
--- a/nest_frontend/components/interactive/ConditionBadge.js
+++ b/nest_frontend/components/interactive/BadgeCondition.js
@@ -1,10 +1,11 @@
 import React, { useContext } from "react"
-import Style from "./ConditionBadge.module.css"
+import Style from "./BadgeCondition.module.css"
 import classNames from "classnames"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import ButtonSmallX from "../base/ButtonSmallX"
 import { faAt, faClock, faGlobe, faHashtag, faMapPin } from "@fortawesome/free-solid-svg-icons"
 import ContextRepositoryEditor from "../../contexts/ContextRepositoryEditor"
+import Badge from "../base/Badge"
 
 
 const CONDITION_COLORS = {
@@ -32,7 +33,7 @@ const CONDITION_ICONS = {
  * @returns {JSX.Element}
  * @constructor
  */
-export default function ConditionBadge({ ...condition }) {
+export default function BadgeCondition({ ...condition }) {
     const { id, type, content } = condition
     const color = CONDITION_COLORS[type]
     const icon = CONDITION_ICONS[type]
@@ -53,24 +54,16 @@ export default function ConditionBadge({ ...condition }) {
     }
 
     return (
-        <div
+        <Badge
             title={id ? `💠 Condition ID: ${id}` : "✨ New Condition"}
-            className={classNames(Style.ConditionBadge, Style[`ConditionBadge${color}`])}
+            color={color}
+            icon={icon}
+            onClickDelete={() => {
+                console.debug(`Removing Condition: `, condition)
+                removeRawCondition(condition)
+            }}
         >
-            <div className={Style.Icon}>
-                <FontAwesomeIcon icon={icon}/>
-            </div>
-            <div className={Style.Text}>
-                {displayedContent}
-            </div>
-            <div>
-                <ButtonSmallX
-                    onClick={() => {
-                        console.debug(`Removing Condition: `, condition)
-                        removeRawCondition(condition)
-                    }}
-                />
-            </div>
-        </div>
+            {displayedContent}
+        </Badge>
     )
 }
diff --git a/nest_frontend/components/interactive/ConditionBadge.module.css b/nest_frontend/components/interactive/BadgeCondition.module.css
similarity index 100%
rename from nest_frontend/components/interactive/ConditionBadge.module.css
rename to nest_frontend/components/interactive/BadgeCondition.module.css
diff --git a/nest_frontend/components/interactive/BoxConditions.js b/nest_frontend/components/interactive/BoxConditions.js
index 92bf5cd..91ab66d 100644
--- a/nest_frontend/components/interactive/BoxConditions.js
+++ b/nest_frontend/components/interactive/BoxConditions.js
@@ -1,12 +1,12 @@
 import React, { useContext } from "react"
 import BoxFull from "../base/BoxFull"
-import ConditionBadge from "./ConditionBadge"
+import BadgeCondition from "./BadgeCondition"
 import useRepositoryEditor from "../../hooks/useRepositoryEditor"
 import ContextLanguage from "../../contexts/ContextLanguage"
 
 
 /**
- * A box which renders all conditions of the {@link RepositoryEditor} as {@link ConditionBadge}s.
+ * A box which renders all conditions of the {@link RepositoryEditor} as {@link BadgeCondition}s.
  *
  * @param props
  * @returns {JSX.Element}
@@ -16,7 +16,7 @@ export default function BoxConditions({ ...props }) {
     const { conditions } = useRepositoryEditor()
     const { strings } = useContext(ContextLanguage)
 
-    const badges = conditions.map((cond, pos) => <ConditionBadge key={pos} {...cond}/>)
+    const badges = conditions.map((cond, pos) => <BadgeCondition key={pos} {...cond}/>)
 
     return (
         <BoxFull header={strings.conditions} {...props}>

From bae0d9b5a55b6590ed44ee0ea90a18fa7e799eeb Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Tue, 18 May 2021 16:26:23 +0200
Subject: [PATCH 04/11] =?UTF-8?q?=F0=9F=A7=B9=20Remove=20unused=20imports?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nest_frontend/components/interactive/BadgeCondition.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/nest_frontend/components/interactive/BadgeCondition.js b/nest_frontend/components/interactive/BadgeCondition.js
index 40c40d0..4b8f40f 100644
--- a/nest_frontend/components/interactive/BadgeCondition.js
+++ b/nest_frontend/components/interactive/BadgeCondition.js
@@ -1,8 +1,4 @@
 import React, { useContext } from "react"
-import Style from "./BadgeCondition.module.css"
-import classNames from "classnames"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import ButtonSmallX from "../base/ButtonSmallX"
 import { faAt, faClock, faGlobe, faHashtag, faMapPin } from "@fortawesome/free-solid-svg-icons"
 import ContextRepositoryEditor from "../../contexts/ContextRepositoryEditor"
 import Badge from "../base/Badge"

From 7903b5517a8aefb246419a2268785a6d60e8f4d6 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Tue, 18 May 2021 16:28:51 +0200
Subject: [PATCH 05/11] =?UTF-8?q?=F0=9F=93=94=20Document=20Badge?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nest_frontend/components/base/Badge.js               | 12 ++++++++++++
 .../components/interactive/BadgeCondition.js         |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/nest_frontend/components/base/Badge.js b/nest_frontend/components/base/Badge.js
index c339860..86006ca 100644
--- a/nest_frontend/components/base/Badge.js
+++ b/nest_frontend/components/base/Badge.js
@@ -5,6 +5,18 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import ButtonSmallX from "./ButtonSmallX"
 
 
+/**
+ * A small colored badge.
+ *
+ * @param icon - The icon that the badge should have on the left.
+ * @param color - The color that the badge should have.
+ * @param onClickDelete - The action to perform when the X button is clicked. If undefined, the X button won't be shown.
+ * @param children - The text of the badge.
+ * @param className - Additional class(es) to append to the badge.
+ * @param props - Additional props to pass to the badge.
+ * @returns {JSX.Element}
+ * @constructor
+ */
 export default function Badge({ icon, color, onClickDelete, children, className, ...props }) {
     return (
         <div className={classNames(Style.Badge, Style[`Badge${color}`], className)} {...props}>
diff --git a/nest_frontend/components/interactive/BadgeCondition.js b/nest_frontend/components/interactive/BadgeCondition.js
index 4b8f40f..63a01fa 100644
--- a/nest_frontend/components/interactive/BadgeCondition.js
+++ b/nest_frontend/components/interactive/BadgeCondition.js
@@ -23,7 +23,7 @@ const CONDITION_ICONS = {
 
 
 /**
- * A small colored badge representing a Condition for a filter.
+ * A {@link Badge} representing a Condition for a filter.
  *
  * @param condition - The Condition that this badge represents.
  * @returns {JSX.Element}

From a74a2c3e12e00fa5b87a5c34c0aca5900e24a7b0 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Tue, 18 May 2021 16:31:00 +0200
Subject: [PATCH 06/11] =?UTF-8?q?=F0=9F=94=A7=20Make=20clickable=20buttons?=
 =?UTF-8?q?=20more=20apparent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nest_frontend/components/base/Button.module.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/nest_frontend/components/base/Button.module.css b/nest_frontend/components/base/Button.module.css
index 3afae8a..72f5ebf 100644
--- a/nest_frontend/components/base/Button.module.css
+++ b/nest_frontend/components/base/Button.module.css
@@ -15,6 +15,14 @@
     opacity: 0.5;
 }
 
+.Button:hover {
+    filter: brightness(110%);
+}
+
+.Button:active {
+    filter: brightness(125%);
+}
+
 .Button:focus-visible {
     outline: 4px solid var(--outline);
 }

From 9dcb52f8c18d00b2b98ae9ce99c6fd2f20839b8f Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Tue, 18 May 2021 16:35:32 +0200
Subject: [PATCH 07/11] =?UTF-8?q?=F0=9F=94=A7=20Make=20clickable=20ButtonS?=
 =?UTF-8?q?mallX=20more=20apparent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nest_frontend/components/base/ButtonSmallX.module.css | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/nest_frontend/components/base/ButtonSmallX.module.css b/nest_frontend/components/base/ButtonSmallX.module.css
index 7b01adf..75274c1 100644
--- a/nest_frontend/components/base/ButtonSmallX.module.css
+++ b/nest_frontend/components/base/ButtonSmallX.module.css
@@ -12,12 +12,15 @@
     top: -1px;
 }
 
-.ButtonSmallX:focus {
-    outline: none;
+.ButtonSmallX:hover {
     background-color: var(--bg-field-on);
     color: var(--fg-field-on);
 }
 
+.ButtonSmallX:focus {
+    outline: none;
+}
+
 .ButtonSmallX:focus-visible {
     outline: 2px dashed var(--outline);
 }

From cc57f0d66d57c655e825df19b954bddd83ddea33 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Tue, 18 May 2021 16:53:42 +0200
Subject: [PATCH 08/11] =?UTF-8?q?=F0=9F=94=A7=20Refactor=20BoxMap=20into?=
 =?UTF-8?q?=20its=20own=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nest_frontend/components/base/BoxMap.js       | 32 +++++++++++++++
 .../BoxMap.module.css}                        |  5 +--
 .../components/interactive/BoxConditionMap.js | 41 ++++++-------------
 3 files changed, 46 insertions(+), 32 deletions(-)
 create mode 100644 nest_frontend/components/base/BoxMap.js
 rename nest_frontend/components/{interactive/BoxConditionMap.module.css => base/BoxMap.module.css} (79%)

diff --git a/nest_frontend/components/base/BoxMap.js b/nest_frontend/components/base/BoxMap.js
new file mode 100644
index 0000000..cf8cf43
--- /dev/null
+++ b/nest_frontend/components/base/BoxMap.js
@@ -0,0 +1,32 @@
+import React from "react"
+import Style from "./BoxMap.module.css"
+import BoxFull from "./BoxFull"
+import { MapContainer, TileLayer } from "react-leaflet"
+
+
+export default function BoxMap({ header, setMap, startingPosition, startingZoom, button, ...props }) {
+    return (
+        <BoxFull
+            header={header}
+            childrenClassName={Style.BoxMapContents}
+            {...props}
+        >
+            <MapContainer
+                center={startingPosition}
+                zoom={startingZoom}
+                className={Style.MapContainer}
+                whenCreated={setMap}
+            >
+                <TileLayer
+                    attribution='(c) <a href="https://osm.org/copyright">OpenStreetMap contributors</a>'
+                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                />
+                <div className={"leaflet-top leaflet-right"}>
+                    <div className={"leaflet-control"}>
+                        {button}
+                    </div>
+                </div>
+            </MapContainer>
+        </BoxFull>
+    )
+}
diff --git a/nest_frontend/components/interactive/BoxConditionMap.module.css b/nest_frontend/components/base/BoxMap.module.css
similarity index 79%
rename from nest_frontend/components/interactive/BoxConditionMap.module.css
rename to nest_frontend/components/base/BoxMap.module.css
index dcb726c..8a33217 100644
--- a/nest_frontend/components/interactive/BoxConditionMap.module.css
+++ b/nest_frontend/components/base/BoxMap.module.css
@@ -1,4 +1,4 @@
-.BoxConditionMapContents {
+.BoxMapContents {
     display: flex;
     flex-direction: column;
     padding: 0;
@@ -9,6 +9,3 @@
     height: 300px;
     border-radius: 0 0 25px 25px;
 }
-
-.Button {
-}
\ No newline at end of file
diff --git a/nest_frontend/components/interactive/BoxConditionMap.js b/nest_frontend/components/interactive/BoxConditionMap.js
index 0cf8bdc..1315b4e 100644
--- a/nest_frontend/components/interactive/BoxConditionMap.js
+++ b/nest_frontend/components/interactive/BoxConditionMap.js
@@ -1,13 +1,11 @@
 import React, { useCallback, useContext, useEffect, useState } from "react"
-import BoxFull from "../base/BoxFull"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faMapPin, faPlus } from "@fortawesome/free-solid-svg-icons"
-import Style from "./BoxConditionMap.module.css"
 import ButtonIconOnly from "../base/ButtonIconOnly"
-import { MapContainer, TileLayer } from "react-leaflet"
 import useRepositoryEditor from "../../hooks/useRepositoryEditor"
 import Condition from "../../utils/Condition"
 import ContextLanguage from "../../contexts/ContextLanguage"
+import BoxMap from "../base/BoxMap"
 
 
 const STARTING_POSITION = { lat: 41.89309, lng: 12.48289 }
@@ -99,7 +97,7 @@ export default function BoxConditionMap({ ...props }) {
     }
 
     return (
-        <BoxFull
+        <BoxMap
             header={
                 <span>
                     {strings.searchBy}
@@ -109,30 +107,17 @@ export default function BoxConditionMap({ ...props }) {
                     {strings.byZone}
                 </span>
             }
-            childrenClassName={Style.BoxConditionMapContents}
-            {...props}
-        >
-            <MapContainer
-                center={STARTING_POSITION}
-                zoom={STARTING_ZOOM}
-                className={Style.MapContainer}
-                whenCreated={setMap}
-            >
-                <TileLayer
-                    attribution='(c) <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
-                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            startingPosition={STARTING_POSITION}
+            startingZoom={STARTING_ZOOM}
+            setMap={setMap}
+            button={
+                <ButtonIconOnly
+                    icon={faPlus}
+                    color={"Green"}
+                    onClick={onButtonClick}
                 />
-                <div className={"leaflet-top leaflet-right"}>
-                    <div className={"leaflet-control"}>
-                        <ButtonIconOnly
-                            className={Style.Button}
-                            icon={faPlus}
-                            color={"Green"}
-                            onClick={onButtonClick}
-                        />
-                    </div>
-                </div>
-            </MapContainer>
-        </BoxFull>
+            }
+            {...props}
+        />
     )
 }

From a4bd1d2ab7739135954a4248d4d6bd36b728c010 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Tue, 18 May 2021 16:54:44 +0200
Subject: [PATCH 09/11] =?UTF-8?q?=F0=9F=94=A7=20Allow=20adding=20more=20co?=
 =?UTF-8?q?mponents=20to=20BoxMap?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nest_frontend/components/base/BoxMap.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/nest_frontend/components/base/BoxMap.js b/nest_frontend/components/base/BoxMap.js
index cf8cf43..5dda737 100644
--- a/nest_frontend/components/base/BoxMap.js
+++ b/nest_frontend/components/base/BoxMap.js
@@ -4,7 +4,7 @@ import BoxFull from "./BoxFull"
 import { MapContainer, TileLayer } from "react-leaflet"
 
 
-export default function BoxMap({ header, setMap, startingPosition, startingZoom, button, ...props }) {
+export default function BoxMap({ header, setMap, startingPosition, startingZoom, button, children, additions, ...props }) {
     return (
         <BoxFull
             header={header}
@@ -21,6 +21,7 @@ export default function BoxMap({ header, setMap, startingPosition, startingZoom,
                     attribution='(c) <a href="https://osm.org/copyright">OpenStreetMap contributors</a>'
                     url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                 />
+                {additions}
                 <div className={"leaflet-top leaflet-right"}>
                     <div className={"leaflet-control"}>
                         {button}

From d38caffb0a310c462b5219891078256177d2c57e Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Tue, 18 May 2021 16:57:43 +0200
Subject: [PATCH 10/11] =?UTF-8?q?=E2=9C=85=20Resolve=20most=20TODOs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nest_frontend/components/base/Button.module.css         | 2 --
 nest_frontend/components/base/Slider.js                 | 2 +-
 nest_frontend/components/interactive/BoxConditionMap.js | 1 -
 nest_frontend/components/interactive/Sidebar.js         | 1 -
 nest_frontend/contexts/ContextRepositoryEditor.js       | 2 +-
 nest_frontend/contexts/ContextRepositoryViewer.js       | 2 +-
 nest_frontend/hooks/useRepositoryEditor.js              | 2 +-
 nest_frontend/hooks/useRepositoryViewer.js              | 2 +-
 8 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/nest_frontend/components/base/Button.module.css b/nest_frontend/components/base/Button.module.css
index 72f5ebf..c3f74f1 100644
--- a/nest_frontend/components/base/Button.module.css
+++ b/nest_frontend/components/base/Button.module.css
@@ -53,8 +53,6 @@
 
 .Icon {
     font-size: large;
-
-    /* TODO: non so quanto sia una buona idea, ma funziona accettabilmente */
     line-height: 0;
     vertical-align: sub;
 }
\ No newline at end of file
diff --git a/nest_frontend/components/base/Slider.js b/nest_frontend/components/base/Slider.js
index e6689ea..f7f9441 100644
--- a/nest_frontend/components/base/Slider.js
+++ b/nest_frontend/components/base/Slider.js
@@ -6,7 +6,7 @@ import classNames from "classnames"
 /**
  * A slider that allows to select a numeric value in a range.
  *
- * @todo Custom styling only works on Firefox!
+ * Custom styling only works on Firefox!
  *
  * @param className - Additional class(es) to add to the element.
  * @param props - Additional props to pass to the element.
diff --git a/nest_frontend/components/interactive/BoxConditionMap.js b/nest_frontend/components/interactive/BoxConditionMap.js
index 1315b4e..21c5d1a 100644
--- a/nest_frontend/components/interactive/BoxConditionMap.js
+++ b/nest_frontend/components/interactive/BoxConditionMap.js
@@ -11,7 +11,6 @@ import BoxMap from "../base/BoxMap"
 const STARTING_POSITION = { lat: 41.89309, lng: 12.48289 }
 const STARTING_ZOOM = 3
 
-// FIXME: this only works correctly at the equator!
 /**
  * https://wiki.openstreetmap.org/wiki/Zoom_levels
  */
diff --git a/nest_frontend/components/interactive/Sidebar.js b/nest_frontend/components/interactive/Sidebar.js
index a845cef..4a48c4d 100644
--- a/nest_frontend/components/interactive/Sidebar.js
+++ b/nest_frontend/components/interactive/Sidebar.js
@@ -11,7 +11,6 @@ import ContextLanguage from "../../contexts/ContextLanguage"
 /**
  * The sidebar of the website, with the logo, buttons to switch between the various pages and a notification counter.
  *
- * @todo The notification counter is still missing.
  * @param className - Additional class(es) to be added to the outer container.
  * @param props - Additional props to be passed to the outer container.
  * @returns {JSX.Element}
diff --git a/nest_frontend/contexts/ContextRepositoryEditor.js b/nest_frontend/contexts/ContextRepositoryEditor.js
index abba378..c8db99b 100644
--- a/nest_frontend/contexts/ContextRepositoryEditor.js
+++ b/nest_frontend/contexts/ContextRepositoryEditor.js
@@ -2,6 +2,6 @@ import { createContext } from "react"
 
 
 /**
- * @todo Document this.
+ * Context to quickly pass props to the children of {@link RepositoryEditor}.
  */
 export default createContext(null)
diff --git a/nest_frontend/contexts/ContextRepositoryViewer.js b/nest_frontend/contexts/ContextRepositoryViewer.js
index abba378..a425822 100644
--- a/nest_frontend/contexts/ContextRepositoryViewer.js
+++ b/nest_frontend/contexts/ContextRepositoryViewer.js
@@ -2,6 +2,6 @@ import { createContext } from "react"
 
 
 /**
- * @todo Document this.
+ * Context to quickly pass props to the children of {@link RepositoryViewer}.
  */
 export default createContext(null)
diff --git a/nest_frontend/hooks/useRepositoryEditor.js b/nest_frontend/hooks/useRepositoryEditor.js
index 387ad3b..143f665 100644
--- a/nest_frontend/hooks/useRepositoryEditor.js
+++ b/nest_frontend/hooks/useRepositoryEditor.js
@@ -3,7 +3,7 @@ import ContextRepositoryEditor from "../contexts/ContextRepositoryEditor"
 
 
 /**
- * @todo Document this.
+ * Hook to quickly use {@link ContextRepositoryEditor}.
  */
 export default function useRepositoryEditor() {
     const context = useContext(ContextRepositoryEditor)
diff --git a/nest_frontend/hooks/useRepositoryViewer.js b/nest_frontend/hooks/useRepositoryViewer.js
index bec8ab6..f4ae358 100644
--- a/nest_frontend/hooks/useRepositoryViewer.js
+++ b/nest_frontend/hooks/useRepositoryViewer.js
@@ -3,7 +3,7 @@ import ContextRepositoryViewer from "../contexts/ContextRepositoryViewer"
 
 
 /**
- * @todo Document this.
+ * Hook to quickly use {@link ContextRepositoryViewer}.
  */
 export default function useRepositoryViewer() {
     const context = useContext(ContextRepositoryViewer)

From f6bf948742a159a0e330535e27027e22bcfbe4da Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Tue, 18 May 2021 17:51:36 +0200
Subject: [PATCH 11/11] =?UTF-8?q?=F0=9F=94=A7=20Refactor=20summary=20in=20?=
 =?UTF-8?q?multiple=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nest_frontend/components/base/Button.js       |  12 +-
 .../components/base/Button.module.css         |   8 --
 .../components/base/ButtonSidebar.js          |   2 +-
 nest_frontend/components/base/Summary.js      |  59 ----------
 .../components/base/Summary.module.css        | 110 ------------------
 .../components/base/summary/SummaryBase.js    |  12 ++
 .../base/summary/SummaryBase.module.css       |   8 ++
 .../components/base/summary/SummaryButton.js  |  11 ++
 .../base/summary/SummaryButton.module.css     |   8 ++
 .../components/base/summary/SummaryLabels.js  |  23 ++++
 .../base/summary/SummaryLabels.module.css     |  33 ++++++
 .../components/base/summary/SummaryLeft.js    |  25 ++++
 .../base/summary/SummaryLeft.module.css       |  46 ++++++++
 .../components/base/summary/SummaryRight.js   |  12 ++
 .../base/summary/SummaryRight.module.css      |   7 ++
 .../components/base/summary/SummaryText.js    |  12 ++
 .../interactive/BoxRepositoriesActive.js      |   2 +-
 .../interactive/SummaryRepository.js          |  99 ++++++++--------
 .../components/interactive/SummaryUser.js     |  59 +++++-----
 nest_frontend/index.css                       |  12 ++
 20 files changed, 301 insertions(+), 259 deletions(-)
 delete mode 100644 nest_frontend/components/base/Summary.js
 delete mode 100644 nest_frontend/components/base/Summary.module.css
 create mode 100644 nest_frontend/components/base/summary/SummaryBase.js
 create mode 100644 nest_frontend/components/base/summary/SummaryBase.module.css
 create mode 100644 nest_frontend/components/base/summary/SummaryButton.js
 create mode 100644 nest_frontend/components/base/summary/SummaryButton.module.css
 create mode 100644 nest_frontend/components/base/summary/SummaryLabels.js
 create mode 100644 nest_frontend/components/base/summary/SummaryLabels.module.css
 create mode 100644 nest_frontend/components/base/summary/SummaryLeft.js
 create mode 100644 nest_frontend/components/base/summary/SummaryLeft.module.css
 create mode 100644 nest_frontend/components/base/summary/SummaryRight.js
 create mode 100644 nest_frontend/components/base/summary/SummaryRight.module.css
 create mode 100644 nest_frontend/components/base/summary/SummaryText.js

diff --git a/nest_frontend/components/base/Button.js b/nest_frontend/components/base/Button.js
index 1c0dc3f..1692c46 100644
--- a/nest_frontend/components/base/Button.js
+++ b/nest_frontend/components/base/Button.js
@@ -8,6 +8,8 @@ import make_icon from "../../utils/make_icon"
  * A clickable button.
  *
  * @param children - The contents of the button.
+ * @param disabled - Whether the button is disabled or not.
+ * @param onClick - Function to call when the button is clicked. Won't be called if the button is disabled.
  * @param className - Additional class(es) that should be added to the button.
  * @param color - The color of the button. Either `Red`, `Grey`, `Green` or `Yellow`.
  * @param icon - The FontAwesome IconDefinition of the icon that should be rendered in the button.
@@ -15,9 +17,15 @@ import make_icon from "../../utils/make_icon"
  * @returns {JSX.Element}
  * @constructor
  */
-export default function Button({ children, className, color, icon, ...props }) {
+export default function Button({ children, disabled, onClick, className, color, icon, ...props }) {
     return (
-        <button type={"button"} className={classNames(Style.Button, Style[`Button${color}`], className)} {...props}>
+        <button
+            type={"button"}
+            className={classNames(Style.Button, Style[`Button${color}`], disabled ? null : "Clickable", className)}
+            onClick={disabled ? null : onClick}
+            disabled={disabled}
+            {...props}
+        >
             {children} {make_icon(icon, Style.Icon)}
         </button>
     )
diff --git a/nest_frontend/components/base/Button.module.css b/nest_frontend/components/base/Button.module.css
index c3f74f1..134d88f 100644
--- a/nest_frontend/components/base/Button.module.css
+++ b/nest_frontend/components/base/Button.module.css
@@ -15,14 +15,6 @@
     opacity: 0.5;
 }
 
-.Button:hover {
-    filter: brightness(110%);
-}
-
-.Button:active {
-    filter: brightness(125%);
-}
-
 .Button:focus-visible {
     outline: 4px solid var(--outline);
 }
diff --git a/nest_frontend/components/base/ButtonSidebar.js b/nest_frontend/components/base/ButtonSidebar.js
index d0d3ef8..c9b4840 100644
--- a/nest_frontend/components/base/ButtonSidebar.js
+++ b/nest_frontend/components/base/ButtonSidebar.js
@@ -30,7 +30,7 @@ export default function ButtonSidebar({ icon, children, to, className, ...props
 
     return (
         <Link to={to} className={Style.ButtonLink}>
-            <div className={classNames(Style.ButtonSidebar, className)} {...props}>
+            <div className={classNames(Style.ButtonSidebar, "Clickable", className)} {...props}>
                 {make_icon(icon, Style.ButtonIcon)}
                 <div className={Style.ButtonText}>
                     {children}
diff --git a/nest_frontend/components/base/Summary.js b/nest_frontend/components/base/Summary.js
deleted file mode 100644
index ea36ea8..0000000
--- a/nest_frontend/components/base/Summary.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from "react"
-import Style from "./Summary.module.css"
-import classNames from "classnames"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-
-
-/**
- * A long line displaying the summary of a certain entity, such as a repository or an user.
- *
- * @param icon - The icon of the summary.
- * @param title - The title of the summary.
- * @param subtitle - The subtitle of the summary.
- * @param onClick - A function to call when the summary is clicked.
- * @param upperLabel - The label for the upper value.
- * @param upperValue - The upper value.
- * @param lowerLabel - The label for the lower value.
- * @param lowerValue - The lower value.
- * @param buttons - Buttons to add to the right of the summary.
- * @param className - Additional class(es) to add to the summary.
- * @param props - Additional props to pass to the summary.
- * @returns {JSX.Element}
- * @constructor
- */
-export default function Summary(
-    { icon, title, subtitle, onClick, upperLabel, upperValue, lowerLabel, lowerValue, buttons, className, ...props },
-) {
-    return (
-        <div className={classNames(Style.Summary, className)} {...props}>
-            <div className={classNames(Style.Left, onClick ? Style.Clickable : null)} onClick={onClick}>
-                <div className={Style.IconContainer}>
-                    <FontAwesomeIcon icon={icon}/>
-                </div>
-                <div className={Style.Title}>
-                    {title}
-                </div>
-                <div className={Style.Subtitle}>
-                    {subtitle}
-                </div>
-            </div>
-            <div className={Style.Middle}>
-                <div className={classNames(Style.Label, Style.Upper)}>
-                    {upperLabel}
-                </div>
-                <div className={classNames(Style.Value, Style.Upper)}>
-                    {upperValue}
-                </div>
-                <div className={classNames(Style.Label, Style.Lower)}>
-                    {lowerLabel}
-                </div>
-                <div className={classNames(Style.Value, Style.Lower)}>
-                    {lowerValue}
-                </div>
-            </div>
-            <div className={Style.Right}>
-                {buttons}
-            </div>
-        </div>
-    )
-}
diff --git a/nest_frontend/components/base/Summary.module.css b/nest_frontend/components/base/Summary.module.css
deleted file mode 100644
index 9d222e8..0000000
--- a/nest_frontend/components/base/Summary.module.css
+++ /dev/null
@@ -1,110 +0,0 @@
-.Summary {
-    width: 100%;
-    height: 60px;
-
-    margin: 10px 0;
-
-    display: flex;
-}
-
-.Clickable {
-    cursor: pointer;
-}
-
-.Clickable:hover {
-    filter: brightness(110%);
-}
-
-.Left {
-    width: 280px;
-    height: 60px;
-
-    display: grid;
-    grid-template-areas:
-        "a b"
-        "a c"
-        "a d"
-        "a e";
-    grid-template-columns: auto 1fr;
-    grid-template-rows: 5px 1fr 1fr 5px;
-
-    background-color: var(--bg-accent);
-    border-radius: 30px 0 0 30px;
-}
-
-.IconContainer {
-    margin: 5px 15px 5px 5px;
-    width: 50px;
-    height: 50px;
-    border-radius: 50px;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    background-color: var(--bg-light);
-    color: var(--fg-primary);
-
-    font-size: x-large;
-
-    grid-area: a;
-}
-
-.Title {
-    grid-area: c;
-    align-self: flex-end;
-}
-
-.Subtitle {
-    grid-area: d;
-    font-size: small;
-    align-self: flex-start;
-}
-
-.Middle {
-    flex-grow: 1;
-    height: 60px;
-    padding: 5px 20px;
-
-    background-color: var(--bg-light);
-
-    display: grid;
-    grid-template-columns: auto 1fr;
-    grid-template-rows: 1fr 1fr;
-    grid-column-gap: 10px;
-    align-items: center;
-
-    font-size: small;
-
-}
-
-.Middle .Label {
-    grid-column: 1;
-    text-align: right;
-    font-weight: bold;
-}
-
-.Middle .Value {
-    grid-column: 2;
-}
-
-.Middle .Upper {
-    grid-row: 1;
-}
-
-.Middle .Lower {
-    grid-row: 2;
-}
-
-.Right {
-    width: 280px;
-    height: 60px;
-    padding: 5px;
-
-    background-color: var(--bg-accent);
-    border-radius: 0 30px 30px 0;
-
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-}
diff --git a/nest_frontend/components/base/summary/SummaryBase.js b/nest_frontend/components/base/summary/SummaryBase.js
new file mode 100644
index 0000000..ae8d437
--- /dev/null
+++ b/nest_frontend/components/base/summary/SummaryBase.js
@@ -0,0 +1,12 @@
+import React from "react"
+import Style from "./SummaryBase.module.css"
+import classNames from "classnames"
+
+
+export default function SummaryBase({ children, className, ...props }) {
+    return (
+        <div className={classNames(Style.SummaryBase, className)} {...props}>
+            {children}
+        </div>
+    )
+}
diff --git a/nest_frontend/components/base/summary/SummaryBase.module.css b/nest_frontend/components/base/summary/SummaryBase.module.css
new file mode 100644
index 0000000..68d7d5e
--- /dev/null
+++ b/nest_frontend/components/base/summary/SummaryBase.module.css
@@ -0,0 +1,8 @@
+.SummaryBase {
+    width: 100%;
+    height: 60px;
+
+    margin: 10px 0;
+
+    display: flex;
+}
diff --git a/nest_frontend/components/base/summary/SummaryButton.js b/nest_frontend/components/base/summary/SummaryButton.js
new file mode 100644
index 0000000..199ce03
--- /dev/null
+++ b/nest_frontend/components/base/summary/SummaryButton.js
@@ -0,0 +1,11 @@
+import React from "react"
+import Style from "./SummaryButton.module.css"
+import classNames from "classnames"
+import Button from "../Button"
+
+
+export default function SummaryButton({ className, ...props }) {
+    return (
+        <Button className={classNames(Style.SummaryButton, className)} {...props}/>
+    )
+}
diff --git a/nest_frontend/components/base/summary/SummaryButton.module.css b/nest_frontend/components/base/summary/SummaryButton.module.css
new file mode 100644
index 0000000..981ecf2
--- /dev/null
+++ b/nest_frontend/components/base/summary/SummaryButton.module.css
@@ -0,0 +1,8 @@
+.SummaryButton {
+    width: 90px;
+
+    box-shadow: none;
+    border-radius: 0;
+    margin: 0;
+}
+
diff --git a/nest_frontend/components/base/summary/SummaryLabels.js b/nest_frontend/components/base/summary/SummaryLabels.js
new file mode 100644
index 0000000..e733676
--- /dev/null
+++ b/nest_frontend/components/base/summary/SummaryLabels.js
@@ -0,0 +1,23 @@
+import React from "react"
+import Style from "./SummaryLabels.module.css"
+import classNames from "classnames"
+
+
+export default function SummaryLabels({ children, upperLabel, upperValue, lowerLabel, lowerValue, className, ...props }) {
+    return (
+        <div className={classNames(Style.SummaryLabels, className)} {...props}>
+            <div className={classNames(Style.Label, Style.Upper)}>
+                {upperLabel}
+            </div>
+            <div className={classNames(Style.Value, Style.Upper)}>
+                {upperValue}
+            </div>
+            <div className={classNames(Style.Label, Style.Lower)}>
+                {lowerLabel}
+            </div>
+            <div className={classNames(Style.Value, Style.Lower)}>
+                {lowerValue}
+            </div>
+        </div>
+    )
+}
diff --git a/nest_frontend/components/base/summary/SummaryLabels.module.css b/nest_frontend/components/base/summary/SummaryLabels.module.css
new file mode 100644
index 0000000..d1603e1
--- /dev/null
+++ b/nest_frontend/components/base/summary/SummaryLabels.module.css
@@ -0,0 +1,33 @@
+.SummaryLabels {
+    flex-grow: 3;
+
+    padding: 5px 20px;
+
+    background-color: var(--bg-light);
+
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: 1fr 1fr;
+    grid-column-gap: 10px;
+    align-items: center;
+
+    font-size: small;
+}
+
+.Label {
+    grid-column: 1;
+    text-align: right;
+    font-weight: bold;
+}
+
+.Value {
+    grid-column: 2;
+}
+
+.Upper {
+    grid-row: 1;
+}
+
+.Lower {
+    grid-row: 2;
+}
diff --git a/nest_frontend/components/base/summary/SummaryLeft.js b/nest_frontend/components/base/summary/SummaryLeft.js
new file mode 100644
index 0000000..6ece72c
--- /dev/null
+++ b/nest_frontend/components/base/summary/SummaryLeft.js
@@ -0,0 +1,25 @@
+import React from "react"
+import Style from "./SummaryLeft.module.css"
+import classNames from "classnames"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+
+
+export default function SummaryLeft({ icon, title, subtitle, className, onClick, ...props }) {
+    return (
+        <div
+            className={classNames(Style.SummaryLeft, onClick ? "Clickable" : null, className)}
+            onClick={onClick}
+            {...props}
+        >
+            <div className={Style.IconContainer}>
+                <FontAwesomeIcon icon={icon}/>
+            </div>
+            <div className={Style.Title}>
+                {title}
+            </div>
+            <div className={Style.Subtitle}>
+                {subtitle}
+            </div>
+        </div>
+    )
+}
diff --git a/nest_frontend/components/base/summary/SummaryLeft.module.css b/nest_frontend/components/base/summary/SummaryLeft.module.css
new file mode 100644
index 0000000..2cf21a4
--- /dev/null
+++ b/nest_frontend/components/base/summary/SummaryLeft.module.css
@@ -0,0 +1,46 @@
+.SummaryLeft {
+    width: 275px;
+
+    display: grid;
+    grid-template-areas:
+        "a b"
+        "a c"
+        "a d"
+        "a e";
+    grid-template-columns: auto 1fr;
+    grid-template-rows: 5px 1fr 1fr 5px;
+    justify-content: stretch;
+    align-items: stretch;
+
+    background-color: var(--bg-accent);
+    border-radius: 30px 0 0 30px;
+}
+
+.IconContainer {
+    margin: 5px 15px 5px 5px;
+    width: 50px;
+    height: 50px;
+    border-radius: 50px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    background-color: var(--bg-light);
+    color: var(--fg-primary);
+
+    font-size: x-large;
+
+    grid-area: a;
+}
+
+.Title {
+    grid-area: c;
+    align-self: flex-end;
+}
+
+.Subtitle {
+    grid-area: d;
+    font-size: small;
+    align-self: flex-start;
+}
diff --git a/nest_frontend/components/base/summary/SummaryRight.js b/nest_frontend/components/base/summary/SummaryRight.js
new file mode 100644
index 0000000..2c6ec3b
--- /dev/null
+++ b/nest_frontend/components/base/summary/SummaryRight.js
@@ -0,0 +1,12 @@
+import React from "react"
+import Style from "./SummaryRight.module.css"
+import classNames from "classnames"
+
+
+export default function SummaryRight({ children, className, ...props }) {
+    return (
+        <div className={classNames(Style.SummaryRight, className)} {...props}>
+            {children}
+        </div>
+    )
+}
diff --git a/nest_frontend/components/base/summary/SummaryRight.module.css b/nest_frontend/components/base/summary/SummaryRight.module.css
new file mode 100644
index 0000000..2f2973f
--- /dev/null
+++ b/nest_frontend/components/base/summary/SummaryRight.module.css
@@ -0,0 +1,7 @@
+.SummaryRight {
+    min-width: 30px;
+    padding: 5px;
+
+    background-color: var(--bg-accent);
+    border-radius: 0 30px 30px 0;
+}
diff --git a/nest_frontend/components/base/summary/SummaryText.js b/nest_frontend/components/base/summary/SummaryText.js
new file mode 100644
index 0000000..9086edf
--- /dev/null
+++ b/nest_frontend/components/base/summary/SummaryText.js
@@ -0,0 +1,12 @@
+import React from "react"
+import Style from "./SummaryText.module.css"
+import classNames from "classnames"
+
+
+export default function SummaryText({ children, className, ...props }) {
+    return (
+        <div className={classNames(Style.SummaryText, className)} {...props}>
+            {children}
+        </div>
+    )
+}
diff --git a/nest_frontend/components/interactive/BoxRepositoriesActive.js b/nest_frontend/components/interactive/BoxRepositoriesActive.js
index cdf6348..aabfa72 100644
--- a/nest_frontend/components/interactive/BoxRepositoriesActive.js
+++ b/nest_frontend/components/interactive/BoxRepositoriesActive.js
@@ -45,7 +45,7 @@ export default function BoxRepositoriesActive({
                 deleteSelf={() => destroyRepository(repo["id"])}
                 canArchive={true}
                 canEdit={true}
-                canDelete={repo["owner"]["username"] === user["username"]}
+                canDelete={false}
                 running={running}
             />
         ))
diff --git a/nest_frontend/components/interactive/SummaryRepository.js b/nest_frontend/components/interactive/SummaryRepository.js
index c1d9416..46a9543 100644
--- a/nest_frontend/components/interactive/SummaryRepository.js
+++ b/nest_frontend/components/interactive/SummaryRepository.js
@@ -1,9 +1,12 @@
 import React, { useContext } from "react"
-import Button from "../base/Button"
 import { faArchive, faFolder, faFolderOpen, faPencilAlt, faTrash } from "@fortawesome/free-solid-svg-icons"
 import { useHistory } from "react-router"
-import Summary from "../base/Summary"
 import ContextLanguage from "../../contexts/ContextLanguage"
+import SummaryBase from "../base/summary/SummaryBase"
+import SummaryLeft from "../base/summary/SummaryLeft"
+import SummaryLabels from "../base/summary/SummaryLabels"
+import SummaryButton from "../base/summary/SummaryButton"
+import SummaryRight from "../base/summary/SummaryRight"
 
 
 /**
@@ -36,51 +39,51 @@ export default function SummaryRepository(
         history.push(`/repositories/${repo.id}/edit`)
     }
 
-    const buttons = <>
-        {canDelete ?
-         <Button
-             color={"Red"}
-             icon={faTrash}
-             onClick={deleteSelf}
-             disabled={running}
-         >
-             {strings.delete}
-         </Button>
-                   : null}
-        {canEdit ?
-         <Button
-             color={"Yellow"}
-             icon={faPencilAlt}
-             onClick={onEditClick}
-             disabled={running}
-         >
-             {strings.edit}
-         </Button>
-                 : null}
-        {canArchive ?
-         <Button
-             color={"Grey"}
-             icon={faArchive}
-             onClick={archiveSelf}
-             disabled={running}
-         >
-             {strings.archive}
-         </Button>
-                    : null}
-    </>
-
     return (
-        <Summary
-            icon={repo.is_active ? faFolderOpen : faFolder}
-            title={repo.name}
-            subtitle={repo.owner ? repo.owner.username : null}
-            onClick={onRepoClick}
-            upperLabel={strings.created}
-            upperValue={repo.start ? new Date(repo.start).toLocaleString() : null}
-            lowerLabel={strings.archived}
-            lowerValue={repo.end ? new Date(repo.end).toLocaleString() : null}
-            buttons={buttons}
-            {...props}
-        />
+        <SummaryBase>
+            <SummaryLeft
+                icon={repo.is_active ? faFolderOpen : faFolder}
+                title={repo.name}
+                subtitle={repo.owner ? repo.owner.username : null}
+                onClick={onRepoClick}
+            />
+            <SummaryLabels
+                upperLabel={strings.created}
+                upperValue={repo.start ? new Date(repo.start).toLocaleString() : null}
+                lowerLabel={strings.archived}
+                lowerValue={repo.end ? new Date(repo.end).toLocaleString() : null}
+            />
+            {canDelete ?
+             <SummaryButton
+                 color={"Red"}
+                 icon={faTrash}
+                 onClick={deleteSelf}
+                 disabled={running}
+             >
+                 {strings.delete}
+             </SummaryButton>
+                       : null}
+            {canEdit ?
+             <SummaryButton
+                 color={"Yellow"}
+                 icon={faPencilAlt}
+                 onClick={onEditClick}
+                 disabled={running}
+             >
+                 {strings.edit}
+             </SummaryButton>
+                     : null}
+            {canArchive ?
+             <SummaryButton
+                 color={"Grey"}
+                 icon={faArchive}
+                 onClick={archiveSelf}
+                 disabled={running}
+             >
+                 {strings.archive}
+             </SummaryButton>
+                        : null}
+            <SummaryRight/>
+        </SummaryBase>
     )
-}
+}
\ No newline at end of file
diff --git a/nest_frontend/components/interactive/SummaryUser.js b/nest_frontend/components/interactive/SummaryUser.js
index dc341b1..d158ddf 100644
--- a/nest_frontend/components/interactive/SummaryUser.js
+++ b/nest_frontend/components/interactive/SummaryUser.js
@@ -1,41 +1,40 @@
 import React, { useContext } from "react"
-import Summary from "../base/Summary"
 import { faStar, faTrash, faUser } from "@fortawesome/free-solid-svg-icons"
-import Button from "../base/Button"
-import ContextUser from "../../contexts/ContextUser"
 import ContextLanguage from "../../contexts/ContextLanguage"
+import SummaryBase from "../base/summary/SummaryBase"
+import SummaryLeft from "../base/summary/SummaryLeft"
+import SummaryLabels from "../base/summary/SummaryLabels"
+import SummaryButton from "../base/summary/SummaryButton"
+import SummaryRight from "../base/summary/SummaryRight"
 
 
 export default function SummaryUser({ user, destroyUser, running, ...props }) {
-    const { user: loggedUser } = useContext(ContextUser)
     const { strings } = useContext(ContextLanguage)
 
-    const buttons = <>
-        {loggedUser.email !== user.email ?
-         <Button
-             color={"Red"}
-             icon={faTrash}
-             onClick={async event => {
-                 event.stopPropagation()
-                 // TODO: Errors are not caught here. Where should they be displayed?
-                 await destroyUser(user["email"])
-             }}
-             disabled={running}
-         >
-             {strings.delete}
-         </Button>
-                                         : null}
-    </>
-
     return (
-        <Summary
-            icon={user.isAdmin ? faStar : faUser}
-            title={user.username}
-            subtitle={user.email}
-            upperLabel={strings.type}
-            upperValue={user.isAdmin ? strings.admin : strings.user}
-            buttons={buttons}
-            {...props}
-        />
+        <SummaryBase>
+            <SummaryLeft
+                icon={user.isAdmin ? faStar : faUser}
+                title={user.username}
+                subtitle={user.email}
+            />
+            <SummaryLabels
+                upperLabel={strings.type}
+                upperValue={user.isAdmin ? strings.admin : strings.user}
+            />
+             <SummaryButton
+                 color={"Red"}
+                 icon={faTrash}
+                 onClick={async event => {
+                     event.stopPropagation()
+                     // TODO: Errors are not caught here. Where should they be displayed?
+                     await destroyUser(user["email"])
+                 }}
+                 disabled={running}
+             >
+                 {strings.delete}
+             </SummaryButton>
+            <SummaryRight/>
+        </SummaryBase>
     )
 }
diff --git a/nest_frontend/index.css b/nest_frontend/index.css
index fee1d7b..99c0f40 100644
--- a/nest_frontend/index.css
+++ b/nest_frontend/index.css
@@ -83,3 +83,15 @@ h1, h2, h3, h4, h5, h6 {
 
     --outline: black;
 }
+
+.Clickable {
+    cursor: pointer;
+}
+
+.Clickable:hover {
+    filter: brightness(110%);
+}
+
+.Clickable:active {
+    filter: brightness(125%);
+}
\ No newline at end of file