From 69d9ffec49e905ed5bd6d394f6c182e3e61bd0ee Mon Sep 17 00:00:00 2001
From: Michel Martins <michelmartins9164@gmail.com>
Date: Sat, 4 Oct 2025 14:56:47 -0300
Subject: [PATCH] style: melhorar visual do componente About

---
 src/about/About.js | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/about/About.js b/src/about/About.js
index 8efd630..5084870 100644
--- a/src/about/About.js
+++ b/src/about/About.js
@@ -2,29 +2,32 @@
 // Licensed under the BSD 3-Clause License
 
 import React from "react";
-import { Box, Link, Typography } from "@material-ui/core";
+import { Box, Link, Typography, Divider } from "@material-ui/core";
 
 const About = () => {
   return (
-    <React.Fragment>
-      <Typography variant="h3" gutterBottom>
+    <Box maxWidth="800px" mx="auto" p={4}>
+      <Typography variant="h3" gutterBottom align="center">
         About
       </Typography>
-      <Typography variant="body1" gutterBottom>
+      <Typography variant="body1" gutterBottom align="center">
         An open source gitlab linting utility.
       </Typography>
 
+      <Divider style={{ margin: "24px 0" }} />
+
       <Box pt={2} pb={2}>
         <Typography variant="h4" gutterBottom>
           Contribute
         </Typography>
-        <Typography variant="body1">
+        <Typography variant="body1" gutterBottom>
           Fork the repository and send your pull-requests.
         </Typography>
-        <ul>
+        <Box component="ul" pl={3}>
           <li>
             <span>Frontend: </span>
             <Link
+              style={{ margin: "24px 0" }}
               color="secondary"
               target="_blank"
               href="https://github.com/globocom/gitlab-lint-react"
@@ -35,6 +38,7 @@ const About = () => {
           <li>
             <span>Backend: </span>
             <Link
+              style={{ margin: "24px 0" }}
               color="secondary"
               target="_blank"
               href="https://github.com/globocom/gitlab-lint"
@@ -42,9 +46,11 @@ const About = () => {
               https://github.com/globocom/gitlab-lint
             </Link>
           </li>
-        </ul>
+        </Box>
       </Box>
 
+      <Divider style={{ margin: "24px 0" }} />
+
       <Box pt={2} pb={2}>
         <Typography variant="h4" gutterBottom>
           License
@@ -54,7 +60,7 @@ const About = () => {
           be licensed under its BSD 3-Clause license.
         </Typography>
       </Box>
-    </React.Fragment>
+    </Box>
   );
 };