fixed tabs and design (#14)

## Изменения
Изменил размер табов и поменял цветовую схему обратного калькулятору.

## Детали реализации
- Табы теперь занимают все доступную ширину. 
- Цветовая схема обратного калькулятора теперь соответствует
profcomffLight
- Теперь цветом выделяется только итоговая сумма

src/App.vue

@@ -12,7 +12,7 @@ const onChangeTab = () => {
 <template>
 	<v-app>
 		<main class="main">
-			<v-tabs v-model="currentTab" bg-color="rgb(0, 1, 76)" color="white" @update:model-value="onChangeTab">
+			<v-tabs v-model="currentTab" bg-color="rgb(0, 1, 76)" color="white" grow @update:model-value="onChangeTab">
 				<v-tab value="calc"> Рассчитать выплату </v-tab>
 				<v-tab value="reverse-calc"> Узнать составляющие выплаты </v-tab>
 			</v-tabs>

src/pages/ReverseCalc.vue

@@ -151,40 +151,36 @@ const formattedStipend = (stipend: number): string => {
 	<div class="container">
 		<div class="rounded calc">
 			<IrdomSection class="mb-0" title="Введите полученную сумму">
-				<v-text-field
-					v-model="inputSum"
-					label="Полученная сумма"
-					:rules="[formatInput]"
-					@update:model-value="recount"
-				></v-text-field>
+				<v-text-field v-model="inputSum" label="Полученная сумма" :rules="[formatInput]"
+					@update:model-value="recount"></v-text-field>
 				<v-divider class="ma-0" />
 			</IrdomSection>
 			<div class="ma-0">
 				<div class="d-flex justify-space-between">
 					<div class="pay">ГАС</div>
-					<div id="gas" class="sum-plus">{{ formattedStipend(recount['gas']) }}</div>
+					<div id="gas" class="sum-plus bg-primary">{{ formattedStipend(recount['gas']) }}</div>
 				</div>
 				<div class="d-flex justify-space-between">
 					<v-sheet class="pay">ПГАС</v-sheet>
-					<div id="pgas" class="sum-plus">{{ formattedStipend(recount['pgas']) }}</div>
+					<div id="pgas" class="sum-plus bg-primary">{{ formattedStipend(recount['pgas']) }}</div>
 				</div>
 				<div class="d-flex justify-space-between">
 					<v-sheet class="pay">ГСС</v-sheet>
-					<div id="gss" class="sum-plus">{{ formattedStipend(recount['gss']) }}</div>
+					<div id="gss" class="sum-plus bg-primary">{{ formattedStipend(recount['gss']) }}</div>
 				</div>
 				<div class="d-flex justify-space-between">
 					<v-sheet class="pay">ПГСС</v-sheet>
-					<div id="pgss" class="sum-plus">{{ formattedStipend(recount['pgss']) }}</div>
+					<div id="pgss" class="sum-plus bg-primary">{{ formattedStipend(recount['pgss']) }}</div>
 				</div>
 				<div class="d-flex justify-space-between">
 					<v-sheet class="pay">Профвзнос</v-sheet>
-					<div id="tax" class="sum-minus">{{ formattedStipend(recount['tax']) }}</div>
+					<div id="tax" class="sum-plus bg-primary">{{ formattedStipend(recount['tax']) }}</div>
 				</div>
 			</div>
 			<v-divider />
 			<div class="your d-flex justify-space-between">
 				<div class="text-h4">Сумма:</div>
-				<div class="stipend text-h4" :class="screenWidth < 800 ? 'text-h5' : 'text-h4'">
+				<div class="stipend bg-secondary" :class="screenWidth < 800 ? 'text-h5' : 'text-h4'">
 					{{ found ? formattedStipend(recount['sum']) : 'Не найдено' }}
 				</div>
 			</div>
@@ -214,26 +210,11 @@ const formattedStipend = (stipend: number): string => {
 	justify-content: center;
 }
 
-.sum-minus {
-	height: 54px;
-	display: flex;
-	align-items: center;
-	font-size: 20px;
-	background: red;
-	color: white;
-	border-radius: 999px;
-	padding: 0 30px;
-	margin: 10px 0px 10px 0px;
-	min-width: max(54px, fit-content);
-	justify-content: center;
-}
-
 .stipend {
 	height: 54px;
 	display: flex;
 	align-items: center;
 	font-size: 35px;
-	background: rgb(221, 221, 231);
 	color: white;
 	border-radius: 999px;
 	margin-top: 10px;

src/vuetify.ts

@@ -1,6 +1,26 @@
 import { createVuetify } from 'vuetify';
 import { aliases, mdi } from 'vuetify/iconsets/mdi-svg';
 
+const profcomffLight = {
+	dark: false,
+	colors: {
+		primary: 'rgb(0, 1, 76)',
+		'on-primary': 'rgb(255, 255, 255)',
+
+		secondary: 'rgb(255, 139, 0)',
+		'on-secondary': 'rgb(255, 255, 255)',
+
+		background: 'rgb(255, 255, 255)',
+		'on-background': 'rgb(0, 0, 0)',
+
+		surface: 'rgb(255, 255, 255)',
+		'on-surface': 'rgb(0, 0, 0, 0.87)',
+
+		'surface-variant': 'rgb(255, 255, 255)',
+		'on-surface-variant': 'rgba(0, 0, 0, 0.87)',
+	},
+};
+
 export const vuetify = createVuetify({
 	icons: {
 		defaultSet: 'mdi',
@@ -18,4 +38,10 @@ export const vuetify = createVuetify({
 			color: 'rgb(0, 1, 76)',
 		},
 	},
+	theme: {
+		defaultTheme: 'profcomffLight',
+		themes: {
+			profcomffLight,
+		},
+	},
 });