More light mode stuff

Author: Bottersnike

.gitmodules

@@ -1,3 +1,3 @@
 [submodule "src/node_modules/@ractf/ui-kit"]
-	path = src/node_modules/@ractf/ui-kit
+	path = src/@ractf/ui-kit
 	url = https://github.com/ractf/ui-kit

jsconfig.json

@@ -0,0 +1,6 @@
+{
+    "compilerOptions": {
+        "baseUrl": "src"
+    },
+    "include": ["src"]
+}

src/@ractf/ui-kit

@@ -0,0 +1,39 @@
+import { forwardRef, createElement } from "react";
+export { default as useReactRouter } from "./useReactRouter";
+export { default as useWindowSize } from "./useWindowSize";
+
+export const TYPES = ["primary", "secondary", "success", "info", "warning", "danger", "light"];
+
+export const makeClass = (...classes) => (
+    classes.filter(x => !!x).join(" ")
+);
+
+export const getHeight = (...children) => {
+    let height = 0;
+    children.forEach(child => {
+        let styles = window.getComputedStyle(child);
+        height += child.offsetHeight;
+        height += parseFloat(styles['marginTop']);
+        height += parseFloat(styles['marginBottom']);
+    });
+    return height;
+};
+
+export const basicComponent = (localClass, element) => forwardRef(
+    ({ className, ...props }, ref) => createElement(element || "div", {
+        className: makeClass(localClass, className),
+        ...props, ref: ref
+    })
+);
+
+export const propsToTypeClass = (props, styles, fallback) => {
+    let className = "";
+    for (const i of TYPES) {
+        if (props[i]) {
+            if (className.length) className += " ";
+            className += styles[i];
+        };
+    }
+    if (!className.length && fallback) className += styles[fallback];
+    return className;
+};

src/@ractf/util/index.js

@@ -71,10 +71,10 @@ export default ({ children }) => {
 
     const header = <Wordmark />;
     const footer = <>
-        <div className="sbtfCopy">
+        <footer>
             <img alt={""} src={footerLogo} />
             &copy; Really Awesome Technology Ltd 2020
-        </div>
+        </footer>
         <Link to="/">
             {t("footer.home")}
         </Link> - <Link to="/privacy">

src/node_modules/@ractf/util/useReactRouter.js renamed to src/@ractf/util/useReactRouter.js

@@ -526,8 +526,8 @@ class APIClass extends Component {
         }
     };
 
-    modifyUser = (userId, data) => this.patch(BASE_URL + ENDPOINTS.USER + userId, data);
-    modifyTeam = (teamId, data) => this.patch(BASE_URL + ENDPOINTS.TEAM + teamId, data);
+    modifyUser = (userId, data) => this.patch(ENDPOINTS.USER + userId, data);
+    modifyTeam = (teamId, data) => this.patch(ENDPOINTS.TEAM + teamId, data);
 
     createTeam = (name, password) => {
         return new Promise((resolve, reject) => {

src/node_modules/@ractf/util/useWindowSize.js renamed to src/@ractf/util/useWindowSize.js

@@ -18,6 +18,10 @@ $link: (
     font-size: 100%;
 }
 
+p {
+    margin: 0;
+}
+
 body {
     font-family: $fontStack;
     background-color: map-get($base, "background");
@@ -64,6 +68,7 @@ pre > code {
 a, .linkStyle {
     text-decoration: none;
     color: map-get($link, "color");
+    cursor: pointer;
     margin: 0;
     padding: 0;
 
@@ -261,9 +266,9 @@ b {
     border-radius: 2px;
     display: flex;
     align-items: center;
-    background-color: $red_200;
+    background-color: map-get($colours, "red");
     &.less {
-        background-color: #f5954c;
+        background-color: map-get($colours, "yellow");
     }
     color: $back_900;
     font-weight: 600;

src/components/SiteNav.js

@@ -93,16 +93,18 @@ const CategoryList = () => {
 
     return <Page>
         <PageHead subTitle={t("categories.pick")} title={t("categories.all")} />
-        {api.challenges.map(i => {
-            let solved = i.challenges.filter(j => j.solved).length;
-
-            return <Leader key={i.id} link={"/campaign/" + i.id} green={solved === i.challenges.length}
-                sub={solved === i.challenges.length ? t("categories.finished") :
-                    solved === 0 ? t("categories.none") :
-                        t("categories.some", { count: i.challenges.length, total: solved })}>
-                {i.name}
-            </Leader>;
-        })}
+        <Row>
+            {api.challenges.map(i => {
+                let solved = i.challenges.filter(j => j.solved).length;
+
+                return <Leader key={i.id} link={"/campaign/" + i.id} green={solved === i.challenges.length}
+                    sub={solved === i.challenges.length ? t("categories.finished") :
+                        solved === 0 ? t("categories.none") :
+                            t("categories.some", { count: i.challenges.length, total: solved })}>
+                    {i.name}
+                </Leader>;
+            })}
+        </Row>
     </Page>;
 };
 

src/containers/controllers/API.js

@@ -38,7 +38,7 @@
     }
     .teamMemberico {
         font-size: 0.9em;
-        color: $fg;
+        color: map-get($colours, "white");
 
         svg {
             margin-bottom: -0.125em;
@@ -154,7 +154,7 @@
 }
 .userSolve {
     padding: 12px 16px;
-    background-color: rgba($back_lift, 0.3);
+    background-color: $back_lift;
     margin-bottom: 4px;
     width: 100%;
     text-align: left;

src/containers/controllers/App.scss

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import {
     Page, HR, Row, TabbedView, Tab, Button, Form, FormError, Input,
-    Checkbox, FormGroup
+    Checkbox, FormGroup, InputButton
 } from "@ractf/ui-kit";
 import { apiContext, appContext, apiEndpoints, zxcvbn, localConfig } from "ractf";
 
@@ -79,6 +79,7 @@ export default () => {
     };
 
     const changeUsername = ({ name }) => {
+        console.log(name);
         if (!name)
             return setUnError(t("settings.uname_required"));
         if (name === api.user.username)
@@ -144,14 +145,10 @@ export default () => {
 
                 <Form handle={changeUsername}>
                     <FormGroup htmlFor={"name"} label={t("username")}>
-                        <Input name={"name"} val={api.user.username} limit={36}
-                            placeholder={t("username")} />
+                        <InputButton name={"name"} label={t("username")} val={api.user.username}
+                            limit={36} placeholder={t("username")} button={t("save")} submit />
                     </FormGroup>
-
                     {unError && <FormError>{unError}</FormError>}
-                    <Row>
-                        <Button submit>{t("save")}</Button>
-                    </Row>
                 </Form>
                 <HR />
                 <Form handle={changePassword}>