fixed inconsistence spacing

Reset the line-height of Material-UI
Seneca-CDOT · Oct 25, 2021 · b15670b · b15670b
1 parent 682e2a7
commit b15670b
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 34 deletions.
diff --git a/src/web/src/components/Posts/Commits.tsx b/src/web/src/components/Posts/Commits.tsx
@@ -11,7 +11,7 @@ const useStyles = makeStyles((theme: Theme) =>
       },
     },
     GitHubInfo: {
-      lineHeight: '2rem',
+      lineHeight: 'normal',
       fontSize: '1.2rem',
     },
     GitHubLinkTitle: {
@@ -26,9 +26,9 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     commits: {
       paddingLeft: 0,
-      display: 'grid',
-      gridTemplateColumns: 'repeat(auto-fill, minmax(5rem, 1fr))',
-      gap: '1rem 1rem',
+      display: 'flex',
+      flexWrap: 'wrap',
+      gap: '1.5rem',
     },
     commit: {
       listStyle: 'none',

diff --git a/src/web/src/components/Posts/Issues.tsx b/src/web/src/components/Posts/Issues.tsx
@@ -11,7 +11,7 @@ const useStyles = makeStyles((theme: Theme) =>
       },
     },
     GitHubInfo: {
-      lineHeight: '2rem',
+      lineHeight: 'normal',
       fontSize: '1.2rem',
     },
     GitHubLinkTitle: {
@@ -25,12 +25,13 @@ const useStyles = makeStyles((theme: Theme) =>
       verticalAlign: 'text-bottom',
     },
     issues: {
+      paddingLeft: 0,
       display: 'flex',
       flexWrap: 'wrap',
-      margin: 0,
+      gap: '1.5rem',
     },
     issue: {
-      marginRight: '2rem',
+      listStyle: 'none',
     },
   })
 );
@@ -50,9 +51,9 @@ const Issues = ({ issueUrls }: Props) => {
         <VscIssues className={classes.icon}></VscIssues>
         {issueUrls.length === 1 ? 'Issue' : 'Issues'}
       </h2>
-      <p className={classes.issues}>
+      <ul className={classes.issues}>
         {issueUrls.map((issue) => (
-          <p key={issue} className={classes.issue}>
+          <li key={issue} className={classes.issue}>
             <a
               href={`https://github.com${issue}`}
               rel="bookmark"
@@ -62,9 +63,9 @@ const Issues = ({ issueUrls }: Props) => {
             >
               #{getIssueNumber(issue)}
             </a>
-          </p>
+          </li>
         ))}
-      </p>
+      </ul>
     </div>
   );
 };

diff --git a/src/web/src/components/Posts/PullRequests.tsx b/src/web/src/components/Posts/PullRequests.tsx
@@ -11,7 +11,7 @@ const useStyles = makeStyles((theme: Theme) =>
       },
     },
     GitHubInfo: {
-      lineHeight: '2rem',
+      lineHeight: 'normal',
       fontSize: '1.2rem',
     },
     GitHubLinkTitle: {
@@ -25,12 +25,13 @@ const useStyles = makeStyles((theme: Theme) =>
       verticalAlign: 'text-bottom',
     },
     pullRequests: {
+      paddingLeft: 0,
       display: 'flex',
       flexWrap: 'wrap',
-      margin: 0,
+      gap: '1.5rem',
     },
     pullRequest: {
-      marginRight: '2rem',
+      listStyle: 'none',
     },
   })
 );
@@ -51,9 +52,9 @@ const PullRequests = ({ prUrls }: Props) => {
         <VscGitPullRequest className={classes.icon}></VscGitPullRequest>
         {prUrls.length === 1 ? 'Pull Request' : 'Pull Requests'}
       </h2>
-      <p className={classes.pullRequests}>
+      <ul className={classes.pullRequests}>
         {prUrls.map((pullRequest) => (
-          <p key={pullRequest} className={classes.pullRequest}>
+          <li key={pullRequest} className={classes.pullRequest}>
             <a
               href={`https://github.com${pullRequest}`}
               rel="bookmark"
@@ -63,9 +64,9 @@ const PullRequests = ({ prUrls }: Props) => {
             >
               #{getPullRequestNumber(pullRequest)}
             </a>
-          </p>
+          </li>
         ))}
-      </p>
+      </ul>
     </div>
   );
 };

diff --git a/src/web/src/components/Posts/Repos.tsx b/src/web/src/components/Posts/Repos.tsx
@@ -11,9 +11,9 @@ const useStyles = makeStyles((theme: Theme) =>
       },
     },
     GitHubInfo: {
-      lineHeight: '2rem',
       fontSize: '1.2rem',
       wordWrap: 'break-word',
+      lineHeight: 'normal',
     },
     GitHubLinkTitle: {
       fontSize: '1.4rem',
@@ -25,9 +25,14 @@ const useStyles = makeStyles((theme: Theme) =>
       marginRight: '1rem',
       verticalAlign: 'text-bottom',
     },
+    repos: {
+      paddingLeft: 0,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1.5rem',
+    },
     repo: {
-      marginTop: '2rem',
-      lineHeight: '0.5rem',
+      listStyle: 'none',
     },
   })
 );
@@ -47,19 +52,21 @@ const Repos = ({ repoUrls }: Props) => {
         <VscRepoForked className={classes.icon}></VscRepoForked>
         {repoUrls.length === 1 ? 'Repo' : 'Repos'}
       </h2>
-      {repoUrls.map((repo) => (
-        <p key={repo} className={classes.repo}>
-          <a
-            href={`https://github.com/${repo}`}
-            rel="bookmark"
-            target="_blank"
-            title={repo}
-            className={classes.link}
-          >
-            {getRepoName(repo)}
-          </a>
-        </p>
-      ))}
+      <ul className={classes.repos}>
+        {repoUrls.map((repo) => (
+          <li key={repo} className={classes.repo}>
+            <a
+              href={`https://github.com/${repo}`}
+              rel="bookmark"
+              target="_blank"
+              title={repo}
+              className={classes.link}
+            >
+              {getRepoName(repo)}
+            </a>
+          </li>
+        ))}
+      </ul>
     </div>
   );
 };