Add header and simple empty state

src/components/StreakView/StreakView.less

@@ -2,12 +2,35 @@
   height: 100%;
   width: 100%;
   display: grid;
-  grid-template-rows: auto min-content;
+  grid-template-rows: min-content auto;
   gap: 1rem;
+  overflow-y: auto;
 }
 
 .streak-grid {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
 }
+
+.pointer {
+  position: fixed;
+  top: 50px;
+  left: 50px;
+  animation: pulsate 4s infinite;
+}
+
+@keyframes pulsate {
+  0% {
+    transform: scale(1);
+    opacity: 0.8;
+  }
+  50% {
+    transform: scale(1.75);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0.8;
+  }
+}

src/components/StreakView/StreakView.tsx

@@ -1,17 +1,54 @@
+import { Typography } from "@mui/material";
 import { useConfiguration } from "../../hooks/useConfiguration";
 import "./StreakView.less";
 import { User } from "./User/User";
+import NorthWestIcon from "@mui/icons-material/NorthWest";
 
 export const StreakView = () => {
   const { config } = useConfiguration();
 
-  return (
-    <div className="container">
+  const Header = () => {
+    return (
+      <Typography variant="h2" gutterBottom>
+        Duolingo Streaks
+      </Typography>
+    );
+  };
+
+  const StreakGrid = () => {
+    return (
       <div className="streak-grid">
         {config.userNames.map((userName) => (
           <User userName={userName} key={userName} />
         ))}
       </div>
+    );
+  };
+
+  const EmptyState = () => {
+    const ConfigPointer = () => {
+      return (
+        <div className="pointer">
+          <NorthWestIcon fontSize="large" />
+        </div>
+      );
+    };
+
+    return (
+      <>
+        <Typography variant="subtitle1" gutterBottom>
+          Keep track of your and your friends Duoling streaks!
+        </Typography>
+        <ConfigPointer />
+      </>
+    );
+  };
+
+  return (
+    <div className="container">
+      <Header />
+      {config.userNames.length === 0 && <EmptyState />}
+      <StreakGrid />
     </div>
   );
 };