[refactoring] Centralize text alignment and view margins

Author: g3force

src/App.vue

@@ -65,6 +65,5 @@
     }
 
     .view {
-        text-align: center;
     }
 </style>

src/assets/css/style.css

@@ -19,3 +19,11 @@
 button, .btn-group {
     margin: 0.25em;
 }
+
+.game-controller-container {
+    text-align: center;
+}
+
+.game-controller-view {
+    margin: 0.5em;
+}

src/components/AutonomousControl.vue

@@ -1,9 +1,9 @@
 <template>
     <div id="container">
-        <ManualControl class="view"/>
-        <TeamOverview class="view"/>
-        <Events class="view"/>
-        <div class="view">
+        <ManualControl class="game-controller-view"/>
+        <TeamOverview class="game-controller-view"/>
+        <Events class="game-controller-view"/>
+        <div class="game-controller-view">
             <h2>Game Events</h2>
             <div class="game-events">
                 <CurrentEvents/>
@@ -55,8 +55,4 @@
         max-height: 85vh;
     }
 
-    .view {
-        margin: 0.5em;
-    }
-
 </style>

src/components/events/NewEvent.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="view">
+    <div class="game-controller-container">
         <p>
             Choose a game event and issue it in the current match. Most events are usually issued automatically
             by automatic referees,

src/components/settings/AutonomousSettings.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="view">
+    <div class="game-controller-container">
         <div class="auto-refs-connected" v-b-tooltip.hover :title="autoRefs">
             <p>
                 <b>{{autoRefsConnected}}</b> autoRefs connected.

src/components/settings/EventBehavior.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="view">
+    <div class="game-controller-container">
         <table>
             <tr v-for="eventType in eventTypes" :key="eventType">
                 <td align="left">{{eventType}}</td>
@@ -49,5 +49,4 @@
 </script>
 
 <style scoped>
-
 </style>

src/components/settings/MatchSettings.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="view">
+    <div class="game-controller-container">
         <p>
             <label>First kickoff team: </label>
             <DualSwitch
@@ -126,8 +126,4 @@
 </script>
 
 <style scoped>
-    button {
-        margin-right: 0.25em;
-        margin-left: 0.25em;
-    }
 </style>

src/components/settings/Settings.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="view">
+    <div class="game-controller-container">
         <a v-b-modal.settings-modal>
             <font-awesome-icon icon="cog" class="fa-lg"></font-awesome-icon>
         </a>

src/components/settings/TeamSettings.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="view">
+    <div class="game-controller-container">
         <table class="table-layout">
             <tr>
                 <th class="team-yellow">Yellow</th>