diff --git a/src/App.test.tsx b/src/App.test.tsx index abaf4d3..ac0f907 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -21,7 +21,9 @@ describe("App", () => { render(comp); expect(screen.getAllByText("guitos")[0]).toBeInTheDocument(); expect( - screen.getByRole("link", { name: /open guitos changelog/i }), + screen.getByText( + "Figure out where your money went, plan ahead of time and analyze past expenditures.", + ), ).toBeInTheDocument(); expect(budgetsDB.config("name")).toBe("guitos"); expect(budgetsDB.config("storeName")).toBe("budgets"); diff --git a/src/components/LandingPage/LandingPage.css b/src/components/LandingPage/LandingPage.css index 6ab1b9a..30c8b01 100644 --- a/src/components/LandingPage/LandingPage.css +++ b/src/components/LandingPage/LandingPage.css @@ -1,3 +1,7 @@ .version { color: var(--comment); } + +.balanced { + text-wrap: pretty; +} diff --git a/src/components/LandingPage/LandingPage.tsx b/src/components/LandingPage/LandingPage.tsx index 5133387..1cb8cb7 100644 --- a/src/components/LandingPage/LandingPage.tsx +++ b/src/components/LandingPage/LandingPage.tsx @@ -1,16 +1,9 @@ import { useRef } from "react"; -import { - Button, - Container, - Form, - OverlayTrigger, - Row, - Stack, - Tooltip, -} from "react-bootstrap"; +import { Button, Container, Form, Row, Stack } from "react-bootstrap"; import { useBudget } from "../../context/BudgetContext"; import { useGeneralContext } from "../../context/GeneralContext"; import { useDB } from "../../hooks/useDB"; +import { useWindowSize } from "../../hooks/useWindowSize"; import { Loading } from "../Loading/Loading"; import "./LandingPage.css"; @@ -19,7 +12,10 @@ export function LandingPage() { const { budget, budgetList } = useBudget(); const { loadingFromDB } = useGeneralContext(); const { createBudget, handleImport } = useDB(); - + const size = useWindowSize(); + const verticalScreen = size.width < 1000; + const buttonWidth = verticalScreen ? "w-50" : "w-25"; + const titleWidth = verticalScreen ? "w-75" : "w-50"; const showLandingPage = !loadingFromDB && !budget && budgetList && budgetList.length < 1; @@ -28,71 +24,64 @@ export function LandingPage() { {loadingFromDB && } {showLandingPage && ( - - - - + + + - new - - + + Figure out where your money went, plan ahead of time and + analyze past expenditures. + + + + + inputRef.current?.click()} + className={`${buttonWidth} align-self-center text-nowrap`} + aria-label="new budget" + variant="outline-success" + onClick={createBudget} > - import + get started - ) => - handleImport(e) - } - style={{ display: "none" }} - /> - - - help - - + inputRef.current?.click()} > - guitos version - - } - > - + ) => + handleImport(e) + } + style={{ display: "none" }} + /> + + - v{APP_VERSION} - - - - - + help + + + + + > )} > ); diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx index 6244362..b8c1e1a 100644 --- a/src/components/NavBar/NavBar.tsx +++ b/src/components/NavBar/NavBar.tsx @@ -147,7 +147,7 @@ export function NavBar() { placement="bottom" overlay={ - open repository in new tab + view source code in new tab } > diff --git a/src/hooks/useWindowSize.ts b/src/hooks/useWindowSize.ts new file mode 100644 index 0000000..87654b0 --- /dev/null +++ b/src/hooks/useWindowSize.ts @@ -0,0 +1,26 @@ +import React from "react"; + +export function useWindowSize() { + const [size, setSize] = React.useState({ + width: 0, + height: 0, + }); + + React.useLayoutEffect(() => { + function handleResize() { + setSize({ + width: window.innerWidth, + height: window.innerHeight, + }); + } + + handleResize(); + window.addEventListener("resize", handleResize); + + return () => { + window.removeEventListener("resize", handleResize); + }; + }, []); + + return size; +}
+ Figure out where your money went, plan ahead of time and + analyze past expenditures. +