Update

E-boi · Jan 8, 2023 · a2601d5 · a2601d5
1 parent d52bc0b
commit a2601d5
Show file tree

Hide file tree

Showing 9 changed files with 354 additions and 164 deletions.
diff --git a/plugins/githubindiscord/Modal/CommitsModal/Commit.tsx b/plugins/githubindiscord/Modal/CommitsModal/Commit.tsx
@@ -4,6 +4,8 @@ import { getCommit } from "../../utils";
 import { Spinner } from "@primer/react";
 import { components } from "@octokit/openapi-types";
 
+const textClasses = webpack.getByProps("heading-lg/bold");
+
 const classes = {
   markup: webpack.getByProps("markup")?.markup,
   scrollbarGhostHairline: webpack.getByProps("scrollbarGhostHairline")?.scrollbarGhostHairline,
@@ -33,10 +35,10 @@ export default memo(
 
     if (!commit && Spinner)
       return (
-        <p className="Gfetching">
-          Fetching commit
-          <Spinner size="medium" />
-        </p>
+        <div className={[textClasses?.['heading-lg/medium'], 'fetching'].join(' ')}>
+        <span>Fetching Commits...</span>
+        <Spinner size="large"/>
+      </div>
       );
     else if (commit)
       return commit.files!.map((file) => (

diff --git a/plugins/githubindiscord/Modal/CommitsModal/index.tsx b/plugins/githubindiscord/Modal/CommitsModal/index.tsx
@@ -1,9 +1,12 @@
 import { FC, memo, useEffect, useState } from "react";
-import { Spinner } from "../../components";
 import { getCommits } from "../../utils";
 import Commit from "./Commit";
 import { GitCommitIcon } from "@primer/styled-octicons";
 import { components } from "@octokit/openapi-types";
+import { Spinner } from "@primer/react";
+import { webpack } from "replugged";
+
+const textClasses = webpack.getByProps("heading-lg/bold");
 
 type Props = { url: string; branch: components["schemas"]["branch-short"] | null };
 
@@ -20,10 +23,10 @@ const CommitsModal: FC<Props> = ({ url, branch }) => {
   console.log(commits);
   if (!commits && Spinner)
     return (
-      <p className="Gfetching">
-        Fetching commits
-        <Spinner type="wanderingCubes" />
-      </p>
+      <div className={[textClasses?.['heading-lg/medium'], 'fetching'].join(' ')}>
+        <span>Fetching Commits...</span>
+        <Spinner size="large"/>
+      </div>
     );
   if (!selectedCommit)
     return (

diff --git a/plugins/githubindiscord/Modal/Issues/index.tsx b/plugins/githubindiscord/Modal/Issues/index.tsx
@@ -2,9 +2,12 @@ import { components } from "@octokit/openapi-types";
 import { Box, Label, LabelGroup, RelativeTime, Spinner, Text } from "@primer/react";
 import { IssueOpenedIcon } from "@primer/styled-octicons";
 import { FC, memo, useEffect, useState } from "react";
+import { webpack } from "replugged";
 import { getIssues } from "../../utils";
 import IssueComp from "./Issue";
 
+const textClasses = webpack.getByProps("heading-lg/bold");
+
 interface Props {
   url: string;
   repo: (components["schemas"]["repository"] & { commit: components["schemas"]["commit"] }) | null;
@@ -25,21 +28,22 @@ const Issues: FC<Props> = ({ url, repo }) => {
 
   if (!issues)
     return (
-      <div>
-        <p>Fetching Issues</p>
-        <Spinner size="medium" />
+      <div className={[textClasses?.['heading-lg/medium'], 'fetching'].join(' ')}>
+        <span>Fetching Issues...</span>
+        <Spinner size="large"/>
       </div>
     );
 
   if (issue) return <IssueComp issue={issue} url={url} />;
 
   return (
-    <Box borderColor="border.subtle" borderWidth={1} borderStyle="solid">
+    <Box borderColor="border.subtle" className="issueList" borderWidth={1} borderStyle="solid">
       {issues.map((issue) => (
         <Box
           borderColor="border.subtle"
           borderTopWidth={1}
           borderStyle="solid"
+          className="issue"
           px={3}
           py={2}
           sx={{ display: "flex" }}>
@@ -49,7 +53,7 @@ const Issues: FC<Props> = ({ url, repo }) => {
               <Text as="a" onClick={() => setIssue(issue)}>
                 {issue.title}
               </Text>
-              <LabelGroup>
+              <LabelGroup sx={{ml: 2}}>
                 {issue.labels.map((label) => (
                   <Label
                     sx={{

diff --git a/plugins/githubindiscord/Modal/RepoModal/Folder.tsx b/plugins/githubindiscord/Modal/RepoModal/Folder.tsx
@@ -30,27 +30,34 @@ export default ({
           borderTopWidth={0}
           borderWidth={1}
           px={3}
-          py={2}
-          pt={2}
-          sx={{ alignItems: "center", display: "flex" }}>
+          py={3}
+          sx={{
+            alignItems: "center",
+            display: "flex",
+          }}
+          className="latestCommitInfo">
           {dir.commit.author && (
-            <a href={dir.commit.author.avatar_url} target="_blank">
+            <a href={dir.commit.author.html_url} target="_blank">
               <Avatar src={dir.commit.author.avatar_url} size={24} />
             </a>
           )}
           <Truncate
             maxWidth={"100%"}
             title={`${dir.commit.author?.login} ${dir.commit.commit.message}`}>
-            <Text fontWeight="bold" sx={{ marginLeft: "5px" }}>
-              {dir.commit.author?.login}
-              <Text fontWeight="normal"> {dir.commit.commit.message}</Text>
+            <Text className={textClasses?.["heading-md/semibold"]} sx={{ ml: 2 }}>
+              <a href={dir.commit.author?.html_url} target="_blank">
+                {dir.commit.author?.login}
+              </a>
+              <Text className={textClasses?.["heading-md/normal"]} sx={{ ml: 2 }}>
+                <a href={dir.commit.html_url} target="_blank">
+                  {dir.commit.commit.message}
+                </a>
+              </Text>
             </Text>
           </Truncate>
-          <RelativeTime
-            sx={{ marginLeft: "auto" }}
-            datetime={dir.commit.commit.author?.date}
-            format="relative"
-          />
+          <a href={dir.commit.html_url} target="_blank" className="relativeTime">
+            <RelativeTime sx={{ ml: 8 }} datetime={dir.commit.commit.author?.date} />
+          </a>
         </Box>
         {dir.path && (
           <div className="backbtn">

diff --git a/plugins/githubindiscord/Modal/RepoModal/index.tsx b/plugins/githubindiscord/Modal/RepoModal/index.tsx
@@ -4,6 +4,9 @@ import { FC, memo, useEffect, useState } from "react";
 import { File, getFile, getFolder } from "../../utils";
 import FolderModal from "./Folder";
 import FileModal from "./File";
+import { webpack } from "replugged";
+
+const textClasses = webpack.getByProps("heading-sm/bold");
 
 type Props = {
   url: string;
@@ -32,9 +35,9 @@ const RepoModal: FC<Props> = ({ url, repo, branch, trigger, path }) => {
 
   if (!folder)
     return (
-      <div>
-        <p>Fetching Issues</p>
-        <Spinner size="medium" />
+      <div className={[textClasses?.['heading-lg/medium'], 'fetching'].join(' ')}>
+        <span>Fetching Repository Contents...</span>
+        <Spinner size="large"/>
       </div>
     );