[Feature] Add Base Components

[Webkinger]

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

• [x] #279
• [ ] #280
• [ ] Inputs
  • [ ] #281
  • [ ] #282
  • [ ] #290
  • [ ] #289
  • [ ] #288
• [ ] #287
• [x] #286
• [ ] #285
• [ ] #284
• [ ] #283
• [ ] #301
• [ ] #302

[MarcelCoding]

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.

[Webkinger]

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

Now Tabler icons for Angular available!!!

[Akida31]

implemented first version of radio button here: akida31/cryptic-frontend@80780078c71dbd5fff8611d65838ca72b28f9101

[ClientCrash]

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.

[ClientCrash]

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)

[MarcelCoding]

@ClientCrash should I assign you to one?

[Akida31]

@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

[DevMimas]

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.

[Webkinger]

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

[Webkinger]

The font size has change to 20px!