before we fuck everything up
diff --git a/Components/Header.js b/Components/Header.js
index 68d0557..1ec054b 100644
--- a/Components/Header.js
+++ b/Components/Header.js
@@ -42,6 +42,7 @@
className={Styles.button}
style={{ backgroundColor: `#${button.color}`, color: `#${button.buttonText}` }}
href={button.link}
+ onClick={() => { if (button.id) { this.props.callback(this.props.that, button.id) } }}
target={button.target ? "_blank" : null}
rel="noreferrer">
{button.text}
diff --git a/Components/LEGACY/AutoSpacing.js b/Components/LEGACY/AutoSpacing.js
deleted file mode 100644
index e90da58..0000000
--- a/Components/LEGACY/AutoSpacing.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import react, { Component } from "react";
-import Styles from '../styles/autospacing.module.css';
-
-class AutoSpacing extends Component {
- constructor(props) {
- super(props);
- }
-
-
- render() {
- return (
- <div className={Styles.container}>
- {
- react.Children.toArray(this.props.children).map((item, index) => {
- return <div className={Styles.item} key={index}>{item}</div>
- })
- }
- </div>
- )
- }
-}
-
-export default AutoSpacing;
\ No newline at end of file
diff --git a/Components/LEGACY/Paragraph.js b/Components/LEGACY/Paragraph.js
deleted file mode 100644
index c332832..0000000
--- a/Components/LEGACY/Paragraph.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Component } from 'react';
-
-class Paragraph extends Component {
- render () {
- return (
- <p style={{width: "100%", textAlign: "left", paddingLeft: "15%", paddingRight: "15%", fontSize: "120%", color: "var(--card-text-color)"}}>
- {this.props.children}
- </p>
- );
- }
-}
-
-export default Paragraph;
\ No newline at end of file
diff --git a/Components/LEGACY/Scroller.js b/Components/LEGACY/Scroller.js
deleted file mode 100644
index 69e0fa3..0000000
--- a/Components/LEGACY/Scroller.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Component } from "react";
-import Styles from '../styles/scroller.module.css';
-
-class Scroller extends Component {
- constructor(props) {
- super(props);
- }
- render() {
- this.props.text = this.props.text.concat(this.props.text);
- return (
- <div className={Styles.container}>
- {
- this.props.text.map((item, index) => {
- console.log([this.props.text, this.props.text])
- return <div className={Styles.item} key={index}>{item}</div>;
- })
- }
- </div>
- )
- }
-}
-export default Scroller;
diff --git a/Components/LEGACY/SectionHeading.js b/Components/LEGACY/SectionHeading.js
deleted file mode 100644
index ed77661..0000000
--- a/Components/LEGACY/SectionHeading.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from "react";
-import Styles from '../styles/sectionheading.module.css';
-
-class SectionHeading extends Component {
- constructor(props) {
- super(props);
- }
-
-
- render() {
- return (
- <h1 className={Styles.title} id={this.props.id}>{this.props.children}</h1>
- )
- }
-}
-
-export default SectionHeading;
\ No newline at end of file
diff --git a/Components/LEGACY/Subheading.js b/Components/LEGACY/Subheading.js
deleted file mode 100644
index 964f1dd..0000000
--- a/Components/LEGACY/Subheading.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from "react";
-import Styles from '../styles/subheading.module.css';
-
-class SubHeading extends Component {
- constructor(props) {
- super(props);
- }
-
-
- render() {
- return (
- <h2 className={Styles.title} id={this.props.id}>{this.props.children}</h2>
- )
- }
-}
-
-export default SubHeading;
\ No newline at end of file
diff --git a/Components/LEGACY/TileRow.js b/Components/LEGACY/TileRow.js
deleted file mode 100644
index ed0bf0b..0000000
--- a/Components/LEGACY/TileRow.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import react, { Component, cloneElement } from "react";
-import Styles from '../styles/tilerow.module.css';
-
-class TileRow extends Component {
- constructor(props) {
- super(props);
- }
- render() {
- return (
- <div className={Styles.container}>
- {
- react.Children.toArray(this.props.children).map((item, index) => {
- if (this.props.divless !== false) { // Intentional comparison to false, initially had a default of false, now has a default of true
- const className = (item.props.className ? item.props.className + " " : "") + Styles.item
-
- const key = index;
-
- const props = {
- className,
- key
- }
-
- return cloneElement(item, props);
- } else {
- return <div className={Styles.item + " " + Styles.fitItemWidth} key={index}>{item}</div>;
- }
- })
- }
- </div>
- )
- }
-}
-export default TileRow;
diff --git a/Components/LEGACY/Timeline.js b/Components/LEGACY/Timeline.js
deleted file mode 100644
index e69de29..0000000
--- a/Components/LEGACY/Timeline.js
+++ /dev/null
diff --git a/Components/Panels.js b/Components/Panels.js
index 3c1d2e6..e2e89d9 100644
--- a/Components/Panels.js
+++ b/Components/Panels.js
@@ -96,7 +96,8 @@
class Divider extends Component {
render() {
- return <div className={Styles.divider}></div>
+ // return <div className={Styles.divider} style={{ backgroundColor: this.props.bound == this.props.name ? "red" : "var(--theme-ui-colors-hint)"}}></div>
+ return <div className={Styles.divider} style={{ backgroundColor: "var(--theme-ui-colors-hint)"}}></div>
}
}
diff --git a/pages/clicksforms.js b/pages/clicksforms.js
index 45b63df..1211c9e 100644
--- a/pages/clicksforms.js
+++ b/pages/clicksforms.js
@@ -4,59 +4,82 @@
import { AutoLayout, Panel, Title, Subtitle, Text, Divider } from '../Components/Panels';
import { List, ListItem, Code } from '../Components/Texttools';
import Link from 'next/link';
+import React from 'react';
-export default function Home() {
- return (
- <>
- <Header
- name="ClicksForms"
- subtext="Custom forms on Discord"
- gradient={["71AFE5", "6576CC"]}
- wave="web/waves/header/clicksforms"
- buttons={[
- // {color: "6576CC", buttonText: "FFFFFF", link: "#features", text: "Features"},
- {color: "6576CC", buttonText: "FFFFFF", link: "#commands", text: "Commands"},
- {color: "6576CC", buttonText: "FFFFFF", link: "#services", text: "Services"},
- {color: "775EBF", buttonText: "FFFFFF", link: "#invite", text: "Invite"}
- ]}
- hideArrow={true}
- />
- <AutoLayout>
- <Panel halfSize={true} id="commands">
- <Title>Commands</Title>
- <Divider />
- <Text>Standard commands to use ClicksForms</Text>
- <List colour="6576CC">
- <ListItem><Code colour="6576CC">/accept</Code> Completes a form you are asked to fill in.</ListItem>
- <ListItem><Code colour="6576CC">/apply</Code> Apply to a form.</ListItem>
- <ListItem><Code colour="6576CC">/create</Code> Creates a new form.</ListItem>
- <ListItem><Code colour="6576CC">/download</Code> Downloads a form from a service e.g. Google Forms.</ListItem>
- <ListItem><Code colour="6576CC">/help</Code> Lists all commands.</ListItem>
- <ListItem><Code colour="6576CC">/responses</Code> Lets you view responses to your servers form.</ListItem>
- <ListItem><Code colour="6576CC">/manage</Code> Lets you manage your servers forms.</ListItem>
- </List>
- </Panel>
- <Panel halfSize={true} id="services">
- <Title>Services</Title>
- <Divider />
- <Text>ClicksForms supports services such as <a href="https://docs.google.com/forms">Google Forms</a> through our Add-on.</Text>
- <Text>Our API is public. You can view it <Link href="/clicksforms/privacy">GitHub</Link>.</Text>
- </Panel>
- <Panel halfSize={true} id="invite">
- <Title>Invite</Title>
- <Divider />
- <CardRow><Card
- wave="clicksforms"
- icon="bots/clicksforms/circle"
- buttonText={"FFFFFF"} gradient={["71AFE5", "6576CC"]}
- title="Invite"
- subtext="Invite ClicksForms to your server"
- buttons={[
- {color: "775EBF", link: "https://discord.com/api/oauth2/authorize?client_id=805392054678192169&permissions=2416307200&scope=bot%20applications.commands", text: "Invite"}
- ]}
- /></CardRow>
- </Panel>
- </AutoLayout>
- </>
- )
-}
+export default class Home extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ toHighlight: null,
+ };
+ }
+
+ highlightSection(that, section) {
+ console.log(section);
+ that.setState({toHighlight: section});
+ }
+
+ render() {
+ return (
+ <>
+ <Header
+ name="ClicksForms"
+ subtext="Custom forms on Discord"
+ gradient={["71AFE5", "6576CC"]}
+ wave="web/waves/header/clicksforms"
+ buttons={[
+ {id: "commands", color: "6576CC", buttonText: "FFFFFF", link: "#commands", text: "Commands"},
+ {id: "services", color: "6576CC", buttonText: "FFFFFF", link: "#services", text: "Services"},
+ {id: "privacy", color: "6576CC", buttonText: "FFFFFF", link: "#privacy", text: "Privacy"},
+ {id: "invite", color: "775EBF", buttonText: "FFFFFF", link: "#invite", text: "Invite"}
+ ]}
+ hideArrow={true}
+ that={this}
+ callback={this.highlightSection}
+ />
+ <AutoLayout>
+ <Panel halfSize={true} id="commands">
+ <Title>Commands</Title>
+ <Divider bound={this.state.toHighlight} name="commands"/>
+ <Text>Standard commands to use ClicksForms</Text>
+ <List colour="6576CC">
+ <ListItem><Code colour="6576CC">/accept</Code> Completes a form you are asked to fill in.</ListItem>
+ <ListItem><Code colour="6576CC">/apply</Code> Apply to a form.</ListItem>
+ <ListItem><Code colour="6576CC">/create</Code> Creates a new form.</ListItem>
+ <ListItem><Code colour="6576CC">/download</Code> Downloads a form from a service e.g. Google Forms.</ListItem>
+ <ListItem><Code colour="6576CC">/help</Code> Lists all commands.</ListItem>
+ <ListItem><Code colour="6576CC">/responses</Code> Lets you view responses to your servers form.</ListItem>
+ <ListItem><Code colour="6576CC">/manage</Code> Lets you manage your servers forms.</ListItem>
+ </List>
+ </Panel>
+ <Panel halfSize={true} id="services">
+ <Title>Services</Title>
+ <Divider bound={this.state.toHighlight} name="services"/>
+ <Text>ClicksForms supports services such as <a href="https://docs.google.com/forms">Google Forms</a> through our Add-on.</Text>
+ <Text>Our API is public. You can view it <Link href="/clicksforms/privacy">GitHub</Link>.</Text>
+ </Panel>
+ <Panel halfSize={true} id="privacy">
+ <Title>Privacy</Title>
+ <Divider bound={this.state.toHighlight} name="privacy"/>
+ <Text>You should always know what we know and store about you, so <a href="https://clicksminuteper.github.io/policies/clicksforms">here</a> is the complete list.</Text>
+ <Text>We also have a list of terms for using ClicksForms, it can be viewed <a href="https://clicksminuteper.github.io/policies/clicksformstos">here</a>.</Text>
+ </Panel>
+ <Panel halfSize={true} id="invite">
+ <Title>Invite</Title>
+ <Divider bound={this.state.toHighlight} name="invite"/>
+ <CardRow><Card
+ wave="clicksforms"
+ icon="bots/clicksforms/circle"
+ buttonText={"FFFFFF"} gradient={["71AFE5", "6576CC"]}
+ title="Invite"
+ subtext="Invite ClicksForms to your server"
+ buttons={[
+ {color: "775EBF", link: "https://discord.com/api/oauth2/authorize?client_id=805392054678192169&permissions=2416307200&scope=bot%20applications.commands", text: "Invite"}
+ ]}
+ /></CardRow>
+ </Panel>
+ </AutoLayout>
+ </>
+ )
+ }
+}
\ No newline at end of file
diff --git a/pages/rsm.js b/pages/rsm.js
index fba630c..1aa96da 100644
--- a/pages/rsm.js
+++ b/pages/rsm.js
@@ -26,6 +26,7 @@
buttons={[
// {color: "424242", buttonText: "FFFFFF", link: "#features", text: "Features"},
{color: "424242", buttonText: "FFFFFF", link: "#commands", text: "Commands"},
+ {color: "424242", buttonText: "FFFFFF", link: "#privacy", text: "Privacy"},
{color: "F27878", buttonText: "FFFFFF", link: "#invite", text: "Invite"}
]}
hideArrow={true}
@@ -77,7 +78,7 @@
<ListItem><Code colour="F27878">m!modmail</Code> Shows the setup for the mail command.</ListItem>
</List>
</Panel>
- <Panel halfSize={true}>
+ <Panel halfSize={false}>
<Title>Emergency Commands</Title>
<Divider />
<Text>Moderation commands to set up systems and moderate users</Text>
@@ -87,6 +88,11 @@
<ListItem><Code colour="F27878">m!unlock</Code> Unlocks the channel. Slowmode is removed and messages can be sent.</ListItem>
</List>
</Panel>
+ <Panel halfSize={true} id="privacy">
+ <Title>Privacy</Title>
+ <Divider />
+ <Text>You should always know what we know and store about you, so <a href="https://clicksminuteper.github.io/policies/rsm">here</a> is the complete list.</Text>
+ </Panel>
<Panel halfSize={true} id="invite">
<Title>Invite</Title>
<Divider />
diff --git a/pages/supporters.js b/pages/supporters.js
index 1220e60..d456f35 100644
--- a/pages/supporters.js
+++ b/pages/supporters.js
@@ -116,7 +116,7 @@
)
})
}
- <Image src="/heart.svg" width={100} height={100} />
+ <Image src="/heart.svg" width={100} height={100} alt="<3"/>
</Panel>
</AutoLayout>
</>
diff --git a/styles/Components/panels.module.css b/styles/Components/panels.module.css
index 7c0b54a..2229866 100644
--- a/styles/Components/panels.module.css
+++ b/styles/Components/panels.module.css
@@ -87,6 +87,5 @@
height: 4px;
border-radius: 100vw;
margin-block: 10px;
- background-color: var(--theme-ui-colors-hint);
transition: background-color 0.3s ease-in-out;
}