- saving progress;

src/assets/scss/components/appPage.scss

@@ -100,6 +100,8 @@
     padding: 17px;
     border-radius: 6px;
     border: 1px solid var(--card-borderColor-color);
+    container-name: section_with_border;
+    container-type: inline-size;
 
     &.disabled {
         filter: grayscale(1);
@@ -140,6 +142,15 @@
     }
 }
 
+@container section_with_border (max-width: 600px) {
+    .appPageSection__withBorder {
+        .row {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+    }
+}
+
 .appPageSection__hero {
     display: flex;
     height: 172px;
@@ -198,4 +209,5 @@
     display: flex;
     gap: 24px;
     padding: 24px 0 48px;
+    flex-wrap: wrap;
 }

src/assets/scss/components/formBuilder.scss

@@ -12,9 +12,9 @@
 
   h2 {
     color: #404D5B;
-    font-size: 21px;
+    font-size: 14px;
     font-style: normal;
-    font-weight: 600;
+    font-weight: 700;
     line-height: normal;
   }
 }
@@ -58,7 +58,7 @@
 
   .actions {
     display: flex;
-    gap: 1rem;
+    gap: 0.5rem;
   }
 }
 
@@ -69,9 +69,9 @@
 
   h2 {
     color: #404D5B;
-    font-size: 21px;
+    font-size: 14px;
     font-style: normal;
-    font-weight: 600;
+    font-weight: 700;
     line-height: normal;
   }
 }
@@ -113,4 +113,24 @@
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+}
+
+.formElementSettings__tabs {
+  width: 100%;
+
+  .p-tabview-nav-link[aria-selected="true"] {
+    background-color: var(--message-info-background);
+  }
+
+  .p-tabview-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+}
+
+.formElementSettings__repeater {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }

src/assets/scss/components/layout.scss

@@ -86,6 +86,7 @@ body {
     padding: 0 24px 20px;
     display: flex;
     flex-direction: column;
+    width: calc(100% - 320px);
 
     > footer {
       margin-top: auto;

src/assets/scss/components/misc.scss

@@ -36,16 +36,39 @@
 }
 
 .p-message.p-message-error {
-  background: #ffdbdb;
-  border-left: 5px solid #C2504D;
+  background: var(--message-error-background);
+  border-left: 5px solid var(--message-error-color);
+
+  span.p-message-detail, span.p-message-summary {
+    color: var(--message-error-color);
+  }
 
   svg {
     path {
-      fill: var(--global-textColor);
+      fill: var(--message-error-color);
     }
   }
 }
 
+.p-message.p-message-info {
+  background: var(--message-info-background);
+  border-left: 5px solid var(--message-info-color);
+
+  span.p-message-detail, span.p-message-summary {
+    color: var(--message-info-color);
+  }
+
+  svg {
+    path {
+      fill: var(--message-info-color);
+    }
+  }
+}
+
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+  background: #C9E3CC;
+}
+
 .p-accordion {
   width: 100%;
 }

src/assets/scss/components/statsBigBadges.scss

@@ -1,13 +1,18 @@
 .statsBigBadges {
 }
+
 .statsBigBadges__grid {
     display: grid;
-    align-items: center;
-    grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
-    gap: 24px;
+    align-items: stretch;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
     width: 100%;
 }
 
+.statsBigBadges__grid .statsBigBadges__gridItem span {
+    color: #FFF;
+}
+
 .statsBigBadges__gridItem {
     display: flex;
     justify-content: space-between;
@@ -42,4 +47,10 @@
         border: 1px solid var(--yellow-500);
         background: var(--card-full-background-color-1);
     }
+}
+
+@media (max-width: 1240px) {
+    .statsBigBadges__grid {
+        grid-template-columns: 1fr;
+    }
 }

src/assets/scss/theme.scss

@@ -15,6 +15,10 @@
   --global-textColor: #4B5563;
   --theme-highlight-background: #BADEBE;
   --primary-text: #3B7C43;
+  --message-error-background: #ffdbdb;
+  --message-error-color: #C2504D;
+  --message-info-background: rgba(219, 234, 254, 0.70);
+  --message-info-color: #3B82F6;
 
   --card-full-background-color-2: #EEC137;
   --card-full-background-color-3: #FA8E42;