Add FontAwesome

Nonhuman-Nonsense · Mar 21, 2024 · a02396f · a02396f
1 parent 18486ae
commit a02396f
Show file tree

Hide file tree

Showing 6 changed files with 175 additions and 14 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

diff --git a/client/public/index.html b/client/public/index.html
@@ -2,19 +2,34 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <link
+      rel="icon"
+      href="%PUBLIC_URL%/favicon.ico"
+    />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1"
+    />
+    <meta
+      name="theme-color"
+      content="#000000"
+    />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link
+      rel="apple-touch-icon"
+      href="%PUBLIC_URL%/logo192.png"
+    />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link
+      rel="manifest"
+      href="%PUBLIC_URL%/manifest.json"
+    />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -39,5 +54,9 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script
+      src="https://kit.fontawesome.com/7686f58a35.js"
+      crossorigin="anonymous"
+    ></script>
   </body>
 </html>
diff --git a/client/src/App.css b/client/src/App.css
@@ -28,6 +28,47 @@ html,
   pointer-events: none;
 }
 
+.header {
+  font-size: 80px;
+  margin: 8px;
+  font-weight: normal;
+}
+
+.sub-header {
+  font-size: 40px;
+  margin: 8px;
+  font-weight: normal;
+}
+
+.sub-sub-header {
+  font-size: 32px;
+  margin-bottom: 12px;
+  font-weight: normal;
+}
+
+.input-icon-wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.name-input {
+  background-color: white;
+  border-radius: 12px;
+  border: 2px solid #ccc; /* Adjust as needed */
+  width: 400px;
+  height: 30px;
+  font-size: 25px;
+  padding-left: 10px;
+  padding-right: 40px; /* Make room for the arrow */
+}
+
+.input-arrow {
+  position: absolute;
+  right: 10px;
+  color: black; /* Adjust arrow color as needed */
+}
+
 @media (prefers-reduced-motion: no-preference) {
   .App-logo {
     animation: App-logo-spin infinite 20s linear;

diff --git a/client/src/components/NameInput.jsx b/client/src/components/NameInput.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
+
+function NameInput() {
+  return (
+    <div>
+      <h3 className="sub-sub-header">please type your name to enter:</h3>
+      <div className="input-icon-wrapper">
+        <input
+          className="name-input"
+          type="text"
+          placeholder="your name"
+        />
+        <FontAwesomeIcon
+          icon={faArrowRight}
+          className="input-arrow"
+        />
+      </div>
+    </div>
+  );
+}
+
+export default NameInput;
diff --git a/client/src/components/Welcome.jsx b/client/src/components/Welcome.jsx
@@ -1,4 +1,5 @@
 import React from "react";
+import NameInput from "./NameInput";
 
 function Welcome() {
   const welcomeStyle = {
@@ -8,22 +9,18 @@ function Welcome() {
     minHeight: "100vh",
     display: "flex",
     flexDirection: "column",
-    justifyContent: "center", // Center the content vertically
+    justifyContent: "space-around",
     alignItems: "center",
   };
 
-  const contentStyle = {
-    // Add padding to the bottom to push the content up slightly
-    paddingBottom: "50%", // Adjust this value to control the shift
-  };
-
   return (
     <div style={welcomeStyle}>
       {/* Wrap the text content for individual styling */}
-      <div style={contentStyle}>
-        <p>welcome to</p>
-        <h1>COUNCIL OF FOODS</h1>
+      <div>
+        <h2 className="sub-header">welcome to</h2>
+        <h1 className="header">COUNCIL OF FOODS</h1>
       </div>
+      <NameInput />
     </div>
   );
 }