update copy shortcode icon

weDevsOfficial · Oct 10, 2024 · 065b1fa · 065b1fa
1 parent c96afbf
commit 065b1fa
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 20 deletions.
diff --git a/admin/form-builder/views/form-builder.php b/admin/form-builder/views/form-builder.php
@@ -83,11 +83,17 @@ class="wpuf-dropdown-container wpuf-relative wpuf--ml-px wpuf-inline-flex wpuf-i
                 <span class="form-id wpuf-group wpuf-flex wpuf-items-center wpuf-py-2 wpuf-px-4 wpuf-rounded-md wpuf-border wpuf-border-slate-300 hover:wpuf-cursor-pointer" title="<?php esc_html_e( __( 'Click to copy shortcode', 'wp-user-frontend' ) ); ?>" data-clipboard-text="<?php '[' . esc_attr_e( $shortcodes[0]['name'] ) . ' id="' . esc_attr( $form_id ) . '"]'; ?>">#{{ post.ID }}
                     <span id="default-icon" class="wpuf-ml-2">
                         <svg
-                            :class="!shortcodeCopied ? 'wpuf-fill-gray-300' : '!wpuf-fill-blue-500 wpuf-rotate-6'"
-                            class="wpuf-w-3.5 wpuf-h-3.5 group-hover:wpuf-rotate-6 group-hover:wpuf-fill-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
-                            <g class=""><path d="M15.9975 5.99988L15.9975 3.99988" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.9975 5.99988L20.9975 4.99988" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.9975 5.99988L10.9975 4.99988" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g>
-                            <path
-                                d="M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z"/>
+                            v-if="!shortcodeCopied"
+                            class="group-hover:wpuf-rotate-6 group-hover:wpuf-stroke-gray-500 wpuf-stroke-gray-400"
+                            width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M14.4438 6.17602C14.2661 5.49738 13.687 5 13 5H11C10.313 5 9.73391 5.49738 9.55618 6.17602M14.4438 6.17602C14.4804 6.31575 14.5 6.46317 14.5 6.61552C14.5 6.91293 14.2761 7.15403 14 7.15403H10C9.72386 7.15403 9.5 6.91293 9.5 6.61552C9.5 6.46317 9.51958 6.31575 9.55618 6.17602M14.4438 6.17602C14.8746 6.21105 15.303 6.25528 15.7289 6.30851C16.4626 6.40022 17 7.08151 17 7.87705V16.897C17 17.7892 16.3284 18.5125 15.5 18.5125H8.5C7.67157 18.5125 7 17.7892 7 16.897V7.87705C7 7.08151 7.53739 6.40022 8.27112 6.30851C8.69698 6.25528 9.12539 6.21105 9.55618 6.17602M9.99997 11.4122H14M9.99997 14.0125H12" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+
+                        <svg
+                            v-if="shortcodeCopied"
+                            class="wpuf-rotate-6 !wpuf-stroke-indigo-600 wpuf-mt-[-5px]"
+                            width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M12.2392 3V5.15403M7.81196 4.54199L9.22618 6.06512M16.6663 4.54199L15.2521 6.06512M14.4438 8.66349C14.2661 7.98485 13.687 7.48747 13 7.48747H11C10.313 7.48747 9.73391 7.98485 9.55618 8.66349M14.4438 8.66349C14.4804 8.80322 14.5 8.95064 14.5 9.10299C14.5 9.4004 14.2761 9.6415 14 9.6415H10C9.72386 9.6415 9.5 9.4004 9.5 9.10299C9.5 8.95064 9.51958 8.80322 9.55618 8.66349M14.4438 8.66349C14.8746 8.69852 15.303 8.74275 15.7289 8.79598C16.4626 8.88769 17 9.56898 17 10.3645V19.3845C17 20.2767 16.3284 21 15.5 21H8.5C7.67157 21 7 20.2767 7 19.3845V10.3645C7 9.56898 7.53739 8.88769 8.27112 8.79598C8.69698 8.74275 9.12539 8.69852 9.55618 8.66349M9.99997 13.8997H14M9.99997 16.5H12" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                         </svg>
                     </span>
                 </span>

diff --git a/assets/css/admin/form-builder.css b/assets/css/admin/form-builder.css
@@ -1362,6 +1362,10 @@ html {
   margin-top: 2rem;
 }
 
+.wpuf-mt-\[-5px\] {
+  margin-top: -5px;
+}
+
 .wpuf-mt-\[1px\] {
   margin-top: 1px;
 }
@@ -1410,10 +1414,6 @@ html {
   height: 0.75rem;
 }
 
-.wpuf-h-3\.5 {
-  height: 0.875rem;
-}
-
 .wpuf-h-5 {
   height: 1.25rem;
 }
@@ -1504,10 +1504,6 @@ html {
   width: 0.75rem;
 }
 
-.wpuf-w-3\.5 {
-  width: 0.875rem;
-}
-
 .wpuf-w-3\/4 {
   width: 75%;
 }
@@ -2059,12 +2055,12 @@ html {
   --tw-bg-opacity: 0.75;
 }
 
-.\!wpuf-fill-blue-500 {
-  fill: #3b82f6 !important;
+.\!wpuf-stroke-indigo-600 {
+  stroke: #4f46e5 !important;
 }
 
-.wpuf-fill-gray-300 {
-  fill: #d1d5db;
+.wpuf-stroke-gray-400 {
+  stroke: #9ca3af;
 }
 
 .wpuf-p-0 {
@@ -2580,6 +2576,18 @@ html {
   transition-property: all;
 }
 
+.wpuf-form-template-modal {
+  background: #fff;
+  position: fixed;
+  top: 5%;
+  bottom: 5%;
+  right: 10%;
+  left: 10%;
+  display: none;
+  box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
+  z-index: 99;
+}
+
 /* Transition styles */
 
 .wpuf-dropdown-item {
@@ -2931,8 +2939,8 @@ html {
   cursor: pointer;
 }
 
-.wpuf-group:hover .group-hover\:wpuf-fill-gray-500 {
-  fill: #6b7280;
+.wpuf-group:hover .group-hover\:wpuf-stroke-gray-500 {
+  stroke: #6b7280;
 }
 
 .wpuf-peer:hover ~ .peer-hover\:wpuf-block {

diff --git a/includes/Admin/template-parts/modal.php b/includes/Admin/template-parts/modal.php
@@ -127,7 +127,6 @@ class="wpuf-button button-upgrade-to-pro"
     <div class="wpuf-form-template-modal-backdrop"></div>
 </div>
 
-
 <script type="text/javascript">
 (function($) {
     var popup = {

diff --git a/src/css/admin/form-builder.css b/src/css/admin/form-builder.css
@@ -2,6 +2,18 @@
 @tailwind components;
 @tailwind utilities;
 
+.wpuf-form-template-modal {
+    background: #fff;
+    position: fixed;
+    top: 5%;
+    bottom: 5%;
+    right: 10%;
+    left: 10%;
+    display: none;
+    box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
+    z-index: 99;
+}
+
 @layer utilities {
     .wpuf-transition-all {
         transition-property: all;