button design is not consistent (Shadows, Form and Color)

[Grizzly127]

What?

the design of the buttons is not consistent. We should define a clear system, which form the buttons have, when a button should be long/short, when it should have shadows and when there is an icon.

• Shadows
  usually the buttons don't have a shadow, except for the "Create a new group" button in Kompakkt:

and for the "Choose files/folders" buttons in the upload process:

• Form and color
  for "New Object", "New Collection"(Kompakkt), "Publish" and "Annotate"(semantic-kompakkt) we use the round button and the buttons are colored.
  The rounded and colored form is also often used just for an information. I think it's confusing, because you mistake the information for a button.

Here is information used at the bottom right and at the top are buttons:

This is also information in the user profile:

Here you can use the toggle button with the buttons at the side, but they are not buttons in a sense that they open a new side/option.
Next to them is another button but with another form: rounded corners

Those buttons with the rounded corners and short length and also colored is also used in dialogs, in the stepper-header:
Here in the "visibility" window:

The stepper header (in the metadata window and Upload process):

There are also buttons with rounded corners and long length in dialogs, mostly they are white, with colored font:
Here in the upload process (grey when disabled):

here in the metadata process editor:
the "add" button is here a colored and long one.

Dialogs like closing the setting viewer, deleting an object and resetting the upload queue have colored long buttons in a small dialog window:

@HeyItsBATMAN @ZetOE @lozanaross

[lozanaross]

@Grizzly127 I think we need to sort this out in the Figma files, please propose a more consistent system and then we can create individual issues for the individual areas where buttons appear. We need rules regarding:

• "pills" (heavily rounded buttons)
• actionable buttons
• primary vs secondary buttons (e.g. primary buttons usually have a fill, and secondary buttons usually have an outline)
• steppers, etc.

Note that the orange is the signature TIB color, so it should only be used in Semantic Kompakkt and not in Kompakkt itself. Red and blue color can be used across both instances, and ideally consistently so.

[Grizzly127]

Button design:

Some rules that are already established:

• Buttons usually don't have shadows
• Primary button:

• Secondary button:

• Disabled primary button:

• Disabled secondary button:

• Pill buttons always have an icon:

[Grizzly127]

Therefore here are some wrong buttons in the Upload form:

• In the first step the secondary button is wrong:

• in the settings it is also wrong:

• also in the metadata form:

• also in the visibility and access form:

• in the Finalize step both buttons are wrong:

[HeyItsBATMAN]

Pushed a commit that:

• makes sure all used buttons are mat-flat-button or mat-stroked-button (the outlined button from Angular Material)
• applies the correct border-color to mat-stroked-button when disabled
• applies the correct text color to mat-stroked-button when enabled
• replaces the the "Finish!" button in the final wizard step

Example screenshots (though these changes apply to all buttons you previously mentioned):