Create Tag component. Imrpove styles for Table component

app/src/components/Table/index.tsx

@@ -1,6 +1,8 @@
 import React, { FunctionComponent } from 'react';
-import Critter, { Time, Month } from 'types';
+import Critter, { Time, Month, Colors } from 'types';
 import { Table as Tb } from 'reactstrap';
+import Tag from 'components/Tag';
+
 import moment from 'moment';
 // import { includes } from 'ramda';
 import { parseMonth } from 'services/DataParser';
@@ -22,7 +24,7 @@ const Table: FunctionComponent<TableProps> = ({ data }) => {
   //   });
   // }
   
-  const showAvailability = (months: Month[]) => {
+  const showAvailability = (months: Month[]): { color: Colors, text: string} => {
     const currentMonth = (moment().get('month') as Month) + 1;
   
     if (months.length === 12){
@@ -36,7 +38,7 @@ const Table: FunctionComponent<TableProps> = ({ data }) => {
     if (availableNow === -1) {
       const availableFrom = months.find(m => m > currentMonth) || 1;
       return {
-        color: 'red',
+        color: 'purple',
         text: `from ${parseMonth(availableFrom)}`
       }
     }
@@ -51,10 +53,10 @@ const Table: FunctionComponent<TableProps> = ({ data }) => {
       if ( (actual % 12) + 1 !== next) {
         const lastMonth = actual === currentMonth;
         return lastMonth ? {
-          color: 'orange',
+          color: 'red',
           text: 'last month available'
         } : {
-          color: 'blue',
+          color: 'orange',
           text: `until ${parseMonth(actual)}`
         }
       } else {
@@ -66,7 +68,7 @@ const Table: FunctionComponent<TableProps> = ({ data }) => {
   const DisplayMonths: FunctionComponent<{months: Month[]}> = ({ months }) => {
     const result = showAvailability(months);
     return (
-      <div>{result.text}</div>
+      <Tag color={result.color}>{result.text}</Tag>
     )
   }
   
@@ -84,7 +86,7 @@ const Table: FunctionComponent<TableProps> = ({ data }) => {
   }
 
   return (
-    <div>
+    <div className="cc-critter-schedule">
       <Tb striped hover responsive className="critter-table">
         <thead>
           <tr>

app/src/components/Table/styles.css

@@ -10,6 +10,7 @@
 
 .table.critter-table thead {
   border-bottom: 2px dashed #785b31;
+  text-transform: capitalize;
 }
 
 .table-hover.table.critter-table tbody tr:hover {
@@ -23,6 +24,7 @@
 
 .table.critter-table tr td {
   border: 0;
+  text-transform: capitalize;
 }
 
 td.critter-img img {

app/src/components/Tag/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import './styles.css';
+
+type props = {
+  children: React.ReactNode,
+  color?: 'red' | 'orange'  | 'yellow' | 'pink' | 'green' | 'blue' | 'purple'
+}
+const Tag: React.FunctionComponent<props> = ({ children, color = 'orange' }) => {
+  return (
+    <span className={`cc-tag cc-tag-${color}`}>
+      {children}
+    </span>
+  )
+}
+
+export default Tag;

app/src/components/Tag/styles.css

@@ -0,0 +1,50 @@
+span.cc-tag {
+  padding: 0.1rem 0.3rem;
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: 0.4rem;
+  color: #282c34;
+}
+
+/* 'red' | 'orange'  | 'yellow' | 'pink' | 'green' | 'blue' | 'purple'; */
+
+span.cc-tag.cc-tag-red {
+  background-color: rgba(213, 96, 101, 0.3);
+  color: #d56065;
+  border-radius: 20% 46% 12% 16% / 29% 24% 42% 39%;
+}
+
+span.cc-tag.cc-tag-orange {
+  background-color: rgba(228, 157, 20, 0.3);
+  color: #e18341;
+  border-radius: 30% 13% 23% 10% / 32% 24% 21% 36%;
+}
+
+span.cc-tag.cc-tag-yellow {
+  background-color: rgba(231, 195, 25, 0.3);
+  color: #e39e16;
+  border-radius: 34% 43% 37% 15% / 32% 24% 50% 36% ;
+}
+
+span.cc-tag.cc-tag-pink {
+  background-color: rgba(230, 182, 185, 0.3);
+  color: #e28a9e;
+  border-radius: 20% 46% 12% 16% / 29% 24% 42% 39%;
+}
+
+span.cc-tag.cc-tag-green {
+  background-color: rgba(165, 205, 166, 0.3);
+  color: #7ba371;
+  border-radius: 30% 13% 23% 10% / 32% 24% 21% 36%;
+}
+
+span.cc-tag.cc-tag-blue {
+  background-color: rgba(127, 188, 229, 0.3);
+  color: #389cd3;
+  border-radius: 34% 43% 37% 15% / 32% 24% 50% 36% ;
+}
+
+span.cc-tag.cc-tag-purple {
+  background-color: rgba(165, 118, 227, 0.3);
+  color: #a576e3;
+  border-radius: 19% 43% 18% 33% / 32% 24% 50% 36% ;
+}

app/src/types.ts

@@ -44,4 +44,5 @@ enum ShadowSize {
 type ShadowSizeLabel = "Tiny" | "Small" | "Medium" | "Large" | "Very Large" | "Huge" | "Long" | "Fin";
 type InsectLocation = "Flying" | "Flying by Hybrid Flowers" | "Flying by Light" | "On Trees" | "On the Ground" | "On Flowers" | "On Flowers (White)" | "Shaking Trees" | "Underground" | "On Ponds and Rivers" | "On Tree Stumps" | "On the Ground (rolling snowballs)" | "On Trees (Coconut)" | "Under Trees Disguised as Leafs" | "On rotten food" | "Beach disguised as Shells" | "On Beach Rocks" | "On Trash Items" | "Villager's Heads" | "On Rocks (Rain)" | "Hitting Rocks";
 
+export type Colors = 'red' | 'orange'  | 'yellow' | 'pink' | 'green' | 'blue' | 'purple';
 export default Critter;