From f4d4ec44e9b5a25c1463852681bd830bc23b4a6a Mon Sep 17 00:00:00 2001 From: Ryan Lynch Date: Fri, 12 Jan 2024 00:22:19 +0000 Subject: [PATCH] Adding intro text and updating styling. --- src/App.css | 31 ++++++++++++++++++++---- src/App.tsx | 69 +++++++++++++++++++++++++++++++++++++---------------- 2 files changed, 75 insertions(+), 25 deletions(-) diff --git a/src/App.css b/src/App.css index 26ca353..84c436b 100644 --- a/src/App.css +++ b/src/App.css @@ -19,9 +19,32 @@ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } +p { + font-size: 1.5rem; + max-width: 80%; + display: inline-block; +} + +.name-container { + display: inline flex; + flex-direction: row; + align-items: center; + justify-content: center; + margin: 10px; + padding: 10px; + border-radius: 5px; + border: 1px solid #ccc; +} + +#namelabel { + font-size: larger; + font-weight: bold; + margin: 1rem; +} + .goals-form { display: flex; - flex-direction: column; + flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; @@ -31,17 +54,17 @@ body { background-color: teal; display: flex; flex-direction: row; + flex-basis: 20rem; align-items: center; justify-content: center; margin: 10px; padding: 10px; border-radius: 5px; border: 1px solid #ccc; - min-width: 10rem; } .input-label { - flex: 1; + /* flex: 1; */ display: flex; flex-direction: column; align-items: center; @@ -51,7 +74,7 @@ body { input { display: flex; - flex: 2; + /* flex: 2; */ /* align-items: center; */ margin: 10px; diff --git a/src/App.tsx b/src/App.tsx index 252aa03..35aa289 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,7 @@ import { useState } from "react"; import "./App.css"; import { Generator } from "./pdf-generator/Generator"; +// import { Form } from "./pdf-generator/Form"; import { getDefaultGoals } from "./pdf-generator/GeneratorUtils"; function App() { @@ -14,25 +15,27 @@ function App() { setGoals(currentGoals); }; + // Form(); + return (
-

2024 Goals Bingo Generator!

+ +
+
+ Whose goals are these? +
+ setNameInput(e.target.value)} + /> +

What are your goals for this year?

-
-
- Name: -
- setNameInput(e.target.value)} - /> -
Goal 1: @@ -240,15 +243,15 @@ function App() { onChange={(e) => updateGoals(e, 15)} />
-
-
+ + {/*
*/}
); @@ -259,4 +262,28 @@ const generatePDF = (name: string, goals: string[]) => { Generator(name, goals); }; +const Introduction: React.FC = () => { + return ( +
+

2024 Goals Bingo Generator!

+

What is this?

+

+ This is a tool to help you generate a PDF of your goals for the + year 2024. You can use this to help you visualize your goals and + make them more real. +

+

+ New Year's resolutions are often forgotten by the end of + January, and often because they are unrealistic and people set + an unrealistic number of goals. This tool is designed to help + you choose goals with a higher chance of success.{" "} +

+

+ You do not aim to complete all of your goals, but rather to + complete a bingo line of goals. Good luck! +

+
+ ); +}; + export default App;