From cae2bbc4ff46f8e42d0b5f72d990e894e539d347 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Thu, 7 Mar 2024 09:09:51 -0700
Subject: [PATCH] make styled button to take picture

---
 project.task.yaml         |  3 +++
 src/views/GiftedPhoto.vue | 17 +++++++++++++++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/project.task.yaml b/project.task.yaml
index 4bb16bd81..e83526702 100644
--- a/project.task.yaml
+++ b/project.task.yaml
@@ -21,6 +21,9 @@ tasks :
     - Rates - images erased?
     - image not associated with JWT ULID since that's assigned later
 
+- ask to detect location & record it in settings
+- if personal location is set, show potential local affiliations
+
 - 24 compelling UI for credential presentations
   - discover who in my network has activity on a project
 
diff --git a/src/views/GiftedPhoto.vue b/src/views/GiftedPhoto.vue
index 15462c99b..88fd6f67c 100644
--- a/src/views/GiftedPhoto.vue
+++ b/src/views/GiftedPhoto.vue
@@ -26,8 +26,21 @@
         Camera "resolution" doesn't change how it shows on screen but rather stretches the result, eg the following which just stretches it vertically:
         :resolution="{ width: 375, height: 812 }"
       -->
-      <camera facingMode="user" autoplay ref="camera">
-        <button @click="storeImage">I'm on top of the video</button>
+      <camera
+        facingMode="environment"
+        autoplay
+        ref="camera"
+        class="relative h-full"
+      >
+        <div class="absolute bottom-0 w-full flex justify-center pb-4">
+          <!-- Button -->
+          <button
+            @click="storeImage"
+            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded-full"
+          >
+            <fa icon="camera" class="fa-fw"></fa>
+          </button>
+        </div>
       </camera>
     </div>
   </section>