here and there

front/js/svelte/Account.svelte

@@ -21,7 +21,7 @@
     setContext("channel", channel);
     setContext("user", user);
 </script>
-<div class="text-center">
+<div style="text-align: center;background: var(--p20);padding: 20px;color: var(--p90)">
     <h1><a class="text-decoration-none" href="{channel.lucentUrl}">{channel.name}</a></h1>
 </div>
 <div>

front/js/svelte/account/Profile.svelte

@@ -55,28 +55,28 @@
         <Avatar name={user.name}/>
     </h3>
     <form on:submit={saveName}>
-        <div class="input-group mb-3">
+        <div class="input-group mb-5">
             <input
                     type="text"
                     bind:value={name}
-                    class="form-control"
+                    class="form-control mb-3"
                     placeholder="Name"
                     required
             />
-            <SpinnerButton label="Update"/>
+            <SpinnerButton label="Update Name"/>
         </div>
     </form>
 
     <form on:submit={saveEmail}>
-        <div class="input-group mb-3">
+        <div class="input-group mb-5">
             <input
                     type="email"
                     bind:value={email}
-                    class="form-control"
+                    class="form-control mb-3"
                     placeholder="Email"
                     required
             />
-            <SpinnerButton label="Update"/>
+            <SpinnerButton label="Update Email"/>
         </div>
     </form>
 

front/js/svelte/build/Report.svelte

@@ -41,12 +41,12 @@
 
 </script>
 
-<div class="wrapper-tiny transparent mb-5">
+<div class="common-wrapper">
     <div class="lx-card mt-5">
 
         <h3 class="header-small mb-5">{title}</h3>
 
-        <button on:click={buildWebsite} class="btn btn-outline-primary btn-sm mb-3" disabled={inProgress}>Start Build
+        <button on:click={buildWebsite} class="button primary mb-3" disabled={inProgress}>Start Build
         </button>
 
 

front/js/svelte/common/SpinnerButton.svelte

@@ -3,7 +3,7 @@
     export let disabled = false;
 </script>
 
-    <button type="submit" class="button btn-primary btn-spinner" {disabled}>
+    <button type="submit" class="button secondary btn-spinner" {disabled}>
         <span
             class="spinner-border spinner-border-sm"
             role="status"

front/js/svelte/common/SuccessAlert.svelte

@@ -12,21 +12,10 @@
 </script>
 
 {#if isVisible}
-    <div
+        <div class="notice notice-success"   transition:fly={{ duration: 500 }} role="alert">
-        transition:fly={{ duration: 500 }}
+            <div class="title">Success</div>
-        class="lx-alert text-white bg-success border-1 border rounded px-3 py-0 text-center"
+            <div class="content">  {message}</div>
-        role="alert"
+        </div>
-    >
+
-        {message}
-    </div>
 {/if}
 
-<style>
-    .lx-alert {
-        position: fixed;
-        left: 50%;
-        transform: translateX(-50%);
-        top: 45px;
-        margin: 0 auto;
-    }
-</style>

front/js/svelte/content/tools/AppliedFilter.svelte

@@ -25,6 +25,9 @@
         extractLabel(schema, key),
     ].reduce((mem, fn) => fn(mem), filter);
 
