Design4 specific changes

blocks/agent-profile/agent-profile.css

@@ -1,4 +1,5 @@
 @import url('./design-1.css');
+@import url('./design-4.css');
 
 .agent-profile.block {
   padding: 0 1rem;

blocks/agent-profile/design-4.css

@@ -0,0 +1,46 @@
+.design-4.traditional main .section.agent-profile-container .agent-profile-wrapper .agent-profile.block .profile-image img,
+.design-4.calm main .section.agent-profile-container .agent-profile-wrapper .agent-profile.block .profile-image img {
+    width: 136px;
+    height: 136px;
+}
+
+.design-4.traditional main .section.agent-profile-container .agent-profile-wrapper .agent-profile.block .profile-content,
+.design-4.calm main .section.agent-profile-container .agent-profile-wrapper .agent-profile.block .profile-content{
+    padding-left: 0;
+}
+
+
+.design-4.traditional main .section.agent-profile-container .agent-profile-wrapper .agent-profile.block .profile-content .phone,
+.design-4.traditional main .section.agent-profile-container .agent-profile-wrapper .agent-profile.block .profile-content .email a,
+.design-4.traditional main .section.agent-profile-container .agent-profile-wrapper .agent-profile.block .profile-content .website,
+.design-4.traditional main .section.agent-profile-container .agent-profile-wrapper .agent-profile.block .profile-content .name,
+.design-4.traditional main .section.agent-profile-container .agent-profile-wrapper .agent-profile.block .profile-content .designation,
+.design-4.traditional main .section.agent-profile-container .agent-profile-wrapper .agent-profile.block .profile-content .license-number {
+    color: var(--tertiary-color) !important;
+}
+
+.design-4.traditional main .section.agent-profile-container .agent-profile-wrapper .agent-profile.block .profile-content .contact-me a{
+    border: 1px solid var(--tertiary-color);
+    color: var(--tertiary-color);
+}
+
+.design-4.traditional main .section.agent-profile-container .agent-profile-wrapper .agent-profile.block .profile-content .social .icon img {
+    filter: brightness(0) invert(1);
+}
+
+.design-4.traditional main .section.agent-profile-container .agent-profile-wrapper {
+    background-color:#2a2223 !important;
+    width: inherit !important;
+    margin-bottom: 10px;
+}
+
+.design-4.calm main .section.agent-profile-container .agent-profile-wrapper {
+   background-color: #bad8e1;
+   width: inherit !important;
+   margin-bottom: 10px;
+}
+
+.design-4.traditional main .section.agent-profile-container .agent-profile-wrapper .agent-profile.block,
+.design-4.calm main .section.agent-profile-container .agent-profile-wrapper .agent-profile.block {
+    display: block !important;
+}

blocks/agent-transactions/agent-transactions.css

@@ -1,4 +1,6 @@
 @import url('./design-1.css');
+@import url('./design-4.css');
+
 
 .agent-transactions.block table {
   width: 100%;

blocks/agent-transactions/agent-transactions.js

@@ -39,7 +39,6 @@ export default async function decorate(block) {
   if (transactionsData.length === 0) {
     return;
   }
-
   const thList = ['address', 'city', 'state', 'sold price', 'beds', 'baths', 'approx sq. ft.', 'type', 'closed date'];
   const thDefault = { class: 'default', list: [0, 3] };
   const thMedium = { class: 'medium', list: [1, 2] };

blocks/agent-transactions/design-4.css

@@ -0,0 +1,12 @@
+
+.design-4.traditional .agent-transactions.block thead {
+    background: var(--primary-color);
+}
+
+.design-4.calm .agent-transactions.block thead {
+    background-color: #bad8e1;
+}
+
+.design-4.traditional .agent-transactions.block a {
+    color: var(--primary-color);
+}

blocks/avm-report/avm-report.css

@@ -1,3 +1,5 @@
+@import url('design-4.css');
+
 .avm-report.block {
   max-width: 600px;
 }

blocks/avm-report/avm-report.js

@@ -1,5 +1,4 @@
 import { showModal } from '../../scripts/util.js';
-
 import loadMaps from '../../scripts/google-maps/index.js';
 
 let autocompleteAttached = false;

blocks/avm-report/design-4.css

@@ -0,0 +1,14 @@
+.design-4.traditional main .avm-report-container {
+    background-color: #2a2223;
+}
+
+.design-4.calm main .avm-report-container {
+    background-color: #bad8e1;
+}
+
+
+.design-4.traditional main .avm-report-container .avm-report.block h2,
+.design-4.traditional main .avm-report-container .avm-report.block p{
+    color: white;
+}
+

blocks/cards/cards.css

@@ -1,3 +1,5 @@
+@import url('design-4.css');
+
 .cards.block {
   padding-bottom: 32px;
 }

blocks/cards/design-4.css

@@ -0,0 +1,8 @@
+.design-4.traditional main .cards.block.icons .cards-list .cards-item .card-body p,
+.design-4.traditional main .cards.block.icons .cards-list .cards-item .card-body h4 {
+    color: white;
+}
+
+.design-4.traditional main .cards.block.icons .cards-list .cards-item .icon img {
+    filter: brightness(0) invert(1);
+}

blocks/floatingagent/design-4.css

@@ -0,0 +1,13 @@
+.design-4 .floatingagent.block {
+    background-color: var(--primary-color);
+}
+
+.design-4 .floatingagent.block > .agentinfo > p , .design-4 .floatingagent.block > .agentinfo > h2 {
+    color: var(--tertiary-color) !important;
+}
+
+.design-4 .floatingagent.block > .contactagent {
+    background: var(--tertiary-color);
+    color: var(--primary-color);
+}
+

blocks/floatingagent/floatingagent.css

@@ -1,3 +1,5 @@
+@import url('design-4.css');
+
 .floatingagent.block {
     display: flex;
     align-items: center;
@@ -24,6 +26,7 @@
 .floatingagent.block > .contactagent {
     display: block;
     align-self: center;
+    font-weight: 800;
     background: var(--primary-color);
     color: var(--tertiary-color);
     border: 0;

blocks/floatingagent/floatingagent.js

@@ -34,7 +34,6 @@ export default function decorate(block) {
   );
 
   const contactButton = a({ class: 'contactagent', href: '/fragments/contact-property-form' }, 'CONTACT AGENT');
-
   block.append(
     div({ class: 'floating-agent-col' }, agentPicture),
     agentInfo,