From 6e1aa2e50f3b9c35046eaf0c8eb2c33382f5c1d5 Mon Sep 17 00:00:00 2001 From: EliteAsian <29520859+EliteAsian123@users.noreply.github.com> Date: Sun, 25 Aug 2024 13:45:58 -0400 Subject: [PATCH] Added home page banner and moved socials there --- src/assets/Icons/Reddit.svg | 1 + src/assets/Icons/Youtube.svg | 1 + src/assets/Icons/index.ts | 4 ++ src/assets/{YARC.svg => YARCLong.svg} | 0 src/assets/YARCSquare.png | Bin 0 -> 17600 bytes src/components/Sidebar/Sidebar.module.css | 5 +-- src/components/Sidebar/index.tsx | 16 ++++++-- src/components/TitleBar/index.tsx | 2 +- src/routes/Home/Home.module.css | 44 ++++++++++++++++++++++ src/routes/Home/index.tsx | 19 +++++++++- 10 files changed, 81 insertions(+), 11 deletions(-) create mode 100644 src/assets/Icons/Reddit.svg create mode 100644 src/assets/Icons/Youtube.svg rename src/assets/{YARC.svg => YARCLong.svg} (100%) create mode 100644 src/assets/YARCSquare.png diff --git a/src/assets/Icons/Reddit.svg b/src/assets/Icons/Reddit.svg new file mode 100644 index 0000000..ea88d83 --- /dev/null +++ b/src/assets/Icons/Reddit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/Icons/Youtube.svg b/src/assets/Icons/Youtube.svg new file mode 100644 index 0000000..f016fc8 --- /dev/null +++ b/src/assets/Icons/Youtube.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/Icons/index.ts b/src/assets/Icons/index.ts index 633994b..ee2a5f7 100644 --- a/src/assets/Icons/index.ts +++ b/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, }; diff --git a/src/assets/YARC.svg b/src/assets/YARCLong.svg similarity index 100% rename from src/assets/YARC.svg rename to src/assets/YARCLong.svg diff --git a/src/assets/YARCSquare.png b/src/assets/YARCSquare.png new file mode 100644 index 0000000000000000000000000000000000000000..6fc04f6b5fa23c192cae3f75008a8c5ebc1786c5 GIT binary patch literal 17600 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 literal 0 HcmV?d00001 diff --git a/src/components/Sidebar/Sidebar.module.css b/src/components/Sidebar/Sidebar.module.css index a0926be..c275504 100644 --- a/src/components/Sidebar/Sidebar.module.css +++ b/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 { diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx index 4f3a60b..45725bb 100644 --- a/src/components/Sidebar/index.tsx +++ b/src/components/Sidebar/index.tsx @@ -1,5 +1,4 @@ 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"; @@ -7,6 +6,18 @@ 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 = () => {
- - -
; diff --git a/src/components/TitleBar/index.tsx b/src/components/TitleBar/index.tsx index c594b73..004af99 100644 --- a/src/components/TitleBar/index.tsx +++ b/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"; diff --git a/src/routes/Home/Home.module.css b/src/routes/Home/Home.module.css index 0754218..1f32ad2 100644 --- a/src/routes/Home/Home.module.css +++ b/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; } diff --git a/src/routes/Home/index.tsx b/src/routes/Home/index.tsx index 4e68cec..c85ee0d 100644 --- a/src/routes/Home/index.tsx +++ b/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
- + return
+
+ +
+ await askOpenUrl("https://discord.gg/sqpu4R552r")} /> + await askOpenUrl("https://github.com/YARC-Official")} /> + await askOpenUrl("https://x.com/yarggame")} /> + await askOpenUrl("https://www.youtube.com/@YARGGame")} /> + await askOpenUrl("https://www.reddit.com/r/yarg/")} /> +
+
+
+ +
; }