From adcf7678db79b5459ab551eda3789cba362ccc6d Mon Sep 17 00:00:00 2001
From: Joshua Sigona <sigonasr2@gmail.com>
Date: Mon, 25 Oct 2021 22:27:31 +0900
Subject: [PATCH] Layouts and gradient text

---
 package-lock.json      |  5 +++++
 package.json           |  1 +
 pages/index.js         | 14 ++++++++------
 styles/Home.module.css |  2 +-
 styles/globals.css     | 10 ++++++++++
 5 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cc0a599..3cdddc7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3382,6 +3382,11 @@
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
       "dev": true
     },
+    "rgt": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/rgt/-/rgt-1.0.7.tgz",
+      "integrity": "sha512-ZviNzOf7HgVSnU0PRRoO9IKCD+7TSFLdy8Q7nFCaFYRY0ei6AfsjM4VOHxI5TsiOSEVculIyZSiTO26ivtkZ4g=="
+    },
     "rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
diff --git a/package.json b/package.json
index 140001a..c007bb1 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "react-bootstrap": "^2.0.0",
     "react-bootstrap-icons": "^1.6.1",
     "react-dom": "17.0.2",
+    "rgt": "^1.0.7",
     "swr": "^1.0.1"
   },
   "devDependencies": {
diff --git a/pages/index.js b/pages/index.js
index 83fa9cf..7543fda 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -8,6 +8,8 @@ import useSWR from 'swr'
 import Table from 'react-bootstrap/Table'
 import Spinner from 'react-bootstrap/Spinner'
 import {CameraReelsFill} from 'react-bootstrap-icons'
+import Gradient from 'rgt'
+import Container from 'react-bootstrap/Container'
 
 import 'bootstrap/dist/css/bootstrap.min.css';
 
@@ -30,8 +32,8 @@ function VariableSelector(p) {
   }
 
   return <>
-    <ToggleButtonGroup type="radio" className="mb-2">
-      {displayValues.map((value,i)=><ToggleButton key={i} variant={selected===value[1]?"primary":"outline-primary"} onClick={handleChange} id={value[1]}>{value[0].label}</ToggleButton>)}
+    <ToggleButtonGroup variant="dark" type="radio" className="mb-2">
+      {displayValues.map((value,i)=><ToggleButton variant="dark"  key={i} variant={selected===value[1]?"dark":"outline-dark"} onClick={handleChange} id={value[1]}>{value[0].label}</ToggleButton>)}
     </ToggleButtonGroup><br/>
   </>
 }
@@ -87,7 +89,7 @@ function getPlayer(playerID) {
 function Player(p) {
   const {data}=p
   const playerData=getPlayer(data.id)
-  return <><img className="scoreboard_icon" width={24} height={24} src={playerData.icon??playerData.image}/> {data.rel==="guest"?data.name:playerData.name}</>
+  return <><img className="scoreboard_icon" width={24} height={24} src={playerData.icon??playerData.image}/> {playerData.name&&<span className="playerName"><Gradient dir="left-to-right" from={playerData.color1} to={playerData.color2}>{data.rel==="guest"?data.name:playerData.name}</Gradient></span>}</>
 }
 
 function TimeDisplay(time) {
@@ -113,7 +115,7 @@ function Version(p) {
 
 function Leaderboard(p) {
   const {data} = p
-  return <Table striped bordered hover size="sm">
+  return <Table striped bordered hover size="sm" variant="dark">
     <thead>
       <tr>
         <th>#</th>
@@ -180,14 +182,14 @@ export default function Home(p) {
     setAppendStr(appendStr)
   },[selectedTab,selectionValues])
 
-  return <><Tabs className="mb-3" onSelect={(e)=>{setSelectedTab(e)}}>
+  return <Container><Tabs variant="dark" className="mb-3" onSelect={(e)=>{setSelectedTab(e)}}>
     {CATEGORIES.map((cat)=><Tab key={cat.id} eventKey={cat.id} title={cat.name} id={cat.name}>
       {/*cat.rules*/}
       {VARIABLES.filter((v)=>(v.category===cat.id||v.category===null)&&v["is-subcategory"]).map((v,i)=><VariableSelector key={v.id} category={cat} selectionID={i} selectionValues={selectionValues} setSelectionValues={setSelectionValues} values={v}/>)}
     </Tab>)}
   </Tabs>
   {<Leaderboard data={data}/>}
-  </>
+  </Container>
 }
 
 export async function getStaticProps() {
diff --git a/styles/Home.module.css b/styles/Home.module.css
index 35454bb..126560e 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -118,4 +118,4 @@
     width: 100%;
     flex-direction: column;
   }
-}
+}
\ No newline at end of file
diff --git a/styles/globals.css b/styles/globals.css
index b9a6be7..1e419d0 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -4,6 +4,7 @@ body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  background-image:url('https://www.speedrun.com/themeasset/k8kn0l84/background?v=838ae93');
 }
 
 a {
@@ -18,3 +19,12 @@ a {
 .scoreboard_icon{
   border: 0px;
 }
+
+
+.playerName{
+  font-weight:bold;
+}
+
+.container{
+  background:rgba(255,255,255,0.6);
+}
\ No newline at end of file