Added home page banner and moved socials there

src/assets/Icons/index.ts

@@ -37,6 +37,8 @@ import MarketplaceIcon from "./Marketplace.svg?react";
 import MoreIcon from "./More.svg?react";
 import SidebarInQueueIcon from "./SidebarInQueue.svg?react";
 import SidebarUpdateIcon from "./SidebarUpdate.svg?react";
+import RedditIcon from "./Reddit.svg?react";
+import YoutubeIcon from "./Youtube.svg?react";
 
 export {
     AddIcon,
@@ -71,4 +73,6 @@ export {
     MoreIcon,
     SidebarInQueueIcon,
     SidebarUpdateIcon,
+    RedditIcon,
+    YoutubeIcon,
 };

src/components/Sidebar/Sidebar.module.css

@@ -34,11 +34,8 @@
 
 .socials > .link {
     height: 20px;
-}
-
-.socials > .link > svg {
-    height: 100%;
     color: var(--primary);
+    cursor: pointer;
 }
 
 .menus {

src/components/Sidebar/index.tsx

@@ -1,12 +1,23 @@
 import styles from "./Sidebar.module.css";
-import { DiscordIcon, TwitterIcon, GithubIcon, HomeIcon, QueueIcon, MarketplaceIcon } from "@app/assets/Icons";
 import SidebarMenuButton from "./SidebarMenuButton";
 import { NavLink } from "react-router-dom";
 import ProfilesList from "./Profiles/List";
 import QueueStore from "@app/tasks/queue";
 import { useOfflineStatus } from "@app/hooks/useOfflineStatus";
 import useMarketIndex from "@app/hooks/useMarketIndex";
 import { settingsManager } from "@app/settings";
+import { askOpenUrl } from "@app/utils/safeUrl";
+
+import {
+    DiscordIcon,
+    TwitterIcon,
+    GithubIcon,
+    HomeIcon,
+    QueueIcon,
+    MarketplaceIcon,
+    YoutubeIcon,
+    RedditIcon
+} from "@app/assets/Icons";
 
 const Sidebar: React.FC = () => {
     const offlineStatus = useOfflineStatus();
@@ -55,9 +66,6 @@ const Sidebar: React.FC = () => {
 
         <div className={styles.footer}>
             <div className={styles.socials}>
-                <a href="https://discord.gg/sqpu4R552r" target="_blank" className={styles.link} rel="noreferrer"><DiscordIcon /></a>
-                <a href="https://twitter.com/EliteAsian123" target="_blank" className={styles.link} rel="noreferrer"><TwitterIcon /></a>
-                <a href="https://github.com/YARC-Official/YARG" target="_blank" className={styles.link} rel="noreferrer"><GithubIcon /></a>
             </div>
         </div>
     </div>;

src/components/TitleBar/index.tsx

@@ -4,7 +4,7 @@ import { CloseIcon, MinimizeIcon } from "@app/assets/Icons";
 import { TryCloseDialog } from "@app/dialogs/Dialogs/TryCloseDialog";
 import { useCurrentTask } from "@app/tasks";
 import { createAndShowDialog } from "@app/dialogs";
-import YARCLogo from "@app/assets/YARC.svg?react";
+import YARCLogo from "@app/assets/YARCLong.svg?react";
 import { useEffect, useState } from "react";
 import { getVersion } from "@tauri-apps/api/app";
 

src/routes/Home/Home.module.css

@@ -1,8 +1,52 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.banner {
+    display: flex;
+    height: 290px;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+    align-self: stretch;
+    flex-direction: column;
+
+    background: #05060B;
+}
+
+.banner > img {
+    width: 150px;
+    height: 150px;
+}
+
+.socials {
+    display: flex;
+    flex-direction: row;
+    gap: 15px;
+}
+
+.socials > svg {
+    height: 25px;
+    cursor: pointer;
+
+    color: #434663;
+    transition: color 250ms;
+}
+
+.socials > svg:hover {
+    color: white;
+}
+
 .content {
+    align-self: stretch;
+
     display: flex;
     flex-direction: row;
     align-items: flex-start;
     gap: 25px;
+    flex: 1 0 0;
 
     padding: 24px;
 }

src/routes/Home/index.tsx

@@ -1,9 +1,24 @@
 import styles from "./Home.module.css";
 import NewsSection from "@app/components/NewsSection";
+import YARCLogo from "@app/assets/YARCSquare.png";
+import { askOpenUrl } from "@app/utils/safeUrl";
+import { DiscordIcon, GithubIcon, RedditIcon, TwitterIcon, YoutubeIcon } from "@app/assets/Icons";
 
 function Home() {
-    return <main className={styles.content}>
-        <NewsSection startingEntries={7} />
+    return <main className={styles.container}>
+        <div className={styles.banner}>
+            <img src={YARCLogo} />
+            <div className={styles.socials}>
+                <DiscordIcon onClick={async () => await askOpenUrl("https://discord.gg/sqpu4R552r")} />
+                <GithubIcon onClick={async () => await askOpenUrl("https://github.com/YARC-Official")} />
+                <TwitterIcon onClick={async () => await askOpenUrl("https://x.com/yarggame")} />
+                <YoutubeIcon onClick={async () => await askOpenUrl("https://www.youtube.com/@YARGGame")} />
+                <RedditIcon onClick={async () => await askOpenUrl("https://www.reddit.com/r/yarg/")} />
+            </div>
+        </div>
+        <div className={styles.content}>
+            <NewsSection startingEntries={7} />
+        </div>
     </main>;
 }