From a2601d5716526a9b7eaf6ef0c33b72096a46455f Mon Sep 17 00:00:00 2001
From: Loremly <loremly@pm.me>
Date: Sun, 8 Jan 2023 17:33:42 -0500
Subject: [PATCH] Update

---
 .../Modal/CommitsModal/Commit.tsx             |  10 +-
 .../Modal/CommitsModal/index.tsx              |  13 +-
 .../githubindiscord/Modal/Issues/index.tsx    |  14 +-
 .../Modal/RepoModal/Folder.tsx                |  31 ++-
 .../githubindiscord/Modal/RepoModal/index.tsx |   9 +-
 plugins/githubindiscord/Modal/index.tsx       | 252 +++++++++++-------
 plugins/githubindiscord/components.ts         |   4 -
 plugins/githubindiscord/style.scss            | 181 ++++++++++---
 plugins/githubindiscord/theme.ts              |   4 +
 9 files changed, 354 insertions(+), 164 deletions(-)
 create mode 100644 plugins/githubindiscord/theme.ts

diff --git a/plugins/githubindiscord/Modal/CommitsModal/Commit.tsx b/plugins/githubindiscord/Modal/CommitsModal/Commit.tsx
index a1ad045..cc8217f 100644
--- 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
index 91ed0fa..7dfa531 100644
--- 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
index b46dabe..25b31c6 100644
--- 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
index 4c6f592..20dc2d4 100644
--- 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
index ab98468..dda9694 100644
--- 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>
     );
 
diff --git a/plugins/githubindiscord/Modal/index.tsx b/plugins/githubindiscord/Modal/index.tsx
index eb1a0a3..86aec27 100644
--- a/plugins/githubindiscord/Modal/index.tsx
+++ b/plugins/githubindiscord/Modal/index.tsx
@@ -5,13 +5,14 @@ import {
   CommitIcon,
   GitBranchIcon,
   IssueOpenedIcon,
+  LinkExternalIcon,
   LockIcon,
   RepoForkedIcon,
   RepoIcon,
   StarIcon,
   TagIcon,
 } from "@primer/styled-octicons";
-import { Breadcrumbs, Button, Label, ThemeProvider, theme } from "@primer/react";
+import { Breadcrumbs, Button, ButtonGroup, Label, Text, ThemeProvider, theme } from "@primer/react";
 import { UnderlineNav } from "@primer/react/drafts";
 import { SelectMenu } from "../components";
 import CommitsModal from "./CommitsModal";
@@ -21,13 +22,56 @@ import { common, components as rpC, webpack } from "replugged";
 import { useEffect, useState } from "react";
 import Issues from "./Issues";
 import { components } from "@octokit/openapi-types";
+import deepmerge from "deepmerge";
+
+const discordtheme = deepmerge(theme, {
+  colorSchemes: {
+    dark: {
+      colors: {
+        border: {
+          default: "var(--primary-dark-700)",
+          muted: "var(--primary-dark-700)",
+          subtle: "var(--primary-dark-700)",
+        },
+        btn: {
+          text: "var(--text-normal)",
+          bg: "var(--button-secondary-background)",
+          border: "transparent",
+          hoverBg: "var(--button-secondary-background-hover)",
+          hoverBorder: "transparent",
+          activeBg: "red",
+          activeBorder: "transparent",
+          selectedBg: "red",
+          focusBg: "red",
+          focusBorder: "transparent",
+          counterBg: "rgba(27,31,36,0.08)",
+          primary: {
+            text: "var(--text-normal)",
+            bg: "#2da44e",
+            border: "transparent",
+            hoverBg: "#2c974b",
+            hoverBorder: "transparent",
+            selectedBg: "hsla(137,55%,36%,1)",
+            disabledText: "rgba(255,255,255,0.8)",
+            disabledBg: "#94d3a2",
+            disabledBorder: "transparent",
+            focusBg: "#2da44e",
+            focusBorder: "transparent",
+            icon: "rgba(255,255,255,0.8)",
+            counterBg: "rgba(255,255,255,0.2)",
+          },
+        },
+      },
+    },
+  },
+});
 
 const { ModalContent, ModalHeader, ModalRoot } = rpC.Modal;
 const wumpus = {
   ...webpack.getByProps("emptyStateImage", "emptyStateSubtext"),
 };
 
