🔧 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,64 +48,47 @@ export default function SummaryRepository(
         await refresh()
     }
 
+    const buttons = <>
+        {canDelete ?
+         <Button
+             color={"Red"}
+             icon={faTrash}
+             onClick={onDeleteClick}
+         >
+             Delete
+         </Button>
+                   : null}
+        {canEdit ?
+         <Button
+             color={"Yellow"}
+             icon={faPencilAlt}
+             onClick={onEditClick}
+         >
+             Edit
+         </Button>
+                 : null}
+        {canArchive ?
+         <Button
+             color={"Grey"}
+             icon={faArchive}
+             onClick={repo.is_active ? onArchiveClick : onUnarchiveClick}
+         >
+             {repo.is_active ? "Archive" : "Unarchive"}
+         </Button>
+                    : null}
+    </>
+
     return (
-        <div className={classNames(Style.RepositorySummary, className)} {...props}>
+        <Summary
-            <div className={Style.Left}>
+            icon={repo.is_active ? faFolderOpen : faFolder}
-                <div className={Style.IconContainer}>
+            title={repo.name}
-                    <FontAwesomeIcon
+            subtitle={repo.author}
-                        icon={repo.is_active ? faFolderOpen : faFolder}
+            upperLabel={"Start"}
-                    />
+            upperValue={repo.start ? new Date(repo.start).toLocaleString() : null}
-                </div>
+            lowerLabel={"End"}
-                <div className={Style.Title}>
+            lowerValue={repo.end ? new Date(repo.end).toLocaleString() : null}
-                    {repo.name}
+            buttons={buttons}
-                </div>
+            {...props}
-                <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}>
-                {canDelete ?
-                 <Button
-                     color={"Red"}
-                     icon={faTrash}
-                     onClick={onDeleteClick}
-                 >
-                     Delete
-                 </Button>
-                           : null}
-                {canEdit ?
-                 <Button
-                     color={"Yellow"}
-                     icon={faPencilAlt}
-                     onClick={onEditClick}
-                 >
-                     Edit
-                 </Button>
-                         : null}
-                {canArchive ?
-                 <Button
-                     color={"Grey"}
-                     icon={faArchive}
-                     onClick={repo.is_active ? onArchiveClick : onUnarchiveClick}
-                 >
-                     {repo.is_active ? "Archive" : "Unarchive"}
-                 </Button>
-                            : null}
-            </div>
-        </div>
     )
 }