Type and color treatmeant (#281)

* Switch from roboto to inter

* Add and use new color palette

* Fix tests

src/modules/collections/routes/browse/browse.vue

@@ -293,7 +293,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .private-view {
-	--private-view-content-padding: 0 !important;
+	--content-padding: 0 !important;
 }
 
 .action-delete {
@@ -303,7 +303,7 @@ export default defineComponent({
 
 .action-batch {
 	--v-button-background-color: var(--warning);
-	--v-button-background-color-hover: var(--warning-dark);
+	--v-button-background-color-hover: var(--warning-150);
 }
 
 .layout {

src/modules/collections/routes/overview/overview.vue

@@ -58,7 +58,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .icon {
-	--v-icon-color: var(--foreground-color-secondary);
+	--v-icon-color: var(--foreground-subdued);
 
 	::v-deep i {
 		vertical-align: unset;

src/modules/settings/routes/data-model/collections/collections.vue

@@ -106,6 +106,10 @@ export default defineComponent({
 }
 
 .hidden {
-	color: var(--foreground-color-secondary);
+	color: var(--foreground-subdued);
+}
+
+.v-table {
+	padding: var(--content-padding);
 }
 </style>

src/modules/settings/routes/data-model/fields/components/field-select/field-select.vue

@@ -229,6 +229,6 @@ export default defineComponent({
 }
 
 .v-input.hidden {
-	--input-background-color: var(--background-color-alt);
+	--background-page: var(--background-normal);
 }
 </style>

src/modules/settings/routes/data-model/fields/components/fields-management/fields-management.vue

@@ -22,6 +22,7 @@
 			dashed
 			outlined
 			full-width
+			large
 			@click="openFieldSetup()"
 		>
 			<v-icon name="add" left />
@@ -241,7 +242,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .v-divider {
-	margin: var(--private-view-content-padding) 0;
+	margin: var(--content-padding) 0;
 }
 
 .add-field {

src/modules/settings/routes/data-model/fields/fields.vue

@@ -1,21 +1,33 @@
 <template>
 	<private-view :title="collectionInfo.name">
+		<template #title-outer:prepend>
+			<v-button rounded disabled icon secondary>
+				<v-icon name="account_tree" />
+			</v-button>
+		</template>
+
+		<template #headline>
+			<v-breadcrumb :items="breadcrumb" />
+		</template>
+
 		<template #navigation>
 			<settings-navigation />
 		</template>
 
 		<div class="fields">
-			<h2 class="title">{{ $t('fields_and_layout') }}</h2>
+			<h2 class="title type-label">{{ $t('fields_and_layout') }}</h2>
 			<fields-management :collection="collection" />
 		</div>
 	</private-view>
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 import SettingsNavigation from '../../../components/navigation/';
 import useCollection from '@/compositions/use-collection/';
 import FieldsManagement from './components/fields-management';
+import useProjectsStore from '@/stores/projects';
+import { i18n } from '@/lang';
 
 export default defineComponent({
 	components: { SettingsNavigation, FieldsManagement },
@@ -26,23 +38,30 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
+		const projectsStore = useProjectsStore();
 		const { info: collectionInfo, fields } = useCollection(props.collection);
 
-		return { collectionInfo, fields };
+		const breadcrumb = computed(() => {
+			return [
+				{
+					name: i18n.t('settings_data_model'),
+					to: `/${projectsStore.state.currentProjectKey}/settings/data-model`,
+				},
+			];
+		});
+
+		return { collectionInfo, fields, breadcrumb };
 	},
 });
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/mixins/type-styles';
-
 .title {
 	margin-bottom: 12px;
-	@include type-heading-small;
 }
 
 .fields {
 	max-width: 800px;
-	padding: var(--private-view-content-padding);
+	padding: var(--content-padding);
 }
 </style>