react-typing-test/src/components/style.ts

A react component typing test, user input and wpm calculations.

import styled from "styled-components";
import { createGlobalStyle } from "styled-components";
import RobotoMono from "../assets/RobotoMono-Medium.ttf";

export const GlobalStyle = createGlobalStyle`
    @font-face {
        font-family: 'Roboto Mono';
        src: url(${RobotoMono}) format('truetype');
    }

    * {
        font-family: 'Roboto Mono';
    }
`;

export const BottomBar = styled.div`
  &&&& {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 2fr 0.5fr;
    text-align: center;
  }
`;

export const ColoredSpan = styled.span`
  &&&& {
    color: ${(props) => props.theme.mainTextColor};
  }
`;