Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update UI and components #543

Closed
wants to merge 28 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .github/workflows/build-check.yml
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@ on:
type: boolean
workflow_dispatch:

concurrency:
group: ${{ github.ref }}:${{ github.workflow }}
cancel-in-progress: true

jobs:
build_check:
runs-on: ubuntu-latest
Expand Down
Binary file added ssr/public/img/bg.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ssr/public/img/cloud.webp
Binary file not shown.
Binary file added ssr/public/img/parachute.webp
Binary file not shown.
133 changes: 133 additions & 0 deletions ssr/src/component/buttons.rs
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
use leptos::*;

#[component]
pub fn Button(
children: Children,
on_click: impl Fn() + 'static,
#[prop(optional)] classes: String,
#[prop(optional)] alt_style: Signal<bool>,
#[prop(optional)] disabled: Signal<bool>,
) -> impl IntoView {
let on_click = move |_| on_click();
view! {
<button
on:click=on_click
disabled=disabled.get()
class=format!(
"w-full px-5 py-3 rounded-lg flex items-center transition-all justify-center gap-8 font-kumbh font-bold {} {}",
if disabled.get() {
"text-white/50"
} else if alt_style.get() {
"text-[#E2017B]"
} else {
"text-white"
},
classes,
)
style=format!(
"background: linear-gradient(73deg, {} );",
if disabled.get() {
"#DE98BE 0%, #E761A9 33%, #7B5369 100%"
} else if alt_style.get() {
"#FFF 0%, #FFF 1000%"
} else {
"#DA539C 0%, #E2017B 33%, #5F0938 100%"
},
)
>
{children()}
</button>
}
}

#[component]
pub fn LinkButton(
children: Children,
href: String,
#[prop(optional)] classes: String,
#[prop(optional)] alt_style: Signal<bool>,
#[prop(optional)] disabled: Signal<bool>,
) -> impl IntoView {
view! {
<a
href=href
class=format!(
"w-full px-5 py-3 rounded-lg flex items-center transition-all justify-center gap-8 font-kumbh font-bold {} {}",
if disabled.get() {
"text-white/50"
} else if alt_style.get() {
"text-[#E2017B]"
} else {
"text-white"
},
classes,
)
style=format!(
"background: linear-gradient(73deg, {} );",
if disabled.get() {
"#DE98BE 0%, #E761A9 33%, #7B5369 100%"
} else if alt_style.get() {
"#FFF 0%, #FFF 1000%"
} else {
"#DA539C 0%, #E2017B 33%, #5F0938 100%"
},
)
>
{children()}
</a>
}
}

#[component]
pub fn SecondaryLinkButton(
children: Children,
href: String,
#[prop(optional)] classes: String,
#[prop(optional)] alt_style: Signal<bool>,
) -> impl IntoView {
view! {
<a
href=href
class=format!(
"rounded-full border border-white text-sm font-bold font-kumbh px-5 py-2 {} {}",
if alt_style.get() {
"bg-transparent text-white hover:bg-white/10 active:bg-white/5"
} else {
"bg-white text-black"
},
classes,
)
>
{children()}
</a>
}
}

#[component]
pub fn SecondaryButton(
children: Children,
disabled: Signal<bool>,
alt_style: Signal<bool>,
classes: String,
on_click: impl Fn() + 'static,
) -> impl IntoView {
let on_click = move |_| on_click();
view! {
<button
disabled=disabled.get()
on:click=on_click
class=format!(
"rounded-full border border-white text-sm font-bold font-kumbh px-5 py-2 {} {}",
if alt_style.get() {
"bg-transparent text-white hover:bg-white/10 active:bg-white/5"
} else {
"bg-white text-black"
},
classes,
)
>

{children()}
</button>
}
}
46 changes: 46 additions & 0 deletions ssr/src/component/icons/airdrop_icon.rs
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
use leptos::*;

