use a class intead of inline styling

import FileViewRedirectButton from '@/components/FileViewRedirectButton'

import { HIGHLIGHTED_COLOR } from '@/dashboard/utilities'

import { Button, Card } from '@blueprintjs/core'

import { css } from '@emotion/css'

import { EmailTemplate } from '@inject/graphql/fragments/EmailTemplate.generated'

import { FC, MouseEvent, MouseEventHandler } from 'react'

export const th = css`

const th = css`

  text-align: left;

  vertical-align: text-top;

  white-space: nowrap;

  width: 150px;

`

export const td = css`

const td = css`

  white-space: pre-wrap;

  vertical-align: text-top;

  padding: 5px 10px;

`

const card = css`

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  margin: 1rem;

`

interface TemplateCardProps {

  template: EmailTemplate

  teamId: string

  exerciseId,

  onClick,

}) => (

  <Card

    key={template.id}

    style={{

      backgroundColor: template.submitted ? HIGHLIGHTED_COLOR : undefined,

      display: 'flex',

      flexDirection: 'column',

      justifyContent: 'space-between',

      margin: '1rem',

    }}>

  <Card key={template.id} className={card}>

    <table>

      <tbody>

        <tr>