Modals and Forms Visual Updates

mathesar_ui/src/App.svelte

@@ -53,7 +53,7 @@
     --color-contrast-light: var(--color-blue-light);
     --color-link: var(--color-blue-dark);
     --color-text: #171717;
-    --color-text-muted: #6b7280;
+    --color-text-muted: #5e6471;
     --color-substring-match: rgb(254, 221, 72);
     --color-substring-match-light: rgba(254, 221, 72, 0.2);
     --text-size-xx-small: var(--size-xx-small);
@@ -65,7 +65,10 @@
     --text-size-xx-large: var(--size-xx-large);
     --text-size-ultra-large: var(--size-ultra-large);
     --text-size-super-ultra-large: var(--size-super-ultra-large);
-
+    --font-weight-light: 300;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 600;
     --modal-z-index: 50;
     --modal-record-selector-z-index: 50;
 

mathesar_ui/src/component-library/button/Button.scss

@@ -16,6 +16,7 @@
   font-weight: inherit;
   position: relative;
   padding: var(--input-padding);
+  box-sizing: border-box;
 
   > * + * {
     margin-left: 0.25em;
@@ -190,6 +191,15 @@
     opacity: 0.5;
     cursor: not-allowed;
   }
+
+  &.btn-outcome {
+    background-color: var(--purple-100);
+    border: 1px solid var(--purple-200);
+
+    &:hover {
+      border: 1px solid var(--purple-300);
+    }
+  }
 }
 a.btn {
   text-decoration: none;

mathesar_ui/src/component-library/checkbox-group/CheckboxGroup.svelte

@@ -25,6 +25,7 @@
   ) => string | ComponentWithProps<C> | undefined = () => undefined;
   export let getCheckboxDisabled: (value: Option | undefined) => boolean = () =>
     false;
