Refactor, rounded solution terms

src/gcf.css

@@ -4,3 +4,36 @@
     background: white;
     color: black;
 }
+
+.solution-term {
+    display: inline-block;
+    padding: 9px;
+    color: white;
+    border-radius: 18px;
+    min-width: 36px;
+    font-size: 80%;
+}
+
+.solution-term-red {
+    background-color: red;
+}
+
+.solution-term-blue {
+    background-color: blue;
+}
+
+.solution-term-green {
+    background-color: green;
+}
+
+.solution-term-brown {
+    background-color: brown;
+}
+
+.solution-term-purple {
+    background-color: purple;
+}
+
+.solution-term-orange {
+    background-color: orange;
+}

src/gcf.tsx

@@ -20,9 +20,15 @@ function Solution({rows}:SolutionParams) {
   ]
   const displayRow = (row : SolutionRow, index : number) => {
     let range : number[] = [0, 1, 2]
-    const styles = range.map((i)=>{return `padding:3px;color:white;background:${colors[(i+index)%colors.length]}`})
+    const klasses = range.map((i)=>{return `solution-term solution-term-${colors[(i+index)%colors.length]}`})
     return <p>
-      <span style={styles[0]}>{row[0]}</span>&nbsp;&divide;&nbsp;<span style={styles[1]}>{row[2]}</span>&nbsp;=&nbsp;{row[1]}&nbsp;R&nbsp;<span style={styles[2]}>{row[3]}</span>
+      <span className={klasses[0]}>{row[0]}</span>
+      &nbsp;&divide;&nbsp;
+      <span className={klasses[1]}>{row[2]}</span>
+      &nbsp;=&nbsp;
+      {row[1]}
+      &nbsp;R&nbsp;
+      <span className={klasses[2]}>{row[3]}</span>
     </p>
   }
 

src/navbar.tsx

@@ -9,7 +9,7 @@ function Navbar() {
   }
 
   return (
-    <nav class="navbar navbar-expand-lg bg-body-tertiary">
+    <nav class="navbar navbar-expand-sm bg-body-tertiary">
       <div class="container-fluid">
         <a class="navbar-brand" href="#">Math Practice</a>
         <button class="navbar-toggler" type="button" onClick={()=>setShow(!show)} aria-expanded={show} aria-label="Toggle navigation">