From fc16ebec17c9fe2711622b6ef4d6053cfa7bc13c Mon Sep 17 00:00:00 2001
From: Varun Patil <varunpatil@ucla.edu>
Date: Sun, 30 Oct 2022 14:59:14 -0700
Subject: [PATCH] Improve select button

---
 src/components/frame/Photo.vue | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/frame/Photo.vue b/src/components/frame/Photo.vue
index 657f887e..53d9775b 100644
--- a/src/components/frame/Photo.vue
+++ b/src/components/frame/Photo.vue
@@ -8,8 +8,8 @@
       error: data.flag & c.FLAG_LOAD_FAIL,
     }"
   >
-    <Check
-      :size="16"
+    <CheckCircle
+      :size="20"
       class="select"
       v-if="!(data.flag & c.FLAG_PLACEHOLDER)"
       @click="toggleSelect"
@@ -41,7 +41,7 @@
 </template>
 
 <script lang="ts">
-import Check from "vue-material-design-icons/Check.vue";
+import CheckCircle from "vue-material-design-icons/CheckCircle.vue";
 import Star from "vue-material-design-icons/Star.vue";
 import Video from "vue-material-design-icons/PlayCircleOutline.vue";
 import { Component, Emit, Mixins, Prop, Watch } from "vue-property-decorator";
@@ -52,7 +52,7 @@ import { IDay, IPhoto } from "../../types";
 
 @Component({
   components: {
-    Check,
+    CheckCircle,
     Video,
     Star,
   },
@@ -229,12 +229,11 @@ $icon-half-size: 5px;
 $icon-size: $icon-half-size * 2;
 
 /* Extra icons */
-.check-icon.select {
+.check-circle-icon.select {
   position: absolute;
-  top: calc($icon-dist + 2px);
-  left: calc($icon-dist + 2px);
+  top: $icon-dist;
+  left: $icon-dist;
   z-index: 100;
-  background-color: var(--color-main-background);
   border-radius: 50%;
   cursor: pointer;
   display: none;
@@ -242,9 +241,12 @@ $icon-size: $icon-half-size * 2;
   .p-outer:hover > & {
     display: flex;
   }
+
+  filter: invert(1) brightness(100);
   .p-outer.selected > & {
     display: flex;
-    filter: invert(1);
+    filter: invert(0);
+    background-color: white;
   }
 }
 .play-circle-outline-icon,
@@ -312,10 +314,10 @@ div.img-outer {
     transform: translateY(-100%); // very weird stuff
     background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, transparent 30%);
 
-    opacity: 0;
-    transition: opacity 0.1s ease-in border-radius 0.1s ease-in;
+    display: none;
+    transition: border-radius 0.1s ease-in;
     .p-outer:not(.selected):hover > & {
-      opacity: 1;
+      display: block;
     }
   }