+  export let boxed = false;
   /**
    * By default, options will be compared by equality. If you're using objects as
    * options, you can supply a custom function here to compare them.
@@ -58,6 +59,7 @@
   {label}
   {ariaLabel}
   {disabled}
+  {boxed}
   let:option
   let:disabled={innerDisabled}
   on:change

mathesar_ui/src/component-library/collapsible/Collapsible.scss

@@ -15,7 +15,11 @@
       .collapsible-header-title {
         flex-grow: 1;
         overflow: hidden;
-        font-weight: var(--Collapsible_header-font-weight, 600);
+        font-weight: var(
+          --Collapsible_header-font-weight,
+          var(--font-weight-bold)
+        );
+        padding-left: 0.25em;
       }
       svg {
         flex-shrink: 0;

mathesar_ui/src/component-library/common/styles/variables.scss

@@ -14,6 +14,7 @@
   --green-100: #e5fde6;
 
   --purple-100: #ebe5fd;
+  --purple-200: #d7cbfb;
   --purple-300: #a586ff;
   --purple-400: #6b45dd;
   --purple-500: #4b2c9d;
@@ -90,5 +91,5 @@
   --border-radius-l: 0.571rem; //8px
   --border-radius-xl: 1.142rem; //16px
 
-  --input-padding: 0.5em;
+  --input-padding: var(--size-ultra-small);
 }

mathesar_ui/src/component-library/commonTypes.ts

@@ -5,6 +5,7 @@ export type Appearance =
   | 'plain'
   | 'ghost'
   | 'plain-primary'
+  | 'outcome'
   | 'outline-primary';
 
 export type Size = 'small' | 'medium' | 'large';

mathesar_ui/src/component-library/fieldset-group/FieldsetGroup.scss

@@ -6,11 +6,14 @@
 
   legend {
     padding: 0;
+    font-weight: var(--font-weight-medium);
+    margin-bottom: 0.5rem;
   }
   .options {
     padding-left: 0;
     list-style-type: none;
-    margin: 0;
+    margin-top: 0.25em;
+    margin-bottom: 0;
   }
   &.has-label .options {
     margin-top: 1em;

mathesar_ui/src/component-library/labeled-input/LabeledInput.scss

@@ -1,10 +1,11 @@
 .labeled-input {
-  --spacing-y-default: 0.4em;
+  --spacing-y-default: 0.25em;
   --spacing-x-default: 0.4em;
 
   .label {
     display: inline-block;
     color: var(--slate-800);
+    font-weight: var(--font-weight-medium);
   }
   .input {
     display: block;
@@ -32,17 +33,18 @@
     }
   }
 
-  // TODO: add support for help text with an inline layout.
   &.layout-inline .label-content {
-    display: inline-flex;
+    display: flex;
     flex-direction: row;
-    align-items: center; // To support a text input that's taller than the label
-    .label {
-      flex: 1 1 auto;
-    }
-    .input {
+    align-items: center;
+    > .label {
       flex: 0 0 auto;
-      margin-left: var(--spacing-x, var(--spacing-x-default));
+      margin-right: 0.5rem;
+      padding-top: calc(var(--input-padding-y, 0.5em));
+      padding-bottom: calc(var(--input-padding-y, 0.5em));
+    }
+    .field-help {
+      margin-top: 0.25em;
     }
   }
 

mathesar_ui/src/component-library/window/Window.scss

@@ -3,6 +3,7 @@
   border-radius: 0.4em;
   min-height: var(--window-min-height, 7em);
   width: var(--window-width, 100%);
+  min-width: var(--window-min-width, 40em);
   overflow: hidden;
   display: grid;
   grid-template: auto 1fr auto / auto;
@@ -15,14 +16,16 @@
     display: flex;
     justify-content: flex-end;
     align-items: flex-start;
+    padding: 1rem;
+    border-bottom: 1px solid var(--slate-200);
     .title {
       &:empty {
         display: none;
       }
       flex: 1 1 100%;
-      padding: 1rem 1rem 0.5rem 1rem;
+      margin: auto;
       font-weight: 500;
-      font-size: var(--text-size-large);
+      font-size: var(--text-size-x-large);
     }
   }
 

mathesar_ui/src/components/NameAndDescInputModalForm.svelte

@@ -29,6 +29,8 @@
   export let getInitialName: () => string = () => '';
   export let getInitialDescription: () => string = () => '';
   export let save: (name: string, description: string) => Promise<void>;
+  export let namePlaceholder = $_('name');
+  export let descriptionPlaceholder = $_('description');
 
   /**
    * NOTE: This is NOT a feature
@@ -100,7 +102,7 @@
             nameHasChanged = true;
           }}
           disabled={isSubmitting}
-          placeholder={$_('name')}
+          placeholder={namePlaceholder}
           id="name"
         />
         {#if nameHasChanged && nameValidationErrors.length}
@@ -118,7 +120,7 @@
             bind:value={description}
             aria-label={$_('description')}
             disabled={isSubmitting}
-            placeholder={$_('description')}
+            placeholder={descriptionPlaceholder}
           />
         </LabeledInput>
       </div>
@@ -146,7 +148,7 @@
     flex-direction: column;
 
     > :global(* + *) {
-      margin-top: 1rem;
+      margin-top: 0.25rem;
     }
   }
 

mathesar_ui/src/components/NameWithIcon.svelte

@@ -44,7 +44,7 @@
   .icon {
     color: var(--icon-color, currentcolor);
     opacity: var(--NameWithIcon__icon-opacity, 0.75);
-    vertical-align: middle;
+    vertical-align: bottom;
   }
   .icon > :global(.fa-icon + .fa-icon) {
     margin-left: 0.2em;
@@ -61,6 +61,6 @@
   }
   .name {
     color: var(--name-color, currentcolor);
-    vertical-align: middle;
+    vertical-align: bottom;
   }
 </style>

mathesar_ui/src/components/form/Field.svelte

@@ -23,20 +23,27 @@
   $: inputComponent = input?.component ?? (TextInput as typeof SvelteComponent);
   $: inputComponentProps = input?.props ?? {};
   $: ({ showsError, disabled } = field);
+  $: isStacked = layout === 'stacked';
 </script>
 
 <FieldLayout>
   {#if label || $$slots.label}
-    <LabeledInput {label} {layout} {help}>
-      <slot name="label" slot="label" />
-      <slot name="help" slot="help" />
+    <LabeledInput {layout} {label}>
+      <svelte:fragment slot="label">
+        <slot name="label" />
+      </svelte:fragment>
       <svelte:component
         this={inputComponent}
         bind:value={$field}
         hasError={$showsError}
         disabled={$disabled}
         {...inputComponentProps}
       />
+      {#if !isStacked && (help || $$slots.help)}
+        <FieldHelp>
+          <slot name="help">{help}</slot>
+        </FieldHelp>
+      {/if}
     </LabeledInput>
   {:else}
     <svelte:component
@@ -48,11 +55,13 @@
     >
       <slot />
     </svelte:component>
-    {#if help || $$slots.help}
-      <FieldHelp>
-        <slot name="help">{help}</slot>
-      </FieldHelp>
-    {/if}
   {/if}
+
+  {#if isStacked && (help || $$slots.help)}
+    <FieldHelp>
+      <slot name="help">{help}</slot>
+    </FieldHelp>
+  {/if}
+
   <FieldErrors {field} />
 </FieldLayout>

mathesar_ui/src/components/message-boxes/ErrorBox.svelte

@@ -15,7 +15,7 @@
 <style>
   .error-box {
     --MessageBox__background: var(--danger-background-color);
-    --MessageBox__border: solid 1px var(--danger-color);
+    --MessageBox__border: solid 4px var(--danger-color);
     --MessageBox__icon-color: var(--danger-color);
     font-size: var(--ErrorBox__font-size, var(--text-size-small));
   }

mathesar_ui/src/components/message-boxes/InfoBox.svelte

@@ -9,13 +9,13 @@
 </script>
 
 <div class="info-box">
-  <MessageBox icon={iconInfo} {...$$restProps}><slot /></MessageBox>
+  <MessageBox icon={iconInfo} {...$$restProps} fullWidth><slot /></MessageBox>
 </div>
 
 <style>
   .info-box {
     --MessageBox__background: var(--sky-200);
-    --MessageBox__border: solid 1px var(--sky-300);
+    --MessageBox__border: solid 4px var(--sky-300);
     --MessageBox__icon-color: var(--sky-800);
   }
 </style>

mathesar_ui/src/components/message-boxes/MessageBox.svelte

@@ -4,8 +4,8 @@
 
   export let icon: IconProps | undefined = undefined;
   export let style: string | undefined = undefined;
-  /** When true, the box will take the full width of its parent */
   export let fullWidth = false;
