Removed rounded border design. Dealing with rounding all corners was …

…a pain in the ass and it's better with sharp edges in my opinion.
livelyupward · Aug 22, 2023 · bc66607 · bc66607
1 parent ba8436c
commit bc66607
Show file tree

Hide file tree

Showing 20 changed files with 151 additions and 106 deletions.
diff --git a/src/components/TeeSelector.vue b/src/components/TeeSelector.vue
@@ -66,7 +66,6 @@ interface Course {
 
   .tee-selector_modal {
     background-color: #fff;
-    @include rounded-corners;
     margin: 0 auto;
     max-height: 85%;
     overflow-y: auto;
@@ -79,7 +78,6 @@ interface Course {
     }
 
     .tee-selector_selection-container {
-      @include rounded-corners;
       list-style-type: none;
       padding-left: 0;
 
@@ -128,15 +126,8 @@ interface Course {
           font-weight: 700;
         }
 
-        &:first-of-type {
-          border-top-right-radius: 15px;
-          border-top-left-radius: 15px;
-        }
-
         &:last-of-type {
           border-bottom: 1px solid #ddd;
-          border-bottom-right-radius: 15px;
-          border-bottom-left-radius: 15px;
           margin-bottom: 0;
         }
       }

diff --git a/src/components/friends/AddFriendModal.vue b/src/components/friends/AddFriendModal.vue
@@ -86,7 +86,6 @@ async function sendFriendInvite() {
   top: 0;
 
   .add-friend_modal {
-    @include rounded-corners;
     background-color: #fff;
     padding: 0.875rem;
     position: relative;

diff --git a/src/components/friends/FriendsCard.vue b/src/components/friends/FriendsCard.vue
@@ -2,13 +2,7 @@
   <div class="card-tabs_tab-content-item">
     <div class="friends_settings-item">
       <h3 class="friends-list_title">Friends list</h3>
-      <ul v-if="props.friends.length > 0" class="friends_friends-list">
-        <li v-for="friend in props.friends" class="friends_friends-list_item">
-          <span class="friends-list_player-name">{{
-            friend.receivingUser.email !== props.user.email ? friend.receivingUser.name : friend.sendingUser.name
-          }}</span>
-        </li>
-      </ul>
+      <FriendsList v-if="props.friends.length > 0" :friends="props.friends" :user="props.user" />
       <template
         v-if="
           getFriendRequestsGetter &&
@@ -19,33 +13,17 @@
       >
         <hr />
         <h3 class="requests-list_title">Pending requests</h3>
-        <ul v-if="getFriendRequestsGetter.requestsForMe.length" class="requests_friends-list">
-          <li v-for="request in getFriendRequestsGetter.requestsForMe" class="requests_friends-list_item">
-            <span class="requests-list_player-name">{{ request.receivingUser.name }}</span>
-            <span class="requests-list_action-group">
-              <button class="requests-list_action-button bad" @click="denyFriendRequestAndRefresh(request.id)">
-                <font-awesome-icon :icon="['fas', 'ban']" />
-                <!-- Deny -->
-              </button>
-            </span>
-          </li>
-        </ul>
-        <ul v-if="getFriendRequestsGetter.requestsFromFriends.length" class="requests_friends-list">
-          <li v-for="request in getFriendRequestsGetter.requestsFromFriends" class="requests_friends-list_item">
-            <span class="requests-list_player-name">{{ request.sendingUser.name }}</span>
-            <span class="requests-list_action-group">
-              <button class="requests-list_action-button good" @click="acceptFriendRequestAndRefresh(request.id)">
-                <font-awesome-icon :icon="['fas', 'check']" />
-                <!-- Approve -->
-              </button>
-              <button class="requests-list_action-button bad" @click="denyFriendRequestAndRefresh(request.id)">
-                <font-awesome-icon :icon="['fas', 'ban']" />
-                <!-- Deny -->
-              </button>
-            </span>
-          </li>
-        </ul>
+        <RequestsForMe
+          v-if="getFriendRequestsGetter.requestsForMe.length"
+          :deny-request="denyFriendRequestAndRefresh"
+        />
+        <RequestsFromFriends
+          v-if="getFriendRequestsGetter.requestsFromFriends.length"
+          :deny-request="denyFriendRequestAndRefresh"
+          :accept-request="acceptFriendRequestAndRefresh"
+        />
       </template>
+      <p v-else class="friends_friends-list_disclaimer">No friends. Start inviting!</p>
     </div>
     <div class="friends_friends-list_invite-section">
       <button @click="emit('activateFriendModal')" class="friends_friends-list_invite-section_invite-button">
@@ -61,6 +39,9 @@ import { storeToRefs } from 'pinia';
 import { friendStore } from '../../friendStore';
 import { MiddleMan } from '../../store';
 import { inject } from 'vue';
+import FriendsList from './FriendsList.vue';
+import RequestsForMe from './RequestsForMe.vue';
+import RequestsFromFriends from './RequestsFromFriends.vue';
 
 const message = inject('message') as MiddleMan;
 const store = friendStore();
@@ -90,6 +71,8 @@ async function denyFriendRequestAndRefresh(userId: number) {
 
 <style lang="scss" scoped>
 .friends_settings-item {
+  border-left: 1px solid #ddd;
+  border-right: 1px solid #ddd;
   padding: 0.875rem;
 }
 
@@ -136,6 +119,8 @@ async function denyFriendRequestAndRefresh(userId: number) {
 }
 
 .requests_friends-list {
+  margin-bottom: 0;
+  margin-top: 0;
   padding-left: 0;
 }
 
@@ -147,14 +132,17 @@ async function denyFriendRequestAndRefresh(userId: number) {
   &:not(:last-of-type) {
     border-bottom: 1px solid #ddd;
   }
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
 }
 
 .requests-list_action-group {
   display: flex;
 }
 
 .requests-list_action-button {
-  @include rounded-corners;
   align-items: center;
   display: flex;
 
@@ -176,7 +164,6 @@ async function denyFriendRequestAndRefresh(userId: number) {
 .friends_friends-list_invite-section_invite-button {
   background-color: lighten($color: $primary, $amount: 10%);
   border: 1px solid lighten($color: $primary, $amount: 10%);
-  border-radius: 0 0 10px 10px;
   color: #fff;
   padding: 10px 0;
   width: 100%;
@@ -185,4 +172,8 @@ async function denyFriendRequestAndRefresh(userId: number) {
 .friends_friends-list_friend-icon {
   margin-right: 6px;
 }
+
+.friends_friends-list_disclaimer {
+  margin-bottom: 0;
+}
 </style>
diff --git a/src/components/friends/FriendsList.vue b/src/components/friends/FriendsList.vue
@@ -0,0 +1,19 @@
+<template>
+  <ul class="friends_friends-list">
+    <li v-for="friend in props.friends" class="friends_friends-list_item">
+      <span class="friends-list_player-name">{{
+        friend.receivingUser.email !== props.user.email ? friend.receivingUser.name : friend.sendingUser.name
+      }}</span>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import { type Friendship } from '../../friendStore';
+import { type User } from '../../store';
+
+const props = defineProps<{
+  friends: Friendship[];
+  user: User;
+}>();
+</script>
diff --git a/src/components/friends/RequestsForMe.vue b/src/components/friends/RequestsForMe.vue
@@ -0,0 +1,25 @@
+<template>
+  <ul v-if="getFriendRequestsGetter" class="requests_friends-list">
+    <li v-for="request in getFriendRequestsGetter.requestsForMe" class="requests_friends-list_item">
+      <span class="requests-list_player-name">{{ request.receivingUser.name }}</span>
+      <span class="requests-list_action-group">
+        <button class="requests-list_action-button bad" @click="denyRequest(request.id)">
+          <font-awesome-icon :icon="['fas', 'ban']" />
+          <!-- Deny -->
+        </button>
+      </span>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { friendStore } from '../../friendStore';
+
+const props = defineProps<{
+  denyRequest: Function;
+}>();
+
+const store = friendStore();
+const { getFriendRequestsGetter } = storeToRefs(store);
+</script>
diff --git a/src/components/friends/RequestsFromFriends.vue b/src/components/friends/RequestsFromFriends.vue
@@ -0,0 +1,32 @@
+<template>
+  <ul v-if="getFriendRequestsGetter" class="requests_friends-list">
+    <li v-for="request in getFriendRequestsGetter.requestsFromFriends" class="requests_friends-list_item">
+      <span class="requests-list_player-name">{{ request.sendingUser.name }}</span>
+      <span class="requests-list_action-group">
+        <button class="requests-list_action-button good" @click="acceptRequest(request.id)">
+          <font-awesome-icon :icon="['fas', 'check']" />
+          <!-- Approve -->
+        </button>
+        <button class="requests-list_action-button bad" @click="denyRequest(request.id)">
+          <font-awesome-icon :icon="['fas', 'ban']" />
+          <!-- Deny -->
+        </button>
+      </span>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { friendStore } from '../../friendStore';
+
+const props = defineProps<{
+  denyRequest: Function;
+  acceptRequest: Function;
+}>();
+
+const store = friendStore();
+const { getFriendRequestsGetter } = storeToRefs(store);
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/rounds/CloseRoundModal.vue b/src/components/rounds/CloseRoundModal.vue
@@ -2,8 +2,8 @@
   <div class="close-round_container" v-if="isClosing">
     <div class="close-round_modal">
       <p>Are you sure you want to close this round? This cannot be undone.</p>
-      <button class="close-round_action-button_cancel" @click="$emit('closeModal')">Cancel</button>
       <button class="close-round_action-button_close" @click="$emit('closeRound')">End & Submit Round</button>
+      <button class="close-round_action-button_cancel" @click="$emit('closeModal')">Cancel</button>
     </div>
   </div>
 </template>
@@ -24,11 +24,11 @@ const emit = defineEmits(['closeRound', 'closeModal']);
 
 .close-round_action-button_cancel {
   @include grey-btn;
-  margin-bottom: 1rem;
 }
 
 .close-round_action-button_close {
   @include blue-btn;
+  margin-bottom: 1rem;
   width: 100%;
 }
 </style>
diff --git a/src/components/rounds/LowestRounds.vue b/src/components/rounds/LowestRounds.vue
@@ -1,32 +1,32 @@
 <template>
   <section class="homepage_best-rounds card">
-    <h2 class="homepage_recent-best_header card-header">Lowest Rounds</h2>
+    <h2 class="homepage_best-best_header card-header">Lowest Rounds</h2>
     <table
-      class="homepage_recent-round_table"
+      class="homepage_best-round_table"
       v-if="lowestRounds.length && lowestRounds.length > 5 && typeof strokesTotalled === 'function'"
     >
-      <thead class="homepage_recent-round_table-head">
-        <tr class="homepage_recent-round_table-head_row">
-          <th class="homepage_recent-round_table-head_row-header date">Date</th>
-          <th class="homepage_recent-round_table-head_row-header course-name">Course</th>
-          <th class="homepage_recent-round_table-head_row-header score">Score</th>
+      <thead class="homepage_best-round_table-head">
+        <tr class="homepage_best-round_table-head_row">
+          <th class="homepage_best-round_table-head_row-header date">Date</th>
+          <th class="homepage_best-round_table-head_row-header course-name">Course</th>
+          <th class="homepage_best-round_table-head_row-header score">Score</th>
         </tr>
       </thead>
-      <tbody class="homepage_recent-round_table-body">
-        <tr class="homepage_recent-round_table-body_row" v-for="lowRound in lowestRounds" :key="lowRound.id">
-          <td class="homepage_recent-round_table-body_row-cell">
+      <tbody class="homepage_best-round_table-body">
+        <tr class="homepage_best-round_table-body_row" v-for="lowRound in lowestRounds" :key="lowRound.id">
+          <td class="homepage_best-round_table-body_row-cell">
             {{ makeDatePretty(lowRound.updatedAt) }}
           </td>
-          <td class="homepage_recent-round_table-body_row-cell">
+          <td class="homepage_best-round_table-body_row-cell">
             <router-link :to="`/round/view/${lowRound.id}`">
               {{ lowRound.course ? lowRound.course.name : '' }}
             </router-link>
           </td>
-          <td class="homepage_recent-round_table-body_row-cell">{{ strokesTotalled(lowRound.scores) }}</td>
+          <td class="homepage_best-round_table-body_row-cell">{{ strokesTotalled(lowRound.scores) }}</td>
         </tr>
       </tbody>
     </table>
-    <p class="homepage_recent-round_disclaimer" v-else>
+    <p class="homepage_best-round_disclaimer" v-else>
       This will show your lowest rounds once you've played 6 or more rounds.
     </p>
   </section>
@@ -74,8 +74,19 @@ function makeDatePretty(dateString: Date | undefined) {
 }
 </script>
 
-<style scoped>
-.homepage_recent-round_disclaimer {
+<style lang="scss" scoped>
+.homepage_best-rounds {
+  border: 1px solid #ddd;
   margin-bottom: 0;
 }
+
+.homepage_best-best_header {
+  margin-bottom: 0;
+  padding: 10px;
+}
+
+.homepage_best-round_disclaimer {
+  margin-top: 0;
+  padding: 10px;
+}
 </style>
diff --git a/src/components/rounds/RecentRounds.vue b/src/components/rounds/RecentRounds.vue
@@ -52,4 +52,11 @@ function makeDatePretty(dateString: Date | undefined) {
 }
 </script>
 
-<style scoped></style>
+<style lang="scss" scoped>
+.homepage_recent-rounds_header {
+  border: 1px solid #ddd;
+  border-bottom: none;
+  margin-bottom: 0;
+  padding: 10px;
+}
+</style>
diff --git a/src/components/rounds/ResumeRoundCard.vue b/src/components/rounds/ResumeRoundCard.vue
@@ -58,7 +58,6 @@ function resumeCurrentRound() {
 
     header {
       background-color: $primary;
-      border-radius: 10px 10px 0 0;
       color: #fff;
       padding: 0.875rem;
 
@@ -69,13 +68,18 @@ function resumeCurrentRound() {
     }
 
     .homepage_resume-round_container-body {
+      border-left: 1px solid #ddd;
+      border-right: 1px solid #ddd;
       padding: 0 0.875rem;
+
+      p {
+        margin: 0;
+        padding: 1em 0;
+      }
     }
 
     footer {
       button {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
         margin: 0;
         width: 100%;
       }

diff --git a/src/components/scores/CourseScorecard.vue b/src/components/scores/CourseScorecard.vue
@@ -190,7 +190,6 @@ interface Front9Total {
 
 <style lang="scss">
 .scorecard-table {
-  @include rounded-corners;
   border-spacing: 0;
   padding-bottom: 0.375rem;
   text-align: center;