From f241f665260844681bbf6d17331d60b76c27f2b6 Mon Sep 17 00:00:00 2001 From: VictorGinelli Date: Tue, 21 Feb 2023 04:40:45 -0800 Subject: [PATCH] Dama Landing Page Design --- apps/web/app/components/DiscordLoginButton.js | 2 +- .../web/app/components/DiscordLoginButton.res | 3 +- apps/web/app/components/InviteButton.js | 2 +- apps/web/app/components/InviteButton.res | 2 +- apps/web/app/components/Sidebar.js | 11 +- apps/web/app/components/Sidebar.res | 6 +- apps/web/app/components/SidebarToggle.js | 4 +- apps/web/app/components/SidebarToggle.res | 4 +- apps/web/app/res-routes/Root_Index.js | 137 +++++++++---- apps/web/app/res-routes/Root_Index.res | 123 +++++++----- .../app/res-routes/guilds/GuildId_Index.js | 2 +- .../app/res-routes/guilds/GuildId_Index.res | 2 +- apps/web/app/styles/app.css | 181 +++++++++++------- 13 files changed, 305 insertions(+), 174 deletions(-) diff --git a/apps/web/app/components/DiscordLoginButton.js b/apps/web/app/components/DiscordLoginButton.js index c5c7cc5..e437980 100644 --- a/apps/web/app/components/DiscordLoginButton.js +++ b/apps/web/app/components/DiscordLoginButton.js @@ -7,7 +7,7 @@ function DiscordLoginButton(props) { return JsxRuntime.jsx(React.Form, { children: JsxRuntime.jsx("button", { children: props.label, - className: "w-full p-6 bg-discord font-bold rounded-xl text-2xl text-white" + className: "w-full p-6 border-2 border-discord text-discord bg-transparent font-bold rounded-xl text-2xl hover:bg-discord hover:text-white" }), method: "post", action: "/auth/discord" diff --git a/apps/web/app/components/DiscordLoginButton.res b/apps/web/app/components/DiscordLoginButton.res index dc82a59..c4b5d33 100644 --- a/apps/web/app/components/DiscordLoginButton.res +++ b/apps/web/app/components/DiscordLoginButton.res @@ -1,7 +1,8 @@ @react.component let make = (~label) => { - diff --git a/apps/web/app/components/InviteButton.js b/apps/web/app/components/InviteButton.js index 2974005..7d55c59 100644 --- a/apps/web/app/components/InviteButton.js +++ b/apps/web/app/components/InviteButton.js @@ -7,7 +7,7 @@ function InviteButton(props) { return JsxRuntime.jsx("a", { children: JsxRuntime.jsx("button", { children: "Add to Discord", - className: "py-1 px-1 bg-transparent border border-brightOrange font-semibold rounded-xl text-lg text-brightOrange" + className: "py-1 px-2 bg-transparent border border-brightOrange font-semibold rounded-xl text-lg text-brightOrange hover:text-white hover:bg-brightOrange" }), className: Core__Option.getWithDefault(props.className, ""), href: "https://discord.com/oauth2/authorize?client_id=759128312030691328&permissions=2416045120&scope=applications.commands%20bot", diff --git a/apps/web/app/components/InviteButton.res b/apps/web/app/components/InviteButton.res index ee759cf..ac7075e 100644 --- a/apps/web/app/components/InviteButton.res +++ b/apps/web/app/components/InviteButton.res @@ -5,7 +5,7 @@ let make = (~className: option=?) => { target="_blank" className={className->Option.getWithDefault("")}> diff --git a/apps/web/app/components/Sidebar.js b/apps/web/app/components/Sidebar.js index b73559f..f88d675 100644 --- a/apps/web/app/components/Sidebar.js +++ b/apps/web/app/components/Sidebar.js @@ -90,9 +90,12 @@ function Sidebar(props) { return JsxRuntime.jsxs(ReactProSidebar.ProSidebar, { children: [ JsxRuntime.jsx(ReactProSidebar.SidebarHeader, { - children: Caml_option.some(JsxRuntime.jsx("img", { - className: "w-40", - src: "/assets/brightid_reversed.svg" + children: Caml_option.some(JsxRuntime.jsx(React.Link, { + to: "", + children: JsxRuntime.jsx("img", { + className: "w-40", + src: "/assets/brightid_reversed.svg" + }) })), className: "flex top-0 sticky bg-inherit z-10 justify-center items-center border-b border-b-black backdrop-blur-3xl " }), @@ -114,7 +117,7 @@ function Sidebar(props) { }), JsxRuntime.jsx(InviteButton.make, {}) ], - className: "flex flex-col justify-around items-center py-8" + className: " flex flex-col justify-around items-center py-8 gap-3" })), className: "bg-dark bottom-0 sticky list-none" }) diff --git a/apps/web/app/components/Sidebar.res b/apps/web/app/components/Sidebar.res index b4ccabc..1e29e5d 100644 --- a/apps/web/app/components/Sidebar.res +++ b/apps/web/app/components/Sidebar.res @@ -81,14 +81,16 @@ let make = (~isSidebarVisible, ~handleIsSidebarVisible, ~guilds, ~loadingGuilds) toggled={isSidebarVisible}> - + + + Belt.Int.toString} /> {sidebarElements} -
+

{"Your server is not on the list?"->React.string}

diff --git a/apps/web/app/components/SidebarToggle.js b/apps/web/app/components/SidebarToggle.js index d7f7254..c2e5005 100644 --- a/apps/web/app/components/SidebarToggle.js +++ b/apps/web/app/components/SidebarToggle.js @@ -6,7 +6,7 @@ import * as Fa from "react-icons/fa"; import * as JsxRuntime from "react/jsx-runtime"; function SidebarToggle(props) { - var handleToggleSidebar = props.handleToggleSidebar; + var handleIsSidebarVisible = props.handleIsSidebarVisible; var visibility = Core__Option.isSome(props.maybeUser) ? "visible" : "invisible"; return JsxRuntime.jsx("div", { children: JsxRuntime.jsx(Fa.FaBars, { @@ -14,7 +14,7 @@ function SidebarToggle(props) { }), className: "" + visibility + " md:hidden cursor-pointer w-12 h-12 bg-dark text-center text-white rounded-full flex justify-center items-center font-xl", onClick: (function (param) { - Curry._1(handleToggleSidebar, true); + Curry._1(handleIsSidebarVisible, true); }) }); } diff --git a/apps/web/app/components/SidebarToggle.res b/apps/web/app/components/SidebarToggle.res index 1767c63..5513df3 100644 --- a/apps/web/app/components/SidebarToggle.res +++ b/apps/web/app/components/SidebarToggle.res @@ -1,9 +1,9 @@ @react.component -let make = (~handleToggleSidebar, ~maybeUser) => { +let make = (~handleIsSidebarVisible, ~maybeUser) => { let visibility = maybeUser->Option.isSome ? "visible" : "invisible"
handleToggleSidebar(true)}> + onClick={_ => handleIsSidebarVisible(true)}>
} diff --git a/apps/web/app/res-routes/Root_Index.js b/apps/web/app/res-routes/Root_Index.js index 462e333..2624ac6 100644 --- a/apps/web/app/res-routes/Root_Index.js +++ b/apps/web/app/res-routes/Root_Index.js @@ -1,10 +1,11 @@ // Generated by ReScript, PLEASE EDIT WITH CARE import * as Uuid from "uuid"; +import * as Curry from "../../../../node_modules/rescript/lib/es6/curry.js"; import * as React from "react"; import * as AuthServer from "../AuthServer.js"; -import * as Belt_Option from "../../../../node_modules/rescript/lib/es6/belt_Option.js"; import * as Caml_option from "../../../../node_modules/rescript/lib/es6/caml_option.js"; +import * as Core__Option from "../../../../node_modules/@rescript/core/src/Core__Option.js"; import * as InviteButton from "../components/InviteButton.js"; import * as Brightid_sdk from "brightid_sdk"; import * as QrcodeReact from "qrcode.react"; @@ -23,9 +24,9 @@ function Root_Index$StatusToolTip(props) { return JsxRuntime.jsx("div", { children: JsxRuntime.jsx("p", { children: props.statusMessage, - className: "text-xl font-semibold text-white" + className: "text-xl font-semibold " }), - className: "" + props.color + " w-full text-center py-1" + className: Core__Option.getWithDefault(props.className, "") }); } @@ -33,6 +34,40 @@ var StatusToolTip = { make: Root_Index$StatusToolTip }; +function getWindowDimensions(param) { + var innerWidth = window.innerWidth; + var innerHeight = window.innerHeight; + return { + width: innerWidth, + height: innerHeight + }; +} + +function useWindowDimensions(param) { + var match = React.useState(function () { + return { + width: 0, + height: 0 + }; + }); + var setWindowDimensions = match[1]; + React.useEffect((function () { + Curry._1(setWindowDimensions, (function (param) { + return getWindowDimensions(undefined); + })); + var handleResize = function (param) { + Curry._1(setWindowDimensions, (function (param) { + return getWindowDimensions(undefined); + })); + }; + window.addEventListener("resize", handleResize); + return (function (param) { + window.removeEventListener("resize", handleResize); + }); + }), []); + return match[0]; +} + function Root_Index$BrightIdToolTip(props) { var fetcher = props.fetcher; var match = fetcher.type; @@ -50,33 +85,40 @@ function Root_Index$BrightIdToolTip(props) { switch (match$2) { case /* Unknown */0 : return JsxRuntime.jsx(Root_Index$StatusToolTip, { - statusMessage: "Something went wrong when checking your BrightId status", - color: "bg-red-600" + className: "w-full text-center py-1 bg-red-600 text-white", + statusMessage: "Something went wrong when checking your BrightId status" }); case /* NotLinked */1 : return JsxRuntime.jsx(Root_Index$StatusToolTip, { - statusMessage: "You have not linked BrightId to Discord", - color: "bg-red-600" + className: "w-full text-center py-1 bg-red-600 text-white", + statusMessage: "You have not linked BrightId to Discord" }); case /* NotVerified */2 : return JsxRuntime.jsx(Root_Index$StatusToolTip, { - statusMessage: "You are not Verified", - color: "bg-red-600" + className: "w-full text-center py-1 bg-red-600 text-white", + statusMessage: "You are not Verified" }); case /* NotSponsored */3 : return JsxRuntime.jsx(Root_Index$StatusToolTip, { - statusMessage: "You are not Sponsored", - color: "bg-red-600" + className: "w-full text-center py-1 bg-red-600 text-white", + statusMessage: "You are not Sponsored" }); case /* Unique */4 : return JsxRuntime.jsx(Root_Index$StatusToolTip, { - statusMessage: "Verified with BrightID", - color: "bg-green-600" + className: "w-full text-center py-1 bg-green-600 text-white", + statusMessage: "Verified with BrightID" }); } case "normalLoad" : - return JsxRuntime.jsx(JsxRuntime.Fragment, {}); + if (Core__Option.isSome(props.maybeUser)) { + return JsxRuntime.jsx(Root_Index$StatusToolTip, { + className: "w-full text-center py-1 bg-gray-400 animate-pulse text-black", + statusMessage: "Loading BrightID Status..." + }); + } else { + return JsxRuntime.jsx(JsxRuntime.Fragment, {}); + } default: return JsxRuntime.jsx(JsxRuntime.Fragment, {}); } @@ -208,6 +250,8 @@ function Root_Index$default(props) { var fetcher = React$1.useFetcher(); var match = React$1.useLoaderData(); var maybeUser = match.maybeUser; + var match$1 = useWindowDimensions(undefined); + var width = match$1.width; React.useEffect((function () { if (fetcher.type === "init") { fetcher.load("/Root_FetchBrightIDDiscord"); @@ -217,9 +261,9 @@ function Root_Index$default(props) { var discordLogoutButton = maybeUser !== undefined ? JsxRuntime.jsx(DiscordLogoutButton.make, { label: "Log out of Discord" }) : JsxRuntime.jsx(JsxRuntime.Fragment, {}); - var match$1 = fetcher.type; + var match$2 = fetcher.type; var unusedSponsorships; - switch (match$1) { + switch (match$2) { case "done" : var data = fetcher.data; unusedSponsorships = (data == null) ? JsxRuntime.jsx("p", { @@ -227,7 +271,7 @@ function Root_Index$default(props) { className: "text-white" }) : JsxRuntime.jsx("p", { children: String(data.unusedSponsorships), - className: "text-3xl md:text-6xl font-semibold text-brightBlue" + className: "text-3xl lg:text-5xl font-semibold text-brightBlue" }); break; case "normalLoad" : @@ -246,9 +290,9 @@ function Root_Index$default(props) { className: " animate-pulse py-2" }); } - var match$2 = fetcher.type; + var match$3 = fetcher.type; var verificationCount; - switch (match$2) { + switch (match$3) { case "done" : var data$1 = fetcher.data; verificationCount = (data$1 == null) ? JsxRuntime.jsx("p", { @@ -256,7 +300,7 @@ function Root_Index$default(props) { className: "text-white" }) : JsxRuntime.jsx("p", { children: String(data$1.verificationCount), - className: "text-3xl md:text-6xl font-semibold text-brightOrange" + className: "text-3xl lg:text-5xl font-semibold text-brightOrange" }); break; case "normalLoad" : @@ -275,9 +319,9 @@ function Root_Index$default(props) { className: " animate-pulse py-2 " }); } - var match$3 = fetcher.type; + var match$4 = fetcher.type; var usedSponsorships; - switch (match$3) { + switch (match$4) { case "done" : var data$2 = fetcher.data; usedSponsorships = (data$2 == null) ? JsxRuntime.jsx("p", { @@ -285,7 +329,7 @@ function Root_Index$default(props) { className: "text-white" }) : JsxRuntime.jsx("p", { children: String(data$2.assignedSponsorships - data$2.unusedSponsorships | 0), - className: "text-3xl md:text-6xl font-semibold text-brightGreen" + className: "text-3xl lg:text-5xl font-semibold text-brightGreen" }); break; case "normalLoad" : @@ -306,10 +350,17 @@ function Root_Index$default(props) { } return JsxRuntime.jsxs("div", { children: [ + width < 768 ? JsxRuntime.jsx("section", { + children: JsxRuntime.jsx(Root_Index$BrightIdToolTip, { + fetcher: fetcher, + maybeUser: maybeUser + }), + className: "flex justify-center items-center flex-col w-full gap-4 relative" + }) : JsxRuntime.jsx(JsxRuntime.Fragment, {}), JsxRuntime.jsxs("header", { children: [ JsxRuntime.jsx(SidebarToggle.make, { - handleToggleSidebar: context.handleToggleSidebar, + handleIsSidebarVisible: context.handleIsSidebarVisible, maybeUser: maybeUser }), JsxRuntime.jsxs("div", { @@ -317,21 +368,22 @@ function Root_Index$default(props) { JsxRuntime.jsx("div", { children: discordLogoutButton }), - JsxRuntime.jsx(Rainbowkit.ConnectButton, { - className: "h-full" - }) + Core__Option.isSome(maybeUser) ? JsxRuntime.jsx(Rainbowkit.ConnectButton, { + className: "h-full" + }) : JsxRuntime.jsx(InviteButton.make, {}) ], className: "flex flex-col-reverse md:flex-row items-center justify-center gap-4 " }) ], className: "flex flex-row justify-between md:justify-end m-5" }), - JsxRuntime.jsx("section", { - children: JsxRuntime.jsx(Root_Index$BrightIdToolTip, { - fetcher: fetcher - }), - className: "flex justify-center items-center flex-col w-full gap-4 relative" - }), + width > 768 ? JsxRuntime.jsx("section", { + children: JsxRuntime.jsx(Root_Index$BrightIdToolTip, { + fetcher: fetcher, + maybeUser: maybeUser + }), + className: "flex justify-center items-center flex-col w-full gap-4 relative" + }) : JsxRuntime.jsx(JsxRuntime.Fragment, {}), JsxRuntime.jsx("div", { children: JsxRuntime.jsxs("div", { children: [ @@ -341,7 +393,7 @@ function Root_Index$default(props) { children: [ JsxRuntime.jsx("p", { children: "BrightID ", - className: "relative pr-2 text-xl md:text-3xl text-white font-poppins font-bold" + className: "relative pr-2 text-xl md:text-2xl lg:text-3xl text-white font-poppins font-bold" }), JsxRuntime.jsx("div", { className: "h-0 border border-[#FFFFFF] bg-white flex-1" @@ -351,7 +403,7 @@ function Root_Index$default(props) { }), JsxRuntime.jsx("p", { children: "DISCORD BOT ", - className: "relative py-3 text-3xl md:text-7xl font-pressStart font-extrabold text-white tracking-tight" + className: "relative py-3 text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-pressStart font-extrabold text-white tracking-tight" }), JsxRuntime.jsxs("div", { children: [ @@ -360,15 +412,14 @@ function Root_Index$default(props) { }), JsxRuntime.jsx("p", { children: "Command Center", - className: "relative text-white text-xl md:text-3xl font-poppins font-bold pl-2" + className: "relative text-white text-xl md:text-2xl lg:text-3xl font-poppins font-bold pl-2" }) ], className: "flex items-center" }) ], - className: "" + className: "py-2" }), - Belt_Option.isSome(maybeUser) ? JsxRuntime.jsx(JsxRuntime.Fragment, {}) : JsxRuntime.jsx(InviteButton.make, {}), JsxRuntime.jsxs("section", { children: [ JsxRuntime.jsxs("div", { @@ -383,7 +434,7 @@ function Root_Index$default(props) { className: "text-white font-poppins text-xs font-semibold" }) ], - className: "w-full flex-1 relative flex flex-col border border-brightBlue rounded-xl justify-center items-start bg-extraDark p-6 md:p-12" + className: "lg:min-w-[237px] relative flex flex-col border border-brightBlue rounded-xl justify-center items-start bg-extraDark p-6 lg:p-12 self-stretch" }), JsxRuntime.jsxs("div", { children: [ @@ -397,7 +448,7 @@ function Root_Index$default(props) { className: " text-white font-poppins text-xs font-semibold" }) ], - className: "w-full my-6 md:mx-10 md:my-0 flex-1 relative flex flex-col border border-brightOrange rounded-xl justify-center items-start bg-extraDark p-6 md:p-12" + className: "lg:min-w-[237px] relative flex flex-col border border-brightOrange rounded-xl justify-center items-start bg-extraDark p-6 lg:p-12 self-stretch" }), JsxRuntime.jsxs("div", { children: [ @@ -414,10 +465,10 @@ function Root_Index$default(props) { className: "text-2xl font-semibold text-transparent bg-clip-text bg-gradient-to-l from-brightid to-white" }) ], - className: "w-full flex-1 relative flex flex-col border border-brightGreen rounded-xl justify-center items-start bg-extraDark p-6 md:p-12" + className: "lg:min-w-[237px] relative flex flex-col border border-brightGreen rounded-xl justify-center items-start bg-extraDark p-6 lg:p-12 self-stretch" }) ], - className: " flex flex-col md:flex-row justify-around items-center w-full px-10 " + className: "lg:w-full max-w-5xl flex flex-col lg:flex-row justify-center lg:justify-around items-center" }), JsxRuntime.jsx("section", { children: JsxRuntime.jsx(Root_Index$BrightIdVerificationActions, { @@ -442,6 +493,8 @@ var $$default = Root_Index$default; export { QRCodeSvg , StatusToolTip , + getWindowDimensions , + useWindowDimensions , BrightIdToolTip , BrightIdVerificationActions , loader , diff --git a/apps/web/app/res-routes/Root_Index.res b/apps/web/app/res-routes/Root_Index.res index 84ef24b..510c210 100644 --- a/apps/web/app/res-routes/Root_Index.res +++ b/apps/web/app/res-routes/Root_Index.res @@ -4,39 +4,48 @@ module QRCodeSvg = { } module StatusToolTip = { @react.component - let make = (~statusMessage, ~color) => { -
-

{statusMessage->React.string}

+ let make = (~className: option=?, ~statusMessage) => { +
Option.getWithDefault("")}> +

{statusMessage->React.string}

} } @get external innerWidth: Dom.window => int = "innerWidth" -// let getWindowDimensions = () => { -// let innerWidth = window()->innerWidth -// let innerHeight = window->React.Dom.innerHeight +@get external innerHeight: Dom.window => int = "innerHeight" +@send +external addEventListener: (Dom.window, string, Dom.event => unit) => unit = "addEventListener" +@send +external removeEventListener: (Dom.window, string, Dom.event => unit) => unit = + "removeEventListener" -// {innerWidth, innerHeight} -// } +type windowDimensions = {width: int, height: int} +let getWindowDimensions = () => { + let innerWidth = window->innerWidth + let innerHeight = window->innerHeight -// let useWindowDimensions = () => { -// let (windowDimensions, setWindowDimensions) = React.useState(_ => getWindowDimensions()) + {width: innerWidth, height: innerHeight} +} + +let useWindowDimensions = () => { + let (windowDimensions, setWindowDimensions) = React.useState(_ => {width: 0, height: 0}) -// React.useEffect0(() => { -// let handleResize = () => { -// setWindowDimensions(getWindowDimensions()) -// } + React.useEffect0(() => { + setWindowDimensions(_ => getWindowDimensions()) + let handleResize = _ => { + setWindowDimensions(_ => getWindowDimensions()) + } -// window.addEventListener("resize", handleResize) -// Some(() => window.removeEventListener("resize", handleResize)) -// }, []) + window->addEventListener("resize", handleResize) + Some(() => window->removeEventListener("resize", handleResize)) + }) -// windowDimensions -// } + windowDimensions +} module BrightIdToolTip = { @react.component - let make = (~fetcher) => { + let make = (~fetcher, ~maybeUser) => { switch fetcher->Remix.Fetcher._type { | "done" => switch fetcher->Remix.Fetcher.data->Nullable.toOption { @@ -47,24 +56,40 @@ module BrightIdToolTip = { | Some(_) => switch data["verifyStatus"] { | Types.Unique => - + | Types.NotVerified => - + | Types.NotSponsored => - + | Types.NotLinked => | Types.Unknown => } } } - | "normalLoad" => <> + | "normalLoad" => + Option.isSome(maybeUser) + ? + : <> | _ => <> } } @@ -155,6 +180,7 @@ let default = () => { let context = Remix.useOutletContext() let fetcher = Remix.useFetcher() let {maybeUser, maybeDeeplink} = Remix.useLoaderData() + let {width} = useWindowDimensions() React.useEffect1(() => { open Remix @@ -174,7 +200,7 @@ let default = () => { switch fetcher->Remix.Fetcher.data->Nullable.toOption { | None =>

{"N/A"->React.string}

| Some(data) => -

+

{data["unusedSponsorships"]->Belt.Int.toString->React.string}

} @@ -193,7 +219,7 @@ let default = () => { switch fetcher->Remix.Fetcher.data->Nullable.toOption { | None =>

{"N/A"->React.string}

| Some(data) => -

+

{data["verificationCount"]->Belt.Int.toString->React.string}

} @@ -212,7 +238,7 @@ let default = () => { switch fetcher->Remix.Fetcher.data->Nullable.toOption { | None =>

{"N/A"->React.string}

| Some(data) => -

+

{(data["assignedSponsorships"] - data["unusedSponsorships"]) ->Belt.Int.toString ->React.string} @@ -229,40 +255,51 @@ let default = () => { }

+ {width < 768 + ?
+ +
+ : <> }
- +
{discordLogoutButton}
- + {Option.isSome(maybeUser) + ? + : }
-
- -
+ {width > 768 + ?
+ +
+ : <> }
-
+
-

+

{"BrightID "->React.string}

+ className="relative py-3 text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-pressStart font-extrabold text-white tracking-tight"> {"DISCORD BOT "->React.string}

-

+

{"Command Center"->React.string}

- {maybeUser->Belt.Option.isSome ? <> : } -
+
+ className="lg:min-w-[237px] relative flex flex-col border border-brightBlue rounded-xl justify-center items-start bg-extraDark p-6 lg:p-12 self-stretch"> {unusedSponsorships}

@@ -270,7 +307,7 @@ let default = () => {

+ className="lg:min-w-[237px] relative flex flex-col border border-brightOrange rounded-xl justify-center items-start bg-extraDark p-6 lg:p-12 self-stretch"> {verificationCount}

@@ -278,7 +315,7 @@ let default = () => {

+ className="lg:min-w-[237px] relative flex flex-col border border-brightGreen rounded-xl justify-center items-start bg-extraDark p-6 lg:p-12 self-stretch"> {usedSponsorships}

diff --git a/apps/web/app/res-routes/guilds/GuildId_Index.js b/apps/web/app/res-routes/guilds/GuildId_Index.js index 790d9f4..036f5c4 100644 --- a/apps/web/app/res-routes/guilds/GuildId_Index.js +++ b/apps/web/app/res-routes/guilds/GuildId_Index.js @@ -221,7 +221,7 @@ function $$default(param) { JsxRuntime.jsxs("header", { children: [ JsxRuntime.jsx(SidebarToggle.make, { - handleToggleSidebar: context.handleToggleSidebar, + handleIsSidebarVisible: context.handleIsSidebarVisible, maybeUser: maybeUser }), JsxRuntime.jsx("div", { diff --git a/apps/web/app/res-routes/guilds/GuildId_Index.res b/apps/web/app/res-routes/guilds/GuildId_Index.res index ab2b0bf..2f181d5 100644 --- a/apps/web/app/res-routes/guilds/GuildId_Index.res +++ b/apps/web/app/res-routes/guilds/GuildId_Index.res @@ -178,7 +178,7 @@ let default = () => {

- +
diff --git a/apps/web/app/styles/app.css b/apps/web/app/styles/app.css index 018cec1..e27c0e0 100644 --- a/apps/web/app/styles/app.css +++ b/apps/web/app/styles/app.css @@ -594,10 +594,6 @@ video { margin: 1rem; } -.m-2{ - margin: 0.5rem; -} - .my-6{ margin-top: 1.5rem; margin-bottom: 1.5rem; @@ -643,10 +639,6 @@ video { height: 6rem; } -.h-32 { - height: 8rem; -} - .w-72{ width: 18rem; } @@ -679,10 +671,6 @@ video { width: 1rem; } -.w-60 { - width: 15rem; -} - .w-auto{ width: auto; } @@ -691,6 +679,14 @@ video { max-width: 48rem; } +.max-w-4xl{ + max-width: 56rem; +} + +.max-w-5xl{ + max-width: 64rem; +} + .flex-1{ flex: 1 1 0%; } @@ -763,6 +759,10 @@ video { justify-content: space-around; } +.gap-3{ + gap: 0.75rem; +} + .gap-4{ gap: 1rem; } @@ -771,10 +771,6 @@ video { gap: 0.5rem; } -.gap-3{ - gap: 0.75rem; -} - .gap-8{ gap: 2rem; } @@ -789,6 +785,10 @@ video { margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); } +.self-stretch{ + align-self: stretch; +} + .overflow-hidden{ overflow: hidden; } @@ -829,8 +829,12 @@ video { border-width: 2px; } -.border-solid { - border-style: solid; +.border{ + border-width: 1px; +} + +.border-b{ + border-bottom-width: 1px; } .border-brightid{ @@ -838,6 +842,16 @@ video { border-color: rgb(237 122 92 / var(--tw-border-opacity)); } +.border-discord{ + --tw-border-opacity: 1; + border-color: rgb(88 101 242 / var(--tw-border-opacity)); +} + +.border-brightOrange{ + --tw-border-opacity: 1; + border-color: rgb(236 96 65 / var(--tw-border-opacity)); +} + .border-white{ --tw-border-opacity: 1; border-color: rgb(255 255 255 / var(--tw-border-opacity)); @@ -853,11 +867,6 @@ video { border-color: rgb(47 105 254 / var(--tw-border-opacity)); } -.border-brightOrange{ - --tw-border-opacity: 1; - border-color: rgb(236 96 65 / var(--tw-border-opacity)); -} - .border-brightGreen{ --tw-border-opacity: 1; border-color: rgb(68 236 65 / var(--tw-border-opacity)); @@ -877,11 +886,6 @@ video { background-color: transparent; } -.bg-discord{ - --tw-bg-opacity: 1; - background-color: rgb(88 101 242 / var(--tw-bg-opacity)); -} - .bg-red-600{ --tw-bg-opacity: 1; background-color: rgb(220 38 38 / var(--tw-bg-opacity)); @@ -911,6 +915,11 @@ video { background-color: rgb(22 163 74 / var(--tw-bg-opacity)); } +.bg-gray-400{ + --tw-bg-opacity: 1; + background-color: rgb(156 163 175 / var(--tw-bg-opacity)); +} + .bg-white{ --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); @@ -987,9 +996,9 @@ video { padding-bottom: 0.25rem; } -.px-1{ - padding-left: 0.25rem; - padding-right: 0.25rem; +.px-2{ + padding-left: 0.5rem; + padding-right: 0.5rem; } .py-8{ @@ -1007,16 +1016,6 @@ video { padding-bottom: 0.75rem; } -.px-6{ - padding-left: 1.5rem; - padding-right: 1.5rem; -} - -.px-10{ - padding-left: 2.5rem; - padding-right: 2.5rem; -} - .pr-2{ padding-right: 0.5rem; } @@ -1101,9 +1100,9 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.text-brightBlue{ +.text-discord{ --tw-text-opacity: 1; - color: rgb(47 105 254 / var(--tw-text-opacity)); + color: rgb(88 101 242 / var(--tw-text-opacity)); } .text-brightOrange{ @@ -1111,6 +1110,16 @@ video { color: rgb(236 96 65 / var(--tw-text-opacity)); } +.text-black{ + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); +} + +.text-brightBlue{ + --tw-text-opacity: 1; + color: rgb(47 105 254 / var(--tw-text-opacity)); +} + .text-brightGreen{ --tw-text-opacity: 1; color: rgb(68 236 65 / var(--tw-text-opacity)); @@ -1182,11 +1191,26 @@ video { background: transparent !important; } +.hover\:bg-discord:hover{ + --tw-bg-opacity: 1; + background-color: rgb(88 101 242 / var(--tw-bg-opacity)); +} + +.hover\:bg-brightOrange:hover{ + --tw-bg-opacity: 1; + background-color: rgb(236 96 65 / var(--tw-bg-opacity)); +} + .hover\:bg-dark:hover{ --tw-bg-opacity: 1; background-color: rgb(30 30 30 / var(--tw-bg-opacity)); } +.hover\:text-white:hover{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + .focus\:outline-none:focus{ outline: 2px solid transparent; outline-offset: 2px; @@ -1205,29 +1229,10 @@ video { margin: 1rem; } - .md\:mx-6{ - margin-left: 1.5rem; - margin-right: 1.5rem; - } - - .md\:my-0{ - margin-top: 0px; - margin-bottom: 0px; - } - - .md\:mx-10{ - margin-left: 2.5rem; - margin-right: 2.5rem; - } - .md\:hidden{ display: none; } - .md\:h-48 { - height: 12rem; - } - .md\:flex-row{ flex-direction: row; } @@ -1240,28 +1245,58 @@ video { border-radius: 0.75rem; } - .md\:p-12{ + .md\:text-2xl{ + font-size: 1.5rem; + line-height: 2rem; + } + + .md\:text-4xl{ + font-size: 2.25rem; + line-height: 2.5rem; + } + + .md\:blur-\[150px\]{ + --tw-blur: blur(150px); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + } +} + +@media (min-width: 1024px){ + .lg\:w-full{ + width: 100%; + } + + .lg\:min-w-\[237px\]{ + min-width: 237px; + } + + .lg\:flex-row{ + flex-direction: row; + } + + .lg\:justify-around{ + justify-content: space-around; + } + + .lg\:p-12{ padding: 3rem; } - .md\:text-6xl{ - font-size: 3.75rem; + .lg\:text-5xl{ + font-size: 3rem; line-height: 1; } - .md\:text-3xl{ + .lg\:text-3xl{ font-size: 1.875rem; line-height: 2.25rem; } +} - .md\:text-7xl{ - font-size: 4.5rem; +@media (min-width: 1280px){ + .xl\:text-6xl{ + font-size: 3.75rem; line-height: 1; } - - .md\:blur-\[150px\]{ - --tw-blur: blur(150px); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); - } }