Fix autocomplete

aep-schedule-website/src/frontend/components/common/autocomplete.rs

@@ -16,7 +16,7 @@ impl AutoCompleteOption {
 
 fn get_suggestions(
     sorted_possibilities: Vec<AutoCompleteOption>,
-    is_ok: RwSignal<String>,
+    is_hidden: RwSignal<bool>,
     input_value: String,
     suggestion_range: WriteSignal<Range<usize>>,
 ) {
@@ -28,11 +28,11 @@ fn get_suggestions(
     let top = sorted_possibilities
         .partition_point(|c| c.value[0..cmp::min(i, c.value.len())] <= input_value[0..i]);
     if bottom < sorted_possibilities.len() && sorted_possibilities[bottom].value == input_value {
-        is_ok.set(String::from("add-button"));
+        is_hidden.set(false);
         return;
     }
 
-    is_ok.set(String::from("hidden add-button"));
+    is_hidden.set(true);
 
     suggestion_range.set(bottom..top);
 }
@@ -48,25 +48,33 @@ pub fn AutoComplete<F: FnMut(String) + Copy + Clone + 'static>(
     let input = create_rw_signal(String::new());
     let (suggestion_range, set_suggestion_range) = create_signal(0..0);
     let suggestions = suggestion_list.clone();
-    let is_ok = create_rw_signal(String::from("hidden add-button"));
+    let is_hidden = create_rw_signal(true);
 
     let on_input = move |ev| {
         let value = event_target_value(&ev);
         input.set(value.clone());
         let suggestion_list = suggestion_list.clone();
-        get_suggestions(suggestion_list, is_ok, value, set_suggestion_range);
+        get_suggestions(suggestion_list, is_hidden, value, set_suggestion_range);
+    };
+
+    let button_theme = move || {
+        let is_hidden = is_hidden.get();
+        match is_hidden {
+            true => "absolute text-black top-0.5 right-0.5 hidden",
+            false => "absolute text-black top-0.5 right-0.5",
+        }
     };
 
     view! {
-        <div class="search-container ".to_owned() + &class>
-            <input type="text" class="py-2 px-3 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none" on:input=on_input placeholder=placeholder prop:value=input id=id on:keyup=move |ev| {
-                if ev.key() == "Enter" && is_ok.get() == "add-button" {
+        <div class="relative search-container ".to_owned() + &class>
+            <input type="text" class="py-2 px-3 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none text-black" on:input=on_input placeholder=placeholder prop:value=input id=id on:keyup=move |ev| {
+                if ev.key() == "Enter" && !is_hidden.get() {
                     let input = input.get().trim().to_uppercase();
                     submit(input);
                 }
             }
             />
-            <button class=is_ok on:click=move |_| {
+            <button class=button_theme on:click=move |_| {
                 let input = input.get().trim().to_uppercase();
                 submit(input);
             }>

aep-schedule-website/src/frontend/pages/classroom.rs

@@ -51,7 +51,7 @@ pub fn ClassRoomComponent() -> impl IntoView {
 
     let on_submit = move |sigle: String| change_classroom.dispatch((sigle, set_periods));
     view! {
-        <div class="col-container classroom-page">
+        <section class="flex flex-col w-full justify-between items-center p-4">
             <div class="warning-box">
                 <WarningCircle size="5em"/>
                 <span>
@@ -73,6 +73,6 @@ pub fn ClassRoomComponent() -> impl IntoView {
             <Schedule last_day=5 col_height="0.6em">
                 {move || periods.get().iter().enumerate().map(|(i, p)| view!{<PeriodEvent i period_course=p/>}).collect_view()}
             </Schedule>
-        </div>
+        </section>
     }
 }

aep-schedule-website/style/options.scss

@@ -186,18 +186,6 @@
   pointer-events: none;
 }
 
-.add-button {
-  position: absolute;
-  right: 0;
-  height: 3em;
-  width: 3em;
-  background: transparent;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none !important;
-}
-
 .notif-modal {
   position: absolute;
   left: 0;