Update login button to match Google guidelines

VarunBarad · Feb 28, 2023 · 530766a · 530766a
1 parent 824aa1f
commit 530766a
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/src/main/resources/static/assets/google-logo.png b/src/main/resources/static/assets/google-logo.png
diff --git a/src/main/resources/static/styles.css b/src/main/resources/static/styles.css
@@ -93,6 +93,13 @@ footer > a > p {
     text-align: center;
 }
 
+button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #ffffff;
+}
+
 @media (max-width: 900px) {
     label, button, footer, p, hr, ul {
         width: 100%;

diff --git a/src/main/resources/templates/index.mustache b/src/main/resources/templates/index.mustache
@@ -36,7 +36,7 @@
         Once that file is created, we forget everything related to that Google account. We don't store any of your details on our servers, we don't even store that generated calendar feed on our server.
     </p>
 
-    <a href="{{ GOOGLE_AUTH_URL }}"><button>Authenticate with Google</button></a>
+    <a href="{{ GOOGLE_AUTH_URL }}" style="text-decoration: none"><button><img src="/assets/google-logo.png" alt="Google sign-in" width="20px" height="20px" style="margin: 4px">Sign in with Google</button></a>
 
     <p>
         Last but not the least, I have created this side-project to learn how to work with Spring Boot so please feel free to reach out to me via GitHub or my website about any issues you face when using Contacts Calendar.