add colour picker for intro title, subtitle and button

[RyanCoulsonCA]

Related Item(s)

#506, #494

Changes

• Adds a new colour picker component. Allows the user to change the colour of the intro title, subtitle and "scroll to story" button.
• The colour picker is fully keyboard accessible.

Notes

Open to feedback on the design and functionality!

Testing

Steps:

1. Create a new product.
2. Play around with the new colour picker fields and ensure everything works properly.
3. Save the product and ensure everything saves correctly.
4. Load an existing product.
5. Repeat step 3 again.
6. Save the product and ensure everything saves correctly.

---

This change is 

[RyanCoulsonCA]

Your demo site is ready! 🚀 Visit it here: https://ramp4-pcar4.github.io/storylines-editor/fix-506

[gordlin]

Nice functionality! Overall, it looks very nice.

Reviewed 9 of 9 files at r1, all commit messages.
Reviewable status: all files reviewed, 3 unresolved discussions (waiting on @RyanCoulsonCA)

---

src/components/helpers/metadata-content.vue line 199 at r1 (raw file):

                    />
                </div>
                <div class="metadata-item">

May be worth explaining somewhere that the 'Button' refers to the "Jump to storyline contents" (or whatever it's called) button.

---

src/components/helpers/colour-picker-input.vue line 10 at r1 (raw file):

                    :style="{ 'background-color': selectedColour }"
                    :class="!disabled ? 'cursor-pointer' : ''"
                    class="flex flex-1 rounded w-10 mr-1"

Minor nitpick: Either make the color picker's right corners unrounded (change rounded to rounded-l), or add some slight padding on all sides (or just left + top + bottom) of the parent button. Either one would visually integrate the color picker into the button slightly better.

---

src/components/helpers/colour-picker-input.vue line 25 at r1 (raw file):

                    <span v-if="isOpen" class="text-white mx-auto self-center font-bold mix-blend-difference">X</span>
                </div>
                <input

It's a bit hard to tell that the hex text is selectable/modifiable. Maybe add a slight gray background upon hover?

Also, it seems that if you enter a non-valid hex value here, nothing happens. The user might erroneously think it's worked, or be confused why the text changed but not the color in the picker. I'd suggest either some sort of error message ("This is not a valid hex color"), or to revert the text to the last valid hex value.