Refactor: Update Donation Instructions popover (#6950)

Co-authored-by: Joshua Dinh
impress-org · Sep 19, 2023 · 68b855d · 68b855d
1 parent 9c4a443
commit 68b855d
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 20 deletions.
diff --git a/...esources/js/form-builder/src/components/settings/PopoverContentWithTemplateTags/index.tsx b/...esources/js/form-builder/src/components/settings/PopoverContentWithTemplateTags/index.tsx
@@ -63,7 +63,7 @@ export default function PopoverContentWithTemplateTags({
     richText,
 }: PopoverContentWithTemplateTagsProps) {
     return (
-        <Popover className="givewp-popover-content-settings" resize={false} shift placement="left-start" offset={30}>
+        <Popover className="givewp-popover-content-settings" resize={false} shift placement="left" offset={30}>
             <div className="givewp-popover-content-settings__header">
                 <div className="givewp-popover-content-settings__heading">
                     <span>{heading}</span>

diff --git a/...ources/js/form-builder/src/components/settings/PopoverContentWithTemplateTags/styles.scss b/...ources/js/form-builder/src/components/settings/PopoverContentWithTemplateTags/styles.scss
@@ -1,4 +1,7 @@
 .givewp-popover-content-settings {
+    border-radius: 2px;
+    box-shadow: 0px 2px 4px 0px #EBEBEB;
+
     .components-popover__content {
         min-width: 24rem;
     }
@@ -8,26 +11,23 @@
         align-items: center;
         justify-content: space-between;
         border-bottom: solid 1px var(--givewp-grey-100);
-        padding: 1rem;
+        padding: .375rem 1rem;
+        border-radius: 2px 2px 0 0;
     }
 
     &__heading {
-        font-size: 0.9rem;
+        font-size: 0.812rem;
         font-weight: 600;
         margin: 0;
+        line-height: 1.137rem;
+        color: var(--givewp-grey-900);
 
         button svg {
             height: 1rem;
             width: 1rem;
         }
     }
 
-    &__editor {
-        .ql-toolbar, .ql-container {
-            border: none !important;
-        }
-    }
-
     &__textarea, &__editor {
         .components-base-control__field {
             margin-bottom: 0;
@@ -45,18 +45,18 @@
 
         .ql-container,
         .ql-toolbar {
-            border: none;
+            border: none !important;
         }
 
         .ql-toolbar {
-            border-bottom: 1px solid #ccc;
+            border-bottom: 1px solid #ccc !important;
         }
     }
 
     &__template-tags-heading {
-        font-size: 0.9rem;
+        font-size: 0.812rem;
         font-weight: 500;
-        padding: 0.5rem 1rem;
+        padding: .725rem 1rem;
         color: var(--givewp-grey-900);
         border-top: solid 1px var(--givewp-grey-100);
         border-bottom: solid 1px var(--givewp-grey-100);
@@ -76,7 +76,6 @@
     &__template-tag-list-item {
         display: flex;
         flex-direction: column;
-        gap: 0.5rem;
         padding: 0.5rem 1rem;
 
         &:nth-child(even) {
@@ -85,6 +84,7 @@
 
         .givewp-popover-content-settings__copy-button {
             opacity: 0;
+            font-size: 0.75rem;
         }
 
         &:hover {
@@ -94,19 +94,27 @@
         }
     }
 
+    &__template-tag {
+        background-color: var(--givewp-blue-25);
+        color: var(--givewp-blue-900);
+        font-weight: 500;
+        font-size: .812rem;
+        line-height: 1.137rem;
+        height: 100%;
+    }
+
     &__template-tag-list-item-top {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
         gap: 0.5rem;
-        padding: 0.5rem 0;
+        padding: 0 0 0.5rem 0;
     }
 
-    &__template-tag {
-        background-color: var(--givewp-blue-25);
-        color: var(--givewp-blue-900);
-        font-weight: bold;
-        height: 100%;
+    &__template-tag-list-item-bottom {
+        font-size: 0.75rem;
+        line-height: 1.125rem;
+        color: var(--givewp-gray-700, #404040);
     }
 }