+  export let title: string | undefined = undefined;
 </script>
 
 <div
@@ -20,6 +20,9 @@
     </span>
   {/if}
   <div class="content trim-child-margins">
+    {#if title}
+      <h3 class="title">{title}</h3>
+    {/if}
     <slot />
   </div>
 </div>
@@ -31,7 +34,7 @@
     border-radius: var(--border-radius-m);
     margin: var(--MessageBox__margin);
     background: var(--MessageBox__background);
-    border: var(--MessageBox__border);
+    border-left: var(--MessageBox__border);
   }
   .message-box:not(.full-width) {
     max-width: max-content;
@@ -45,4 +48,9 @@
     top: 0.7em;
     color: var(--MessageBox__icon-color, currentcolor);
   }
+  .title {
+    font-size: var(--size-large);
+    font-weight: var(--font-weight-medium);
+    margin-bottom: var(--size-ultra-small);
+  }
 </style>

mathesar_ui/src/components/message-boxes/OutcomeBox.svelte

@@ -8,16 +8,19 @@
   type $$Props = ComponentProps<MessageBox>;
 
   export let fullWidth = true;
+  export let title = "What's Changing";
 </script>
 
 <div class="outcome-box">
-  <MessageBox icon={iconOutcome} {fullWidth}><slot /></MessageBox>
+  <MessageBox icon={iconOutcome} {fullWidth} {title}>
+    <slot />
+  </MessageBox>
 </div>
 
 <style>
   .outcome-box {
     --MessageBox__background: var(--purple-100);
-    --MessageBox__border: solid 1px var(--purple-300);
+    --MessageBox__border: solid 4px var(--purple-300);
     --MessageBox__icon-color: var(--purple-400);
   }
 </style>

mathesar_ui/src/components/message-boxes/WarningBox.svelte

@@ -15,7 +15,7 @@
 <style>
   .warning-box {
     --MessageBox__background: var(--yellow-100);
-    --MessageBox__border: solid 1px var(--yellow-200);
+    --MessageBox__border: solid 4px var(--yellow-200);
     --MessageBox__icon-color: var(--yellow-300);
   }
 </style>