#[component]
pub fn AirdropIcon(
#[prop(optional, default = "w-full h-full".to_string())] classes: String,
) -> impl IntoView {
view! {
<svg
class=format!("{}", classes)
viewBox="0 0 30 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<mask
id="mask0_694_2577"
style="mask-type:alpha"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="30"
height="30"
>
<rect width="30" height="30" fill="currentColor" />
</mask>
<g mask="url(#mask0_694_2577)">
<mask
id="mask1_694_2577"
style="mask-type:alpha"
maskUnits="userSpaceOnUse"
x="4"
y="3"
width="23"
height="24"
>
<rect x="4.375" y="3.75" width="22.5" height="22.5" fill="currentColor" />
</mask>
<g mask="url(#mask1_694_2577)">
<path
d="M9.0859 22.8721C8.77201 23.1863 8.26178 23.1941 7.9652 22.8635C7.23408 22.0486 6.63724 21.1253 6.17468 20.0935C5.59989 18.8112 5.3125 17.43 5.3125 15.9498C5.3125 14.5214 5.58316 13.1791 6.12447 11.9229C6.66579 10.6668 7.40042 9.5741 8.32836 8.64495C9.25631 7.71581 10.3475 6.98015 11.602 6.43798C12.8565 5.89599 14.1969 5.625 15.6231 5.625C17.0495 5.625 18.3902 5.89599 19.6452 6.43798C20.9003 6.97997 21.992 7.71553 22.9203 8.64468C23.8486 9.57383 24.5836 10.6664 25.1253 11.9224C25.6668 13.1784 25.9375 14.5204 25.9375 15.9485C25.9375 17.4281 25.6501 18.8121 25.0753 20.1006C24.6119 21.1394 24.0138 22.0637 23.2808 22.8735C22.9864 23.1988 22.4823 23.1884 22.1736 22.8766C21.8559 22.5557 21.8663 22.039 22.1618 21.6976C22.733 21.0377 23.2046 20.2914 23.5765 19.4587C24.065 18.365 24.3092 17.1943 24.3092 15.9468C24.3092 13.5203 23.4679 11.465 21.7854 9.7809C20.1028 8.09681 18.0493 7.25476 15.625 7.25476C13.2007 7.25476 11.1472 8.09681 9.46464 9.7809C7.78207 11.465 6.94079 13.5203 6.94079 15.9468C6.94079 17.1963 7.18503 18.3643 7.67352 19.4508C8.04358 20.2739 8.51746 21.0139 9.09518 21.6707C9.39975 22.017 9.41184 22.5459 9.0859 22.8721ZM12.1455 19.8098C11.8341 20.1214 11.3268 20.1343 11.0456 19.7952C10.7014 19.3801 10.412 18.9177 10.1776 18.4081C9.82892 17.65 9.65461 16.8296 9.65461 15.9468C9.65461 14.2868 10.2348 12.8759 11.3952 11.7141C12.5557 10.552 13.9648 9.97104 15.6226 9.97104C17.2803 9.97104 18.6903 10.5524 19.8523 11.7152C21.0144 12.8779 21.5954 14.2898 21.5954 15.9509C21.5954 16.8313 21.4211 17.6532 21.0724 18.4165C20.8382 18.9293 20.5493 19.3912 20.2055 19.8022C19.9236 20.1392 19.4181 20.1236 19.1075 19.8128C18.777 19.4819 18.7956 18.9459 19.076 18.5717C19.2686 18.3147 19.4345 18.0373 19.5736 17.7396C19.8359 17.1782 19.9671 16.5806 19.9671 15.9468C19.9671 14.7517 19.5419 13.7285 18.6916 12.8774C17.8413 12.0263 16.8191 11.6008 15.625 11.6008C14.4309 11.6008 13.4087 12.0263 12.5584 12.8774C11.7081 13.7285 11.2829 14.7517 11.2829 15.9468C11.2829 16.5987 11.4141 17.2008 11.6764 17.7532C11.8158 18.0467 11.9821 18.3211 12.1752 18.5762C12.456 18.9473 12.4744 19.4806 12.1455 19.8098ZM15.625 17.5766C15.181 17.5766 14.7986 17.4161 14.4779 17.095C14.1571 16.7739 13.9967 16.3912 13.9967 15.9468C13.9967 15.5025 14.1571 15.1197 14.4779 14.7987C14.7986 14.4776 15.181 14.3171 15.625 14.3171C16.069 14.3171 16.4514 14.4776 16.7721 14.7987C17.0929 15.1197 17.2533 15.5025 17.2533 15.9468C17.2533 16.3912 17.0929 16.7739 16.7721 17.095C16.4514 17.4161 16.069 17.5766 15.625 17.5766Z"
fill="currentColor"
/>
</g>
</g>
</svg>
}
}
32 changes: 32 additions & 0 deletions ssr/src/component/icons/arrow_down_icon.rs
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
use leptos::*;

