Selected pseudo class removed, workflow panels updated

6 years ago · 8f967116fc
18 changed files with 52 additions and 56 deletions
--- a/packages/builder/src/budibase.css
+++ b/packages/builder/src/budibase.css
@ -57,9 +57,9 @@
 .budibase__nav-item {
    cursor: pointer;
    padding: 0 4px 0 2px;
-    height: 35px;
-    margin: 5px 0px 4px 0px;
-    border-radius: 0 5px 5px 0;
+    height: 40px;
+    margin: 0px 0px 0px 0px;
+    border-radius: 5px;
    display: flex;
    align-items: center;
    font-size: 14px;
--- a/packages/builder/src/components/common/AppNotification.svelte
+++ b/packages/builder/src/components/common/AppNotification.svelte
@ -55,7 +55,7 @@
  }

  :global(.uk-notification-message-danger) {
-    background: var(--grey-7) !important;
+    background: var(--grey-9) !important;
    color: #fff !important;
    font-size: 16px !important;
  }
--- a/packages/builder/src/components/common/Input.svelte
+++ b/packages/builder/src/components/common/Input.svelte
@ -38,16 +38,16 @@
    height: 32px;
    font-size: 12px;
    font-weight: 500;
-    margin: 0px 0px 0px 1px;
+    margin: 0px 0px 0px 2px;
    color: var(--ink);
    opacity: 0.7;
    padding: 0px 4px;
    line-height: 1.3;
-    /* padding: 12px; */
    width: 164px;
    box-sizing: border-box;
-    border: 1px solid var(--grey-2);
-    border-radius: 2px;
+    background-color: var(--grey-3);
+    border-radius: 4px;
+    border: 1px solid var(--grey-3);
    outline: none;
  }

--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@ -77,8 +77,7 @@
  }

  .title {
-    margin-left: 10px;
-    margin-top: 2px;
+    margin-left: 14px;
    font-size: 14px;
    font-weight: 400;
  }
@ -87,8 +86,7 @@
    display: inline-block;
    transition: 0.2s;
    font-size: 24px;
-    width: 20px;
-    margin-top: 2px;
+    width: 18px;
    color: var(--grey-7);
  }

--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@ -39,7 +39,7 @@
      <div
        class="budibase__nav-item item"
        class:selected={currentComponent === component}
-        style="padding-left: {level * 20 + 53}px">
+        style="padding-left: {level * 16 + 32}px">
        <div class="nav-item">
          <i class="icon ri-arrow-right-circle-fill" />
          {get_capitalised_name(component._component)}
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@ -19,7 +19,6 @@
    { value: "normal", text: "Normal" },
    { value: "hover", text: "Hover" },
    { value: "active", text: "Active" },
-    { value: "selected", text: "Selected" },
  ]

  $: propertyGroupNames = Object.keys(panelDefinition)
--- a/packages/builder/src/components/userInterface/FlatButton.svelte
+++ b/packages/builder/src/components/userInterface/FlatButton.svelte
@ -3,18 +3,14 @@
  export let value = ""
  export let text = ""
  export let icon = ""
-  export let padding = "8px 5px;"
  export let onClick = value => {}
  export let selected = false
-  export let fontWeight = ""

-  $: style = buildStyle({ padding, fontWeight })
  $: useIcon = !!icon
 </script>

 <div
  class="flatbutton"
