[Feature] Add Base Components

Question

[Feature] Add Base Components

Opened this issue 3 years ago · 10 comments

Description

Add the base components to Cryptic.

Custom controls are to be developed for the game, so that the user interface can be adapted to a custom design. Another advantage is the possibility to create different themes and styles later.

For questions about the design please contact Philipp or Nibiru by Cryptic-Discord
For questions about the frontend development please contact @MaxiHuHe04

Additional context

All designs for the base components: In picture format
All base components in one overview: Live view

Icons for sidebar and inputs: Tabler Icons | Tabler icon npm

Typeface

Font 1: Jost
Font 2: Nothing You Could Do
Font size: 20px

General information

Small border radius: 8px (Button, Input etc.)
Big border radius: 16px (Pop-Up, Kacheln etc.)

Colors

Primary (Main Color)

Color	HEX	Description
	#2ECC70	Default
	#1F8C4C	Hover
	#2E473E	Disabled

Success

Color	HEX	Description
	#3ABB18	Default
	#277A10	Hover
	#2F5629	Disabled

Warning

Color	HEX	Description
	#F1C30E	Default
	#B3910B	Hover
	#675926	Disabled

Danger / Error

Color	HEX	Description
	#F00040	Default
	#B0002F	Hover
	#671E35	Disabled

Info

Color	HEX	Description
	#3281F6	Default
	#245EB5	Hover
	#2D456C	Disabled

Background / Font / Other

Color	HEX	Description
	#748781	Checkbox, radio, switch and light font disabled
	#222D2D	Button font dark disabled
	#25252B	Input background disabled
	#2B2B31	Background sidebar submenu
	#2F2F36	Background
	#1A1C23	Font dark
	#1D1D24	Background inputs Popup background dark
	#1E1E24	Background sidebar
	#434349	Font placeholder disabled
	#888888	Placholder Button font disabled
	#BEBEBE	Font grey
	#FFFFFF	Font light Popup background light

Base components

Please check off finished control

Answer 1 · 2021-06-07T11:08:09.000Z

For the font you could use this: https://www.npmjs.com/package/@fontsource/jost. With that we don't have to serve the font via Google Fonts or do manually update.

npm
@fontsource/jost
Self-host the Jost font in a neatly bundled NPM package.

Answer 2 · 2021-06-28T14:59:05.000Z

Tabler icons on npm https://www.npmjs.com/package/angular-tabler-icons

Now Tabler icons for Angular available!!!

Answer 3 · 2021-09-13T17:24:45.000Z

implemented first version of radio button here: Akida31/cryptic-frontend@8078007

Answer 4 · 2021-09-14T19:59:53.000Z

As suggested in discord i would split this issue into multiple issues (Buttons, Radiobuttons, ...) and create a milestone to track the progress. Its to big to implement all at once.

Answer 5 · 2021-09-18T15:34:22.000Z

Since not all contributers can check the checkboxes, please convert each box to an issue linked to that box. (The little button on the right)

Answer 6 · 2021-09-18T21:30:27.000Z

@ClientCrash should I assign you to one?

Answer 7 · 2021-09-27T18:54:38.000Z

@EggerWebdesign could we move the label for the buttons to the right side of the buttons? Currently if the labels would have different sizes the buttons wouldn’t be aligned nicely

Answer 8 · 2021-09-27T19:06:43.000Z

Where is the problem to align the font in cents? If the text of the button is always right-aligned, it takes up much more space.

Answer 9 · 2022-03-09T18:36:08.000Z

I have added the design for the submenu when no computers are available

Answer 10 · 2022-03-18T20:22:47.000Z

The font size has change to 20px!