Timer styling moved into styled-component

client/src/components/screens/GamePanel/GuessPane.jsx

@@ -59,7 +59,7 @@ const SubmitWrapper = styled.div`
     margin-top: 4px;
     color: #fff;
 
-    &>.timer {
+    &>* {
       background-color: #333;
     }
   }

client/src/components/util/Timer/Timer.css

@@ -1,12 +0,0 @@
-.timer {
-  padding: 1px;
-  display: inline;
-}
-
-.timer__time {
-  display: inline-block;
-}
-
-.timer--timeout {
-  color: red;
-}

client/src/components/util/Timer/Timer.jsx

@@ -1,11 +1,21 @@
 import React from "react";
+import styled from "styled-components";
 import ms from "pretty-ms";
 import useCountdown from "./useCountdown";
 
+const TimerSpan = styled.span`
+  padding: 1px;
+  display: inline;
+`
+
+const TimedOut = styled(TimerSpan)`
+  color: red;
+`
+
 export default ({ seconds, onTimeout }) => {
   const remaining = useCountdown(seconds, onTimeout);
 
   return remaining > 0 
-    ? <span className="timer">Time: <span className="timer__time">{ms(remaining * 1000)}</span></span> 
-    : <span className="timer timer--timeout">Time's up!</span>
+    ? <TimerSpan>Time: {ms(remaining * 1000)}</TimerSpan> 
+    : <TimedOut>Time's up!</TimedOut>
 }

client/src/components/util/Timer/index.js

@@ -1,2 +1 @@
-import "./Timer.css";
 export { default } from './Timer';