here and there

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"
-                    bind:value={name}
-                    class="form-control"
-                    id="inviteeName"
-                    placeholder="Member name"
-                    required
+                        type="text"
+                        bind:value={name}
+                        class="form-control"
+                        id="inviteeName"
+                        placeholder="Member name"
+                        required
                 />
             </div>
             <div class="mb-3">
@@ -85,24 +85,24 @@
                 >Invitee Email Address</label
                 >
                 <input
-                    type="email"
-                    bind:value={email}
-                    class="form-control"
-                    id="inviteeEmail"
-                    placeholder="Member email"
-                    required
+                        type="email"
+                        bind:value={email}
+                        class="form-control"
+                        id="inviteeEmail"
+                        placeholder="Member email"
+                        required
                 />
             </div>
 
             <div class="me-3">
-                {#each channel.roles.filter((r) => r !== "removed") as arole}
-                    <Radio
-                        bind:group={role}
-                        value={arole}
-                        name="role"
-                        label={arole}
-                    />
-                {/each}
+                <select bind:value={role}>
+                    {#each channel.roles.filter((r) => r !== "removed") as arole}
+                        <option
+                                value={arole}
+
+                        >{arole}</option>
+                    {/each}
+                </select>
             </div>
 
             <div class="mt-5 d-block text-center">
@@ -111,17 +111,15 @@
         </form>
     </div>
 
-    <div class="lx-card mt-3">
-        <h3 class="header-small mb-5">Members</h3>
+    <div class="member-list">
+        <h3 class="header-small mb-5 mt-5">Members</h3>
         {#each users as user}
             <MemberSettingsCard
-                member={user}
-                roles={channel.roles}
-                on:update={update}
-                on:reinvite={(e) => invite(e.detail.email, e.detail.role)}
+                    member={user}
+                    roles={channel.roles}
+                    on:update={update}
+                    on:reinvite={(e) => invite(e.detail.email, e.detail.role)}
             />
         {/each}
-
-
     </div>
 </div>