#[component]
pub fn ArrowDownIcon(
#[prop(optional, default = "w-full h-full".to_string())] classes: String,
) -> impl IntoView {
view! {
<svg
class=format!("{}", classes)
viewBox="0 0 19 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.96481 11.4648L9.49998 19L17.0352 11.4648"
stroke="currentColor"
stroke-width="2"
stroke-miterlimit="10"
stroke-linecap="square"
stroke-linejoin="round"
/>
<path
d="M9.5 0.999962L9.5 18.3793"
stroke="currentColor"
stroke-width="2"
stroke-miterlimit="10"
stroke-linecap="square"
stroke-linejoin="round"
/>
</svg>
}
}
33 changes: 33 additions & 0 deletions ssr/src/component/icons/arrow_left_icon.rs
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
use leptos::*;

#[component]
pub fn ArrowLeftIcon(
#[prop(optional, default = "w-full h-full".to_string())] classes: String,
) -> impl IntoView {
view! {
<svg
class=format!("{}", classes)
viewBox="0 0 31 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<mask
id="mask0_500_15031"
style="mask-type:alpha"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="31"
height="30"
>
<rect x="0.75" width="30" height="30" fill="currentColor" />
</mask>
<g mask="url(#mask0_500_15031)">
<path
d="M10.9024 22.3831C10.6176 22.6398 10.1854 22.6413 9.8988 22.3866L6.27834 19.1684C5.83082 18.7706 5.83082 18.0714 6.27834 17.6736L9.89869 14.4555C10.1853 14.2007 10.6177 14.2023 10.9024 14.4591C11.2354 14.7593 11.2335 15.2824 10.8984 15.5802L8.50245 17.7098H17.8106C18.2034 17.7098 18.5218 18.0282 18.5218 18.421C18.5218 18.8138 18.2034 19.1322 17.8106 19.1322H8.50245L10.8984 21.262C11.2336 21.5599 11.2354 22.0829 10.9024 22.3831ZM21.6013 16.9979C21.3147 17.2527 20.8823 17.2511 20.5975 16.9943C20.2646 16.6941 20.2664 16.1711 20.6015 15.8732L22.9976 13.7434H13.6893C13.2966 13.7434 12.9782 13.425 12.9782 13.0323C12.9782 12.6396 13.2966 12.3212 13.6893 12.3212H22.9976L20.6016 10.1914C20.2664 9.89355 20.2646 9.37054 20.5975 9.07027C20.8823 8.81346 21.3147 8.81192 21.6013 9.06669L25.2217 12.2848C25.6692 12.6826 25.6692 13.3818 25.2217 13.7796L21.6013 16.9979Z"
fill="currentColor"
/>
</g>
</svg>
}
}
33 changes: 33 additions & 0 deletions ssr/src/component/icons/arrow_left_right_icon.rs
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
use leptos::*;

#[component]
pub fn ArrowLeftRightIcon(
#[prop(optional, default = "w-full h-full".to_string())] classes: String,
) -> impl IntoView {
view! {
<svg
class=format!("{}", classes)
viewBox="0 0 31 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<mask
id="mask0_500_15031"
style="mask-type:alpha"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="31"
height="30"
>
<rect x="0.75" width="30" height="30" fill="currentColor" />
</mask>
<g mask="url(#mask0_500_15031)">
<path
d="M10.9024 22.3831C10.6176 22.6398 10.1854 22.6413 9.8988 22.3866L6.27834 19.1684C5.83082 18.7706 5.83082 18.0714 6.27834 17.6736L9.89869 14.4555C10.1853 14.2007 10.6177 14.2023 10.9024 14.4591C11.2354 14.7593 11.2335 15.2824 10.8984 15.5802L8.50245 17.7098H17.8106C18.2034 17.7098 18.5218 18.0282 18.5218 18.421C18.5218 18.8138 18.2034 19.1322 17.8106 19.1322H8.50245L10.8984 21.262C11.2336 21.5599 11.2354 22.0829 10.9024 22.3831ZM21.6013 16.9979C21.3147 17.2527 20.8823 17.2511 20.5975 16.9943C20.2646 16.6941 20.2664 16.1711 20.6015 15.8732L22.9976 13.7434H13.6893C13.2966 13.7434 12.9782 13.425 12.9782 13.0323C12.9782 12.6396 13.2966 12.3212 13.6893 12.3212H22.9976L20.6016 10.1914C20.2664 9.89355 20.2646 9.37054 20.5975 9.07027C20.8823 8.81346 21.3147 8.81192 21.6013 9.06669L25.2217 12.2848C25.6692 12.6826 25.6692 13.3818 25.2217 13.7796L21.6013 16.9979Z"
fill="currentColor"
/>
</g>
</svg>
}
}
32 changes: 32 additions & 0 deletions ssr/src/component/icons/arrow_right_long_icon.rs
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
use leptos::*;

