Merge branch 'master' into component-nav-update

packages/builder/src/components/common/AppNotification.svelte

@@ -5,7 +5,7 @@
     UIKit.notification({
       message: `
           <div class="message-container">
-            <i class="ri-information-fill information-icon"></i> 
+            <div class="information-icon">🤯</div> 
             <span class="notification-message"> 
               ${message}
             </span>
@@ -21,6 +21,7 @@
 <style>
   :global(.information-icon) {
     font-size: 24px;
+    margin-right: 8px;
   }
 
   :global(.uk-nofi) {
@@ -31,10 +32,9 @@
   }
 
   :global(.message-container) {
-    display: grid;
+    display: flex;
-    grid-template-columns: 40px 1fr auto;
-    grid-gap: 5px;
     align-items: center;
+    justify-content: center;
   }
 
   :global(.uk-notification) {
@@ -44,7 +44,6 @@
     margin-right: auto !important;
     margin-left: auto !important;
     border-radius: 10px;
-    box-shadow: 0px 3px 6px #00000029;
   }
 
   :global(.uk-notification-message) {
@@ -56,21 +55,23 @@
   }
 
   :global(.uk-notification-message-danger) {
-    background: #f2545b !important;
+    background: var(--ink-light) !important;
     color: #fff !important;
     font-family: Roboto;
-    font-size: 14px !important;
+    font-size: 16px !important;
   }
 
   :global(.refresh-page-button) {
-    font-size: 13px;
+    font-size: 14px;
-    font-weight: 600;
+    border-radius: 3px;
-    border-radius: 5px;
     border: none;
-    padding: 5px;
+    padding: 8px 16px;
-    width: 91px;
+    color: var(--ink);
-    height: 28px;
-    color: #f2545b;
     background: #ffffff;
+    margin-left: 20px;
+  }
+
+  :global(.refresh-page-button):hover{
+    background: var(--grey-light);
   }
 </style>

packages/builder/src/components/nav/BackendNav.svelte

@@ -45,7 +45,6 @@
       <DatabasesList />
     </div>
   </div>
-  <hr />
   {#if $backendUiStore.selectedDatabase._id}
     <div class="hierarchy">
       <div class="components-list-container">

packages/builder/src/components/userInterface/UserInterfaceRoot.svelte

@@ -42,7 +42,6 @@
     <div class="pages-list-container">
       <div class="nav-header">
         <span class="navigator-title">Navigator</span>
-        <div class="border-line" />
 
         <span class="components-nav-page">Pages</span>
       </div>
@@ -52,12 +51,8 @@
       </div>
     </div>
 
-    <div class="border-line" />
-
     <PageLayout layout={$store.pages[$store.currentPageName]} />
 
-    <div class="border-line" />
-
     <div class="components-list-container">
       <div class="nav-group-header">
         <span class="components-nav-header" style="margin-top: 0;">
@@ -114,20 +109,10 @@
 
   .root {
     display: grid;
-    grid-template-columns: 275px 1fr 300px;
+    grid-template-columns: 300px 1fr 300px;
     height: 100%;
     width: 100%;
-    background: #fafafa;
+    background: #fbfbfb;
-  }
-
-  @media only screen and (min-width: 1800px) {
-    .root {
-      display: grid;
-      grid-template-columns: 300px 1fr 300px;
-      height: 100%;
-      width: 100%;
-      background: #fafafa;
-    }
   }
 
   .ui-nav {

packages/builder/src/components/userInterface/propertyCategories.js

@@ -167,10 +167,15 @@ export const typography = [
     key: "font-weight",
     control: OptionSelect,
     options: [
-      { label: "normal" },
+      { label: "100", value: "100" },
-      { label: "bold" },
+      { label: "200", value: "200" },
-      { label: "bolder" },
+      { label: "300", value: "300" },
-      { label: "lighter" },
+      { label: "400", value: "400" },
+      { label: "500", value: "500" },
+      { label: "600", value: "600" },
+      { label: "700", value: "700" },
+      { label: "800", value: "800" },
+      { label: "900", value: "900" },
     ],
   },
   { label: "size", key: "font-size", defaultValue: "", control: Input },
@@ -186,6 +191,20 @@ export const typography = [
     control: OptionSelect,
     options: ["initial", "left", "right", "center", "justify"],
   }, //custom
+  {
+    label: "Decoration",
+    key: "text-decoration-line",
+    control: OptionSelect,
+    defaultValue: "Underline",
+    options: [
+      { label: "Underline", value: "underline" },
+      { label: "None", value: "none" },
+      { label: "Overline", value: "overline" },
+      { label: "Line-through", value: "line-through" },
+      { label: "Under Over", value: "underline overline" },
+    ],
+  },
+
   { label: "transform", key: "text-transform", control: Input }, //custom
   { label: "style", key: "font-style", control: Input }, //custom
 ]

packages/builder/src/pages/[application]/backend/_layout.svelte

@@ -34,16 +34,7 @@
   .nav {
     overflow: auto;
     flex: 0 1 auto;
-    width: 275px;
+    width: 300px;
     height: 100%;
   }
-
-  @media only screen and (min-width: 1800px) {
-    .nav {
-      overflow: auto;
-      flex: 0 1 auto;
-      width: 300px;
-      height: 100%;
-    }
-  }
 </style>

packages/builder/src/pages/[application]/frontend/_layout.svelte

@@ -90,20 +90,11 @@
 <style>
   .root {
     display: grid;
-    grid-template-columns: 275px 1fr 275px;
+    grid-template-columns: 300px 1fr 300px;
     width: 100%;
     background: var(--grey-light);
   }
 
-  @media only screen and (min-width: 1800px) {
-    .root {
-      display: grid;
-      grid-template-columns: 300px 1fr 300px;
-      width: 100%;
-      background: var(--grey-light);
-    }
-  }
-
   .ui-nav {
     grid-column: 1;
     background-color: var(--white);