🎨

Customizations

💡

This feature is in active development

Customizations allow for general look and feel adjustments to the bounty board. There is a base theme for Bankless, and any customizations will be applied on top of that theme.

How to Customize

For non-developers, as of the time of writing, the best way to request customizations is to speak to a member of the development team. 

For developers: the customers collection in the MongoDB instance may contain an optional customization object, that Bounty board will look for when rendering the board. An example customization object is here:

{
        customerId: "0125",
        name: "Gitcoin",
        customization: {
            logo: "./logo.png",
            colors: {
                bg: {
                    light: "blue.200",
                    dark: "blue.800"
                },
                primary: "#AF105B",
                Open: "blue"
            }
        }
    }

Full customizations can be found in the types/Customer interface in the src/packages/react-app directory.

Available Customizations

Colors

Bounty Board supports the passing of a colors object. This supports:

Background Color (Light and Dark)

This can be either a Chakra base them color, with darkening parameter ("red.200", "blue.50") or a Hex Code "#0AA3D8"

Provide both dark and light colors

bg: {
	light: string;
	dark: string;
}

Background (dark mode) set to "red.800" with primary set to "red" 

Background (dark mode) set to "green.800" with primary set to "green" 

Accents

Accents currently support ChakraUI color names as strings: "red" , "blue" , "yellow", OR hex codes "#0AA3D8":

Light and dark modes are automatically applied, and Bounty Board will generate the gradients appropriately

Available options are:

Status Icon Colors: Open, In-Review, In-Progress, Completed, Done, Deleted, Draft

primary (controls button colors, switch backgrounds)

Examples of Accents set independently of the background color

Logos

Pass any image URL to the logo field, and bounty board will render it. As of time of writing, logo dimensions have been tested with images as either squares or close to squares.

Text

If the Customer collection in Mongo contains a name field, this will be passed to the bounty board and rendered as a name. If not the bountyboard will fallback to the generic DAO Bounty Board title.

Customizations

💡

This feature is in active development

How to Customize

Available Customizations

Colors

Logos

Text

Customizations allow for general look and feel adjustments to the bounty board. There is a base theme for Bankless, and any customizations will be applied on top of that theme.

How to Customize

For non-developers, as of the time of writing, the best way to request customizations is to speak to a member of the development team. 

For developers: the customers collection in the MongoDB instance may contain an optional customization object, that Bounty board will look for when rendering the board. An example customization object is here:

{
        customerId: "0125",
        name: "Gitcoin",
        customization: {
            logo: "./logo.png",
            colors: {
                bg: {
                    light: "blue.200",
                    dark: "blue.800"
                },
                primary: "#AF105B",
                Open: "blue"
            }
        }
    }

Full customizations can be found in the types/Customer interface in the src/packages/react-app directory.

Available Customizations

Colors

Bounty Board supports the passing of a colors object. This supports:

Background Color (Light and Dark)

This can be either a Chakra base them color, with darkening parameter ("red.200", "blue.50") or a Hex Code "#0AA3D8"

Provide both dark and light colors

bg: {
	light: string;
	dark: string;
}

Background (dark mode) set to "red.800" with primary set to "red" 

Background (dark mode) set to "green.800" with primary set to "green" 

Accents

Accents currently support ChakraUI color names as strings: "red" , "blue" , "yellow", OR hex codes "#0AA3D8":

Light and dark modes are automatically applied, and Bounty Board will generate the gradients appropriately

Available options are:

Status Icon Colors: Open, In-Review, In-Progress, Completed, Done, Deleted, Draft

primary (controls button colors, switch backgrounds)

Examples of Accents set independently of the background color

Logos

Pass any image URL to the logo field, and bounty board will render it. As of time of writing, logo dimensions have been tested with images as either squares or close to squares.

Text

If the Customer collection in Mongo contains a name field, this will be passed to the bounty board and rendered as a name. If not the bountyboard will fallback to the generic DAO Bounty Board title.