Solved conflicts with main branch

Author: Nathaly Toledo

README.md

@@ -38,6 +38,7 @@ The backend (API) code is stored in the `server/` directory.
 
 https://user-images.githubusercontent.com/9143339/159093687-6fc90733-0599-445c-b08b-a6378d988e4b.mov
 
+## Contributing
 Would you like to become a contributor? Please check out our [contributors guide](.github/CONTRIBUTING.md)! 💝
 
 ```shell

src/components/LetterLoad.vue

@@ -32,7 +32,7 @@
         </div>
       </div>
 
-      <v-card-actions>
+      <v-card-actions class="justify-center">
         <v-btn>
           <AuthNav />
         </v-btn>

src/components/RepresentativeCard.vue

@@ -1,24 +1,20 @@
 <template lang="html">
   <v-card
     flat
-    v-on:click="handleRepClick"
     :to="{
       name: 'RepClick',
       params: { member: member.name }
     }"
+    @click="handleRepClick"
   >
-    <v-card-title v-text="member.name" class="padding-y-0"></v-card-title>
+    <v-card-title class="justify-center" v-text="member.name" />
     <v-card-subtitle
+      class="text-center padding-y-0 margin-top-10"
       v-text="member.title"
-      class="text-align-left padding-y-0 margin-top-10"
-    >
-    </v-card-subtitle>
+    />
 
     <!-- social media icons -->
-    <div
-      id="social-media-channel"
-      class="text-align-left social-media-channel-box"
-    >
+    <div id="social-media-channel" class="text-center social-media-channel-box">
       <a
         v-for="socialMedia in member.socialMediaPages"
         :key="socialMedia.type"
@@ -36,36 +32,35 @@
     </div>
 
     <v-img
-      class="text-align-left rep-img"
+      class="mx-auto text-align-left rep-img"
       v-bind="member"
       :src="member.photoUrl"
       height="75"
       width="75"
       :position="member.photoCroppingCSS"
-    >
-    </v-img>
-    <v-card-subtitle
-      v-text="member.address_city"
-      class="text-align-left rep-img"
-    ></v-card-subtitle>
+    />
+    <v-card-subtitle class="text-center rep-img" v-text="member.address_city" />
   </v-card>
 </template>
 
 <script lang="js">
 import axios from 'axios'
 
 export default {
-  name: 'representative-card',
+  name: 'RepresentativeCard',
   components: {
   },
   props: {
-    member: Object
+    member: {
+      type: Object,
+      required: true
+    }
   },
+  emits: ['handleRepSelected'],
   data() {
     return {
     }
   },
-  emits: ['handleRepSelected'],
   methods: {
     async handleRepClick() {
       try {