Update button style + add feedback on click

Signed-off-by: hossainemruz <[email protected]>

assets/scripts/features/copyCode/copyCode.js

@@ -2,9 +2,9 @@ addCopyButtons(navigator.clipboard)
 
 function addCopyButtons(clipboard) {
   document.querySelectorAll('pre > code').forEach(function (codeBlock) {
-    const button = document.createElement('a')
+    const button = document.createElement('button')
     button.title = "Copy"
-    button.className = 'copy-code-button'
+    button.className = 'copy-code-button btn btn-sm'
     button.innerHTML = "<i class='fa-regular fa-copy'></i>"
 
     button.addEventListener('click', function () {

assets/styles/components/buttons.scss

@@ -102,6 +102,40 @@
   }
 }
 
+.copy-code-button {
+  float: right;
+  margin-top: 0.5em;
+  margin-left: -2.6em;
+  margin-right: 3em;
+
+  background-color: get-light-color('text-color') !important;
+  color: get-light-color('inverse-text-color') !important;
+  padding: 0.25rem 0.5rem;
+  line-height: 1.5;
+  border-radius: 0.2rem;
+  border: none;
+
+  &:hover,
+  &:focus {
+    background-color: get-light-color('accent-color') !important;
+    color: get-light-color('text-over-accent-color') !important;
+    @include transition();
+  }
+  &:focus {
+    &::before {
+      content: 'Copied!';
+      position: absolute;
+      padding: 0.3em;
+      border-radius: 0.2em;
+      margin-left: -5em;
+      margin-top: -0.2em;
+      background-color: get-light-color('accent-color') !important;
+      color: get-light-color('text-over-accent-color') !important;
+      @include transition();
+    }
+  }
+}
+
 html[data-theme='dark'] {
   .btn-dark {
     background-color: get-dark-color('accent-color') !important;
@@ -169,4 +203,15 @@ html[data-theme='dark'] {
       background-color: get-dark-color('hover-over-accent-color') !important;
     }
   }
+  .copy-code-button {
+    background-color: get-dark-color('bg-primary') !important;
+    color: get-dark-color('muted-text-color') !important;
+
+    &:hover,
+    &:focus,
+    &::before {
+      background-color: get-dark-color('accent-color') !important;
+      color: get-dark-color('text-over-accent-color') !important;
+    }
+  }
 }

assets/styles/components/misc.scss

@@ -50,14 +50,6 @@ pre {
   }
 }
 
-.copy-code-button {
-  display: flex;
-  justify-content: right;
-  margin-right: 0.75em;
-  margin-bottom: -1.75em;
-  font-size: 1.25em;
-}
-
 html[data-theme='dark'] {
   .paginator {
     .page-item {

package.json

@@ -38,8 +38,8 @@
   "description": "A [Hugo](https://gohugo.io/) theme for a personal portfolio with minimalist design and responsiveness.",
   "devDependencies": {
     "@fontsource/mulish": "4.5.13",
-    "@fortawesome/fontawesome-free": "^6.2.0",
-    "autoprefixer": "^10.4.13",
+    "@fortawesome/fontawesome-free": "^6.6.0",
+    "autoprefixer": "^10.4.20",
     "bootstrap": "^5.3.3",
     "eslint": "^8.31.0",
     "eslint-config-prettier": "^8.6.0",
@@ -56,13 +56,13 @@
     "imagesloaded": "^5.0.0",
     "include-media": "^1.4.10",
     "ityped": "^1.0.3",
-    "katex": "^0.16.10",
+    "katex": "^0.16.11",
     "mark.js": "^8.11.1",
     "mermaid": "^9.2.1",
     "plyr": "^3.7.2",
     "popper.js": "^1.16.1",
-    "postcss": "^8.4.31",
-    "postcss-cli": "^8.3.1"
+    "postcss": "^8.4.41",
+    "postcss-cli": "^11.0.0"
   },
   "homepage": "https://github.com/hugo-toha/toha#readme",
   "license": "MIT",