#[component]
pub fn ArrowRightLongIcon(
#[prop(optional, default = "w-full h-full".to_string())] classes: String,
) -> impl IntoView {
view! {
<svg
class=format!("{}", classes)
viewBox="0 0 38 19"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M29.4648 17.0352L37 9.50002L29.4648 1.96484"
stroke="currentColor"
stroke-width="2"
stroke-miterlimit="10"
stroke-linecap="square"
stroke-linejoin="round"
/>
<path
d="M1 9.5L36 9.5"
stroke="currentColor"
stroke-width="2"
stroke-miterlimit="10"
stroke-linecap="square"
stroke-linejoin="round"
/>
</svg>
}
}
22 changes: 22 additions & 0 deletions ssr/src/component/icons/arrow_up_icon.rs
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
use leptos::*;

#[component]
pub fn ArrowUpIcon(
#[prop(optional, default = "w-full h-full".to_string())] classes: String,
) -> impl IntoView {
view! {
<svg
class=format!("{}", classes)
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M11.4697 3.46967C11.7626 3.17678 12.2374 3.17678 12.5303 3.46967L18.5303 9.46967C18.8232 9.76256 18.8232 10.2374 18.5303 10.5303C18.2374 10.8232 17.7626 10.8232 17.4697 10.5303L12.75 5.81066L12.75 20C12.75 20.4142 12.4142 20.75 12 20.75C11.5858 20.75 11.25 20.4142 11.25 20L11.25 5.81066L6.53033 10.5303C6.23744 10.8232 5.76256 10.8232 5.46967 10.5303C5.17678 10.2374 5.17678 9.76256 5.46967 9.46967L11.4697 3.46967Z"
fill="currentColor"
/>
</svg>
}
}
22 changes: 22 additions & 0 deletions ssr/src/component/icons/chevron_left_icon.rs
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
use leptos::*;

#[component]
pub fn ChevronLeftIcon(
#[prop(optional, default = "w-full h-full".to_string())] classes: String,
) -> impl IntoView {
view! {
<svg
class=format!("{}", classes)
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M15.2404 2.03981C15.7611 1.47858 16.6491 1.47858 17.1697 2.03981C17.638 2.54456 17.638 3.32496 17.1697 3.82972L9.58989 12L17.1697 20.1703C17.638 20.675 17.638 21.4554 17.1697 21.9602C16.6491 22.5214 15.7611 22.5214 15.2404 21.9602L7.26194 13.3602C6.55021 12.5931 6.55021 11.4069 7.26194 10.6398L15.2404 2.03981Z"
fill="currentColor"
/>
</svg>
}
}
20 changes: 20 additions & 0 deletions ssr/src/component/icons/chevron_right_icon.rs
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
use leptos::*;

#[component]
pub fn ChevronRightIcon(
#[prop(optional, default = "w-full h-full".to_string())] classes: String,
) -> impl IntoView {
view! {
<svg
class=format!("{}", classes)
viewBox="0 0 30 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.1224 24.0156C11.7522 24.3858 11.1518 24.3858 10.7815 24.0156V24.0156C10.4113 23.6453 10.4113 23.0449 10.7815 22.6746L17.891 15.5652L10.7815 8.45569C10.4113 8.08541 10.4113 7.48507 10.7815 7.11479V7.11479C11.1518 6.74451 11.7522 6.74451 12.1224 7.11479L19.8657 14.8581C20.2562 15.2486 20.2562 15.8818 19.8657 16.2723L12.1224 24.0156Z"
fill="currentColor"
/>
</svg>
}
}
Loading
Loading