-  {style}
  class:selected
  on:click={() => onClick(value || text)}>
  {#if useIcon}
@ -29,7 +25,11 @@
 <style>
  .flatbutton {
    cursor: pointer;
+    max-height: 36px;
    padding: 8px 2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
    text-align: center;
    background: #ffffff;
    color: var(--grey-7);
@ -37,7 +37,6 @@
    font-size: 14px;
    font-weight: 400;
    transition: all 0.3s;
-    margin-left: 5px;
    text-rendering: optimizeLegibility;
  }

--- a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte
+++ b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte
@ -46,6 +46,7 @@
 <style>
  .flatbutton-group {
    display: flex;
+    width: 100%
  }

  .button-container {
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
@ -15,7 +15,6 @@
 <PagesList />

 <button class="newscreen" on:click={newScreen}>
-  <i class="icon ri-add-circle-fill" />
  Create New Screen
 </button>

@ -30,23 +29,26 @@
 <style>
  .newscreen {
    cursor: pointer;
-    border: 1px solid var(--grey-4);
-    border-radius: 3px;
+    border: 1px solid var(--purple);
+    border-radius: 5px;
    width: 100%;
+    height: 36px;
    padding: 8px 16px;
    margin: 20px 0px 12px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
-    background: white;
-    color: var(--ink);
+    background: var(--purple);
+    color: var(--white);
    font-size: 14px;
    font-weight: 500;
-    transition: all 2ms;
+    transition: all 3ms;
+    outline: none;
  }

  .newscreen:hover {
-    background: var(--grey-1);
+    background: var(--purple-light);
+    color: var(--purple);
  }

  .icon {
--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@ -142,15 +142,16 @@
    position: relative;
    outline: none;
    width: 160px;
-    height: 32px;
+    height: 36px;
    cursor: pointer;
-    font-size: 12px;
+    font-size: 14px;
  }

  .bb-select-anchor {
    cursor: pointer;
    display: flex;
-    padding: 5px 10px;
+    padding: 0px 12px;
+    height: 36px;
    background-color: var(--grey-2);
    border-radius: 5px;
    align-items: center;
--- a/packages/builder/src/components/userInterface/PageLayout.svelte
+++ b/packages/builder/src/components/userInterface/PageLayout.svelte
@ -77,7 +77,7 @@
  }

  .icon-big {
-    font-size: 24px;
+    font-size: 20px;
    color: var(--grey-7);
  }

--- a/packages/builder/src/components/userInterface/PagesList.svelte
+++ b/packages/builder/src/components/userInterface/PagesList.svelte
@ -43,7 +43,8 @@

  button {
    cursor: pointer;
-    padding: 8px 16px;
+    padding: 0px 16px;
+    height: 36px;
    text-align: center;
    background: #ffffff;
    color: var(--grey-7);
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@ -54,7 +54,6 @@
    flex: 0 0 50px;
    display: flex;
    align-items: center;
-    padding: 0px 5px;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@ -262,15 +262,10 @@ export const typography = [
    key: "text-transform",
    control: FlatButtonGroup,
    buttonProps: [
-      { text: "BB", padding: "0px 5px", fontWeight: 500, value: "uppercase" },
-      { text: "Bb", padding: "0px 5px", fontWeight: 500, value: "capitalize" },
-      { text: "bb", padding: "0px 5px", fontWeight: 500, value: "lowercase" },
-      {
-        text: "&times;",
-        padding: "0px 5px",
-        fontWeight: 500,
-        value: "none",
-      },
+      { text: "BB", value: "uppercase" },
+      { text: "Bb", value: "capitalize" },
+      { text: "bb", value: "lowercase" },
+      { text: "&times;", value: "none" },
    ],
  },
  {
--- a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
@ -180,15 +180,15 @@

  .config-item {
    margin: 0px 0px 4px 0px;
-    padding: 12px;
-    background: var(--grey-1);
+    padding: 12px 0px;
  }

  .budibase_input {
    height: 35px;
-    width: 220px;
+    width: 244px;
    border-radius: 3px;
-    border: 1px solid var(--grey-4);
+    background-color: var(--grey-2);
+    border: 1px solid var(--grey-2);
    text-align: left;
    color: var(--ink);
    font-size: 14px;
--- a/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte
@ -53,29 +53,31 @@

 <style>
  .subtabs {
-    margin-top: 27px;
+    margin-top: 20px;
    display: grid;
-    grid-gap: 5px;
    grid-auto-flow: column;
    grid-auto-columns: 1fr 1fr 1fr;
-    margin-bottom: 10px;
+    margin-bottom: 12px;
  }

  .subtabs span {
    transition: 0.3s all;
    text-align: center;
    color: var(--grey-7);
-    font-weight: 500;
-    padding: 10px;
+    font-weight: 400;
+    padding: 8px 16px;
+    text-rendering: optimizeLegibility;
+    border: none !important;
+    outline: none;
  }

  .subtabs span.selected {
-    background: var(--grey-7);
-    color: var(--white);
-    border-radius: 2px;
+    background: var(--grey-3);
+    color: var(--ink);
+    border-radius: 5px;
  }

  .subtabs span:not(.selected) {
-    color: var(--grey-7);
+    color: var(--ink);
  }
 </style>
--- a/packages/builder/src/pages/_layout.svelte
+++ b/packages/builder/src/pages/_layout.svelte
@ -36,7 +36,6 @@
        <Link icon={DocumentationIcon} title="Documentation" href="/" />
        <Link icon={TutorialsIcon} title="Tutorials" href="/" />
        <Link icon={CommunityIcon} title="Community" href="/" />
-        <Link icon={ContributionIcon} title="Contact" href="/" />
      </div>

      <div class="nav-section">
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@ -73,7 +73,7 @@
  .welcome {
    font-size: 42px;
    color: var(--ink);
-    font-weight: 900;
+    font-weight: 700;
    margin: 40px 0px 0px 80px;
  }