Create new RccActionButtonComponent
With this issue we'll take the first steps towards theming the app.
We already have an RccActionButtonComponent
. Now we need a better looking one :D But we keep the old one, which will become part of the base theme. The new one ist meant to become part of a new theme.
You can find the old component over at /lib/common/src/ui-components/action-buttons
(meh plural -.-)
Rename the action-buttons
folder to _action_buttons
and place the new component into /lib/common/src/ui-components/action-button
(singular :D)
Create the new component as extension of the old one (with new template) and style it to make it look like this: Figma (With a figma account – free – you will see additional information like colors and size.)
Make the new component standalone: Getting started with standalone components
Remove the RccActionButtonModule
from /lib/common/src/ui-components/ui-components.module.ts
and instead import the new RccActionButtonComponent
directly.
Styling
For the time being just make it look like the figma document. Later on we will define css variables, classes and the like to get a proper skinning going and make things more consistent across components. So at a later point in time there will be a new issue to refine the styling for the component.
Focus only on the buttons (meaning the colored rectangles in the figma document) do not mind the header of the page or the menu yet.
In case of ambiguities, just go with your gut :D (we will come back to this component later anyway).
Requirements
-
Create a new component extending the old. -
Keep a copy of the old one (needed for extension anyway) -
create new template for the new component implementing the layout from figma -
Style the new component -
Update UiComponentsModule
at/lib/common/src/ui-components/ui-components.module.ts
Where to start
- Everything's at
/lib/common/src/ui-components
- Old component at `/lib/common/src/ui-components/actions-buttons