QOL
diff --git a/Components/Card.js b/Components/Card.js
index 29fea4c..c928baf 100644
--- a/Components/Card.js
+++ b/Components/Card.js
@@ -13,7 +13,7 @@
handleClick(e) {
e.preventDefault();
if (this.props.url) {
- this.props.router.push(this.props.url);
+ window.location = this.props.url;
}
}
@@ -31,7 +31,7 @@
<img alt="Project icon" className={Styles.image} src={"https://assets.clicks.codes/" + (this.props.icon ? this.props.icon : this.props.wave) + ".svg"} />
<h1 className={Styles.title}>{this.props.title}</h1>
</div>
- <p className={Styles.subtext}>{this.props.subtext}</p>
+ <p className={Styles.subtext + " " + (this.props.buttons ? null : Styles.longText)}>{this.props.subtext}</p>
<div className={Styles.buttonLayout}>
{
this.props.buttons ? this.props.buttons.map((button, i) => {
diff --git a/Components/ThemeChangeButton.js b/Components/ThemeChangeButton.js
index 8001481..449dcff 100644
--- a/Components/ThemeChangeButton.js
+++ b/Components/ThemeChangeButton.js
@@ -10,7 +10,7 @@
useEffect(() => {
setRender(true);
- });
+ }, []);
return (
<>
@@ -18,9 +18,8 @@
e.preventDefault();
setColorMode(colorMode === 'light' ? 'dark' : 'light');
}} href="#">
- <img className={Styles.icon} alt="Theme" src={"https://assets.clicks.codes/web/icons/" + (
- colorMode === 'light' ? "light-white" : "dark"
- ) + ".svg"} />
+ <img className={Styles.icon + " " + Styles.themeChangeIcon} alt="Theme" src={"https://assets.clicks.codes/web/icons/light-white.svg"} />
+ <img className={Styles.icon + " " + Styles.themeChangeIcon} alt="Theme" src={"https://assets.clicks.codes/web/icons/dark.svg"} />
</a>
</>
)
diff --git a/pages/_app.js b/pages/_app.js
index 2ed76e6..3c05c22 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -20,6 +20,7 @@
hint: '#E4E4E4',
panelColor: "#F0F0F0",
fadeGradient: "rgba(240, 240, 240, 1)",
+ offset: "1px",
modes: {
dark: {
@@ -34,6 +35,7 @@
hint: '#242424',
panelColor: "rgba(255, 255, 255, 0.05)",
fadeGradient: "rgba(48, 48, 48, 1)",
+ offset: "-45px"
}
}
},
diff --git a/pages/gps.js b/pages/gps.js
index f35a841..8b2e194 100644
--- a/pages/gps.js
+++ b/pages/gps.js
@@ -54,7 +54,6 @@
icon="web/icons/gps/shuffles"
title="Shuffles"
subtext={`Replace your worst cards with new ones because \"The bot is unfair
- and always gives me the worst cards and everyone else is better at the game than me\"` + `Replace your worst cards with new ones because \"The bot is unfair
and always gives me the worst cards and everyone else is better at the game than me\"`}
wave="clcks"
gradient={["C4C4C4", "8D8D8D"]}
diff --git a/pages/index.js b/pages/index.js
index 593cc8d..d151a7b 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -33,7 +33,7 @@
url="/gps"
/>
<Card
- wave="rsm" title="RSM" subtext="Moderation RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration Redefined"
+ wave="rsm" title="RSM" subtext="Moderation Redefined"
icon="bots/rsm/circle"
buttons={[
{color: "424242", link: "https://discord.com/api/oauth2/authorize?client_id=715989276382462053&permissions=121295465718&scope=bot%20applications.commands",text:"Invite"},
diff --git a/styles/Components/card.module.css b/styles/Components/card.module.css
index 9cdb2d8..7ae19c2 100644
--- a/styles/Components/card.module.css
+++ b/styles/Components/card.module.css
@@ -37,6 +37,8 @@
transition: 0.3s ease-in-out;
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.25);
+
+ display: block;
}
.card:hover {
transform: translateY(-5px) !important;
@@ -100,6 +102,10 @@
transition: color 0.3s ease-in-out;
}
+.longText {
+ height: 60%;
+}
+
.buttonLayout {
display: flex;
diff --git a/styles/Components/navbar.module.css b/styles/Components/navbar.module.css
index ecbf786..74d7eea 100644
--- a/styles/Components/navbar.module.css
+++ b/styles/Components/navbar.module.css
@@ -3,6 +3,13 @@
margin: 0;
padding: 0;
width: 32px;
+ user-select: none;
+}
+
+.themeChangeIcon {
+ margin-bottom: 10px;
+ transform: translateY(var(--theme-ui-colors-offset));
+ transition: transform 0.3s ease-in-out;
}
.container {
@@ -12,6 +19,7 @@
justify-content: left;
align-items: center;
flex-direction: row;
+ overflow-y: hidden;
gap: 10px;
height: 42px;