Misc adjustment

package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-repos",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "private": true,
   "scripts": {
     "serve": "node scripts/incrementVersion.js && vue-cli-service serve",

src/App.vue

@@ -1,8 +1,8 @@
 <template>
   <h1 class="display-3 fw-bold mt-5 mb-lg-10">My Repositories</h1>
   <UserCard class="mx-auto mt-5" :user="user_data" />
-  <hr class="mt-5 mb-5" />
-  <div class="input-group btn-toolbar mx-auto mb-5 justify-content-center">
+  <hr class="mt-5 mb-4" />
+  <div class="input-group btn-toolbar mx-auto mb-4 justify-content-center">
     <div class="input-group-text" id="btnGroupAddon">Sort By</div>
     <button
       type="button"
@@ -14,10 +14,8 @@
     >
       {{ method.name }}
     </button>
-
-    <!-- <button type="button" class="btn btn-outline-secondary">Stars</button>
-    <button type="button" class="btn btn-outline-secondary">Language</button> -->
   </div>
+
   <div id="Cards" class="container-fluid row center mx-auto">
     <RepoCard
       class="col-md-6 col-lg-4 col-xl-3"
@@ -28,7 +26,7 @@
     />
   </div>
   <hr />
-  <form id="FooterBar" class="container-md justify-content-center mb-2">
+  <form id="FooterBar" class="container-md justify-content-center mb-3">
     <label for="name"> Search Other User </label>
     <input
       class="col-sm mx-2"
@@ -81,7 +79,8 @@ const sortMethods = {
   },
   name: {
     name: "Repo Name",
-    func: (a: Repo, b: Repo): number => cmp(b.name, a.name),
+    func: (a: Repo, b: Repo): number =>
+      cmp(b.name.toLowerCase(), a.name.toLowerCase()),
   },
   language: {
     name: "Language",

src/components/RepoCard.vue

@@ -1,14 +1,16 @@
 <template>
   <div class="card">
-    <div class="card-header">
-      <span class="float-left align-left">{{ index }}</span>
+    <div class="card-header py-3">
+      <span class="float-left align-left text-muted">
+        <strong>{{ index }}</strong>
+      </span>
       <img
-        class="col-sm px-1"
+        class="lang-logo px-1"
         :src="LanguageLogo(repo.language)"
         height="32"
         alt="Language"
       />
-      <span class="col-sm h4 px-1">
+      <span class="h4 px-1">
         {{ repo.name }}
         <span
           class="badge badge-pill badge-primary bg-dark px-1"
@@ -19,18 +21,26 @@
       </span>
     </div>
 
-    <div class="card-body">
+    <div
+      class="
+        card-body
+        d-flex
+        flex-column
+        align-items-center
+        justify-content-between
+      "
+    >
       <p class="card-text">{{ repo.description }}</p>
-      <div class="card-footer container row">
+      <div class="card-footer container row align-items-baseline pt-3">
         <p class="col-sm">Stars: {{ repo.stargazers_count }}</p>
         <button
-          class="btn btn-outline-success col-md-5"
+          class="btn btn-outline-success col-5"
           @click="openUrl(repo.html_url)"
         >
           View Repo
         </button>
         <button
-          class="btn btn-outline-primary col-md-3 ms-1"
+          class="btn btn-outline-primary col-3 ms-1"
           @click="openUrl(repo.homepage)"
           v-if="repo.homepage"
         >
@@ -63,22 +73,10 @@ export default class RepoCard extends Vue {
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-#RepoCard {
-  height: 120px;
-  border-radius: 1em;
-  background-color: lavender;
-  margin: 1em;
-  padding: 0.5em;
-}
-
-#InnerCard {
-  padding: 1em;
-}
-
-a {
-  color: black;
-  text-decoration: none;
+.lang-logo {
+  position: relative;
+  top: -0.25em;
+  margin-left: 0.2em;
 }
 </style>

src/components/UserCard.vue

@@ -74,9 +74,4 @@ export default class UserCard extends Vue {
   background-repeat: no-repeat;
   background-size: cover;
 }
-
-a {
-  color: black;
-  text-decoration: none;
-}
 </style>