Merge pull request #81 from TanushreeBorase/sharebuttonuiimprovement

Fixes #80 improvement of share button ui
DhanushNehru · Oct 27, 2024 · b33cc73 · b33cc73
2 parents 3718d36 + 0145314
commit b33cc73
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 2 deletions.
diff --git 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
@@ -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;