Customising the UI

You can use the Team Finder out of the box without changing very much of the code.

We might make the entire front end customisable with environment variables in the future, but for now you'll need to fork the Team Finder and customise the front end by editing these files:

Colours

The app uses Tailwind for styling the app. The tailwind.config.js file contains any custom styling rules we have in place - most relevantly, the custom colours used for the app.

https://github.com/GameMakersToolkit/team-finder/blob/main/ui/tailwind.config.js

// The existing colours.name["number"] values are here:
// https://tailwindcss.com/docs/customizing-colors
colors: {
  darkbg: colors.neutral["800"],
  lightbg: colors.gray["600"],
  'lightbg-highlight': colors.gray["500"],
  accent1: colors.fuchsia["500"],
  accent2: colors.yellow["500"],

  // You can also use custom colours with their hex colour definition
  primary: "#ff680a",
  'primary-highlight': "#cc570a",
}

Images

To change the background image, header image and tab icon, you can replace the files here but keep the filenames the same:

https://github.com/GameMakersToolkit/team-finder/tree/main/ui/public https://github.com/GameMakersToolkit/team-finder/tree/main/ui/public/logos

Tab title/description

In order to customise the tab title (and the site description, if you want one), you can edit the text here:

https://github.com/GameMakersToolkit/team-finder/blob/main/ui/index.html

<title>Your tab title goes here, in the title tags</title>