From 83411dafcf02f4564f2ea763fb269479e4132e5d Mon Sep 17 00:00:00 2001
From: Connor Yoh <con.yoh13@gmail.com>
Date: Wed, 2 Apr 2025 14:23:15 +0100
Subject: [PATCH] Better seperation of alternative file upload mechanisms Hover
 over button animation

---
 src/main/resources/static/css/fileSelect.css  | 20 +++++++++++++++++--
 .../resources/templates/fragments/common.html | 11 ++++++----
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/main/resources/static/css/fileSelect.css b/src/main/resources/static/css/fileSelect.css
index 61dc9963f..88bef91d5 100644
--- a/src/main/resources/static/css/fileSelect.css
+++ b/src/main/resources/static/css/fileSelect.css
@@ -272,11 +272,27 @@
   z-index: 9999;
 }
 
-
 .google-drive-button {
   width: 2.5rem;
   pointer-events: auto;
+  cursor: pointer;
+  transition-duration: 0.4s;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 5px  var(--md-sys-color-on-surface-variant);
+  background-color: var(--md-sys-color-on-surface-container-high)
 }
+
+.horizontal-divider {
+  width:  85%;
+  border-top: 1px dashed;
+  padding: 0px;
+  margin: 10px;
+}
+
 .google-drive-button img {
   width:100%
-}
\ No newline at end of file
+}
+
+.google-drive-button:hover {
+  background-color: var(--md-sys-color-on-surface-variant)
+}
diff --git a/src/main/resources/templates/fragments/common.html b/src/main/resources/templates/fragments/common.html
index b71222d63..9a21dc277 100644
--- a/src/main/resources/templates/fragments/common.html
+++ b/src/main/resources/templates/fragments/common.html
@@ -240,10 +240,13 @@
 		  th:required="${notRequired} ? null : 'required'">
         Browse
       </label>
-      <div class="d-flex justify-content-start align-items-center" id="fileInputText">
-        <div th:text="#{fileChooser.click}" style="margin-right: 5px"></div>
-        <div th:text="#{fileChooser.or}" style="margin-right: 5px"></div>
-        <div th:text="#{fileChooser.dragAndDrop}" id="dragAndDrop"></div>
+      <div class="d-flex flex-column align-items-center">
+        <div class="d-flex justify-content-start align-items-center" id="fileInputText">
+          <div th:text="#{fileChooser.click}" style="margin-right: 5px"></div>
+          <div th:text="#{fileChooser.or}" style="margin-right: 5px"></div>
+          <div th:text="#{fileChooser.dragAndDrop}" id="dragAndDrop"></div>
+        </div>
+        <hr th:if="${@GoogleDriveEnabled == true}" class="horizontal-divider" >
       </div>
       <div th:if="${@GoogleDriveEnabled == true}"  th:id="${name}+'-google-drive-button'" class="google-drive-button" th:attr="data-name=${name}, data-multiple=${!disableMultipleFiles}, data-accept=${accept}"  > 
         <img th:src="@{'/images/google-drive.svg'}" alt="google drive">