-const textClasses = webpack.getByProps("heading-sm/bold");
+const textClasses = webpack.getByProps("heading-lg/bold");
 
 // const tabs = {
 //   repo: RepoModal,
@@ -39,8 +83,6 @@ const tabs = [
   { title: "Issues", component: Issues, icon: IssueOpenedIcon },
 ];
 
-// const customTheme = deepmerge(theme)
-
 export function GithubModal({ url, tab, ...props }: ModalProps<{ url: string; tab?: string }>) {
   const [repoInfo, setInfo] = useState<
     (components["schemas"]["repository"] & { commit: components["schemas"]["commit"] }) | null
@@ -67,52 +109,75 @@ export function GithubModal({ url, tab, ...props }: ModalProps<{ url: string; ta
 
   return (
     <ModalRoot {...props} className={`githubModel`}>
-      <ThemeProvider theme={theme} colorMode="auto">
+      <ThemeProvider theme={discordtheme} colorMode="dark">
         <ModalHeader className="githeader">
-          <div className="repo-path">
-            <div className="repo-visibility-icon">
-              {repoInfo?.visibility === "private" ? <LockIcon size={16} /> : <RepoIcon size={16} />}
+          <div className="repository-info">
+            <div className="repo-path">
+              <div className="repo-visibility-icon">
+                {repoInfo?.visibility === "private" ? (
+                  <LockIcon size={16} sx={{ mr: 2 }} />
+                ) : (
+                  <RepoIcon size={16} sx={{ mr: 2 }} />
+                )}
+              </div>
+              <Breadcrumbs>
+                <Breadcrumbs.Item
+                  href={repoInfo?.owner.html_url}
+                  className={textClasses?.["heading-lg/normal"]}
+                  target="_blank">
+                  {repoInfo?.owner.login}
+                </Breadcrumbs.Item>
+                <Breadcrumbs.Item
+                  href={repoInfo?.html_url}
+                  className={textClasses?.["heading-lg/medium"]}
+                  target="_blank">
+                  {repoInfo?.name}
+                </Breadcrumbs.Item>
+              </Breadcrumbs>
+              <Label className="visibility">{repoInfo?.visibility}</Label>
+            </div>
+            <div className={[textClasses?.["heading-sm/medium"], "extlink-buttons"].join(" ")}>
+              {repoInfo && (
+                <ButtonGroup sx={{ display: "flex" }}>
+                  <Button leadingIcon={StarIcon} verticalAlign={"middle"} sx={{ mr: 1 }}>
+                    Stars
+                    <Button.Counter>{abbreviateNumber(repoInfo?.stargazers_count)}</Button.Counter>
+                  </Button>
+                  <Button>
+                    <a className="starLink" href={`${repoInfo.html_url}/stargazers`} target="_blank">
+                      <LinkExternalIcon size={16} />
+                    </a>
+                  </Button>
+                </ButtonGroup>
+              )}
+              {repoInfo && (
+                <ButtonGroup sx={{ display: "flex" }}>
+                  <Button leadingIcon={RepoForkedIcon} verticalAlign={"middle"} sx={{ mr: 1 }}>
+                    Fork
+                    <Button.Counter>{abbreviateNumber(repoInfo.forks_count)}</Button.Counter>
+                  </Button>
+                  <Button>
+                    <a
+                      className="forklink"
+                      href={`${repoInfo?.html_url}/network/members`}
+                      target="_blank">
+                      <LinkExternalIcon size={16} />
+                    </a>
+                  </Button>
+                </ButtonGroup>
+              )}
             </div>
-            <a
-              className={[textClasses?.["heading-lg/normal"], "repository-owner"].join(" ")}
-              href={repoInfo?.owner.html_url || `https://github.com/${repoInfo?.owner}`}
-              target="_blank">
-              {repoInfo?.owner.login}
-            </a>
-            <span className="separator">/</span>
-            <a
-              className={[textClasses?.["heading-lg/medium"], "repository-name"].join(" ")}
-              href={repoInfo?.html_url || `https://github.com/${url}`}
-              target="_blank">
-              {repoInfo?.name || url}
-            </a>
-            <Label className="visibility">{repoInfo?.visibility}</Label>
-          </div>
-          <div className={[textClasses?.["heading-sm/medium"], "extlink-buttons"].join(" ")}>
-            {repoInfo && (
-              <a
-                className="stargazers button"
-                href={`${repoInfo.html_url}/stargazers`}
-                target="_blank">
-                <Button leadingIcon={StarIcon} verticalAlign={"middle"} sx={{ mr: 1 }}>
-                  <span></span>
-                  Stars
-                  <Button.Counter>{abbreviateNumber(repoInfo?.stargazers_count)}</Button.Counter>
-                </Button>
-              </a>
-            )}
-            {repoInfo && (
-              <a
-                className="forks button"
-                href={`${repoInfo?.html_url}/network/members`}
-                target="_blank">
-                <Button leadingIcon={RepoForkedIcon} verticalAlign={"middle"} sx={{ mr: 1 }}>
-                  Fork
-                  <Button.Counter>{abbreviateNumber(repoInfo.forks_count)}</Button.Counter>
-                </Button>
-              </a>
-            )}
           </div>
+          <UnderlineNav aria-label="tabs">
+            {tabs.map(({ title, icon }) => (
+              <UnderlineNav.Item
+                icon={icon}
+                aria-current={title === currentTab}
+                onSelect={() => setTab(title)}>
+                {title}
+              </UnderlineNav.Item>
+            ))}
+          </UnderlineNav>
         </ModalHeader>
         <ModalContent>
           <div className="repository-options">
@@ -127,57 +192,56 @@ export function GithubModal({ url, tab, ...props }: ModalProps<{ url: string; ta
                   }}
                 />
               )}
-              {path ? (
-                <Breadcrumbs>
-                  {path.split("/").map((inPath, idx) => (
-                    <Breadcrumbs.Item
-                      selected={idx === path.split("/").length - 1}
-                      onClick={() =>
-                        setPath(
-                          path
-                            .split("/")
-                            .splice(0, idx + 1)
-                            .join("/"),
-                        )
-                      }>
-                      {inPath}
-                    </Breadcrumbs.Item>
-                  ))}
-                </Breadcrumbs>
-              ) : (
-                <div className="miscLinks">
-                  <a
-                    href={`${repoInfo?.html_url}/branches`}
-                    target="_blank"
-                    className={[textClasses?.["heading-sm/normal"], "branchlink"].join(" ")}>
-                    <GitBranchIcon size={16} mr={2} />
-                    <span className={textClasses?.["heading-sm/normal"]}>Branches</span>
-                  </a>
-                  <a
-                    href={`${repoInfo?.html_url}/tags`}
-                    target="_blank"
-                    className={[textClasses?.["heading-sm/normal"], "taglink"].join(" ")}>
-                    <TagIcon size={16} mr={2} />
-                    <span className={textClasses?.["heading-sm/normal"]}>Tags</span>
-                  </a>
-                </div>
-              )}
             </div>
-            <UnderlineNav aria-label="tabs">
-              {tabs.map(({ title, icon }) => (
-                <UnderlineNav.Item
-                  icon={icon}
-                  aria-current={title === currentTab}
-                  onSelect={() => setTab(title)}>
-                  {title}
-                </UnderlineNav.Item>
-              ))}
-            </UnderlineNav>
+            {path ? (
+              <Breadcrumbs className={textClasses?.["heading-md/bold"]}>
+                <Breadcrumbs.Item onClick={() => setPath("")}>{repoInfo?.name}</Breadcrumbs.Item>
+                {path.split("/").map((inPath, idx) => (
+                  <Breadcrumbs.Item
+                    selected={idx === path.split("/").length - 1}
+                    onClick={() =>
+                      setPath(
+                        path
+                          .split("/")
+                          .splice(0, idx + 1)
+                          .join("/"),
+                      )
+                    }>
+                    {inPath}
+                  </Breadcrumbs.Item>
+                ))}
+              </Breadcrumbs>
+            ) : (
+              <div className="miscLinks">
+                <a
+                  href={`${repoInfo?.html_url}/branches`}
+                  target="_blank"
+                  className={[textClasses?.["heading-sm/normal"], "branchlink"].join(" ")}>
+                  <GitBranchIcon size={16} />
+                  <Text className={textClasses?.["heading-sm/bold"]} sx={{ mx: 1 }}>
+                    {branches?.length}
+                  </Text>
+                  <span className={textClasses?.["heading-sm/normal"]}>Branches</span>
+                </a>
+                <a
+                  href={`${repoInfo?.html_url}/tags`}
+                  target="_blank"
+                  className={[textClasses?.["heading-sm/normal"], "taglink"].join(" ")}>
+                  <TagIcon size={16} mr={2} />
+                  <span className={textClasses?.["heading-sm/normal"]}>Tags</span>
+                </a>
+              </div>
+            )}
           </div>
-          {err && (
+          {err && textClasses && (
             <div className="Gerror">
               <div className={wumpus.emptyStateImage as string} />
-              <span className={`Gerror-text ${wumpus.emptyStateSubtext}`}>{err}</span>
+              <span
+                className={[textClasses?.["heading-lg/normal"], `${wumpus.emptyStateSubtext}`].join(
+                  " ",
+                )}>
+                {err}
+              </span>
             </div>
           )}
           {!err && Tab && (
diff --git a/plugins/githubindiscord/components.ts b/plugins/githubindiscord/components.ts
index dd3360f..94c8bfd 100644
--- a/plugins/githubindiscord/components.ts
+++ b/plugins/githubindiscord/components.ts
@@ -35,7 +35,3 @@ export const TabBar = webpack.getByProps("Header", "Panel", "Item") as unknown a
       }>;
     })
   | undefined;
-export const Spinner = webpack.getExportsForProps(
-  await webpack.waitForModule(webpack.filters.bySource("spinningCircle")),
-  ["Type"],
-) as unknown as React.FC<{ type: string }> | undefined;
diff --git a/plugins/githubindiscord/style.scss b/plugins/githubindiscord/style.scss
index 4574a46..9e43938 100644
--- a/plugins/githubindiscord/style.scss
+++ b/plugins/githubindiscord/style.scss
@@ -1,101 +1,208 @@
-// Styled by https://github.com/loremly
-
 .githubModel {
   color: var(--text-normal);
   width: fit-content;
   max-width: 80vw;
   max-height: 70vh;
+  min-width: 60vw;
+
+  >* {
+    line-height: normal;
+  }
 
   .header-1zd7se {
     justify-content: space-between;
-    align-items: center;
+    padding-bottom: 0 !important;
+    align-items: flex-start;
+    flex-direction: column;
     white-space: nowrap;
-    flex-direction: row;
+    overflow: hidden;
     display: flex;
 
-    .repo-visibility-icon {
-      color: var(--text-muted);
-      margin-right: 8px;
-    }
-
-    .repo-path {
-      flex-direction: row;
-      align-items: center;
-      margin-right: 15vw;
+    .repository-info {
       display: flex;
+      width: 100%;
 
-      .separator {
-        color: var(--text-muted);
-        margin: 0 4px;
-      }
+      .repo-path {
+        flex-direction: row;
+        align-items: center;
+        margin-right: auto;
+        display: flex;
 
-      .visibility {
-        text-transform: capitalize;
-        margin-left: 8px;
+        .separator {
+          color: var(--text-muted);
+          margin: 0 4px;
+        }
+
+        .visibility {
+          text-transform: capitalize;
+          margin-left: 8px;
+        }
+
+        a {
+          font-size: 20px !important;
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
       }
 
-      a {
-        &:hover {
-          text-decoration: underline;
+      .extlink-buttons {
+        flex-direction: row;
+        align-items: center;
+        margin-left: 15vw;
+        display: flex;
+        gap: 15px;
+
+        >.ButtonGroup-sc-tk435v-0 {
+          >button {
+            padding-left: 12px;
+            padding-right: 12px;
+          }
         }
       }
     }
 
-    .extlink-buttons {
-      flex-direction: row;
-      align-items: center;
-      display: flex;
-      gap: 15px;
+    nav[aria-label="tabs"] {
+      padding-left: 0 !important;
+      border-bottom: none;
+      margin-top: 12px;
+      width: 100%;
     }
   }
+
   .content-2hZxGK {
     padding-right: 10px !important;
     padding-bottom: 16px;
+    padding-top: 10px;
+
     .repository-options {
-      justify-content: space-between;
       align-items: center;
       padding: 8px 0;
       display: flex;
+
       .branches {
         align-items: center;
         display: flex;
+
         .select-1Ia3hD {
           margin-right: 20px;
           min-width: 11rem;
         }
+
         a {
           display: flex;
         }
       }
+
+      nav.Breadcrumbs__BreadcrumbsBase-sc-zwknu7-1 {
+        .Box-sc-1gh2r6s-0 {
+          display: flex;
+
+          .fLAmDQ {
+            align-items: center;
+            display: flex;
+
+            a {
+              font-size: 17px !important;
+              font-weight: 600;
+
+              &.selected {
+                color: var(--text-normal) !important;
+                font-weight: normal;
+              }
+            }
+          }
+        }
+      }
+
       div.miscLinks {
         display: flex;
-        .taglink {
-          margin-left: 16px;
+
+        a {
+          display: flex;
+
+          &.taglink {
+            margin-left: 16px;
+          }
         }
       }
     }
+
+    .fetching {
+      justify-content: center;
+      flex-direction: column;
+      align-items: center;
+      min-height: 25vh;
+      display: flex;
+
+      span {
+        margin-bottom: 16px;
+      }
+    }
+
     .Gout-folder,
     .Gin-folder {
       border-radius: 4px;
       margin-top: 8px;
-      .Gfolder:nth-child(1) > div {
+
+      .Gfolder:nth-child(1)>div {
         border-top: none !important;
       }
+
       a:hover {
         text-decoration: underline !important;
       }
+
       .Box-sc-1gh2r6s-0 {
         display: flex;
-        &:hover {
+
+        &:hover:not(.latestCommitInfo:hover) {
           background-color: var(--background-modifier-hover);
         }
+
+        &.latestCommitInfo {
+          border-radius: 4px 4px 0 0;
+
+          .relativeTime {
+            margin-left: auto;
+          }
+        }
+      }
+    }
+
+    .issueList {
+      border-radius: 4px;
+
+      .issue {
+        &:nth-child(1) {
+          border-top: none !important;
+        }
+      }
+    }
+
+    .Gerror {
+      justify-content: center;
+      flex-direction: column;
+      align-items: center;
+      padding: 30px 0;
+      display: flex;
+
+      .emptyStateImage-1kilCd {
+        margin: 0;
+      }
+
+      span {
+        padding-top: 15px;
       }
     }
   }
 
-  a:not(.repo-path > *):not(.Gout-folder a:hover):not(.Gin-folder a:hover):not(
-      .branches a:hover
-    ):not(.backbtn a) {
-    color: var(--text-normal);
+  a {
+    color: var(--text-link);
+
+    &:not(.repo-path > *):not(.Gout-folder a:hover):not(.Gin-folder a:hover):not(.branches a:hover):not(.backbtn a):not(.doegSW):not(.miscLinks a:hover) {
+      color: var(--text-normal);
+    }
   }
 }
diff --git a/plugins/githubindiscord/theme.ts b/plugins/githubindiscord/theme.ts
new file mode 100644
index 0000000..e69a9f0
--- /dev/null
+++ b/plugins/githubindiscord/theme.ts
@@ -0,0 +1,4 @@
+import {theme} from '@primer/react'
+import deepmerge from 'deepmerge'
+
+