Project switching (#206)

* Register notice component globally

* Render button as flex in full width

* Add buttons to / route

* Rename block->full-width

* Add hyrate overlay / project chooser placeholder

* Make routes named

* Dehydrate / hydrate when switching projects

* Add choose project buttons to / route

* Add main app component and hydration loader effect

* Improve routing flow

* Remove unused import statement

* Fix test

src/components/v-button/v-button.test.ts

@@ -33,15 +33,15 @@ describe('Button', () => {
 		expect(component.classes()).toContain('outlined');
 	});
 
-	it('Adds the block class for block buttons', () => {
+	it('Adds the full-width class for full-width buttons', () => {
 		const component = mount(VButton, {
 			localVue,
 			propsData: {
-				block: true
+				fullWidth: true
 			}
 		});
 
-		expect(component.classes()).toContain('block');
+		expect(component.classes()).toContain('full-width');
 	});
 
 	it('Adds the rounded class for rounded buttons', () => {

src/components/v-button/v-button.vue

@@ -3,7 +3,10 @@
 		:is="component"
 		active-class="activated"
 		class="v-button"
-		:class="[sizeClass, { block, rounded, icon, outlined, loading, secondary }]"
+		:class="[
+			sizeClass,
+			{ 'full-width': fullWidth, rounded, icon, outlined, loading, secondary }
+		]"
 		:type="type"
 		:disabled="disabled"
 		:to="to"
@@ -25,7 +28,7 @@ import useSizeClass, { sizeProps } from '@/compositions/size-class';
 
 export default defineComponent({
 	props: {
-		block: {
+		fullWidth: {
 			type: Boolean,
 			default: false
 		},
@@ -140,8 +143,8 @@ export default defineComponent({
 		}
 	}
 
-	&.block {
-		display: block;
+	&.full-width {
+		display: flex;
 		min-width: 100%;
 	}