Where Can I Find the Figma Designs for BookBrainz?

Ankit_Matth · March 23, 2025, 6:08am

Hello everyone,

I’m interested in contributing to the frontend of BookBrainz and would love to reference its design files. While searching, I found Figma designs for other MetaBrainz projects like ListenBrainz and CritiqueBrainz, but I haven’t been able to find the Figma link for BookBrainz.

Does anyone know if the Figma designs for BookBrainz are available publicly? If so, could you please share the link or guide me on where to find them?

Thanks in advance!

aerozol · March 23, 2025, 8:23am

Sorry Ankit - there are no Figma designs for BookBrainz.

Figma is a relatively new tool for MetaBrainz, and comprehensive BB mockups haven’t been done/been needed since it came into use here.

Last but not least, welcome!

Ankit_Matth · March 24, 2025, 1:04am

Thanks, @aerozol! I appreciate the clarification. Also, thanks for the warm welcome!

Actually, I wanted to ask about redesigning the footer to align with the standards of other MetaBrainz projects. While exploring, I found this PR (#739), which is related to the footer design. However, it seems inactive since 2023, likely due to conflicts that prevented it from being merged.

Currently, BookBrainz has a very minimal footer, and I’d love to enhance it by taking inspiration from ListenBrainz and CritiqueBrainz. Would it be okay for me to work on this? Looking forward to your feedback!

Targeted Footer UI:

Current Footer UI:

aerozol · March 24, 2025, 6:15am

I think this should be fine to work on - but you might want to wait until @mr_monkey confirms, he is in charge of BB design.

In any case, here are the designs for the MusicBrainz footer (really just the logo and colours should be changed for BB): https://www.figma.com/design/ln8XiFLit634KC3YkUW2RS/MusicBrainz-redesign?node-id=1111-2910&p=f&t=fO8qvw2bYFiRADf6-0

And you can create a ticket for the issue, and then assign it to yourself (you don’t have to wait for mr_monkey to do this part). See as an example: https://tickets.metabrainz.org/browse/CB-448

Ankit_Matth · March 24, 2025, 6:32am

Thanks @aerozol, for the clarification! I’ll create a ticket soon and wait there for @mr_monkey’s confirmation before getting started…

mr_monkey · March 24, 2025, 1:26pm

Hello @Ankit_Matth !
Yes, please feel free to work on updating the footer.
The old PR is incomplete and was not finished, hence it not getting merged.

In terms of code, you can take inspiration or even copy from the one we have in ListenBrainz, considering it is also a React project:

github.com/metabrainz/listenbrainz-server

frontend/js/src/components/Footer.tsx

7893558d1


      
          import * as React from "react";
          
          import { faAnglesRight } from "@fortawesome/free-solid-svg-icons";
          import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
          import { Link } from "react-router-dom";
          
          export default function Footer() {
            return (
              <section className="footer">
                <div className="container-fluid">
                  <div className="row">
                    <div className="col-sm-12 col-md-6">
                      <h3>
                        <img
                          src="/static/img/listenbrainz-logo.svg"
                          width="180"
                          alt="ListenBrainz"

Ankit_Matth · March 25, 2025, 12:31am

Got it! Will do it soon. Thanks @mr_monkey for the ListenBrainz reference!