aboutsummaryrefslogtreecommitdiffstats
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/FormListing.tsx26
-rw-r--r--src/components/HeaderBar/index.tsx26
-rw-r--r--src/components/Loading.tsx4
-rw-r--r--src/components/OAuth2Button.tsx66
-rw-r--r--src/components/Tag.tsx2
5 files changed, 62 insertions, 62 deletions
diff --git a/src/components/FormListing.tsx b/src/components/FormListing.tsx
index f53efe2..0905903 100644
--- a/src/components/FormListing.tsx
+++ b/src/components/FormListing.tsx
@@ -2,7 +2,7 @@
import { css, jsx } from "@emotion/react";
import { Link } from "react-router-dom";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
import Tag from "./Tag";
@@ -15,8 +15,8 @@ interface FormListingProps {
form: Form
}
-function FormListing({ form }: FormListingProps) {
- const listingStyle = css`
+function FormListing({ form }: FormListingProps): JSX.Element {
+ const listingStyle = css`
background-color: ${form.features.includes(FormFeatures.Open) ? colors.success : colors.darkButNotBlack};
width: 60%;
padding: 20px;
@@ -37,18 +37,18 @@ function FormListing({ form }: FormListingProps) {
}
`;
- let closedTag;
+ let closedTag;
- if (!form.features.includes(FormFeatures.Open)) {
- closedTag = <Tag text="CLOSED" color={colors.error}/>
- };
+ if (!form.features.includes(FormFeatures.Open)) {
+ closedTag = <Tag text="CLOSED" color={colors.error}/>;
+ }
- return <Link to={`/form/${form.id}`} css={listingStyle}>
- <div>
- <h3 css={{fontSize: "1.5em", marginBottom: "0"}}>{closedTag}{form.name} <FontAwesomeIcon icon={faArrowRight} css={{fontSize: "0.75em", paddingBottom: "1px"}}/></h3>
- <p css={{marginTop: "5px"}}>{form.description}</p>
- </div>
- </Link>
+ return <Link to={`/form/${form.id}`} css={listingStyle}>
+ <div>
+ <h3 css={{fontSize: "1.5em", marginBottom: "0"}}>{closedTag}{form.name} <FontAwesomeIcon icon={faArrowRight} css={{fontSize: "0.75em", paddingBottom: "1px"}}/></h3>
+ <p css={{marginTop: "5px"}}>{form.description}</p>
+ </div>
+ </Link>;
}
export default FormListing;
diff --git a/src/components/HeaderBar/index.tsx b/src/components/HeaderBar/index.tsx
index b789ddb..dfe3957 100644
--- a/src/components/HeaderBar/index.tsx
+++ b/src/components/HeaderBar/index.tsx
@@ -16,17 +16,17 @@ width: 100%;
transition: height 1s;
`;
-function HeaderBar({ title }: HeaderBarProps) {
- if (!title) {
- title = "Python Discord Forms";
- };
+function HeaderBar({ title }: HeaderBarProps): JSX.Element {
+ if (!title) {
+ title = "Python Discord Forms";
+ }
- return <div>
- <div>
- <Header1 css={headerImageStyles}/>
- <Header2 css={headerImageStyles}/>
- </div>
- <h1 css={css`
+ return <div>
+ <div>
+ <Header1 css={headerImageStyles}/>
+ <Header2 css={headerImageStyles}/>
+ </div>
+ <h1 css={css`
font-size: 4vw;
margin: 0;
margin-top: 30px;
@@ -51,9 +51,9 @@ function HeaderBar({ title }: HeaderBarProps) {
margin-left: 0;
}
`}>
- {title}
- </h1>
- </div>
+ {title}
+ </h1>
+ </div>;
}
export default HeaderBar;
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
index 8454366..8dd5474 100644
--- a/src/components/Loading.tsx
+++ b/src/components/Loading.tsx
@@ -5,13 +5,13 @@ import { PropagateLoader } from "react-spinners";
import HeaderBar from "../components/HeaderBar";
-function Loading() {
+function Loading(): JSX.Element {
return <div>
<HeaderBar title={"Loading..."}/>
<div css={{display: "flex", justifyContent: "center", paddingTop: "40px"}}>
<PropagateLoader color="white"/>
</div>
- </div>
+ </div>;
}
export default Loading;
diff --git a/src/components/OAuth2Button.tsx b/src/components/OAuth2Button.tsx
index c364369..4fa3f61 100644
--- a/src/components/OAuth2Button.tsx
+++ b/src/components/OAuth2Button.tsx
@@ -1,7 +1,7 @@
/** @jsx jsx */
import { css, jsx } from "@emotion/react";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faDiscord } from "@fortawesome/free-brands-svg-icons";
import colors from "../colors";
@@ -40,49 +40,49 @@ span {
`;
function doLogin(disableFunction: (newState: boolean) => void) {
- disableFunction(true);
+ disableFunction(true);
- const redirectURI = encodeURIComponent(document.location.protocol + "//" + document.location.host + "/callback");
+ const redirectURI = encodeURIComponent(document.location.protocol + "//" + document.location.host + "/callback");
- const windowRef = window.open(
- `https://discord.com/api/oauth2/authorize?client_id=${OAUTH2_CLIENT_ID}&response_type=code&scope=identify&redirect_uri=${redirectURI}&prompt=none`,
- "Discord_OAuth2",
- "height=700,width=500,location=no,menubar=no,resizable=no,status=no,titlebar=no,left=300,top=300"
- )
+ const windowRef = window.open(
+ `https://discord.com/api/oauth2/authorize?client_id=${OAUTH2_CLIENT_ID}&response_type=code&scope=identify&redirect_uri=${redirectURI}&prompt=none`,
+ "Discord_OAuth2",
+ "height=700,width=500,location=no,menubar=no,resizable=no,status=no,titlebar=no,left=300,top=300"
+ );
- const interval = setInterval(() => {
- if (windowRef?.closed) {
- clearInterval(interval);
- disableFunction(false);
- }
- }, 500)
+ const interval = setInterval(() => {
+ if (windowRef?.closed) {
+ clearInterval(interval);
+ disableFunction(false);
+ }
+ }, 500);
- window.onmessage = (code: MessageEvent) => {
- if (code.data.source) {
- // React DevTools has a habit of sending messages, ignore them.
- return;
- }
+ window.onmessage = (code: MessageEvent) => {
+ if (code.data.source) {
+ // React DevTools has a habit of sending messages, ignore them.
+ return;
+ }
- if (code.isTrusted) {
- windowRef?.close();
+ if (code.isTrusted) {
+ windowRef?.close();
- console.log("Code received:", code.data);
+ console.log("Code received:", code.data);
- disableFunction(false);
- clearInterval(interval);
+ disableFunction(false);
+ clearInterval(interval);
- window.onmessage = null;
- }
- };
+ window.onmessage = null;
+ }
+ };
}
-function OAuth2Button() {
- const [disabled, setDisabled] = useState<boolean>(false);
+function OAuth2Button(): JSX.Element {
+ const [disabled, setDisabled] = useState<boolean>(false);
- return <button disabled={disabled} onClick={() => doLogin(setDisabled)} css={buttonStyling}>
- <span css={{marginRight: "10px"}}><FontAwesomeIcon icon={faDiscord} css={{fontSize: "2em", marginTop: "3px"}}/></span>
- <span>Sign in with Discord</span>
- </button>;
+ return <button disabled={disabled} onClick={() => doLogin(setDisabled)} css={buttonStyling}>
+ <span css={{marginRight: "10px"}}><FontAwesomeIcon icon={faDiscord} css={{fontSize: "2em", marginTop: "3px"}}/></span>
+ <span>Sign in with Discord</span>
+ </button>;
}
export default OAuth2Button;
diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx
index 0c55348..3e5b1f5 100644
--- a/src/components/Tag.tsx
+++ b/src/components/Tag.tsx
@@ -7,7 +7,7 @@ interface TagProps {
fontSize?: string
}
-function Tag(props: TagProps) {
+function Tag(props: TagProps): JSX.Element {
return <span css={css`
font-size: ${props.fontSize ? props.fontSize : "0.75em"};
background-color: ${props.color};
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-19 19:26:57 +0000