From 01453141b07e984398fbc0a073a9f0b7d0be51fd Mon Sep 17 00:00:00 2001
From: Tanushree Borase <tb2599@srmist.edu.in>
Date: Fri, 25 Oct 2024 22:43:51 +0530
Subject: [PATCH] Fixes #80 improvement of share button ui

---
 index.html |  6 +++++-
 styles.css | 32 +++++++++++++++++++++++++++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)
diff --git a/index.html b/index.html
index 1a79b03..6d20a42 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,8 @@
     <link rel="stylesheet" href="styles.css" />
     <link rel="icon" type="image/x-icon" href="assets/ico/favicon.ico" />
     <script async defer src="https://buttons.github.io/buttons.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+
   </head>
 
   <body>
@@ -69,7 +71,9 @@
 
     <div class="shareBtnDiv">
       <button id="shareBtn">
-        <img src="https://thenounproject.com/api/private/icons/2137557/edit/?backgroundShape=SQUARE&backgroundShapeColor=%23000000&backgroundShapeOpacity=0&exportSize=752&flipX=false&flipY=false&foregroundColor=%23000000&foregroundOpacity=1&imageFormat=png&rotation=0" alt="Share" />
+        
+        <i class="fa-solid fa-share"></i>
+        <span class="btn-label">Share</span>
       </button>
       <div id="allOptions">
         <a href="whatsapp://send?text=https://board-dhanushnehru.netlify.app/" data-action="share/whatsapp/share">
diff --git a/styles.css b/styles.css
index df0fd2e..64da370 100644
--- a/styles.css
+++ b/styles.css
@@ -256,7 +256,7 @@ canvas {
 }
 
 #download img {
-  width: 20px;
+  width: 80px;
   height: 20px;
   margin-right: 8px;
   filter: brightness(0) invert(1);
@@ -267,6 +267,7 @@ canvas {
   position: fixed;
   bottom: 20px;
   right: 20px;
+  border-radius: 50px;
 }
 
 #shareBtn {
@@ -277,6 +278,7 @@ canvas {
   cursor: pointer;
   transition: all 0.3s ease;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  color: white;
 }
 
 #shareBtn:hover {
@@ -291,6 +293,34 @@ canvas {
   filter: brightness(0) invert(1);
 }
 
+#shareBtn:focus {
+  outline: 3px solid rgba(19, 108, 2, 0.8);
+  outline-offset: 4px;
+}
+
+@media (max-width: 600px) {
+  #shareBtn {
+     padding: 10px;
+  }
+
+  #shareBtn img {
+     width: 20px;
+     height: 20px;
+  }
+}
+
+.btn-label {
+  color: white;
+  font-size: 16px;
+  margin-left: 8px;
+  display: none; /* Hidden by default */
+}
+
+#shareBtn:hover .btn-label {
+  display: inline; /* Show on hover */
+}
+
+
 #allOptions {
   display: none;
   position: absolute;
