Merge pull request #27 from microsoft/anpethel/cc2024UI

changes that improve ui

Client/package.json

@@ -41,6 +41,8 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/plugin-transform-private-property-in-object": "^7.24.7",
     "sass": "^1.78.0"
   }
 }

Client/src/components/Form/TextField/TextField.scss

@@ -1,6 +1,7 @@
 @import "../../../variables.scss";
 
 .text-field-container {
+  margin-top: 20px;
   margin-bottom: 20px;
 }
 
@@ -17,6 +18,7 @@
   font-size: 1em;
   padding: 12px;
   border: 1px solid $border-color-light;
+  border-radius: 15px;
 
   @media (prefers-color-scheme: dark) {
     background-color: $input-background-dark;

Client/src/components/Form/TextField/TextField.tsx

@@ -7,6 +7,7 @@ export type TextFieldProps = {
   value: string | number;
   multiline?: boolean;
   label?: string;
+  placeholder?: string;
 };
 
 export function TextField(props: TextFieldProps): React.ReactElement {
@@ -25,6 +26,7 @@ export function TextField(props: TextFieldProps): React.ReactElement {
             props.onChange(props.name, e.currentTarget.value);
           }}
           value={props.value}
+          placeholder={props.placeholder || ""}
         />
       </div>
     );
@@ -45,6 +47,7 @@ export function TextField(props: TextFieldProps): React.ReactElement {
           props.onChange(props.name, e.currentTarget.value);
         }}
         value={props.value}
+        placeholder={props.placeholder || ""}
       />
     </div>
   );

Client/src/components/Layout/Footer/Footer.scss

@@ -3,9 +3,18 @@
 .footer {
   height: 50px;
   padding: 20px;
+  margin-bottom: 20px;
   border-top: 1px solid $border-color-light;
 
   @media (prefers-color-scheme: dark) {
     border-top: 1px solid $border-color-dark;
   }
+}
+
+.footer-logo {
+  max-height: 30px;
+  // height: 30px;
+  width: auto;
+  margin-right: 10px;
+  // margin-bottom: 20px;
 }

Client/src/components/Layout/Footer/Footer.tsx

@@ -4,7 +4,13 @@ import "./Footer.scss";
 export function Footer(): React.ReactElement {
   return (
     <footer className="footer">
-      <div>Footer area if needed</div>
+      <div>
+        <img
+          src="Microsoft.png"
+          alt="Microsoft logo"
+          className="footer-logo"
+        />
+      </div>
     </footer>
   );
 }

Client/src/components/Layout/Header/Header.scss

@@ -7,6 +7,7 @@
   align-items: center;
   padding-left: 20px;
   padding-right: 20px;
+  margin-top: 10px;
   border-bottom: 1px solid $border-color-light;
 
   @media (prefers-color-scheme: dark) {
@@ -29,3 +30,10 @@
     color: $font-text-dark;
   }
 }
+
+.header-logo {
+  max-height: 50px;
+  // height: 30px;
+  width: auto;
+  margin-right: 10px;
+}

Client/src/components/Layout/Header/Header.tsx

@@ -5,7 +5,14 @@ export function Header(): React.ReactElement {
   return (
     <header className="header-root">
       <a href="/" title="Go to CareerCraft home page" className="brand-link">
-        <div className="brand">CareerCraft</div>
+        <div className="brand">
+          <img
+            src="Flat_logo_linear.png"
+            // src="CareerCraft_logo_white_no_border_with_slogan_large.png"
+            alt="CareerCraft logo"
+            className="header-logo"
+          />
+        </div>
       </a>
     </header>
   );

Client/src/components/Layout/Layout.scss

@@ -24,6 +24,14 @@
   flex-grow: 1;
 }
 
+.start-screen-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
 .footer-container {
   flex-shrink: 0;
 }

Client/src/screens/StartScreen/StartScreen.tsx

@@ -13,38 +13,44 @@ import { Spinner } from "../../components/Spinner";
 
 export function StartScreen(): React.ReactElement {
   usePageTracking("StartScreen");
+
   const [isSaving, setSaving] = React.useState<boolean>(false);
   const { setGameScenarios } = React.useContext<IAppContext>(AppContext);
   const [title, setTitle] = React.useState<string>("");
   const navigate = useNavigate();
 
-  const handleStartButtonClicked = async () => {
+  const handleStartButtonClicked = async (): Promise<void> => {
     setSaving(true);
-    const response = await Http.getInstance().post<GameScenarios>(
-      "/api/career-game/start",
-      {
-        careerChoice: title,
-      }
-    );
+    try {
+      const response = await Http.getInstance().post<GameScenarios>(
+        "/api/career-game/start",
+        {
+          careerChoice: title,
+        }
+      );
 
-    if (response.ok) {
-      setGameScenarios(response.data);
-      navigate(`/career-game/something`);
+      if (response.ok) {
+        setGameScenarios(response.data);
+        navigate(`/career-game/something`);
+      }
+    } catch (error) {
+      console.error("Failed to start game", error);
+    } finally {
+      setSaving(false);
     }
-
-    setSaving(false);
   };
+
   return (
-    <div>
-      <H1>Start Screen</H1>
+    <div className="start-screen-center">
+      <H1>Welcome! What career would you like to explore?</H1>
 
       <TextField
-        label="Title"
         name="title"
-        onChange={(name, title: string) => {
-          setTitle(title);
+        onChange={(name: string, value: string) => {
+          setTitle(value);
         }}
         value={title}
+        placeholder="Enter a career title"
       />
 
       <ButtonBar>