fix: text shaodw copy code to clipboard and updating default values (#336)

* feat: adding tooltip when hover on Go Back icon

* updating default values for text shadow

* adding text shadow code to copy to clipboard

Author: rupali-codes

index.html

@@ -602,9 +602,9 @@ <h2>
                   </span>
                   <input
                     type="range"
-                    max="50"
+                    max="20"
                     min="-20"
-                    value="5"
+                    value="2"
                     id="text-shadow-h-offset"
                     class="text-shadow-inputs"
                   />
@@ -617,9 +617,9 @@ <h2>
                   </span>
                   <input
                     type="range"
-                    max="50"
+                    max="20"
                     min="-20"
-                    value="10"
+                    value="2"
                     id="text-shadow-v-offset"
                     class="text-shadow-inputs"
                   />
@@ -634,9 +634,9 @@ <h2>
                   </span>
                   <input
                     type="range"
-                    max="100"
+                    max="25"
                     min="0"
-                    value="18"
+                    value="4"
                     id="text-shadow-blur"
                     class="text-shadow-inputs"
                   />

src/lib/general.ts

@@ -95,6 +95,15 @@ function actOnGenerator(attribute: string, outputElement: HTMLElement) {
         }
       `;
       break;
+    case 'text-shadow':
+      element = outputElement.style;
+      console.log('element: ', element.textShadow);
+      codeToCopy = `
+        div {
+          text-shadow: ${element.textShadow};
+        }
+      `;
+      break;
   }
 
   copy(codeToCopy);

src/style.css

@@ -575,6 +575,37 @@ input[type='number']::-webkit-outer-spin-button {
   display: block;
 }
 
+.go-back-icon span.tooltip {
+  position: relative;
+  bottom: -20px;
+  right: 40px;
+  padding: 5px;
+  width: 50px;
+  margin-top: 35px;
+  margin-right: -50px;
+  font-size: 15px;
+  text-align: center;
+  color: var(--input-color);
+  background-color: var(--text-color);
+  border-radius: 5px;
+  display: none;
+}
+
+.go-back-icon .tooltip::before {
+  content: '';
+  position: absolute;
+  top: -15%;
+  left: 8%;
+  margin-top: -5px;
+  border-width: 12px;
+  border-style: solid;
+  border-color: transparent var(--text-color) transparent transparent;
+}
+
+.go-back-icon:hover .tooltip {
+  display: block;
+}
+
 .output {
   width: var(--generator-width);
   height: 300px;