Layouts and gradient text

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",

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": {

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() {

styles/Home.module.css

@@ -118,4 +118,4 @@
     width: 100%;
     flex-direction: column;
   }
-}
+}

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);
+}