feat: responsive

crates/ascend/src/components/outlined_box.rs

@@ -25,6 +25,8 @@ pub fn OutlinedBox(children: Children, color: Gradient, #[prop(optional)] highli
                 Gradient::PinkOrange => "bg-pink-900",
                 Gradient::CyanBlue => "bg-cyan-900",
                 Gradient::TealLime => "bg-teal-900",
+                Gradient::PurplePink => "bg-purple-900",
+                Gradient::PurpleBlue => "bg-purple-900",
             };
 
             c.push(' ');

crates/ascend/src/gradient.rs

@@ -1,9 +1,11 @@
 #[derive(Debug, Copy, Clone, Default)]
 pub enum Gradient {
     #[default]
+    PurpleBlue,
     PinkOrange,
     CyanBlue,
     TealLime,
+    PurplePink,
 }
 impl Gradient {
     pub fn class_from(&self) -> &str {
@@ -11,6 +13,8 @@ impl Gradient {
             Gradient::PinkOrange => "from-pink-500",
             Gradient::CyanBlue => "from-cyan-500",
             Gradient::TealLime => "from-teal-300",
+            Gradient::PurplePink => "from-purple-500",
+            Gradient::PurpleBlue => "from-purple-600",
         }
     }
 
@@ -19,6 +23,8 @@ impl Gradient {
             Gradient::PinkOrange => "to-orange-400",
             Gradient::CyanBlue => "to-blue-500",
             Gradient::TealLime => "to-lime-300",
+            Gradient::PurplePink => "to-pink-500",
+            Gradient::PurpleBlue => "to-blue-500",
         }
     }
 
@@ -27,6 +33,8 @@ impl Gradient {
             Gradient::PinkOrange => "text-pink-500",
             Gradient::CyanBlue => "text-cyan-500",
             Gradient::TealLime => "text-teal-300",
+            Gradient::PurplePink => "text-purple-500",
+            Gradient::PurpleBlue => "text-purple-600",
         }
     }
 }

crates/ascend/src/pages/wall.rs

@@ -33,7 +33,6 @@
 use crate::components::ProblemInfo;
 use crate::components::attempt::Attempt;
 use crate::components::button::Button;
-use crate::components::checkbox::Checkbox;
 use crate::components::header::HeaderItem;
 use crate::components::header::HeaderItems;
 use crate::components::header::StyledHeader;
@@ -162,22 +161,24 @@ pub fn Wall() -> impl IntoView {
                             <div class="inline-grid grid-cols-1 gap-8 md:grid-cols-[auto,1fr]">
                                 <div>{grid}</div>
 
-                                <div>
+                                <div class="flex flex-col">
+                                    <div class="self-center">
+                                        <Button
+                                            icon=Icon::ArrowPath
+                                            text="Next problem"
+                                            onclick=move |_| fn_next_problem(&wall)
+                                        />
+                                    </div>
+
+                                    <Separator />
+
                                     <AttemptRadio
                                         flash=ui_is_flash
                                         send=ui_is_send
                                         attempt=ui_is_attempt
                                     />
 
-                                    <div class="m-4" />
+                                    <Separator />
-
-                                    <Button
-                                        icon=Icon::ArrowPath
-                                        text="Next problem"
-                                        onclick=move |_| fn_next_problem(&wall)
-                                    />
-
-                                    <div class="m-4" />
 
                                     <Transition fallback=|| ()>
                                         {move || Suspend::new(async move {
@@ -190,7 +191,7 @@ pub fn Wall() -> impl IntoView {
                                         })}
                                     </Transition>
 
-                                    <div class="m-4" />
+                                    <Separator />
 
                                     <Suspense fallback=move || {
                                         view! {}
@@ -338,3 +339,8 @@ fn Hold(hold: models::Hold, role: Signal<Result<Option<HoldRole>, ServerFnError>
         Ok::<_, ServerFnError>(view)
     }
 }
+
+#[component]
+fn Separator() -> impl IntoView {
+    view! { <div class="m-2 sm:m-3 md:m-4" /> }
+}