Assignment 2 Completed.

package.json

@@ -10,7 +10,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.11.2"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",

src/App.css

@@ -1,42 +1,222 @@
 #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    font-family: "Courier 10 Pitch", sans-serif;
+    font-size: small;
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
+@media (prefers-reduced-motion: no-preference) {
+    a:nth-of-type(2) .logo {
+        animation: logo-spin infinite 20s linear;
+    }
 }
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+
+#f-leetcode-header {
+    float: left;
+    font-size: x-large;
 }
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
+
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background-color: black;
+    color: white;
+    /*border: 1px solid red;*/
 }
 
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+header ul {
+    list-style: none;
+    margin: 0;
+    float: right;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
+header ul li {
+    display: inline-block;
+    color: white;
+    margin: 0;
+    padding: 0 1em;
+}
+
+header a {
+    color: inherit;
+    text-decoration: none;
+}
+
+.login-screen {
+    display: flex;
+    position: relative;
+    inset: 0;
+    justify-content: center;
+}
+
+.login {
+    border: 1px solid black;
+    border-radius: 5px;
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-items: center;
+    align-items: center;
+    padding: 1em;
+}
+
+.input-div {
+    width: 60%;
+    margin: 0;
+}
+
+.input-div input {
+    width: 100%;
+    height: 1.75em;
+}
+
+.input-mini-div {
+    padding: 1em 0;
+}
+
+.input-validation-msg {
+    text-align: initial;
+    color: red;
+    font-size: xx-small;
+    height: 1em;
+}
+
+.actions {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+
+.login button {
+    padding: .75em 1.5em;
+    background-color: teal;
+    border: none;
+    border-radius: 5px;
+    color: white;
+    margin: 1em 0;
+}
+
+.signup-btn {
+    margin: 1em;
+}
+
+/*Problem Set*/
+
+.problem-set-screen table {
+    /*border: 1px solid grey;*/
+    border-radius: 5px;
+    background-color: dimgrey;
+    padding: 1em;
+}
+
+.problem-set-screen td {
+    outline: 1px solid floralwhite;
+    color: whitesmoke;
+    margin: 0;
+    padding: 1em;
+}
+
+.problem-set-screen tr:hover {
+    background-color: grey;
+}
+
+.problem-set-screen .medium {
+    color: yellow;
+}
+
+.problem-set-screen .hard {
+    color: red;
+}
+
+.problem-set-screen .easy {
+    color: green;
+}
+
+.problem {
+    display: flex;
+    width: 100%;
+    /*border: 1px solid blue;*/
+    justify-content: space-between;
+}
+
+.problem-details {
+    /*border: 1px solid black;*/
+    width: 49%;
+    padding: 0.2em;
+}
+
+.problem-details .problem-level.hard {
+    padding: 0.1em .6em;
+    border-radius: 10em;
+    background-color: rgba(255, 0, 0, 0.5);
+}
+
+.problem-details .problem-level.easy {
+    padding: 0.1em .6em;
+    border-radius: 10em;
+    background-color: rgba(0, 255, 0, 0.5);
+}
+
+.problem-details .problem-level.medium {
+    padding: 0.1em .6em;
+    border-radius: 10em;
+    background-color: rgba(255, 234, 0, 0.31);
+}
+
+.question-stats {
+    margin: 0 0.5em;
+    padding: 0.5em;
+    display: inline-block;
+}
+
+.question-example {
+    padding: 0.1em 0.5em;
+    margin: 1em 0;
+    background: rgba(0, 0, 0, 0.1);
+}
+
+.question-example h5 {
+    margin: 0.5em 0;
+}
+
+.constraints {
+    margin: 0.5em 0;
+}
+
+.constraints h5 {
+    margin: 0;
+}
+
+.constraints ul {
+    margin: 0;
+}
+
+.playground {
+    /*border: 1px solid red;*/
+    width: 49%;
+    padding: 0.5em;
+}
+
+.languages {
+    margin: 0.5em 0;
 }
 
-.card {
-  padding: 2em;
+.code-space {
+    width: 100%;
+    height: 90%;
+    resize: none;
 }
 
-.read-the-docs {
-  color: #888;
+a {
+    text-decoration: none;
 }
+
+.table-row {
+    display: table-row;
+}