🔧 Improve Summary styling

code/frontend/src/components/base/Summary.js

@@ -7,6 +7,7 @@ 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 upperLabel - The label for the upper value.
@@ -20,7 +21,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
  * @constructor
  */
 export default function Summary(
-    { title, subtitle, upperLabel, upperValue, lowerLabel, lowerValue, buttons, className, ...props },
+    { icon, title, subtitle, upperLabel, upperValue, lowerLabel, lowerValue, buttons, className, ...props },
 ) {
     return (
         <div className={classNames(Style.Summary, className)} {...props}>

code/frontend/src/components/base/Summary.module.css

@@ -45,7 +45,6 @@
 
 .Title {
     grid-area: c;
-    font-size: large;
     align-self: flex-end;
 }
 
@@ -65,11 +64,17 @@
     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 {

code/frontend/src/components/interactive/SummaryRepository.js

@@ -1,12 +1,10 @@
 import React, { useContext } from "react"
-import Style from "./RepositorySummaryBase.module.css"
-import classNames from "classnames"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import Button from "../base/Button"
 import { faArchive, faFolder, faFolderOpen, faPencilAlt, faTrash } from "@fortawesome/free-solid-svg-icons"
 import { useHistory } from "react-router"
 import useBackend from "../../hooks/useBackend"
 import ContextUser from "../../contexts/ContextUser"
+import Summary from "../base/Summary"
 
 
 /**
@@ -50,36 +48,7 @@ export default function SummaryRepository(
         await refresh()
     }
 
-    return (
-        <div className={classNames(Style.RepositorySummary, className)} {...props}>
-            <div className={Style.Left}>
-                <div className={Style.IconContainer}>
-                    <FontAwesomeIcon
-                        icon={repo.is_active ? faFolderOpen : faFolder}
-                    />
-                </div>
-                <div className={Style.Title}>
-                    {repo.name}
-                </div>
-                <div className={Style.Author}>
-                    {repo.owner.username}
-                </div>
-            </div>
-            <div className={Style.Middle}>
-                <div className={classNames(Style.MiddleLabel, Style.MiddleTop)}>
-                    Start:
-                </div>
-                <div className={classNames(Style.MiddleValue, Style.MiddleTop)}>
-                    {repo.start}
-                </div>
-                <div className={classNames(Style.MiddleLabel, Style.MiddleBot)}>
-                    End:
-                </div>
-                <div className={classNames(Style.MiddleValue, Style.MiddleBot)}>
-                    {repo.end}
-                </div>
-            </div>
-            <div className={Style.Right}>
+    const buttons = <>
         {canDelete ?
          <Button
              color={"Red"}
@@ -107,7 +76,19 @@ export default function SummaryRepository(
              {repo.is_active ? "Archive" : "Unarchive"}
          </Button>
                     : null}
-            </div>
-        </div>
+    </>
+
+    return (
+        <Summary
+            icon={repo.is_active ? faFolderOpen : faFolder}
+            title={repo.name}
+            subtitle={repo.author}
+            upperLabel={"Start"}
+            upperValue={repo.start ? new Date(repo.start).toLocaleString() : null}
+            lowerLabel={"End"}
+            lowerValue={repo.end ? new Date(repo.end).toLocaleString() : null}
+            buttons={buttons}
+            {...props}
+        />
     )
 }