+
+
+
     function extractOperator(key) {
         return (filter) => {
             if (filter.isReference) {
@@ -81,6 +84,7 @@
         {:else}
               {filter.label} {operators.find((o) => o.name === filter.operator)?.symbol ?? ""} {value}
         {/if}
+
         <button
                 on:click|preventDefault={() => removeFilter(key)}
                 type="button"

front/js/svelte/content/tools/AppliedFilterNotLinked.svelte

@@ -0,0 +1,35 @@
+<script>
+        import {createEventDispatcher, getContext} from "svelte";
+        import Icon from "../../common/Icon.svelte";
+
+        const channel = getContext("channel");
+    const dispatch = createEventDispatcher();
+
+    export let inModal;
+    export let modalUrl;
+    const url = new URL(modalUrl ?? window.location.href);
+    function removeFilter(k) {
+
+        const url = new URL(modalUrl ?? window.location.href);
+        url.searchParams.set("skip", "0");
+        url.searchParams.delete("notlinked");
+        if (inModal) {
+            dispatch("refresh", url);
+        } else {
+            window.location.replace(url);
+        }
+    }
+</script>
+{#if url.searchParams.get("notlinked")}
+<span class="applied-filter">
+
+        Not linked
+
+        <button
+                on:click|preventDefault={() => removeFilter()}
+                type="button"
+                class="button-text"
+                aria-label="Close"
+        ><Icon width={12} height={12} icon="close"></Icon></button>
+</span>
+{/if}

front/js/svelte/content/tools/Tools.svelte

@@ -6,6 +6,7 @@
     import AppliedFilter from "./AppliedFilter.svelte";
     import {createEventDispatcher, getContext} from "svelte";
     import Dropdown from "../../common/Dropdown.svelte";
+    import AppliedFilterNotLinked from "./AppliedFilterNotLinked.svelte";
 
     const channel = getContext("channel");
 
@@ -136,6 +137,11 @@
 
 {#if Object.entries(filter).length > 0}
     <div class="applied-filters">
+        <AppliedFilterNotLinked
+                {inModal}
+                {modalUrl}
+                on:refresh
+        />
         {#each Object.entries(filter) as [k, v]}
             <AppliedFilter
                     {schema}

front/js/svelte/forms/Radio.svelte

@@ -4,7 +4,7 @@
     export let name;
     export let group;
     export let value;
-    export let help;
+    export let help = "";
     let id = uniqueId();
 </script>
 

front/js/svelte/members/MemberSettingsCard.svelte

@@ -2,6 +2,7 @@
     import Avatar from "../account/Avatar.svelte";
     import {fly} from "svelte/transition";
     import {createEventDispatcher} from "svelte";
+    import Dropdown from "../common/Dropdown.svelte";
 
     const dispatch = createEventDispatcher();
     export let member;
@@ -35,61 +36,50 @@
 
 <div
         transition:fly={{ duration: 200 }}
-        class="d-flex justify-content-between align-items-center mb-3 "
+        class="member-item"
 >
-    <div class="d-flex align-items-center status-{member.roles.includes('removed')  ? 'removed' : 'active'}">
+    <div class="member-name status-{member.roles.includes('removed')  ? 'removed' : 'active'}">
         <Avatar name={member.name ?? "" } side={32}/>
-        <div class="ms-3 ">
+        <div>
             <div>
-                <span class="fs-5">
+                {member.name}
-                            {member.name}
-                        </span>
             </div>
-            {member.email}
+            <div>
-        </div>
+                {member.email}
-    </div>
-    <div>
-        <div class="dropdown dropdown-center">
-            <button
-                    class="  dropdown-toggle btn btn-light"
-                    type="button"
-                    data-bs-toggle="dropdown"
-                    aria-expanded="false"
-            >
-                Roles
-            </button>
-            <div class="dropdown-menu">
-                <h6 class="dropdown-header">Remove role</h6>
-                {#each roles as role}
-                    {#if member.roles.includes(role)}
-                        <button
-                                class="dropdown-item text-capitalize"
-                                on:click={(e) => removeFrom(e,role)}
-                        >
-                            {role}
-                        </button>
-                    {/if}
-                {/each}
-                <div>
-                    <hr class="dropdown-divider">
-                </div>
-
-                <h6 class="dropdown-header">Add role</h6>
-                {#each roles as role}
-                    {#if !member.roles.includes(role)}
-                        <button
-                                class="dropdown-item text-capitalize"
-                                on:click={(e) => addTo(e,role)}
-                        >
-                            {role}
-                        </button>
-                    {/if}
-                {/each}
-
             </div>
         </div>
-
     </div>
+    <Dropdown orientation="right">
+        <div slot="button">
+            Roles
+        </div>
+        <h6 class="dropdown-header">Remove role</h6>
+        {#each roles as role}
+            {#if member.roles.includes(role)}
+                <button
+                        class="dropdown-item button"
+                        on:click={(e) => removeFrom(e,role)}
+                >
+                    {role}
+                </button>
+            {/if}
+        {/each}
+
+
+        <h6 class="dropdown-header">Add role</h6>
+        {#each roles as role}
+            {#if !member.roles.includes(role)}
+                <button
+                        class="dropdown-item button"
+                        on:click={(e) => addTo(e,role)}
+                >
+                    {role}
+                </button>
+            {/if}
+        {/each}
+
+    </Dropdown>
+
 </div>
 <style>
     .status-removed {

front/js/svelte/members/Members.svelte

@@ -2,9 +2,9 @@
     import ErrorAlert from "../common/ErrorAlert.svelte";
     import SuccessAlert from "../common/SuccessAlert.svelte";
     import SpinnerButton from "../common/SpinnerButton.svelte";
-    import Radio from "../forms/Radio.svelte";
     import MemberSettingsCard from "./MemberSettingsCard.svelte";
     import {getContext} from "svelte";
+    import axios from "axios";
 
 
     const channel = getContext("channel");
@@ -60,7 +60,7 @@
     }
 </script>
 
-<div class="wrapper-tiny transparent mb-5">
+<div class="common-wrapper">
     <div class="lx-card mt-5">
         <h3 class="header-small mb-5">Invite people</h3>
         <ErrorAlert message={errorMessage}/>
@@ -72,12 +72,12 @@
                 >Invitee Name</label
                 >
                 <input
-                    type="text"
+                        type="text"
-                    bind:value={name}
+                        bind:value={name}
-                    class="form-control"
+                        class="form-control"
-                    id="inviteeName"
+                        id="inviteeName"
-                    placeholder="Member name"
+                        placeholder="Member name"
-                    required
+                        required
                 />
             </div>
             <div class="mb-3">
@@ -85,24 +85,24 @@
                 >Invitee Email Address</label
                 >
                 <input
-                    type="email"
+                        type="email"
-                    bind:value={email}
+                        bind:value={email}
-                    class="form-control"
+                        class="form-control"
-                    id="inviteeEmail"
+                        id="inviteeEmail"
-                    placeholder="Member email"
+                        placeholder="Member email"
-                    required
+                        required
                 />
             </div>
 
             <div class="me-3">
-                {#each channel.roles.filter((r) => r !== "removed") as arole}
+                <select bind:value={role}>
-                    <Radio
+                    {#each channel.roles.filter((r) => r !== "removed") as arole}
-                        bind:group={role}
+                        <option
-                        value={arole}
+                                value={arole}
-                        name="role"
+
-                        label={arole}
+                        >{arole}</option>
-                    />
+                    {/each}
-                {/each}
+                </select>
             </div>
 
             <div class="mt-5 d-block text-center">
@@ -111,17 +111,15 @@
         </form>
     </div>
 
-    <div class="lx-card mt-3">
+    <div class="member-list">
-        <h3 class="header-small mb-5">Members</h3>
+        <h3 class="header-small mb-5 mt-5">Members</h3>
         {#each users as user}
             <MemberSettingsCard
-                member={user}
+                    member={user}
-                roles={channel.roles}
+                    roles={channel.roles}
-                on:update={update}
+                    on:update={update}
-                on:reinvite={(e) => invite(e.detail.email, e.detail.role)}
+                    on:reinvite={(e) => invite(e.detail.email, e.detail.role)}
             />
         {/each}
-
-
     </div>
 </div>

front/sass/_button.scss

@@ -28,7 +28,10 @@
   }
 
   &.secondary{
-    background: red;
+    background: var(--p30);
+    &:hover {
+      background: var(--p40);
+    }
   }
   &.primary{
     background: var(--p70);

front/sass/_dropdown.scss

@@ -1,8 +1,6 @@
 .dropdown {
   position: relative;
-  z-index: 20;
   overflow: visible;
-
 }
 
 .dropdown-button > div {

front/sass/_form.scss

@@ -5,7 +5,7 @@ label {
   margin-bottom: 4px;
 }
 
-input[type=text],input[type=number],input[type=search],textarea{
+input[type=text],input[type=number],input[type=search],input[type=email],textarea{
   width: 100%;
   background: var(--p20);
   border: 1px solid var(--p50);

front/sass/_members.scss

@@ -0,0 +1,19 @@
+.member-list{
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+.member-item{
+  background: var(--p30);
+  border-radius: 12px;
+  padding: 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .member-name{
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+}

front/sass/_notice.scss

@@ -17,11 +17,8 @@
     font-weight: bold;
 }
 
-.notice.success{
+.notice.notice-success{
-    border-color:  green;
+    background: var(--suc20);
-    & .title{
-        border-color:  green;
-    }
 }
 
 .notice.notice-error{

front/sass/_wrappers.scss

@@ -1,33 +1,19 @@
 .wrapper-tiny {
-    background-color: #fff;
+    background-color: var(--p20);
-    border-radius: 32px;
+    border-radius: 12px;
     margin: 44px auto;
     width: 600px;
     padding: 44px;
 
-    &.transparent {
-
-        margin: 0px auto;
-        padding: 0px;
-        background-color: transparent;
-    }
 }
 
 
 
-.wrapper-small {
+.common-wrapper {
-    background-color: #fff;
+    background-color: var(--p20);
-    border-radius: 32px;
+    margin: 20px 0;
-    margin: 44px auto;
+    padding: 20px;
-    width: 800px;
+    border-radius: 12px;
-    padding: 44px;
-
-    &.transparent {
-
-        margin: 0px auto;
-        padding: 0px;
-        background-color: transparent;
-    }
 }
 
 

front/sass/app.scss

@@ -13,6 +13,15 @@
   --p100: #000C23;
 
 
+  --suc10: #d1ffb8;
+  --suc20: #d1ffb8;
+  --suc30: #b5ff8d;
+  --suc40: #a2ff70;
+  --suc50: #82cc5a;
+  --suc80: #71b34e;
+  --suc90: #314c22;
+
+
 
   --err10: #ffb9d0;
   --err20: #ff9bb3;
@@ -58,6 +67,7 @@
 @import "./dialog";
 @import "./autocomplete";
 @import "./reference-tags";
+@import "./members";
 
 body {
   background-color: var(--p10);