Merge pull request #26 from microsoft/won

Dark theme, telemetry, spinner, refactoring

Client/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@microsoft/applicationinsights-web": "^3.3.2",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -12,10 +13,10 @@
     "@types/react-dom": "^18.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4",
-    "react-router-dom": "^6.2.1"
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",

Client/src/components/Form/Button/BaseButton.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import "./button.scss";
+import { ButtonProps } from "./button.types";
+import { Telemetry } from "../../../services/Telemetry";
+
+export function BaseButton(props: ButtonProps): React.ReactElement {
+  const { onClick, classNames } = props;
+
+  const handleButtonClicked = () => {
+    Telemetry.getInstance().event("ButtonClicked", {
+      buttonName: props.label,
+    });
+
+    onClick();
+  };
+
+  return (
+    <button className={classNames} onClick={handleButtonClicked}>
+      {props.label}
+    </button>
+  );
+}

Client/src/components/Form/Button/DefaultButton.tsx

@@ -1,15 +1,8 @@
 import React from "react";
 import "./button.scss";
 import { ButtonProps } from "./button.types";
+import { BaseButton } from "./BaseButton";
 
-export function DefaultButton(
-  props: React.PropsWithChildren<ButtonProps>
-): React.ReactElement {
-  const { onClick, children } = props;
-
-  return (
-    <button className="default-button button" onClick={onClick}>
-      {children}
-    </button>
-  );
+export function DefaultButton(props: ButtonProps): React.ReactElement {
+  return <BaseButton {...props} classNames="default-button button" />;
 }

Client/src/components/Form/Button/PrimaryButton.tsx

@@ -1,15 +1,10 @@
 import React from "react";
 import "./button.scss";
 import { ButtonProps } from "./button.types";
+import { BaseButton } from "./BaseButton";
 
 export function PrimaryButton(
   props: React.PropsWithChildren<ButtonProps>
 ): React.ReactElement {
-  const { onClick, children } = props;
-
-  return (
-    <button className="primary-button button" onClick={onClick}>
-      {children}
-    </button>
-  );
+  return <BaseButton {...props} classNames="primary-button button" />;
 }

Client/src/components/Form/Button/button.scss

@@ -1,3 +1,5 @@
+@import "../../../variables.scss";
+
 @mixin base-button-style {
   display: inline-block;
   padding: 0.5rem 1rem;
@@ -12,15 +14,15 @@
 .primary-button {
   @include base-button-style;
 
-  background-color: #007bff;
-  border: 2px solid #007bff;
+  background-color: $primary-color;
+  border: 2px solid $primary-color;
   color: white;
 }
 
 .default-button {
   @include base-button-style;
 
   background-color: white;
-  border: 2px solid #007bff;
-  color: #007bff;
+  border: 2px solid $primary-color;
+  color: $primary-color;
 }

Client/src/components/Form/Button/button.types.ts

@@ -1,4 +1,6 @@
 export type ButtonProps = {
   onClick(): void;
   title: string;
+  label: string;
+  classNames?: string;
 };

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

@@ -1,3 +1,5 @@
+@import "../../../variables.scss";
+
 .text-field-container {
   margin-bottom: 20px;
 }
@@ -13,10 +15,28 @@
   display: block;
   width: 100%;
   font-size: 1em;
+  padding: 12px;
+  border: 1px solid $border-color-light;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: $input-background-dark;
+    border: 1px solid $border-color-dark;
+    color: $font-text-dark;
+  }
 }
 
 .text-area {
   width: 100%;
   min-height: 200px;
   font-size: 1em;
+  line-height: 1.5;
+  padding: 12px;
+  border-radius: 4px;
+  border: 1px solid $border-color-light;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: $input-background-dark;
+    border: 1px solid $border-color-dark;
+    color: $font-text-dark;
+  }
 }

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

@@ -14,9 +14,12 @@ export function TextField(props: TextFieldProps): React.ReactElement {
     return (
       <div className="text-field-container">
         {props.label && (
-          <label className="text-field-label">{props.label}</label>
+          <label htmlFor={props.name} className="text-field-label">
+            {props.label}
+          </label>
         )}
         <textarea
+          name={props.name}
           className="text-area"
           onChange={(e) => {
             props.onChange(props.name, e.currentTarget.value);
@@ -29,8 +32,13 @@ export function TextField(props: TextFieldProps): React.ReactElement {
 
   return (
     <div className="text-field-container">
-      {props.label && <label className="text-field-label">{props.label}</label>}
+      {props.label && (
+        <label htmlFor={props.name} className="text-field-label">
+          {props.label}
+        </label>
+      )}
       <input
+        name={props.name}
         type="text"
         className="text-field"
         onChange={(e) => {

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

@@ -1,5 +1,11 @@
+@import "../../../variables.scss";
+
 .footer {
   height: 50px;
   padding: 20px;
-  border-top: 1px solid #e0e0e0;
-}
+  border-top: 1px solid $border-color-light;
+
+  @media (prefers-color-scheme: dark) {
+    border-top: 1px solid $border-color-dark;
+  }
+}

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

@@ -1,14 +1,31 @@
+@import "../../../variables.scss";
+
 .header-root {
-    height: 50px;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    padding-left: 20px;
-    padding-right: 20px;
-    border-bottom: 1px solid #e0e0e0;
+  height: 50px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding-left: 20px;
+  padding-right: 20px;
+  border-bottom: 1px solid $border-color-light;
+
+  @media (prefers-color-scheme: dark) {
+    border-bottom: 1px solid $border-color-dark;
+  }
+}
+
+.brand-link {
+  text-decoration: none;
+  color: default;
 }
 
 .brand {
-    font-size: 1.125em;  
-    font-weight: 600;
-}
+  font-size: 1.125em;
+  font-weight: 600;
+
+  color: $font-text-light;
+
+  @media (prefers-color-scheme: dark) {
+    color: $font-text-dark;
+  }
+}

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

@@ -4,7 +4,9 @@ import "./Header.scss";
 export function Header(): React.ReactElement {
   return (
     <header className="header-root">
-      <div className="brand">Header area if needed</div>
+      <a href="/" title="Go to CareerCraft home page" className="brand-link">
+        <div className="brand">CareerCraft</div>
+      </a>
     </header>
   );
 }