From 3c714a8dda54412d6a94d2c3f8d19159c6ec6ddd Mon Sep 17 00:00:00 2001
From: Rabab Fatima <rfatima@uab.edu>
Date: Mon, 13 Jan 2025 11:34:51 -0600
Subject: [PATCH] Added checkmark vector styling for checkbox.

---
 docker-compose.yml                            |  2 +-
 .../InputDialogExistingAttachments.vue        | 20 +++++--------
 frontend/src/styles/main.css                  | 28 +++++++++++++------
 3 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 6369cf40..e35bf0b9 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,6 +1,6 @@
 services:
   reverse-proxy:
-    image: traefik
+    image: traefik:3.2.3
     command:
       - "--log.level=DEBUG"
       - "--api.insecure=true"
diff --git a/frontend/src/components/Dialogs/InputDialogExistingAttachments.vue b/frontend/src/components/Dialogs/InputDialogExistingAttachments.vue
index 0a44d686..5f2564e6 100644
--- a/frontend/src/components/Dialogs/InputDialogExistingAttachments.vue
+++ b/frontend/src/components/Dialogs/InputDialogExistingAttachments.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="existing-attachments-list">
-    <div 
+    <div
       class="existing-attachments-list-row"
-      v-for="existingAttachment in existingAttachments" 
+      v-for="existingAttachment in existingAttachments"
       v-bind:key="existingAttachment.attachment_id"
       data-test="existing-attachments-list"
     >
@@ -10,15 +10,17 @@
         <font-awesome-icon :icon="['far', 'file']" size="lg" v-if="existingAttachment.type==='file'"/>
         <font-awesome-icon icon="link" size="lg" v-else-if="existingAttachment.type==='link'"/>
       </span>
-      <label for="existing-attachment-row" class="existing-attachment-name">{{ existingAttachment.name }}</label>
-      <input type="checkbox" class="existing-attachment-checkbox" name="existing-attachment-row"/>
+      <label for="existing-attachment-row" class="existing-attachment-name">
+        {{ existingAttachment.name }}
+        <input type="checkbox" class="existing-attachment-checkbox" name="existing-attachment-row"/>
+      </label>
     </div>
   </div>
 </template>
 
 <script setup>
 console.log('SETUPPING THE THING');
-import {computed, onMounted, reactive} from 'vue';
+import {onMounted} from 'vue';
 
 const emit = defineEmits(['update:userInput']);
 
@@ -77,14 +79,6 @@ onMounted(async () => {
   vertical-align: middle;
 }
 
-/* .existing-attachment-checkbox input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-} */
-
 .existing-attachment-checkbox {
   float: right;
 }
diff --git a/frontend/src/styles/main.css b/frontend/src/styles/main.css
index b9ce8168..889e0b92 100644
--- a/frontend/src/styles/main.css
+++ b/frontend/src/styles/main.css
@@ -107,6 +107,7 @@ textarea {
   border: 2px solid var(--rosalution-grey-100);
   background-color: var(--secondary-background-color);
   outline: none;
+  appearance: none;
 }
 
 input:placeholder,
@@ -123,28 +124,39 @@ textarea:focus {
 }
 
 input[type=checkbox]{
-  /* opacity: 0; */
-  cursor: pointer;
-  /* height: 0.625rem;
-  width: 0.625rem; */
-  background-color: var(--rosalution-grey-200);
+  background-color: var(--rosalution-grey-100);
+  border-radius: var(--checkbox-border-radius);
+  border-color: var(--rosalution-purple-300);
+  transform: translateY(-0.075em);
 }
 
 input[type=checkbox]:hover {
   background-color: var(--rosalution-purple-100);
 }
 
+input[type=checkbox]:checked {
+  background-color: var(--rosalution-purple-200);
+}
+
+input[type="checkbox"]:checked::before {
+  transform: scale(1);
+}
+
 input[type=checkbox]:checked {
   background-color: var(--rosalution-purple-300);
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
 }
 
-input[type=checkbox]:checked::after {
-  content: "";
-  display: block;
+
+input[type="checkbox"]:focus:hover {
+  outline: max(2px, 0.15em) solid var(--rosalution-purple-300);
+  outline-offset: max(2px, 0.15em);
 }
 
 
 
+
+
 /** || Primary Grid Site Layout **/
 
 #app {