renamed Button.vue

frontend/src/components/Leaderboard.vue

@@ -3,10 +3,10 @@
     <div class="row">
       <h3 class="col-10"><strong>{{ this.title() }}</strong></h3>
       <div class="col-1">
-        <Button @click="prevPage" text="<"></Button>
+        <RRButton @click="prevPage" text="<"></RRButton>
       </div>
       <div class="col-1">
-        <Button @click="nextPage" text=">"></Button>
+        <RRButton @click="nextPage" text=">"></RRButton>
       </div>
     </div>
     <div class="row" v-for="entry in this.page" :key="entry.rank" >
@@ -18,13 +18,13 @@
 <script>
 
 import LeaderboardEntry from "@/components/LeaderboardEntry.vue";
-import Button from "@/components/Button.vue";
+import RRButton from "@/components/RRButton.vue";
 
 export default {
   name: "Leaderboard",
   components: {
     LeaderboardEntry,
-    Button,
+    RRButton,
   },
   data() {
     return {

frontend/src/components/Login.vue

@@ -3,15 +3,19 @@
   <div class="form-floating mb-3">
     <input type="email" class="form-control" id="floatingInput" placeholder="example name" v-model="username">
     <label for="floatingInput">Username</label>
+    <RRButton @click="setUser()" text="Confirm"></RRButton>
   </div>
-  <button type="button" class="btn btn-primary" @click="setUser()">Confirm</button>
 </template>
 
 <script>
 import {User} from "@/model/User";
+import RRButton from "@/components/RRButton.vue";
 
 export default {
   name: "Login",
+  components: {
+    RRButton
+  },
   data() {
     return {
       username: '',
@@ -41,5 +45,8 @@ export default {
 </script>
 
 <style scoped>
-
+input {
+  border: 3px solid black;
+  background-color: beige;
+}
 </style>

frontend/src/components/RRButton.vue

@@ -4,7 +4,7 @@
 
 <script lang="ts">
 export default {
-  name: "Button",
+  name: "RRButton",
   props: {
     text: {
       type: String
@@ -17,5 +17,6 @@ export default {
 button {
   border: 3px solid black;
   background-color: beige;
+  width: auto;
 }
 </style>