Auth UI

src/components/Form/TextField.svelte

@@ -1,18 +1,35 @@
 <script>
+  import { afterUpdate } from 'svelte';
   export let label;
   export let placeholder;
   export let value;
   export let onKeyDown;
-  export let className = "";
+  export let className = '';
+  export let inputClassName = '';
+  export let type = 'text';
+  export let autoFocus = false;
+
+  let ref = null;
+
+  function typeAction(node) {
+    node.type = type;
+  }
+
+  afterUpdate(() => {
+    if (autoFocus) {
+      ref.focus();
+    }
+  });
 </script>
 
 <label class="block {className}">
-  {#if label}<h4 class="m-0">{label}</h4>{/if}
+  {#if label}<label class="m-0">{label}</label>{/if}
   <input
-    class="form-input p-2 mt-1 block w-full bg-gray-100 border-t-0 border-l-0 border-r-0 border-b-1"
-    type="text"
+    use:typeAction
+    class="form-input {inputClassName} p-2 mt-1 block w-full bg-white border border-gray-300"
     on:keydown={onKeyDown}
     {placeholder}
     bind:value
+    bind:this={ref}
   />
 </label>

src/components/LeftNav/index.svelte

@@ -23,15 +23,6 @@
         /></a
       >
     </div>
-    <li>
-      <a
-        class="block"
-        aria-current={segment === undefined || segment === 'discussion'
-          ? 'page'
-          : undefined}
-        href="."><Forum32 class="carbon-icon" /><span>Discussion</span></a
-      >
-    </li>
     <li>
       <a
         class="block"
@@ -44,13 +35,22 @@
     <li>
       <a
         class="block"
-        aria-current={segment === 'profile' ? 'page' : undefined}
-        href="profile"
-        ><UserAvatar32 class="carbon-icon" />
-        <span>Профиль</span></a
+        aria-current={segment === undefined || segment === 'discussion'
+          ? 'page'
+          : undefined}
+        href="."><Forum32 class="carbon-icon" /><span>Discussion</span></a
       >
     </li>
     <li>
+      <a
+        class="block"
+        aria-current={segment === 'profile' ? 'page' : undefined}
+        href="profile"
+        ><UserAvatar32 class="carbon-icon" />
+        <span>People</span></a
+      >
+    </li>
+    <li class="hidden">
       <a
         class="flex items-center"
         href="https://t.me/classroomio"

src/components/Question/CheckboxQuestion/index.svelte

@@ -65,7 +65,7 @@
   <div class="ml-4">
     {#each options as option}
       <button
-        class="cursor-pointer text-left my-2 border-2 border-gray-300 rounded-md cursor-pointer hover:bg-gray-200 w-full {getValidationClassName(
+        class="cursor-pointer text-left my-2 border-2 border-gray-300 rounded-md hover:bg-gray-200 w-full {getValidationClassName(
           option
         )}"
         type="button"