Merge pull request #783 from kabalin/projectsummary

Make ProjectSummary more visually appealing.
moodle · Oct 27, 2023 · 1728241 · 1728241
2 parents 1e4198e + 3d7a900
commit 1728241
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 47 deletions.
diff --git a/src/components/ProjectSummary/index.tsx b/src/components/ProjectSummary/index.tsx
@@ -50,52 +50,54 @@ export default function ProjectSummary(props: ProjectSummaryProps): ReactNode {
 
     function GetProjectSummary(projectData: ProjectSummaryData): ReactNode {
         return (
-            <table className={styles.projecttable}>
-                <tbody>
-                    <tr>
-                        <th>Owners</th>
-                        <td>{getOwners(projectData)}</td>
-                    </tr>
-                    <tr>
-                        <th>Status</th>
-                        <td>{getStatus(projectData)}</td>
-                    </tr>
-                    {projectData.discussionLinks?.length > 0
-                        && (
-                            <tr>
-                                <th>Links</th>
-                                <td>
-                                    {projectData.discussionLinks.map(({ link, title }) => (
-                                        <div key={title}>
-                                            <Link
-                                                to={link}
-                                            >
-                                                {title}
-                                            </Link>
-                                        </div>
-                                    ))}
-                                </td>
-                            </tr>
-                        )}
-                    {projectData.issueLinks?.length > 0
-                        && (
-                            <tr>
-                                <th>Issues</th>
-                                <td>
-                                    {projectData.issueLinks.map(({ link, title }) => (
-                                        <div key={title}>
-                                            <Link
-                                                to={link}
-                                            >
-                                                {title}
-                                            </Link>
-                                        </div>
-                                    ))}
-                                </td>
-                            </tr>
-                        )}
-                </tbody>
-            </table>
+            <div className={styles.projectsummary}>
+                <table>
+                    <tbody>
+                        <tr>
+                            <th>Owners</th>
+                            <td>{getOwners(projectData)}</td>
+                        </tr>
+                        <tr>
+                            <th>Status</th>
+                            <td>{getStatus(projectData)}</td>
+                        </tr>
+                        {projectData.discussionLinks?.length > 0
+                            && (
+                                <tr>
+                                    <th>Links</th>
+                                    <td>
+                                        {projectData.discussionLinks.map(({ link, title }) => (
+                                            <div key={title}>
+                                                <Link
+                                                    to={link}
+                                                >
+                                                    {title}
+                                                </Link>
+                                            </div>
+                                        ))}
+                                    </td>
+                                </tr>
+                            )}
+                        {projectData.issueLinks?.length > 0
+                            && (
+                                <tr>
+                                    <th>Issues</th>
+                                    <td>
+                                        {projectData.issueLinks.map(({ link, title }) => (
+                                            <div key={title}>
+                                                <Link
+                                                    to={link}
+                                                >
+                                                    {title}
+                                                </Link>
+                                            </div>
+                                        ))}
+                                    </td>
+                                </tr>
+                            )}
+                    </tbody>
+                </table>
+            </div>
         );
     }
 

diff --git a/src/components/ProjectSummary/styles.module.css b/src/components/ProjectSummary/styles.module.css
@@ -1,4 +1,6 @@
-.projecttable {
+.projectsummary {
   float: right;
   clear: both;
+  font-family: monospace;
+  padding-left: 1rem;
 }