From 57bb1501f194a88f5e33fc46798ed03742321e44 Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Thu, 17 Dec 2020 15:22:28 -0600
Subject: [PATCH 01/31] Adjust TenantTableCollapse

---
 .../portal-app/src/component/tenant-list.tsx  | 46 +++++++++----------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/tenant-file/portal-app/src/component/tenant-list.tsx b/tenant-file/portal-app/src/component/tenant-list.tsx
index 5f13272..7388862 100644
--- a/tenant-file/portal-app/src/component/tenant-list.tsx
+++ b/tenant-file/portal-app/src/component/tenant-list.tsx
@@ -1,12 +1,12 @@
-import React, { useEffect } from "react";
-import { useLocation } from "react-router-dom";
-import { useQuery, gql } from "@apollo/client";
-import { TenantListQuery } from "./__generated__/TenantListQuery";
-import { Table } from "reactstrap";
-import { useTable, Column } from "react-table";
-import axios from "axios";
-import { getToken } from "./firebase";
-import TenantTableCollapse from "./tenant-table-collapse";
+import React, { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useQuery, gql } from '@apollo/client';
+import { TenantListQuery } from './__generated__/TenantListQuery';
+import { Table } from 'reactstrap';
+import { useTable, Column } from 'react-table';
+import axios from 'axios';
+import { getToken } from './firebase';
+import TenantTableCollapse from './tenant-table-collapse';
 
 const TENANT_QUERY = gql`
   query TenantListQuery($name: String = "") {
@@ -27,16 +27,16 @@ const TENANT_QUERY = gql`
 
 const columns: Column<TenantRow>[] = [
   {
-    Header: "Name",
-    accessor: "name", // accessor is the "key" in the data
+    Header: 'Name',
+    accessor: 'name', // accessor is the "key" in the data
   },
   {
-    Header: "Phone Number",
-    accessor: "phone",
+    Header: 'Phone Number',
+    accessor: 'phone',
   },
   {
-    Header: "Images",
-    accessor: "images",
+    Header: 'Images',
+    accessor: 'images',
   },
 ];
 
@@ -49,8 +49,8 @@ type TenantRow = {
 const TenantList: React.FC = () => {
   const paramsString = useLocation().search;
   const searchParams = new URLSearchParams(paramsString);
-  const nameQuery = searchParams.get("q") || "";
-  console.log(searchParams.get("q"), "location");
+  const nameQuery = searchParams.get('q') || '';
+  console.log(searchParams.get('q'), 'location');
 
   const queryVariables = {
     name: nameQuery,
@@ -60,7 +60,7 @@ const TenantList: React.FC = () => {
   const { loading, error, data } = useQuery<TenantListQuery>(TENANT_QUERY, {
     variables: queryVariables,
   });
-  console.log("ROWDATA", loading, error, data);
+  console.log('ROWDATA', loading, error, data);
   const rowData =
     data?.tenants?.nodes?.reduce((acc, node) => {
       if (node?.name && node?.phones[0].phoneNumber) {
@@ -80,9 +80,9 @@ const TenantList: React.FC = () => {
     const func = async () => {
       const token = await getToken();
       const baseUrl =
-        process.env.NODE_ENV === "production"
-          ? "https://tenant-file-api-zmzadnnc3q-uc.a.run.app"
-          : "http://localhost:8080";
+        process.env.NODE_ENV === 'production'
+          ? 'https://tenant-file-api-zmzadnnc3q-uc.a.run.app'
+          : 'http://localhost:8080';
 
       rowData.map((x) =>
         x.images.map(async (y) => {
@@ -93,7 +93,7 @@ const TenantList: React.FC = () => {
               },
             })
             .then((x) => x);
-          console.log("RESPONSE", imageResponse);
+          console.log('RESPONSE', imageResponse);
         })
       );
     };
@@ -122,7 +122,7 @@ const TenantList: React.FC = () => {
         {headerGroups.map((headerGroup) => (
           <tr {...headerGroup.getHeaderGroupProps()}>
             {headerGroup.headers.map((column) => (
-              <th {...column.getHeaderProps()}>{column.render("Header")}</th>
+              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
             ))}
           </tr>
         ))}

From e6cff20d93c7336ba204c90ac4cfc5b7afbf983a Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Thu, 17 Dec 2020 15:27:43 -0600
Subject: [PATCH 02/31] Add Tags page

---
 tenant-file/portal-app/src/App.tsx            | 32 +++++++++++--------
 tenant-file/portal-app/src/component/Tags.tsx |  7 ++++
 2 files changed, 25 insertions(+), 14 deletions(-)
 create mode 100644 tenant-file/portal-app/src/component/Tags.tsx

diff --git a/tenant-file/portal-app/src/App.tsx b/tenant-file/portal-app/src/App.tsx
index 0dc12ff..40dcfc1 100644
--- a/tenant-file/portal-app/src/App.tsx
+++ b/tenant-file/portal-app/src/App.tsx
@@ -1,18 +1,19 @@
-import React from "react";
+import React from 'react';
 
-import "bootstrap/dist/css/bootstrap.min.css";
-import "@fortawesome/fontawesome-free/css/all.min.css";
-import "line-awesome/dist/line-awesome/css/line-awesome.min.css";
-import { Switch, Route, Redirect } from "react-router-dom";
-import Login from "./component/login";
-import Layout from "./component/layout";
-import PrivateRoute from "./component/private-route";
-import DisplayImages from "./component/display-images";
-import Admin from "./component/admin";
-import Dashboard from "./component/dashboard";
-import Properties from "./component/properties";
-import Home from "./component/home";
-import TenantDetails from "./component/tenant-details";
+import 'bootstrap/dist/css/bootstrap.min.css';
+import '@fortawesome/fontawesome-free/css/all.min.css';
+import 'line-awesome/dist/line-awesome/css/line-awesome.min.css';
+import { Switch, Route, Redirect } from 'react-router-dom';
+import Login from './component/login';
+import Layout from './component/layout';
+import PrivateRoute from './component/private-route';
+import DisplayImages from './component/display-images';
+import Admin from './component/admin';
+import Dashboard from './component/dashboard';
+import Properties from './component/properties';
+import Home from './component/home';
+import TenantDetails from './component/tenant-details';
+import Tags from './component/Tags';
 
 function App() {
   return (
@@ -28,6 +29,9 @@ function App() {
         <PrivateRoute exact path="/dashboard">
           <Dashboard />
         </PrivateRoute>
+        <PrivateRoute exact path="/tags">
+          <Tags />
+        </PrivateRoute>
         <PrivateRoute
           path="/dashboard/tenant/:id"
           component={TenantDetails}
diff --git a/tenant-file/portal-app/src/component/Tags.tsx b/tenant-file/portal-app/src/component/Tags.tsx
new file mode 100644
index 0000000..eb803c4
--- /dev/null
+++ b/tenant-file/portal-app/src/component/Tags.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Tags = () => {
+  return <div>You're it!</div>;
+};
+
+export default Tags;

From 7a41174209dd3794874cd2b29e4e4da4b076e2e1 Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Thu, 17 Dec 2020 15:51:51 -0600
Subject: [PATCH 03/31] Write initial, ugly styling to tags display

---
 tenant-file/portal-app/src/component/Tags.tsx | 89 ++++++++++++++++++-
 1 file changed, 88 insertions(+), 1 deletion(-)

diff --git a/tenant-file/portal-app/src/component/Tags.tsx b/tenant-file/portal-app/src/component/Tags.tsx
index eb803c4..e47bc29 100644
--- a/tenant-file/portal-app/src/component/Tags.tsx
+++ b/tenant-file/portal-app/src/component/Tags.tsx
@@ -1,7 +1,94 @@
 import React from 'react';
+import styled from 'styled-components';
+
+const StyledTagsDisplay = styled.div`
+  width: 90%;
+  margin: 0 auto;
+  border: 1px solid grey;
+  display: flex;
+  border-radius: 10px;
+
+  .display,
+  .header,
+  .body,
+  .flex-row {
+    width: 100%;
+  }
+
+  .header,
+  .flex-row {
+    padding: 0.5rem;
+  }
+
+  .header {
+    display: flex;
+
+    & > * {
+      flex: 1;
+    }
+
+    .sort {
+      text-align: right;
+    }
+  }
+
+  .flex-row {
+    display: flex;
+
+    & > * {
+      flex: 1;
+    }
+  }
+
+  .buttons {
+    text-align: right;
+  }
+`;
 
 const Tags = () => {
-  return <div>You're it!</div>;
+  const data = [
+    {
+      name: 'Chris',
+      description: 'Good guy',
+      photoCount: 5,
+    },
+    {
+      name: 'Jenn',
+      description: 'cool gal',
+      photoCount: 4,
+    },
+    {
+      name: 'Elvis',
+      description: 'Big guy',
+      photoCount: 5,
+    },
+  ];
+
+  return (
+    <StyledTagsDisplay>
+      <div className="display">
+        <div className="header">
+          <div className="title">12 labels</div>
+          <div className="sort">
+            <button>sort</button>
+          </div>
+        </div>
+        <div className="body">
+          {data.map((tag) => (
+            <div className="flex-row">
+              <div className="label">{tag.name}</div>
+              <div className="description">{tag.description}</div>
+              <div className="photoCount">{tag.photoCount}</div>
+              <div className="buttons">
+                <button>Edit</button>
+                <button>Delete</button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </StyledTagsDisplay>
+  );
 };
 
 export default Tags;

From 23a4669bf38df3e3252f070b1750c9012a5161c3 Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Thu, 17 Dec 2020 20:24:31 -0600
Subject: [PATCH 04/31] Add borders and colors to display

---
 tenant-file/portal-app/src/component/Tags.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/tenant-file/portal-app/src/component/Tags.tsx b/tenant-file/portal-app/src/component/Tags.tsx
index e47bc29..6a59b47 100644
--- a/tenant-file/portal-app/src/component/Tags.tsx
+++ b/tenant-file/portal-app/src/component/Tags.tsx
@@ -20,6 +20,11 @@ const StyledTagsDisplay = styled.div`
     padding: 0.5rem;
   }
 
+  .header {
+    background-color: lightgray;
+    border-radius: 8px 8px 0 0;
+  }
+
   .header {
     display: flex;
 
@@ -34,12 +39,17 @@ const StyledTagsDisplay = styled.div`
 
   .flex-row {
     display: flex;
+    border-bottom: 1px solid grey;
 
     & > * {
       flex: 1;
     }
   }
 
+  .body .flex-row:last-child {
+    border-bottom: none;
+  }
+
   .buttons {
     text-align: right;
   }

From e858875de2687cc6c66db405dc05f93aecb3c245 Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Thu, 17 Dec 2020 20:40:41 -0600
Subject: [PATCH 05/31] Style tags

---
 tenant-file/portal-app/src/component/Tags.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/tenant-file/portal-app/src/component/Tags.tsx b/tenant-file/portal-app/src/component/Tags.tsx
index 6a59b47..dfc5279 100644
--- a/tenant-file/portal-app/src/component/Tags.tsx
+++ b/tenant-file/portal-app/src/component/Tags.tsx
@@ -44,10 +44,23 @@ const StyledTagsDisplay = styled.div`
     & > * {
       flex: 1;
     }
+
+    .label span {
+      display: inline-block;
+      padding: 0.1rem 0.5rem;
+      /* border: 1px solid black; */
+      background-color: green;
+      border-radius: 15px;
+      font-weight: 700;
+      color: #eee;
+      font-size: 0.8rem;
+    }
   }
 
   .body .flex-row:last-child {
     border-bottom: none;
+    background-color: rgba(10, 100, 10, 0.5);
+    border-radius: 0 0 8px 8px;
   }
 
   .buttons {
@@ -86,7 +99,9 @@ const Tags = () => {
         <div className="body">
           {data.map((tag) => (
             <div className="flex-row">
-              <div className="label">{tag.name}</div>
+              <div className="label">
+                <span>{tag.name}</span>
+              </div>
               <div className="description">{tag.description}</div>
               <div className="photoCount">{tag.photoCount}</div>
               <div className="buttons">

From f64ba184a3ac4aeb6405d512723c12f0637bcabf Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Fri, 18 Dec 2020 09:57:13 -0600
Subject: [PATCH 06/31] Bring in button styling

---
 tenant-file/portal-app/src/component/Tags.tsx | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/tenant-file/portal-app/src/component/Tags.tsx b/tenant-file/portal-app/src/component/Tags.tsx
index dfc5279..cf0166b 100644
--- a/tenant-file/portal-app/src/component/Tags.tsx
+++ b/tenant-file/portal-app/src/component/Tags.tsx
@@ -2,7 +2,8 @@ import React from 'react';
 import styled from 'styled-components';
 
 const StyledTagsDisplay = styled.div`
-  width: 90%;
+  width: 95%;
+  max-width: 1200px;
   margin: 0 auto;
   border: 1px solid grey;
   display: flex;
@@ -18,6 +19,8 @@ const StyledTagsDisplay = styled.div`
   .header,
   .flex-row {
     padding: 0.5rem;
+    padding: 1rem;
+    border-bottom: 1px solid grey;
   }
 
   .header {
@@ -32,6 +35,10 @@ const StyledTagsDisplay = styled.div`
       flex: 1;
     }
 
+    .title {
+      font-weight: 700;
+    }
+
     .sort {
       text-align: right;
     }
@@ -39,16 +46,18 @@ const StyledTagsDisplay = styled.div`
 
   .flex-row {
     display: flex;
-    border-bottom: 1px solid grey;
+    justify-content: center;
 
     & > * {
       flex: 1;
+      display: flex;
+      align-items: center;
     }
 
     .label span {
+      /* TODO Fix stretch */
       display: inline-block;
       padding: 0.1rem 0.5rem;
-      /* border: 1px solid black; */
       background-color: green;
       border-radius: 15px;
       font-weight: 700;
@@ -64,7 +73,16 @@ const StyledTagsDisplay = styled.div`
   }
 
   .buttons {
-    text-align: right;
+    justify-content: flex-end;
+
+    button {
+      border: none;
+      box-shadow: none;
+      background-color: ${(props) => props.theme.backdrop};
+      color: ${(props) => props.theme.primary};
+      border-radius: 8px;
+      padding: 0 0.6rem;
+    }
   }
 `;
 

From aa7601ae056fed1116e7624d0b38031dde86d9ba Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Fri, 18 Dec 2020 10:19:23 -0600
Subject: [PATCH 07/31] Finishing touches to colors, accents, and spacing

---
 tenant-file/portal-app/src/component/Tags.tsx | 37 +++++++++++++------
 1 file changed, 26 insertions(+), 11 deletions(-)

diff --git a/tenant-file/portal-app/src/component/Tags.tsx b/tenant-file/portal-app/src/component/Tags.tsx
index cf0166b..8bc31f3 100644
--- a/tenant-file/portal-app/src/component/Tags.tsx
+++ b/tenant-file/portal-app/src/component/Tags.tsx
@@ -5,9 +5,10 @@ const StyledTagsDisplay = styled.div`
   width: 95%;
   max-width: 1200px;
   margin: 0 auto;
-  border: 1px solid grey;
+  border: 1px solid rgba(0, 0, 0, 0.3);
   display: flex;
   border-radius: 10px;
+  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
 
   .display,
   .header,
@@ -20,11 +21,11 @@ const StyledTagsDisplay = styled.div`
   .flex-row {
     padding: 0.5rem;
     padding: 1rem;
-    border-bottom: 1px solid grey;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
   }
 
   .header {
-    background-color: lightgray;
+    background-color: rgba(0, 0, 0, 0.08);
     border-radius: 8px 8px 0 0;
   }
 
@@ -47,6 +48,7 @@ const StyledTagsDisplay = styled.div`
   .flex-row {
     display: flex;
     justify-content: center;
+    font-size: 0.8rem;
 
     & > * {
       flex: 1;
@@ -54,7 +56,7 @@ const StyledTagsDisplay = styled.div`
       align-items: center;
     }
 
-    .label span {
+    .label button {
       /* TODO Fix stretch */
       display: inline-block;
       padding: 0.1rem 0.5rem;
@@ -62,13 +64,13 @@ const StyledTagsDisplay = styled.div`
       border-radius: 15px;
       font-weight: 700;
       color: #eee;
-      font-size: 0.8rem;
+      box-shadow: none;
+      border: none;
     }
   }
 
   .body .flex-row:last-child {
     border-bottom: none;
-    background-color: rgba(10, 100, 10, 0.5);
     border-radius: 0 0 8px 8px;
   }
 
@@ -81,7 +83,22 @@ const StyledTagsDisplay = styled.div`
       background-color: ${(props) => props.theme.backdrop};
       color: ${(props) => props.theme.primary};
       border-radius: 8px;
-      padding: 0 0.6rem;
+      padding: 0.3rem 0.8rem;
+      font-size: 0.8rem;
+      transition: color 0.4s ease;
+    }
+
+    button:hover {
+      color: ${(props) => props.theme.accent};
+    }
+
+    button:first-child {
+      border-radius: 8px 0 0 8px;
+      border-right: 1px solid white;
+    }
+
+    button:last-child {
+      border-radius: 0 8px 8px 0;
     }
   }
 `;
@@ -110,15 +127,13 @@ const Tags = () => {
       <div className="display">
         <div className="header">
           <div className="title">12 labels</div>
-          <div className="sort">
-            <button>sort</button>
-          </div>
+          <div className="sort">{/* <button>sort</button> */}</div>
         </div>
         <div className="body">
           {data.map((tag) => (
             <div className="flex-row">
               <div className="label">
-                <span>{tag.name}</span>
+                <button>{tag.name}</button>
               </div>
               <div className="description">{tag.description}</div>
               <div className="photoCount">{tag.photoCount}</div>

From 7757247a55424271337b155114701bb00dd19a20 Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Fri, 18 Dec 2020 10:41:23 -0600
Subject: [PATCH 08/31] Conditionally show editing row

---
 tenant-file/portal-app/src/component/Tags.tsx | 52 ++++++++++++++-----
 1 file changed, 40 insertions(+), 12 deletions(-)

diff --git a/tenant-file/portal-app/src/component/Tags.tsx b/tenant-file/portal-app/src/component/Tags.tsx
index 8bc31f3..6766002 100644
--- a/tenant-file/portal-app/src/component/Tags.tsx
+++ b/tenant-file/portal-app/src/component/Tags.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 
 const StyledTagsDisplay = styled.div`
@@ -95,6 +95,7 @@ const StyledTagsDisplay = styled.div`
     button:first-child {
       border-radius: 8px 0 0 8px;
       border-right: 1px solid white;
+      width: 64px;
     }
 
     button:last-child {
@@ -109,39 +110,66 @@ const Tags = () => {
       name: 'Chris',
       description: 'Good guy',
       photoCount: 5,
+      id: 0,
     },
     {
       name: 'Jenn',
       description: 'cool gal',
       photoCount: 4,
+      id: 1,
     },
     {
       name: 'Elvis',
       description: 'Big guy',
       photoCount: 5,
+      id: 2,
     },
   ];
 
+  const [editingRow, setEditingRow] = useState(-1);
+
   return (
     <StyledTagsDisplay>
       <div className="display">
         <div className="header">
-          <div className="title">12 labels</div>
+          <div className="title">{data.length} labels</div>
           <div className="sort">{/* <button>sort</button> */}</div>
         </div>
         <div className="body">
           {data.map((tag) => (
-            <div className="flex-row">
-              <div className="label">
-                <button>{tag.name}</button>
-              </div>
-              <div className="description">{tag.description}</div>
-              <div className="photoCount">{tag.photoCount}</div>
-              <div className="buttons">
-                <button>Edit</button>
-                <button>Delete</button>
+            <>
+              <div className="flex-row" key={tag.id}>
+                <div className="label">
+                  <button>{tag.name}</button>
+                </div>
+                {editingRow !== tag.id && (
+                  <>
+                    <div className="description">{tag.description}</div>
+                    <div className="photoCount">{tag.photoCount}</div>
+                  </>
+                )}
+                <div className="buttons">
+                  <button onClick={() => setEditingRow(tag.id)}>Edit</button>
+                  <button>Delete</button>
+                </div>
               </div>
-            </div>
+
+              {editingRow === tag.id && (
+                <form className="flex-row" onSubmit={() => console.log('ok!')}>
+                  <div className="label">
+                    <button>{tag.name}</button>
+                  </div>
+
+                  <div className="description">{tag.description}</div>
+                  <div className="photoCount">{tag.photoCount}</div>
+
+                  <div className="buttons">
+                    <button onClick={() => setEditingRow(tag.id)}>Edit</button>
+                    <button>Delete</button>
+                  </div>
+                </form>
+              )}
+            </>
           ))}
         </div>
       </div>

From ca0edb477a80164f5ed9cdd5c6b6f8d342073e2c Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Mon, 28 Dec 2020 16:03:20 -0600
Subject: [PATCH 09/31] Implement dynamic text color based on label color
 darkness

---
 tenant-file/portal-app/src/component/Tags.tsx | 32 +++++++++++++++----
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/tenant-file/portal-app/src/component/Tags.tsx b/tenant-file/portal-app/src/component/Tags.tsx
index 6766002..16a2eb3 100644
--- a/tenant-file/portal-app/src/component/Tags.tsx
+++ b/tenant-file/portal-app/src/component/Tags.tsx
@@ -5,10 +5,10 @@ const StyledTagsDisplay = styled.div`
   width: 95%;
   max-width: 1200px;
   margin: 0 auto;
-  border: 1px solid rgba(0, 0, 0, 0.3);
+  /* border: 1px solid rgba(0, 0, 0, 0.3); */
   display: flex;
   border-radius: 10px;
-  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
+  /* box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1); */
 
   .display,
   .header,
@@ -21,12 +21,11 @@ const StyledTagsDisplay = styled.div`
   .flex-row {
     padding: 0.5rem;
     padding: 1rem;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
   }
 
   .header {
     background-color: rgba(0, 0, 0, 0.08);
-    border-radius: 8px 8px 0 0;
+    border-radius: 8px;
   }
 
   .header {
@@ -49,6 +48,7 @@ const StyledTagsDisplay = styled.div`
     display: flex;
     justify-content: center;
     font-size: 0.8rem;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
 
     & > * {
       flex: 1;
@@ -57,13 +57,12 @@ const StyledTagsDisplay = styled.div`
     }
 
     .label button {
-      /* TODO Fix stretch */
       display: inline-block;
       padding: 0.1rem 0.5rem;
       background-color: green;
       border-radius: 15px;
       font-weight: 700;
-      color: #eee;
+      color: rgba(220, 220, 220, 0.5);
       box-shadow: none;
       border: none;
     }
@@ -111,23 +110,34 @@ const Tags = () => {
       description: 'Good guy',
       photoCount: 5,
       id: 0,
+      color: '#7070f8',
     },
     {
       name: 'Jenn',
       description: 'cool gal',
       photoCount: 4,
       id: 1,
+      color: '#eee8aa',
     },
     {
       name: 'Elvis',
       description: 'Big guy',
       photoCount: 5,
       id: 2,
+      color: '#00000',
     },
   ];
 
   const [editingRow, setEditingRow] = useState(-1);
 
+  function isDark(hex: String) {
+    // const hex = colors[colorName].substring(1, 7);
+    const r = parseInt(hex.substring(1, 3), 16);
+    const g = parseInt(hex.substring(3, 5), 16);
+    const b = parseInt(hex.substring(5, 7), 16);
+    return r * 0.299 + g * 0.587 + b * 0.114 < 120;
+  }
+
   return (
     <StyledTagsDisplay>
       <div className="display">
@@ -140,7 +150,14 @@ const Tags = () => {
             <>
               <div className="flex-row" key={tag.id}>
                 <div className="label">
-                  <button>{tag.name}</button>
+                  <button
+                    style={{
+                      backgroundColor: tag.color,
+                      color: isDark(tag.color) ? 'white' : 'black',
+                    }}
+                  >
+                    {tag.name}
+                  </button>
                 </div>
                 {editingRow !== tag.id && (
                   <>
@@ -154,6 +171,7 @@ const Tags = () => {
                 </div>
               </div>
 
+              {/* TODO Create edit tag form */}
               {editingRow === tag.id && (
                 <form className="flex-row" onSubmit={() => console.log('ok!')}>
                   <div className="label">

From 63ad487b08d6f87e2b129175e0d43ab99bf93478 Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Mon, 4 Jan 2021 15:36:32 -0600
Subject: [PATCH 10/31] pull edit and display rows into seperate render methods

---
 tenant-file/portal-app/src/App.tsx            |   2 +-
 .../src/component/{Tags.tsx => TagsPage.tsx}  | 129 ++++++++++++------
 2 files changed, 86 insertions(+), 45 deletions(-)
 rename tenant-file/portal-app/src/component/{Tags.tsx => TagsPage.tsx} (56%)

diff --git a/tenant-file/portal-app/src/App.tsx b/tenant-file/portal-app/src/App.tsx
index 40dcfc1..ca874ab 100644
--- a/tenant-file/portal-app/src/App.tsx
+++ b/tenant-file/portal-app/src/App.tsx
@@ -13,7 +13,7 @@ import Dashboard from './component/dashboard';
 import Properties from './component/properties';
 import Home from './component/home';
 import TenantDetails from './component/tenant-details';
-import Tags from './component/Tags';
+import Tags from './component/TagsPage';
 
 function App() {
   return (
diff --git a/tenant-file/portal-app/src/component/Tags.tsx b/tenant-file/portal-app/src/component/TagsPage.tsx
similarity index 56%
rename from tenant-file/portal-app/src/component/Tags.tsx
rename to tenant-file/portal-app/src/component/TagsPage.tsx
index 16a2eb3..2d4e31f 100644
--- a/tenant-file/portal-app/src/component/Tags.tsx
+++ b/tenant-file/portal-app/src/component/TagsPage.tsx
@@ -103,6 +103,14 @@ const StyledTagsDisplay = styled.div`
   }
 `;
 
+type Tag = {
+  name: string;
+  description: string;
+  photoCount: number;
+  id: number;
+  color: string;
+};
+
 const Tags = () => {
   const data = [
     {
@@ -131,13 +139,84 @@ const Tags = () => {
   const [editingRow, setEditingRow] = useState(-1);
 
   function isDark(hex: String) {
-    // const hex = colors[colorName].substring(1, 7);
     const r = parseInt(hex.substring(1, 3), 16);
     const g = parseInt(hex.substring(3, 5), 16);
     const b = parseInt(hex.substring(5, 7), 16);
     return r * 0.299 + g * 0.587 + b * 0.114 < 120;
   }
 
+  function renderTagRow(tag: Tag) {
+    return (
+      <div className="flex-row" key={tag.id}>
+        <div className="label">
+          <button
+            style={{
+              backgroundColor: tag.color,
+              color: isDark(tag.color) ? 'white' : 'black',
+            }}
+          >
+            {tag.name}
+          </button>
+        </div>
+        {editingRow !== tag.id && (
+          <>
+            <div className="description">{tag.description}</div>
+            <div className="photoCount">{tag.photoCount}</div>
+          </>
+        )}
+        <div className="buttons">
+          <button onClick={() => setEditingRow(tag.id)}>Edit</button>
+          <button>Delete</button>
+        </div>
+      </div>
+    );
+  }
+
+  function renderTagEditingRow(tag: Tag) {
+    return (
+      <>
+        <div className="flex-row" key={tag.id}>
+          <div className="label">
+            <button
+              style={{
+                backgroundColor: tag.color,
+                color: isDark(tag.color) ? 'white' : 'black',
+              }}
+            >
+              {tag.name}
+            </button>
+          </div>
+          {editingRow !== tag.id && (
+            <>
+              <div className="description">{tag.description}</div>
+              <div className="photoCount">{tag.photoCount}</div>
+            </>
+          )}
+          <div className="buttons">
+            <button onClick={() => setEditingRow(tag.id)}>Edit</button>
+            <button>Delete</button>
+          </div>
+        </div>
+
+        {editingRow === tag.id && (
+          <form className="flex-row" onSubmit={() => console.log('ok!')}>
+            <div className="label">
+              <button>{tag.name}</button>
+            </div>
+
+            <div className="description">{tag.description}</div>
+            <div className="photoCount">{tag.photoCount}</div>
+
+            <div className="buttons">
+              <button onClick={() => setEditingRow(tag.id)}>Edit</button>
+              <button>Delete</button>
+            </div>
+          </form>
+        )}
+      </>
+    );
+  }
+
   return (
     <StyledTagsDisplay>
       <div className="display">
@@ -146,49 +225,11 @@ const Tags = () => {
           <div className="sort">{/* <button>sort</button> */}</div>
         </div>
         <div className="body">
-          {data.map((tag) => (
-            <>
-              <div className="flex-row" key={tag.id}>
-                <div className="label">
-                  <button
-                    style={{
-                      backgroundColor: tag.color,
-                      color: isDark(tag.color) ? 'white' : 'black',
-                    }}
-                  >
-                    {tag.name}
-                  </button>
-                </div>
-                {editingRow !== tag.id && (
-                  <>
-                    <div className="description">{tag.description}</div>
-                    <div className="photoCount">{tag.photoCount}</div>
-                  </>
-                )}
-                <div className="buttons">
-                  <button onClick={() => setEditingRow(tag.id)}>Edit</button>
-                  <button>Delete</button>
-                </div>
-              </div>
-
-              {/* TODO Create edit tag form */}
-              {editingRow === tag.id && (
-                <form className="flex-row" onSubmit={() => console.log('ok!')}>
-                  <div className="label">
-                    <button>{tag.name}</button>
-                  </div>
-
-                  <div className="description">{tag.description}</div>
-                  <div className="photoCount">{tag.photoCount}</div>
-
-                  <div className="buttons">
-                    <button onClick={() => setEditingRow(tag.id)}>Edit</button>
-                    <button>Delete</button>
-                  </div>
-                </form>
-              )}
-            </>
-          ))}
+          {data.map((tag) => {
+            return editingRow === tag.id
+              ? renderTagEditingRow(tag)
+              : renderTagRow(tag);
+          })}
         </div>
       </div>
     </StyledTagsDisplay>

From ea134feab115c1d107926a05dcf3de8b106a0dfe Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Mon, 4 Jan 2021 15:54:34 -0600
Subject: [PATCH 11/31] Add color picker

---
 package-lock.json                             | 86 +++++++++++++++++++
 tenant-file/portal-app/package-lock.json      | 54 ++++++++++++
 tenant-file/portal-app/package.json           |  2 +
 .../portal-app/src/component/TagsPage.tsx     | 29 +++----
 4 files changed, 153 insertions(+), 18 deletions(-)
 create mode 100644 package-lock.json

diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..02c7006
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,86 @@
+{
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "@icons/material": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
+      "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw=="
+    },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "lodash": {
+      "version": "4.17.20",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
+      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
+    },
+    "lodash-es": {
+      "version": "4.17.20",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.20.tgz",
+      "integrity": "sha512-JD1COMZsq8maT6mnuz1UMV0jvYD0E0aUsSOdrr1/nAG3dhqQXwRRgeW0cSqH1U43INKcqxaiVIQNOUDld7gRDA=="
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "material-colors": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
+      "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+    },
+    "prop-types": {
+      "version": "15.7.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.8.1"
+      }
+    },
+    "react-color": {
+      "version": "2.19.3",
+      "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz",
+      "integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==",
+      "requires": {
+        "@icons/material": "^0.2.4",
+        "lodash": "^4.17.15",
+        "lodash-es": "^4.17.15",
+        "material-colors": "^1.2.1",
+        "prop-types": "^15.5.10",
+        "reactcss": "^1.2.0",
+        "tinycolor2": "^1.4.1"
+      }
+    },
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "reactcss": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
+      "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==",
+      "requires": {
+        "lodash": "^4.0.1"
+      }
+    },
+    "tinycolor2": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
+      "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA=="
+    }
+  }
+}
diff --git a/tenant-file/portal-app/package-lock.json b/tenant-file/portal-app/package-lock.json
index b2a8c18..3b3917b 100644
--- a/tenant-file/portal-app/package-lock.json
+++ b/tenant-file/portal-app/package-lock.json
@@ -1795,6 +1795,11 @@
         "@hapi/hoek": "^8.3.0"
       }
     },
+    "@icons/material": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
+      "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw=="
+    },
     "@jest/console": {
       "version": "24.9.0",
       "resolved": "https://registry.npmjs.org/@jest/console/-/console-24.9.0.tgz",
@@ -2463,6 +2468,15 @@
         "csstype": "^2.2.0"
       }
     },
+    "@types/react-color": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/react-color/-/react-color-3.0.4.tgz",
+      "integrity": "sha512-EswbYJDF1kkrx93/YU+BbBtb46CCtDMvTiGmcOa/c5PETnwTiSWoseJ1oSWeRl/4rUXkhME9bVURvvPg0W5YQw==",
+      "requires": {
+        "@types/react": "*",
+        "@types/reactcss": "*"
+      }
+    },
     "@types/react-dom": {
       "version": "16.9.7",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.7.tgz",
@@ -2518,6 +2532,14 @@
         "@types/react": "*"
       }
     },
+    "@types/reactcss": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@types/reactcss/-/reactcss-1.2.3.tgz",
+      "integrity": "sha512-d2gQQ0IL6hXLnoRfVYZukQNWHuVsE75DzFTLPUuyyEhJS8G2VvlE+qfQQ91SJjaMqlURRCNIsX7Jcsw6cEuJlA==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/reactstrap": {
       "version": "8.4.2",
       "resolved": "https://registry.npmjs.org/@types/reactstrap/-/reactstrap-8.4.2.tgz",
@@ -9510,6 +9532,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "material-colors": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
+      "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
+    },
     "material-design-lite": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/material-design-lite/-/material-design-lite-1.3.0.tgz",
@@ -12023,6 +12050,20 @@
         "whatwg-fetch": "^3.0.0"
       }
     },
+    "react-color": {
+      "version": "2.19.3",
+      "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz",
+      "integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==",
+      "requires": {
+        "@icons/material": "^0.2.4",
+        "lodash": "^4.17.15",
+        "lodash-es": "^4.17.15",
+        "material-colors": "^1.2.1",
+        "prop-types": "^15.5.10",
+        "reactcss": "^1.2.0",
+        "tinycolor2": "^1.4.1"
+      }
+    },
     "react-dev-utils": {
       "version": "10.2.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.1.tgz",
@@ -12479,6 +12520,14 @@
         "react-lifecycles-compat": "^3.0.4"
       }
     },
+    "reactcss": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
+      "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==",
+      "requires": {
+        "lodash": "^4.0.1"
+      }
+    },
     "reactstrap": {
       "version": "8.4.1",
       "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-8.4.1.tgz",
@@ -14507,6 +14556,11 @@
       "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
       "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
     },
+    "tinycolor2": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
+      "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA=="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
diff --git a/tenant-file/portal-app/package.json b/tenant-file/portal-app/package.json
index 5cf0bae..cf9fb5e 100644
--- a/tenant-file/portal-app/package.json
+++ b/tenant-file/portal-app/package.json
@@ -12,6 +12,7 @@
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
+    "@types/react-color": "^3.0.4",
     "@types/react-dom": "^16.9.0",
     "@types/react-redux": "^7.1.8",
     "@types/react-router-dom": "^5.1.5",
@@ -24,6 +25,7 @@
     "graphql": "^15.3.0",
     "line-awesome": "^1.3.0",
     "react": "^16.13.1",
+    "react-color": "^2.19.3",
     "react-dom": "^16.13.1",
     "react-firebaseui": "^4.1.0",
     "react-redux": "^7.2.0",
diff --git a/tenant-file/portal-app/src/component/TagsPage.tsx b/tenant-file/portal-app/src/component/TagsPage.tsx
index 2d4e31f..885f8b3 100644
--- a/tenant-file/portal-app/src/component/TagsPage.tsx
+++ b/tenant-file/portal-app/src/component/TagsPage.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
+import { TwitterPicker } from 'react-color';
 
 const StyledTagsDisplay = styled.div`
   width: 95%;
@@ -177,24 +178,17 @@ const Tags = () => {
       <>
         <div className="flex-row" key={tag.id}>
           <div className="label">
-            <button
-              style={{
-                backgroundColor: tag.color,
-                color: isDark(tag.color) ? 'white' : 'black',
-              }}
-            >
-              {tag.name}
-            </button>
+            <input type="text" name="name" id="name" />
           </div>
-          {editingRow !== tag.id && (
-            <>
-              <div className="description">{tag.description}</div>
-              <div className="photoCount">{tag.photoCount}</div>
-            </>
-          )}
+
+          <div className="description">
+            <input type="text" name="description" id="description" />
+          </div>
+          <div className="photoCount">Color</div>
+
           <div className="buttons">
-            <button onClick={() => setEditingRow(tag.id)}>Edit</button>
-            <button>Delete</button>
+            <button onClick={() => setEditingRow(-1)}>Save</button>
+            <button onClick={() => setEditingRow(-1)}>Discard</button>
           </div>
         </div>
 
@@ -208,8 +202,7 @@ const Tags = () => {
             <div className="photoCount">{tag.photoCount}</div>
 
             <div className="buttons">
-              <button onClick={() => setEditingRow(tag.id)}>Edit</button>
-              <button>Delete</button>
+              <TwitterPicker />
             </div>
           </form>
         )}

From 77de03ec1f8cedcead6c29f543b9e996d8329103 Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Mon, 4 Jan 2021 18:52:12 -0600
Subject: [PATCH 12/31] Refactor out edit render method to component with state

---
 tenant-file/portal-app/src/App.tsx            |  2 +-
 .../component/{TagsPage.tsx => Tags-Page.tsx} | 28 ++++-----
 .../portal-app/src/component/edit-tag-row.tsx | 62 +++++++++++++++++++
 tenant-file/portal-app/src/utility.ts         |  6 ++
 4 files changed, 81 insertions(+), 17 deletions(-)
 rename tenant-file/portal-app/src/component/{TagsPage.tsx => Tags-Page.tsx} (89%)
 create mode 100644 tenant-file/portal-app/src/component/edit-tag-row.tsx
 create mode 100644 tenant-file/portal-app/src/utility.ts

diff --git a/tenant-file/portal-app/src/App.tsx b/tenant-file/portal-app/src/App.tsx
index ca874ab..c489d9f 100644
--- a/tenant-file/portal-app/src/App.tsx
+++ b/tenant-file/portal-app/src/App.tsx
@@ -13,7 +13,7 @@ import Dashboard from './component/dashboard';
 import Properties from './component/properties';
 import Home from './component/home';
 import TenantDetails from './component/tenant-details';
-import Tags from './component/TagsPage';
+import Tags from './component/Tags-Page';
 
 function App() {
   return (
diff --git a/tenant-file/portal-app/src/component/TagsPage.tsx b/tenant-file/portal-app/src/component/Tags-Page.tsx
similarity index 89%
rename from tenant-file/portal-app/src/component/TagsPage.tsx
rename to tenant-file/portal-app/src/component/Tags-Page.tsx
index 885f8b3..2f0c1fe 100644
--- a/tenant-file/portal-app/src/component/TagsPage.tsx
+++ b/tenant-file/portal-app/src/component/Tags-Page.tsx
@@ -1,6 +1,9 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { TwitterPicker } from 'react-color';
+import EditTagRow from './edit-tag-row';
+import { isDark } from '../utility';
+import { TaggedTemplateExpression } from 'typescript';
 
 const StyledTagsDisplay = styled.div`
   width: 95%;
@@ -139,13 +142,6 @@ const Tags = () => {
 
   const [editingRow, setEditingRow] = useState(-1);
 
-  function isDark(hex: String) {
-    const r = parseInt(hex.substring(1, 3), 16);
-    const g = parseInt(hex.substring(3, 5), 16);
-    const b = parseInt(hex.substring(5, 7), 16);
-    return r * 0.299 + g * 0.587 + b * 0.114 < 120;
-  }
-
   function renderTagRow(tag: Tag) {
     return (
       <div className="flex-row" key={tag.id}>
@@ -159,12 +155,10 @@ const Tags = () => {
             {tag.name}
           </button>
         </div>
-        {editingRow !== tag.id && (
-          <>
-            <div className="description">{tag.description}</div>
-            <div className="photoCount">{tag.photoCount}</div>
-          </>
-        )}
+
+        <div className="description">{tag.description}</div>
+        <div className="photoCount">{tag.photoCount}</div>
+
         <div className="buttons">
           <button onClick={() => setEditingRow(tag.id)}>Edit</button>
           <button>Delete</button>
@@ -219,9 +213,11 @@ const Tags = () => {
         </div>
         <div className="body">
           {data.map((tag) => {
-            return editingRow === tag.id
-              ? renderTagEditingRow(tag)
-              : renderTagRow(tag);
+            return editingRow === tag.id ? (
+              <EditTagRow tag={tag} setEditingRow={setEditingRow} />
+            ) : (
+              renderTagRow(tag)
+            );
           })}
         </div>
       </div>
diff --git a/tenant-file/portal-app/src/component/edit-tag-row.tsx b/tenant-file/portal-app/src/component/edit-tag-row.tsx
new file mode 100644
index 0000000..b202ce7
--- /dev/null
+++ b/tenant-file/portal-app/src/component/edit-tag-row.tsx
@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import { TwitterPicker } from 'react-color';
+import { isDark } from '../utility';
+
+type Tag = {
+  name: string;
+  description: string;
+  photoCount: number;
+  id: number;
+  color: string;
+};
+
+type Props = {
+  tag: Tag;
+  setEditingRow: React.Dispatch<React.SetStateAction<number>>;
+};
+
+const EditTagRow = ({ tag, setEditingRow }: Props) => {
+  const [editTagFields, setEditTagFields] = useState(tag);
+
+  function handleChange() {}
+  return (
+    <>
+      <div className="flex-row" key={tag.id}>
+        <div className="label">
+          <input
+            type="text"
+            name="name"
+            id="name"
+            value={editTagFields.name}
+            onChange={handleChange}
+          ></input>
+        </div>
+
+        <div className="description">
+          <input type="text" name="description" id="description" />
+        </div>
+        <div className="photoCount">Color</div>
+
+        <div className="buttons">
+          <button onClick={() => setEditingRow(-1)}>Save</button>
+          <button onClick={() => setEditingRow(-1)}>Discard</button>
+        </div>
+      </div>
+
+      <form className="flex-row" onSubmit={() => console.log('ok!')}>
+        <div className="label">
+          <button>{tag.name}</button>
+        </div>
+
+        <div className="description">{tag.description}</div>
+        <div className="photoCount">{tag.photoCount}</div>
+
+        <div className="buttons">
+          <TwitterPicker />
+        </div>
+      </form>
+    </>
+  );
+};
+
+export default EditTagRow;
diff --git a/tenant-file/portal-app/src/utility.ts b/tenant-file/portal-app/src/utility.ts
new file mode 100644
index 0000000..13039c4
--- /dev/null
+++ b/tenant-file/portal-app/src/utility.ts
@@ -0,0 +1,6 @@
+export function isDark(hex: String) {
+  const r = parseInt(hex.substring(1, 3), 16);
+  const g = parseInt(hex.substring(3, 5), 16);
+  const b = parseInt(hex.substring(5, 7), 16);
+  return r * 0.299 + g * 0.587 + b * 0.114 < 120;
+}

From 9fceefe209ceb5ea2840a579f6e134e0482330ea Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Mon, 4 Jan 2021 22:39:41 -0600
Subject: [PATCH 13/31] Handle form logic in tag edit component

---
 .../portal-app/src/component/edit-tag-row.tsx | 73 ++++++++++++++-----
 1 file changed, 54 insertions(+), 19 deletions(-)

diff --git a/tenant-file/portal-app/src/component/edit-tag-row.tsx b/tenant-file/portal-app/src/component/edit-tag-row.tsx
index b202ce7..eaea611 100644
--- a/tenant-file/portal-app/src/component/edit-tag-row.tsx
+++ b/tenant-file/portal-app/src/component/edit-tag-row.tsx
@@ -18,11 +18,46 @@ type Props = {
 const EditTagRow = ({ tag, setEditingRow }: Props) => {
   const [editTagFields, setEditTagFields] = useState(tag);
 
-  function handleChange() {}
+  function handleChange(e: React.ChangeEvent) {
+    const target = e.currentTarget as HTMLInputElement;
+    console.log(target.id);
+    setEditTagFields((prevState) => ({
+      ...prevState,
+      [target.id]: target.value,
+    }));
+    console.log(editTagFields);
+  }
+
+  function handleSubmit() {
+    // Perform tag updating magic
+    window.alert(JSON.stringify(editTagFields));
+    setEditingRow(-1);
+  }
+
+  function toggleColorPicker() {}
+
   return (
     <>
       <div className="flex-row" key={tag.id}>
         <div className="label">
+          <button
+            style={{
+              backgroundColor: tag.color,
+              color: isDark(tag.color) ? 'white' : 'black',
+            }}
+          >
+            {tag.name}
+          </button>
+        </div>
+
+        <div className="description"></div>
+        <div className="photoCount"></div>
+
+        <div className="buttons"></div>
+      </div>
+
+      <form className="flex-row" onSubmit={() => console.log('ok!')}>
+        <div>
           <input
             type="text"
             name="name"
@@ -32,27 +67,27 @@ const EditTagRow = ({ tag, setEditingRow }: Props) => {
           ></input>
         </div>
 
-        <div className="description">
-          <input type="text" name="description" id="description" />
-        </div>
-        <div className="photoCount">Color</div>
-
-        <div className="buttons">
-          <button onClick={() => setEditingRow(-1)}>Save</button>
-          <button onClick={() => setEditingRow(-1)}>Discard</button>
+        <div>
+          <input
+            type="text"
+            name="description"
+            id="description"
+            value={editTagFields.description}
+            onChange={handleChange}
+          />
         </div>
-      </div>
-
-      <form className="flex-row" onSubmit={() => console.log('ok!')}>
-        <div className="label">
-          <button>{tag.name}</button>
+        <div onClick={toggleColorPicker}>
+          <input
+            type="text"
+            name="color"
+            id="color"
+            value={editTagFields.color}
+            onChange={handleChange}
+          />
         </div>
-
-        <div className="description">{tag.description}</div>
-        <div className="photoCount">{tag.photoCount}</div>
-
         <div className="buttons">
-          <TwitterPicker />
+          <button onClick={handleSubmit}>Save</button>
+          <button onClick={() => setEditingRow(-1)}>Cancel</button>
         </div>
       </form>
     </>

From 89e06ffe041920b9ff1e6fc3f5ef39cca20db15e Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Mon, 4 Jan 2021 22:55:56 -0600
Subject: [PATCH 14/31] Add dummy tag deletion handler

---
 .../portal-app/src/component/Tags-Page.tsx     |  9 ++++++++-
 .../portal-app/src/component/edit-tag-row.tsx  | 18 +++++++++++++++++-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/tenant-file/portal-app/src/component/Tags-Page.tsx b/tenant-file/portal-app/src/component/Tags-Page.tsx
index 2f0c1fe..e181a2b 100644
--- a/tenant-file/portal-app/src/component/Tags-Page.tsx
+++ b/tenant-file/portal-app/src/component/Tags-Page.tsx
@@ -142,6 +142,13 @@ const Tags = () => {
 
   const [editingRow, setEditingRow] = useState(-1);
 
+  function handleDelete(tagId: number) {
+    if (window.confirm('Do you really want to leave?')) {
+      // Clever and clean solution for deleting tag here
+      window.alert(`deleted tag with id of ${tagId}`);
+    }
+  }
+
   function renderTagRow(tag: Tag) {
     return (
       <div className="flex-row" key={tag.id}>
@@ -161,7 +168,7 @@ const Tags = () => {
 
         <div className="buttons">
           <button onClick={() => setEditingRow(tag.id)}>Edit</button>
-          <button>Delete</button>
+          <button onClick={() => handleDelete(tag.id)}>Delete</button>
         </div>
       </div>
     );
diff --git a/tenant-file/portal-app/src/component/edit-tag-row.tsx b/tenant-file/portal-app/src/component/edit-tag-row.tsx
index eaea611..ddb4156 100644
--- a/tenant-file/portal-app/src/component/edit-tag-row.tsx
+++ b/tenant-file/portal-app/src/component/edit-tag-row.tsx
@@ -17,6 +17,7 @@ type Props = {
 
 const EditTagRow = ({ tag, setEditingRow }: Props) => {
   const [editTagFields, setEditTagFields] = useState(tag);
+  const [showColorPicker, setShowColorPicker] = useState(false);
 
   function handleChange(e: React.ChangeEvent) {
     const target = e.currentTarget as HTMLInputElement;
@@ -34,7 +35,9 @@ const EditTagRow = ({ tag, setEditingRow }: Props) => {
     setEditingRow(-1);
   }
 
-  function toggleColorPicker() {}
+  function toggleColorPicker() {
+    setShowColorPicker(!showColorPicker);
+  }
 
   return (
     <>
@@ -83,7 +86,20 @@ const EditTagRow = ({ tag, setEditingRow }: Props) => {
             id="color"
             value={editTagFields.color}
             onChange={handleChange}
+            onFocus={toggleColorPicker}
           />
+          {showColorPicker && (
+            <div
+              className="color-picker"
+              style={{
+                position: 'absolute',
+                top: '50%',
+                left: 0,
+              }}
+            >
+              <TwitterPicker />
+            </div>
+          )}
         </div>
         <div className="buttons">
           <button onClick={handleSubmit}>Save</button>

From 409dd9d5e55f885f13a289929f7800ed6ebaf894 Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Wed, 6 Jan 2021 17:38:44 -0600
Subject: [PATCH 15/31] Tie color change handler to state

---
 tenant-file/portal-app/src/component/Tags-Page.tsx |  2 +-
 .../portal-app/src/component/edit-tag-row.tsx      | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/tenant-file/portal-app/src/component/Tags-Page.tsx b/tenant-file/portal-app/src/component/Tags-Page.tsx
index e181a2b..37344b1 100644
--- a/tenant-file/portal-app/src/component/Tags-Page.tsx
+++ b/tenant-file/portal-app/src/component/Tags-Page.tsx
@@ -143,7 +143,7 @@ const Tags = () => {
   const [editingRow, setEditingRow] = useState(-1);
 
   function handleDelete(tagId: number) {
-    if (window.confirm('Do you really want to leave?')) {
+    if (window.confirm('Do you really want to delete this tag?')) {
       // Clever and clean solution for deleting tag here
       window.alert(`deleted tag with id of ${tagId}`);
     }
diff --git a/tenant-file/portal-app/src/component/edit-tag-row.tsx b/tenant-file/portal-app/src/component/edit-tag-row.tsx
index ddb4156..58cc7ea 100644
--- a/tenant-file/portal-app/src/component/edit-tag-row.tsx
+++ b/tenant-file/portal-app/src/component/edit-tag-row.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { TwitterPicker } from 'react-color';
+import { TwitterPicker, ColorResult } from 'react-color';
 import { isDark } from '../utility';
 
 type Tag = {
@@ -39,6 +39,12 @@ const EditTagRow = ({ tag, setEditingRow }: Props) => {
     setShowColorPicker(!showColorPicker);
   }
 
+  function hadleColorChangeComplete(color: ColorResult) {
+    setEditTagFields((prevState) => {
+      return { ...prevState, color: color.hex };
+    });
+  }
+
   return (
     <>
       <div className="flex-row" key={tag.id}>
@@ -97,7 +103,11 @@ const EditTagRow = ({ tag, setEditingRow }: Props) => {
                 left: 0,
               }}
             >
-              <TwitterPicker />
+              {/* TODO: Handle color picker */}
+              <TwitterPicker
+                onChangeComplete={hadleColorChangeComplete}
+                color={tag.color}
+              />
             </div>
           )}
         </div>

From a4c284cbec87dc9e724d40ca0e0e386e011f7ec3 Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Wed, 6 Jan 2021 17:40:12 -0600
Subject: [PATCH 16/31] Correct ts warnings

---
 .../portal-app/src/component/Tags-Page.tsx    | 39 -------------------
 1 file changed, 39 deletions(-)

diff --git a/tenant-file/portal-app/src/component/Tags-Page.tsx b/tenant-file/portal-app/src/component/Tags-Page.tsx
index 37344b1..a3ad976 100644
--- a/tenant-file/portal-app/src/component/Tags-Page.tsx
+++ b/tenant-file/portal-app/src/component/Tags-Page.tsx
@@ -1,9 +1,7 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { TwitterPicker } from 'react-color';
 import EditTagRow from './edit-tag-row';
 import { isDark } from '../utility';
-import { TaggedTemplateExpression } from 'typescript';
 
 const StyledTagsDisplay = styled.div`
   width: 95%;
@@ -174,43 +172,6 @@ const Tags = () => {
     );
   }
 
-  function renderTagEditingRow(tag: Tag) {
-    return (
-      <>
-        <div className="flex-row" key={tag.id}>
-          <div className="label">
-            <input type="text" name="name" id="name" />
-          </div>
-
-          <div className="description">
-            <input type="text" name="description" id="description" />
-          </div>
-          <div className="photoCount">Color</div>
-
-          <div className="buttons">
-            <button onClick={() => setEditingRow(-1)}>Save</button>
-            <button onClick={() => setEditingRow(-1)}>Discard</button>
-          </div>
-        </div>
-
-        {editingRow === tag.id && (
-          <form className="flex-row" onSubmit={() => console.log('ok!')}>
-            <div className="label">
-              <button>{tag.name}</button>
-            </div>
-
-            <div className="description">{tag.description}</div>
-            <div className="photoCount">{tag.photoCount}</div>
-
-            <div className="buttons">
-              <TwitterPicker />
-            </div>
-          </form>
-        )}
-      </>
-    );
-  }
-
   return (
     <StyledTagsDisplay>
       <div className="display">

From d011c9e1b1551a4ea9db7b49e84491e0c4fd9f3f Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Wed, 6 Jan 2021 18:02:27 -0600
Subject: [PATCH 17/31] Reflect color change in editing view

---
 .../portal-app/src/component/edit-tag-row.tsx | 43 +++++++++++++------
 1 file changed, 31 insertions(+), 12 deletions(-)

diff --git a/tenant-file/portal-app/src/component/edit-tag-row.tsx b/tenant-file/portal-app/src/component/edit-tag-row.tsx
index 58cc7ea..23dbcf1 100644
--- a/tenant-file/portal-app/src/component/edit-tag-row.tsx
+++ b/tenant-file/portal-app/src/component/edit-tag-row.tsx
@@ -1,6 +1,28 @@
 import React, { useState } from 'react';
 import { TwitterPicker, ColorResult } from 'react-color';
 import { isDark } from '../utility';
+import styled from 'styled-components';
+
+const StyledEditTagRow = styled.form`
+  position: relative;
+
+  .color_section {
+    position: relative;
+  }
+  .color {
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
+    border-radius: 4px;
+    background-color: ${(props) => props.color};
+    position: relative;
+  }
+
+  .color-picker {
+    position: absolute;
+    transform: translate(-5px, 30px);
+  }
+`;
 
 type Tag = {
   name: string;
@@ -65,7 +87,11 @@ const EditTagRow = ({ tag, setEditingRow }: Props) => {
         <div className="buttons"></div>
       </div>
 
-      <form className="flex-row" onSubmit={() => console.log('ok!')}>
+      <StyledEditTagRow
+        color={editTagFields.color}
+        className="flex-row"
+        onSubmit={() => console.log('ok!')}
+      >
         <div>
           <input
             type="text"
@@ -85,15 +111,8 @@ const EditTagRow = ({ tag, setEditingRow }: Props) => {
             onChange={handleChange}
           />
         </div>
-        <div onClick={toggleColorPicker}>
-          <input
-            type="text"
-            name="color"
-            id="color"
-            value={editTagFields.color}
-            onChange={handleChange}
-            onFocus={toggleColorPicker}
-          />
+        <div onClick={toggleColorPicker} className="color_section">
+          <div className="color"></div>
           {showColorPicker && (
             <div
               className="color-picker"
@@ -106,7 +125,7 @@ const EditTagRow = ({ tag, setEditingRow }: Props) => {
               {/* TODO: Handle color picker */}
               <TwitterPicker
                 onChangeComplete={hadleColorChangeComplete}
-                color={tag.color}
+                color={editTagFields.color}
               />
             </div>
           )}
@@ -115,7 +134,7 @@ const EditTagRow = ({ tag, setEditingRow }: Props) => {
           <button onClick={handleSubmit}>Save</button>
           <button onClick={() => setEditingRow(-1)}>Cancel</button>
         </div>
-      </form>
+      </StyledEditTagRow>
     </>
   );
 };

From 6f9c33f60c65b3f30eee7dfc5129aa39a1560569 Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Wed, 6 Jan 2021 21:23:05 -0600
Subject: [PATCH 18/31] Represent tag updates in display

---
 .../portal-app/src/component/Tags-Page.tsx     | 11 +++++++----
 .../portal-app/src/component/edit-tag-row.tsx  | 18 ++++++++++++++++--
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/tenant-file/portal-app/src/component/Tags-Page.tsx b/tenant-file/portal-app/src/component/Tags-Page.tsx
index a3ad976..bf0826e 100644
--- a/tenant-file/portal-app/src/component/Tags-Page.tsx
+++ b/tenant-file/portal-app/src/component/Tags-Page.tsx
@@ -114,7 +114,7 @@ type Tag = {
 };
 
 const Tags = () => {
-  const data = [
+  const [data, setData] = useState([
     {
       name: 'Chris',
       description: 'Good guy',
@@ -136,8 +136,7 @@ const Tags = () => {
       id: 2,
       color: '#00000',
     },
-  ];
-
+  ]);
   const [editingRow, setEditingRow] = useState(-1);
 
   function handleDelete(tagId: number) {
@@ -182,7 +181,11 @@ const Tags = () => {
         <div className="body">
           {data.map((tag) => {
             return editingRow === tag.id ? (
-              <EditTagRow tag={tag} setEditingRow={setEditingRow} />
+              <EditTagRow
+                tag={tag}
+                setEditingRow={setEditingRow}
+                setData={setData}
+              />
             ) : (
               renderTagRow(tag)
             );
diff --git a/tenant-file/portal-app/src/component/edit-tag-row.tsx b/tenant-file/portal-app/src/component/edit-tag-row.tsx
index 23dbcf1..7d7225e 100644
--- a/tenant-file/portal-app/src/component/edit-tag-row.tsx
+++ b/tenant-file/portal-app/src/component/edit-tag-row.tsx
@@ -32,12 +32,21 @@ type Tag = {
   color: string;
 };
 
+type Tags = {
+  name: string;
+  description: string;
+  photoCount: number;
+  id: number;
+  color: string;
+}[];
+
 type Props = {
   tag: Tag;
   setEditingRow: React.Dispatch<React.SetStateAction<number>>;
+  setData: React.Dispatch<React.SetStateAction<Tags>>;
 };
 
-const EditTagRow = ({ tag, setEditingRow }: Props) => {
+const EditTagRow = ({ tag, setEditingRow, setData }: Props) => {
   const [editTagFields, setEditTagFields] = useState(tag);
   const [showColorPicker, setShowColorPicker] = useState(false);
 
@@ -53,7 +62,12 @@ const EditTagRow = ({ tag, setEditingRow }: Props) => {
 
   function handleSubmit() {
     // Perform tag updating magic
-    window.alert(JSON.stringify(editTagFields));
+    setData((prevState) => {
+      // clean this up later
+      const index = prevState.findIndex((item) => item.id === tag.id);
+      prevState[index] = { ...prevState[index], ...editTagFields };
+      return prevState;
+    });
     setEditingRow(-1);
   }
 

From b29763cbd9a391f97a508c6e6aefd393f2d7e099 Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Thu, 7 Jan 2021 13:54:50 -0600
Subject: [PATCH 19/31] Structure out add tag row

---
 .../portal-app/src/component/Tags-Page.tsx    |  61 +++----
 .../portal-app/src/component/add-tag-row.tsx  | 149 ++++++++++++++++++
 2 files changed, 183 insertions(+), 27 deletions(-)
 create mode 100644 tenant-file/portal-app/src/component/add-tag-row.tsx

diff --git a/tenant-file/portal-app/src/component/Tags-Page.tsx b/tenant-file/portal-app/src/component/Tags-Page.tsx
index bf0826e..0edf091 100644
--- a/tenant-file/portal-app/src/component/Tags-Page.tsx
+++ b/tenant-file/portal-app/src/component/Tags-Page.tsx
@@ -1,16 +1,15 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import EditTagRow from './edit-tag-row';
+import AddTagRow from './add-tag-row';
 import { isDark } from '../utility';
 
 const StyledTagsDisplay = styled.div`
   width: 95%;
   max-width: 1200px;
   margin: 0 auto;
-  /* border: 1px solid rgba(0, 0, 0, 0.3); */
   display: flex;
   border-radius: 10px;
-  /* box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1); */
 
   .display,
   .header,
@@ -41,7 +40,7 @@ const StyledTagsDisplay = styled.div`
       font-weight: 700;
     }
 
-    .sort {
+    .add {
       text-align: right;
     }
   }
@@ -105,6 +104,30 @@ const StyledTagsDisplay = styled.div`
   }
 `;
 
+const sampleData = [
+  {
+    name: 'Damages',
+    description: 'Windows, walls, appliance',
+    photoCount: 5,
+    id: 0,
+    color: '#00D084',
+  },
+  {
+    name: 'Conversations',
+    description: 'Records of texts or phone calls',
+    photoCount: 4,
+    id: 1,
+    color: '#0693E3',
+  },
+  {
+    name: 'Documents',
+    description: 'Lease, notices, etc.',
+    photoCount: 5,
+    id: 2,
+    color: '#FF6900',
+  },
+];
+
 type Tag = {
   name: string;
   description: string;
@@ -114,35 +137,16 @@ type Tag = {
 };
 
 const Tags = () => {
-  const [data, setData] = useState([
-    {
-      name: 'Chris',
-      description: 'Good guy',
-      photoCount: 5,
-      id: 0,
-      color: '#7070f8',
-    },
-    {
-      name: 'Jenn',
-      description: 'cool gal',
-      photoCount: 4,
-      id: 1,
-      color: '#eee8aa',
-    },
-    {
-      name: 'Elvis',
-      description: 'Big guy',
-      photoCount: 5,
-      id: 2,
-      color: '#00000',
-    },
-  ]);
+  const [data, setData] = useState(sampleData);
   const [editingRow, setEditingRow] = useState(-1);
 
   function handleDelete(tagId: number) {
     if (window.confirm('Do you really want to delete this tag?')) {
       // Clever and clean solution for deleting tag here
       window.alert(`deleted tag with id of ${tagId}`);
+      setData((prevState) => {
+        return prevState.filter((item) => item.id !== tagId);
+      });
     }
   }
 
@@ -176,9 +180,12 @@ const Tags = () => {
       <div className="display">
         <div className="header">
           <div className="title">{data.length} labels</div>
-          <div className="sort">{/* <button>sort</button> */}</div>
+          <div className="add">
+            <button>+</button>
+          </div>
         </div>
         <div className="body">
+          <AddTagRow setData={setData} />
           {data.map((tag) => {
             return editingRow === tag.id ? (
               <EditTagRow
diff --git a/tenant-file/portal-app/src/component/add-tag-row.tsx b/tenant-file/portal-app/src/component/add-tag-row.tsx
new file mode 100644
index 0000000..3aad576
--- /dev/null
+++ b/tenant-file/portal-app/src/component/add-tag-row.tsx
@@ -0,0 +1,149 @@
+import React, { useState } from 'react';
+import { TwitterPicker, ColorResult } from 'react-color';
+import { isDark } from '../utility';
+import styled from 'styled-components';
+
+const StyledEditTagRow = styled.form`
+  position: relative;
+
+  .color_section {
+    position: relative;
+  }
+  .color {
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
+    border-radius: 4px;
+    background-color: ${(props) => props.color};
+    position: relative;
+  }
+
+  .color-picker {
+    position: absolute;
+    transform: translate(-5px, 30px);
+  }
+`;
+
+type Tags = {
+  name: string;
+  description: string;
+  photoCount: number;
+  id: number;
+  color: string;
+}[];
+
+type Props = {
+  setData: React.Dispatch<React.SetStateAction<Tags>>;
+};
+
+const AddTagRow = ({ setData }: Props) => {
+  const initialState = {
+    name: '',
+    description: '',
+    photoCount: 0,
+    id: Math.floor(Math.random() * 10000),
+    color: 'red',
+  };
+  const [editTagFields, setEditTagFields] = useState(initialState);
+  const [showColorPicker, setShowColorPicker] = useState(false);
+
+  function handleChange(e: React.ChangeEvent) {
+    //   const target = e.currentTarget as HTMLInputElement;
+    //   console.log(target.id);
+    //   setEditTagFields((prevState) => ({
+    //     ...prevState,
+    //     [target.id]: target.value,
+    //   }));
+    //   console.log(editTagFields);
+  }
+
+  function handleSubmit() {
+    // Perform tag updating magic
+    setData((prevState) => {
+      return [editTagFields, ...prevState];
+    });
+  }
+
+  function toggleColorPicker() {
+    setShowColorPicker(!showColorPicker);
+  }
+
+  function hadleColorChangeComplete(color: ColorResult) {
+    setEditTagFields((prevState) => {
+      return { ...prevState, color: color.hex };
+    });
+  }
+
+  return (
+    <>
+      <div className="flex-row" key="add">
+        <div className="label">
+          <button
+            style={{
+              backgroundColor: editTagFields.color,
+              color: isDark(editTagFields.color) ? 'white' : 'black',
+            }}
+          >
+            "New Tag"
+          </button>
+        </div>
+
+        <div className="description"></div>
+        <div className="photoCount"></div>
+
+        <div className="buttons"></div>
+      </div>
+
+      <StyledEditTagRow
+        color={editTagFields.color}
+        className="flex-row"
+        onSubmit={() => console.log('ok!')}
+      >
+        <div>
+          <input
+            type="text"
+            name="name"
+            id="name"
+            value={editTagFields.name}
+            onChange={handleChange}
+          ></input>
+        </div>
+
+        <div>
+          <input
+            type="text"
+            name="description"
+            id="description"
+            value={editTagFields.description}
+            onChange={handleChange}
+          />
+        </div>
+        <div onClick={toggleColorPicker} className="color_section">
+          <div className="color"></div>
+          {showColorPicker && (
+            <div
+              className="color-picker"
+              style={{
+                position: 'absolute',
+                top: '50%',
+                left: 0,
+              }}
+            >
+              {/* TODO: Handle color picker */}
+              <TwitterPicker
+                onChangeComplete={hadleColorChangeComplete}
+                color={editTagFields.color}
+              />
+            </div>
+          )}
+        </div>
+        <div className="buttons">
+          <button onClick={handleSubmit}>Save</button>
+          <button onClick={() => console.log('closing')}>Cancel</button>
+        </div>
+      </StyledEditTagRow>
+    </>
+  );
+};
+
+export default AddTagRow;

From 51d9e541102eabaf89f84fc6c5243a4b26a22082 Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Thu, 7 Jan 2021 20:53:23 -0600
Subject: [PATCH 20/31] Hook up submit new tag function to state

---
 .../portal-app/src/component/add-tag-row.tsx  | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/tenant-file/portal-app/src/component/add-tag-row.tsx b/tenant-file/portal-app/src/component/add-tag-row.tsx
index 3aad576..e473ff1 100644
--- a/tenant-file/portal-app/src/component/add-tag-row.tsx
+++ b/tenant-file/portal-app/src/component/add-tag-row.tsx
@@ -48,16 +48,19 @@ const AddTagRow = ({ setData }: Props) => {
   const [showColorPicker, setShowColorPicker] = useState(false);
 
   function handleChange(e: React.ChangeEvent) {
-    //   const target = e.currentTarget as HTMLInputElement;
-    //   console.log(target.id);
-    //   setEditTagFields((prevState) => ({
-    //     ...prevState,
-    //     [target.id]: target.value,
-    //   }));
-    //   console.log(editTagFields);
+    const target = e.currentTarget as HTMLInputElement;
+    console.log(target.id);
+    setEditTagFields((prevState) => {
+      return {
+        ...prevState,
+        [target.id]: target.value,
+      };
+    });
+    console.log(editTagFields);
   }
 
-  function handleSubmit() {
+  function handleSubmit(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
+    e.preventDefault();
     // Perform tag updating magic
     setData((prevState) => {
       return [editTagFields, ...prevState];

From d8f2934c0fb78a2785f988af37af2eb90083d1a5 Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Thu, 7 Jan 2021 20:59:47 -0600
Subject: [PATCH 21/31] Handle add tag cleanup

---
 tenant-file/portal-app/src/component/Tags-Page.tsx  | 11 +++++++++--
 .../portal-app/src/component/add-tag-row.tsx        | 13 ++++++++++---
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/tenant-file/portal-app/src/component/Tags-Page.tsx b/tenant-file/portal-app/src/component/Tags-Page.tsx
index 0edf091..64765f3 100644
--- a/tenant-file/portal-app/src/component/Tags-Page.tsx
+++ b/tenant-file/portal-app/src/component/Tags-Page.tsx
@@ -139,6 +139,11 @@ type Tag = {
 const Tags = () => {
   const [data, setData] = useState(sampleData);
   const [editingRow, setEditingRow] = useState(-1);
+  const [isAddTagShowing, setIsAddTagShowing] = useState(false);
+
+  function toggleAddTag() {
+    setIsAddTagShowing(!isAddTagShowing);
+  }
 
   function handleDelete(tagId: number) {
     if (window.confirm('Do you really want to delete this tag?')) {
@@ -181,11 +186,13 @@ const Tags = () => {
         <div className="header">
           <div className="title">{data.length} labels</div>
           <div className="add">
-            <button>+</button>
+            <button onClick={toggleAddTag}>+</button>
           </div>
         </div>
         <div className="body">
-          <AddTagRow setData={setData} />
+          {isAddTagShowing && (
+            <AddTagRow setData={setData} toggleAddTag={toggleAddTag} />
+          )}
           {data.map((tag) => {
             return editingRow === tag.id ? (
               <EditTagRow
diff --git a/tenant-file/portal-app/src/component/add-tag-row.tsx b/tenant-file/portal-app/src/component/add-tag-row.tsx
index e473ff1..dd34a58 100644
--- a/tenant-file/portal-app/src/component/add-tag-row.tsx
+++ b/tenant-file/portal-app/src/component/add-tag-row.tsx
@@ -34,15 +34,16 @@ type Tags = {
 
 type Props = {
   setData: React.Dispatch<React.SetStateAction<Tags>>;
+  toggleAddTag: () => void;
 };
 
-const AddTagRow = ({ setData }: Props) => {
+const AddTagRow = ({ setData, toggleAddTag }: Props) => {
   const initialState = {
     name: '',
     description: '',
     photoCount: 0,
     id: Math.floor(Math.random() * 10000),
-    color: 'red',
+    color: '#F78DA7',
   };
   const [editTagFields, setEditTagFields] = useState(initialState);
   const [showColorPicker, setShowColorPicker] = useState(false);
@@ -65,6 +66,7 @@ const AddTagRow = ({ setData }: Props) => {
     setData((prevState) => {
       return [editTagFields, ...prevState];
     });
+    toggleAddTag();
   }
 
   function toggleColorPicker() {
@@ -77,6 +79,11 @@ const AddTagRow = ({ setData }: Props) => {
     });
   }
 
+  function cancelAddTag() {
+    setEditTagFields(initialState);
+    toggleAddTag();
+  }
+
   return (
     <>
       <div className="flex-row" key="add">
@@ -142,7 +149,7 @@ const AddTagRow = ({ setData }: Props) => {
         </div>
         <div className="buttons">
           <button onClick={handleSubmit}>Save</button>
-          <button onClick={() => console.log('closing')}>Cancel</button>
+          <button onClick={cancelAddTag}>Cancel</button>
         </div>
       </StyledEditTagRow>
     </>

From af21d651fc5f160e4b661560e90a7b57dcdf01a1 Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Thu, 7 Jan 2021 21:19:22 -0600
Subject: [PATCH 22/31] Clean logs

---
 .../portal-app/src/component/Tags-Page.tsx      | 13 +++++--------
 .../portal-app/src/component/add-tag-row.tsx    | 17 ++++-------------
 .../portal-app/src/component/edit-tag-row.tsx   |  9 +++------
 3 files changed, 12 insertions(+), 27 deletions(-)

diff --git a/tenant-file/portal-app/src/component/Tags-Page.tsx b/tenant-file/portal-app/src/component/Tags-Page.tsx
index 64765f3..36266bb 100644
--- a/tenant-file/portal-app/src/component/Tags-Page.tsx
+++ b/tenant-file/portal-app/src/component/Tags-Page.tsx
@@ -25,12 +25,9 @@ const StyledTagsDisplay = styled.div`
   }
 
   .header {
+    display: flex;
     background-color: rgba(0, 0, 0, 0.08);
     border-radius: 8px;
-  }
-
-  .header {
-    display: flex;
 
     & > * {
       flex: 1;
@@ -137,7 +134,9 @@ type Tag = {
 };
 
 const Tags = () => {
+  // Sample data stored here. Can be swapped with redux or other method later.
   const [data, setData] = useState(sampleData);
+  // Editing row shows on whichever tag id is stored in this state. Setting to -1 shows no editing row.
   const [editingRow, setEditingRow] = useState(-1);
   const [isAddTagShowing, setIsAddTagShowing] = useState(false);
 
@@ -148,10 +147,10 @@ const Tags = () => {
   function handleDelete(tagId: number) {
     if (window.confirm('Do you really want to delete this tag?')) {
       // Clever and clean solution for deleting tag here
-      window.alert(`deleted tag with id of ${tagId}`);
       setData((prevState) => {
         return prevState.filter((item) => item.id !== tagId);
       });
+      window.alert(`deleted tag with id of ${tagId}`);
     }
   }
 
@@ -168,10 +167,8 @@ const Tags = () => {
             {tag.name}
           </button>
         </div>
-
         <div className="description">{tag.description}</div>
         <div className="photoCount">{tag.photoCount}</div>
-
         <div className="buttons">
           <button onClick={() => setEditingRow(tag.id)}>Edit</button>
           <button onClick={() => handleDelete(tag.id)}>Delete</button>
@@ -184,7 +181,7 @@ const Tags = () => {
     <StyledTagsDisplay>
       <div className="display">
         <div className="header">
-          <div className="title">{data.length} labels</div>
+          <div className="title">{data.length} Tags</div>
           <div className="add">
             <button onClick={toggleAddTag}>+</button>
           </div>
diff --git a/tenant-file/portal-app/src/component/add-tag-row.tsx b/tenant-file/portal-app/src/component/add-tag-row.tsx
index dd34a58..16d913e 100644
--- a/tenant-file/portal-app/src/component/add-tag-row.tsx
+++ b/tenant-file/portal-app/src/component/add-tag-row.tsx
@@ -20,7 +20,8 @@ const StyledEditTagRow = styled.form`
 
   .color-picker {
     position: absolute;
-    transform: translate(-5px, 30px);
+    transform: translate(-5px, 80px);
+    z-index: 4;
   }
 `;
 
@@ -50,19 +51,17 @@ const AddTagRow = ({ setData, toggleAddTag }: Props) => {
 
   function handleChange(e: React.ChangeEvent) {
     const target = e.currentTarget as HTMLInputElement;
-    console.log(target.id);
     setEditTagFields((prevState) => {
       return {
         ...prevState,
         [target.id]: target.value,
       };
     });
-    console.log(editTagFields);
   }
 
   function handleSubmit(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
+    // Perform tag updating magic here
     e.preventDefault();
-    // Perform tag updating magic
     setData((prevState) => {
       return [editTagFields, ...prevState];
     });
@@ -131,15 +130,7 @@ const AddTagRow = ({ setData, toggleAddTag }: Props) => {
         <div onClick={toggleColorPicker} className="color_section">
           <div className="color"></div>
           {showColorPicker && (
-            <div
-              className="color-picker"
-              style={{
-                position: 'absolute',
-                top: '50%',
-                left: 0,
-              }}
-            >
-              {/* TODO: Handle color picker */}
+            <div className="color-picker">
               <TwitterPicker
                 onChangeComplete={hadleColorChangeComplete}
                 color={editTagFields.color}
diff --git a/tenant-file/portal-app/src/component/edit-tag-row.tsx b/tenant-file/portal-app/src/component/edit-tag-row.tsx
index 7d7225e..f2bb6ab 100644
--- a/tenant-file/portal-app/src/component/edit-tag-row.tsx
+++ b/tenant-file/portal-app/src/component/edit-tag-row.tsx
@@ -20,7 +20,7 @@ const StyledEditTagRow = styled.form`
 
   .color-picker {
     position: absolute;
-    transform: translate(-5px, 30px);
+    transform: translate(-5px, 35px);
   }
 `;
 
@@ -52,18 +52,15 @@ const EditTagRow = ({ tag, setEditingRow, setData }: Props) => {
 
   function handleChange(e: React.ChangeEvent) {
     const target = e.currentTarget as HTMLInputElement;
-    console.log(target.id);
     setEditTagFields((prevState) => ({
       ...prevState,
       [target.id]: target.value,
     }));
-    console.log(editTagFields);
   }
 
   function handleSubmit() {
-    // Perform tag updating magic
+    // Perform tag updating magic here
     setData((prevState) => {
-      // clean this up later
       const index = prevState.findIndex((item) => item.id === tag.id);
       prevState[index] = { ...prevState[index], ...editTagFields };
       return prevState;
@@ -136,7 +133,6 @@ const EditTagRow = ({ tag, setEditingRow, setData }: Props) => {
                 left: 0,
               }}
             >
-              {/* TODO: Handle color picker */}
               <TwitterPicker
                 onChangeComplete={hadleColorChangeComplete}
                 color={editTagFields.color}
@@ -146,6 +142,7 @@ const EditTagRow = ({ tag, setEditingRow, setData }: Props) => {
         </div>
         <div className="buttons">
           <button onClick={handleSubmit}>Save</button>
+          {/* Closes edit row */}
           <button onClick={() => setEditingRow(-1)}>Cancel</button>
         </div>
       </StyledEditTagRow>

From 6e51e38f66170646a4f8e7596ebe0256f8b8d94e Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Fri, 8 Jan 2021 14:32:09 -0600
Subject: [PATCH 23/31] Extract tag into reusable component

---
 .../portal-app/src/component/Tags-Page.tsx    | 21 ++----------
 .../portal-app/src/component/add-tag-row.tsx  | 14 +++-----
 .../portal-app/src/component/edit-tag-row.tsx | 12 ++-----
 tenant-file/portal-app/src/component/tag.tsx  | 34 +++++++++++++++++++
 4 files changed, 44 insertions(+), 37 deletions(-)
 create mode 100644 tenant-file/portal-app/src/component/tag.tsx

diff --git a/tenant-file/portal-app/src/component/Tags-Page.tsx b/tenant-file/portal-app/src/component/Tags-Page.tsx
index 36266bb..ce66e8f 100644
--- a/tenant-file/portal-app/src/component/Tags-Page.tsx
+++ b/tenant-file/portal-app/src/component/Tags-Page.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import EditTagRow from './edit-tag-row';
 import AddTagRow from './add-tag-row';
+import Tag from './tag';
 import { isDark } from '../utility';
 
 const StyledTagsDisplay = styled.div`
@@ -53,17 +54,6 @@ const StyledTagsDisplay = styled.div`
       display: flex;
       align-items: center;
     }
-
-    .label button {
-      display: inline-block;
-      padding: 0.1rem 0.5rem;
-      background-color: green;
-      border-radius: 15px;
-      font-weight: 700;
-      color: rgba(220, 220, 220, 0.5);
-      box-shadow: none;
-      border: none;
-    }
   }
 
   .body .flex-row:last-child {
@@ -158,14 +148,7 @@ const Tags = () => {
     return (
       <div className="flex-row" key={tag.id}>
         <div className="label">
-          <button
-            style={{
-              backgroundColor: tag.color,
-              color: isDark(tag.color) ? 'white' : 'black',
-            }}
-          >
-            {tag.name}
-          </button>
+          <Tag tag={tag} />
         </div>
         <div className="description">{tag.description}</div>
         <div className="photoCount">{tag.photoCount}</div>
diff --git a/tenant-file/portal-app/src/component/add-tag-row.tsx b/tenant-file/portal-app/src/component/add-tag-row.tsx
index 16d913e..6b9bc7e 100644
--- a/tenant-file/portal-app/src/component/add-tag-row.tsx
+++ b/tenant-file/portal-app/src/component/add-tag-row.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { TwitterPicker, ColorResult } from 'react-color';
+import Tag from './tag';
 import { isDark } from '../utility';
 import styled from 'styled-components';
 
@@ -40,7 +41,7 @@ type Props = {
 
 const AddTagRow = ({ setData, toggleAddTag }: Props) => {
   const initialState = {
-    name: '',
+    name: 'New Tag',
     description: '',
     photoCount: 0,
     id: Math.floor(Math.random() * 10000),
@@ -87,14 +88,7 @@ const AddTagRow = ({ setData, toggleAddTag }: Props) => {
     <>
       <div className="flex-row" key="add">
         <div className="label">
-          <button
-            style={{
-              backgroundColor: editTagFields.color,
-              color: isDark(editTagFields.color) ? 'white' : 'black',
-            }}
-          >
-            "New Tag"
-          </button>
+          <Tag tag={editTagFields} />
         </div>
 
         <div className="description"></div>
@@ -115,6 +109,7 @@ const AddTagRow = ({ setData, toggleAddTag }: Props) => {
             id="name"
             value={editTagFields.name}
             onChange={handleChange}
+            placeholder="Name"
           ></input>
         </div>
 
@@ -125,6 +120,7 @@ const AddTagRow = ({ setData, toggleAddTag }: Props) => {
             id="description"
             value={editTagFields.description}
             onChange={handleChange}
+            placeholder="Description"
           />
         </div>
         <div onClick={toggleColorPicker} className="color_section">
diff --git a/tenant-file/portal-app/src/component/edit-tag-row.tsx b/tenant-file/portal-app/src/component/edit-tag-row.tsx
index f2bb6ab..8413d5d 100644
--- a/tenant-file/portal-app/src/component/edit-tag-row.tsx
+++ b/tenant-file/portal-app/src/component/edit-tag-row.tsx
@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import { TwitterPicker, ColorResult } from 'react-color';
-import { isDark } from '../utility';
 import styled from 'styled-components';
+import Tag from './tag';
+import { isDark } from '../utility';
 
 const StyledEditTagRow = styled.form`
   position: relative;
@@ -82,14 +83,7 @@ const EditTagRow = ({ tag, setEditingRow, setData }: Props) => {
     <>
       <div className="flex-row" key={tag.id}>
         <div className="label">
-          <button
-            style={{
-              backgroundColor: tag.color,
-              color: isDark(tag.color) ? 'white' : 'black',
-            }}
-          >
-            {tag.name}
-          </button>
+          <Tag tag={tag} />
         </div>
 
         <div className="description"></div>
diff --git a/tenant-file/portal-app/src/component/tag.tsx b/tenant-file/portal-app/src/component/tag.tsx
new file mode 100644
index 0000000..08ca3b5
--- /dev/null
+++ b/tenant-file/portal-app/src/component/tag.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import styled from 'styled-components';
+import { isDark } from '../utility';
+
+const StyledTag = styled.button`
+  display: inline-block;
+  padding: 0.1rem 0.5rem;
+  background-color: ${(props) => props.color};
+  border-radius: 15px;
+  font-weight: 700;
+  color: ${(props) => {
+    return isDark(props.color!) ? 'white' : 'black';
+  }};
+  box-shadow: none;
+  border: none;
+`;
+
+type Tag = {
+  name: string;
+  description: string;
+  photoCount: number;
+  id: number;
+  color: string;
+};
+
+type Props = {
+  tag: Tag;
+};
+
+const tag = ({ tag }: Props) => {
+  return <StyledTag color={tag.color}>{tag.name}</StyledTag>;
+};
+
+export default tag;

From a8975ca62c91421dc5668fe702511ca6bc275ced Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Fri, 8 Jan 2021 15:48:30 -0600
Subject: [PATCH 24/31] Style add tag button

---
 .../portal-app/src/component/Tags-Page.tsx    | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/tenant-file/portal-app/src/component/Tags-Page.tsx b/tenant-file/portal-app/src/component/Tags-Page.tsx
index ce66e8f..f9ba2f5 100644
--- a/tenant-file/portal-app/src/component/Tags-Page.tsx
+++ b/tenant-file/portal-app/src/component/Tags-Page.tsx
@@ -40,6 +40,28 @@ const StyledTagsDisplay = styled.div`
 
     .add {
       text-align: right;
+
+      button {
+        width: 30px;
+        height: 30px;
+        border: none;
+        border-radius: 50%;
+        background-color: rgba(0, 0, 0, 0.04);
+        text-align: center;
+        position: relative;
+        transition: background-color ease 0.4s;
+
+        &:hover {
+          background-color: rgba(0, 0, 0, 0.4);
+        }
+
+        span {
+          display: block;
+          position: absolute;
+          top: 2px;
+          left: 10px;
+        }
+      }
     }
   }
 
@@ -166,7 +188,9 @@ const Tags = () => {
         <div className="header">
           <div className="title">{data.length} Tags</div>
           <div className="add">
-            <button onClick={toggleAddTag}>+</button>
+            <button onClick={toggleAddTag}>
+              <span>+</span>
+            </button>
           </div>
         </div>
         <div className="body">

From e07d5f58dc844ad93f4dbb99a32bd30bef75e0a5 Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Fri, 8 Jan 2021 16:25:34 -0600
Subject: [PATCH 25/31] Clean unused function calls

---
 tenant-file/portal-app/src/component/Tags-Page.tsx    | 1 -
 tenant-file/portal-app/src/component/add-tag-row.tsx  | 1 -
 tenant-file/portal-app/src/component/edit-tag-row.tsx | 1 -
 3 files changed, 3 deletions(-)

diff --git a/tenant-file/portal-app/src/component/Tags-Page.tsx b/tenant-file/portal-app/src/component/Tags-Page.tsx
index f9ba2f5..5809b67 100644
--- a/tenant-file/portal-app/src/component/Tags-Page.tsx
+++ b/tenant-file/portal-app/src/component/Tags-Page.tsx
@@ -3,7 +3,6 @@ import styled from 'styled-components';
 import EditTagRow from './edit-tag-row';
 import AddTagRow from './add-tag-row';
 import Tag from './tag';
-import { isDark } from '../utility';
 
 const StyledTagsDisplay = styled.div`
   width: 95%;
diff --git a/tenant-file/portal-app/src/component/add-tag-row.tsx b/tenant-file/portal-app/src/component/add-tag-row.tsx
index 6b9bc7e..534e958 100644
--- a/tenant-file/portal-app/src/component/add-tag-row.tsx
+++ b/tenant-file/portal-app/src/component/add-tag-row.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { TwitterPicker, ColorResult } from 'react-color';
 import Tag from './tag';
-import { isDark } from '../utility';
 import styled from 'styled-components';
 
 const StyledEditTagRow = styled.form`
diff --git a/tenant-file/portal-app/src/component/edit-tag-row.tsx b/tenant-file/portal-app/src/component/edit-tag-row.tsx
index 8413d5d..ecc94a9 100644
--- a/tenant-file/portal-app/src/component/edit-tag-row.tsx
+++ b/tenant-file/portal-app/src/component/edit-tag-row.tsx
@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import { TwitterPicker, ColorResult } from 'react-color';
 import styled from 'styled-components';
 import Tag from './tag';
-import { isDark } from '../utility';
 
 const StyledEditTagRow = styled.form`
   position: relative;

From ca94e2538a8dee53e798c861d1443e63349af0a7 Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Fri, 8 Jan 2021 17:43:28 -0600
Subject: [PATCH 26/31] Pull EditTagRow styles to shared folder

---
 .../portal-app/src/component/add-tag-row.tsx  | 24 +-----------------
 .../portal-app/src/component/edit-tag-row.tsx | 23 +----------------
 .../src/component/styles/TagEditRow.tsx       | 25 +++++++++++++++++++
 3 files changed, 27 insertions(+), 45 deletions(-)
 create mode 100644 tenant-file/portal-app/src/component/styles/TagEditRow.tsx

diff --git a/tenant-file/portal-app/src/component/add-tag-row.tsx b/tenant-file/portal-app/src/component/add-tag-row.tsx
index 534e958..108175a 100644
--- a/tenant-file/portal-app/src/component/add-tag-row.tsx
+++ b/tenant-file/portal-app/src/component/add-tag-row.tsx
@@ -1,29 +1,7 @@
 import React, { useState } from 'react';
 import { TwitterPicker, ColorResult } from 'react-color';
 import Tag from './tag';
-import styled from 'styled-components';
-
-const StyledEditTagRow = styled.form`
-  position: relative;
-
-  .color_section {
-    position: relative;
-  }
-  .color {
-    width: 30px;
-    height: 30px;
-    cursor: pointer;
-    border-radius: 4px;
-    background-color: ${(props) => props.color};
-    position: relative;
-  }
-
-  .color-picker {
-    position: absolute;
-    transform: translate(-5px, 80px);
-    z-index: 4;
-  }
-`;
+import StyledEditTagRow from './styles/TagEditRow';
 
 type Tags = {
   name: string;
diff --git a/tenant-file/portal-app/src/component/edit-tag-row.tsx b/tenant-file/portal-app/src/component/edit-tag-row.tsx
index ecc94a9..89cad8a 100644
--- a/tenant-file/portal-app/src/component/edit-tag-row.tsx
+++ b/tenant-file/portal-app/src/component/edit-tag-row.tsx
@@ -1,29 +1,8 @@
 import React, { useState } from 'react';
 import { TwitterPicker, ColorResult } from 'react-color';
-import styled from 'styled-components';
+import StyledEditTagRow from './styles/TagEditRow';
 import Tag from './tag';
 
-const StyledEditTagRow = styled.form`
-  position: relative;
-
-  .color_section {
-    position: relative;
-  }
-  .color {
-    width: 30px;
-    height: 30px;
-    cursor: pointer;
-    border-radius: 4px;
-    background-color: ${(props) => props.color};
-    position: relative;
-  }
-
-  .color-picker {
-    position: absolute;
-    transform: translate(-5px, 35px);
-  }
-`;
-
 type Tag = {
   name: string;
   description: string;
diff --git a/tenant-file/portal-app/src/component/styles/TagEditRow.tsx b/tenant-file/portal-app/src/component/styles/TagEditRow.tsx
new file mode 100644
index 0000000..a73ffcb
--- /dev/null
+++ b/tenant-file/portal-app/src/component/styles/TagEditRow.tsx
@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+const StyledEditTagRow = styled.form`
+  position: relative;
+
+  .color_section {
+    position: relative;
+  }
+  .color {
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
+    border-radius: 4px;
+    background-color: ${(props) => props.color};
+    position: relative;
+  }
+
+  .color-picker {
+    position: absolute;
+    transform: translate(-5px, 80px);
+    z-index: 4;
+  }
+`;
+
+export default StyledEditTagRow;

From 5dbddcbf10748a2f34d9aa656c6e863863cc4726 Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Fri, 8 Jan 2021 17:50:01 -0600
Subject: [PATCH 27/31] Reorganize files - pull out styles and pages to own
 directories

---
 tenant-file/portal-app/src/App.tsx            |   2 +-
 .../portal-app/src/component/styles/Tag.tsx   |  17 +++
 .../src/component/styles/TagsPage.tsx         | 111 +++++++++++++++++
 tenant-file/portal-app/src/component/tag.tsx  |  16 +--
 .../src/{component => pages}/Tags-Page.tsx    | 116 +-----------------
 5 files changed, 134 insertions(+), 128 deletions(-)
 create mode 100644 tenant-file/portal-app/src/component/styles/Tag.tsx
 create mode 100644 tenant-file/portal-app/src/component/styles/TagsPage.tsx
 rename tenant-file/portal-app/src/{component => pages}/Tags-Page.tsx (57%)

diff --git a/tenant-file/portal-app/src/App.tsx b/tenant-file/portal-app/src/App.tsx
index c489d9f..a8a76a8 100644
--- a/tenant-file/portal-app/src/App.tsx
+++ b/tenant-file/portal-app/src/App.tsx
@@ -13,7 +13,7 @@ import Dashboard from './component/dashboard';
 import Properties from './component/properties';
 import Home from './component/home';
 import TenantDetails from './component/tenant-details';
-import Tags from './component/Tags-Page';
+import Tags from './pages/Tags-Page';
 
 function App() {
   return (
diff --git a/tenant-file/portal-app/src/component/styles/Tag.tsx b/tenant-file/portal-app/src/component/styles/Tag.tsx
new file mode 100644
index 0000000..b450208
--- /dev/null
+++ b/tenant-file/portal-app/src/component/styles/Tag.tsx
@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import { isDark } from '../../utility';
+
+const StyledTag = styled.button`
+  display: inline-block;
+  padding: 0.1rem 0.5rem;
+  background-color: ${(props) => props.color};
+  border-radius: 15px;
+  font-weight: 700;
+  color: ${(props) => {
+    return isDark(props.color!) ? 'white' : 'black';
+  }};
+  box-shadow: none;
+  border: none;
+`;
+
+export default StyledTag;
diff --git a/tenant-file/portal-app/src/component/styles/TagsPage.tsx b/tenant-file/portal-app/src/component/styles/TagsPage.tsx
new file mode 100644
index 0000000..8eb8467
--- /dev/null
+++ b/tenant-file/portal-app/src/component/styles/TagsPage.tsx
@@ -0,0 +1,111 @@
+import styled from 'styled-components';
+
+const StyledTagsDisplay = styled.div`
+  width: 95%;
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  border-radius: 10px;
+
+  .display,
+  .header,
+  .body,
+  .flex-row {
+    width: 100%;
+  }
+
+  .header,
+  .flex-row {
+    padding: 0.5rem;
+    padding: 1rem;
+  }
+
+  .header {
+    display: flex;
+    background-color: rgba(0, 0, 0, 0.08);
+    border-radius: 8px;
+
+    & > * {
+      flex: 1;
+    }
+
+    .title {
+      font-weight: 700;
+    }
+
+    .add {
+      text-align: right;
+
+      button {
+        width: 30px;
+        height: 30px;
+        border: none;
+        border-radius: 50%;
+        background-color: rgba(0, 0, 0, 0.04);
+        text-align: center;
+        position: relative;
+        transition: background-color ease 0.4s;
+
+        &:hover {
+          background-color: rgba(0, 0, 0, 0.4);
+        }
+
+        span {
+          display: block;
+          position: absolute;
+          top: 2px;
+          left: 10px;
+        }
+      }
+    }
+  }
+
+  .flex-row {
+    display: flex;
+    justify-content: center;
+    font-size: 0.8rem;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+
+    & > * {
+      flex: 1;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .body .flex-row:last-child {
+    border-bottom: none;
+    border-radius: 0 0 8px 8px;
+  }
+
+  .buttons {
+    justify-content: flex-end;
+
+    button {
+      border: none;
+      box-shadow: none;
+      background-color: ${(props) => props.theme.backdrop};
+      color: ${(props) => props.theme.primary};
+      border-radius: 8px;
+      padding: 0.3rem 0.8rem;
+      font-size: 0.8rem;
+      transition: color 0.4s ease;
+    }
+
+    button:hover {
+      color: ${(props) => props.theme.accent};
+    }
+
+    button:first-child {
+      border-radius: 8px 0 0 8px;
+      border-right: 1px solid white;
+      width: 64px;
+    }
+
+    button:last-child {
+      border-radius: 0 8px 8px 0;
+    }
+  }
+`;
+
+export default StyledTagsDisplay;
diff --git a/tenant-file/portal-app/src/component/tag.tsx b/tenant-file/portal-app/src/component/tag.tsx
index 08ca3b5..f92d9d8 100644
--- a/tenant-file/portal-app/src/component/tag.tsx
+++ b/tenant-file/portal-app/src/component/tag.tsx
@@ -1,19 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
-import { isDark } from '../utility';
-
-const StyledTag = styled.button`
-  display: inline-block;
-  padding: 0.1rem 0.5rem;
-  background-color: ${(props) => props.color};
-  border-radius: 15px;
-  font-weight: 700;
-  color: ${(props) => {
-    return isDark(props.color!) ? 'white' : 'black';
-  }};
-  box-shadow: none;
-  border: none;
-`;
+import StyledTag from './styles/Tag';
 
 type Tag = {
   name: string;
diff --git a/tenant-file/portal-app/src/component/Tags-Page.tsx b/tenant-file/portal-app/src/pages/Tags-Page.tsx
similarity index 57%
rename from tenant-file/portal-app/src/component/Tags-Page.tsx
rename to tenant-file/portal-app/src/pages/Tags-Page.tsx
index 5809b67..6f2f161 100644
--- a/tenant-file/portal-app/src/component/Tags-Page.tsx
+++ b/tenant-file/portal-app/src/pages/Tags-Page.tsx
@@ -1,116 +1,8 @@
 import React, { useState } from 'react';
-import styled from 'styled-components';
-import EditTagRow from './edit-tag-row';
-import AddTagRow from './add-tag-row';
-import Tag from './tag';
-
-const StyledTagsDisplay = styled.div`
-  width: 95%;
-  max-width: 1200px;
-  margin: 0 auto;
-  display: flex;
-  border-radius: 10px;
-
-  .display,
-  .header,
-  .body,
-  .flex-row {
-    width: 100%;
-  }
-
-  .header,
-  .flex-row {
-    padding: 0.5rem;
-    padding: 1rem;
-  }
-
-  .header {
-    display: flex;
-    background-color: rgba(0, 0, 0, 0.08);
-    border-radius: 8px;
-
-    & > * {
-      flex: 1;
-    }
-
-    .title {
-      font-weight: 700;
-    }
-
-    .add {
-      text-align: right;
-
-      button {
-        width: 30px;
-        height: 30px;
-        border: none;
-        border-radius: 50%;
-        background-color: rgba(0, 0, 0, 0.04);
-        text-align: center;
-        position: relative;
-        transition: background-color ease 0.4s;
-
-        &:hover {
-          background-color: rgba(0, 0, 0, 0.4);
-        }
-
-        span {
-          display: block;
-          position: absolute;
-          top: 2px;
-          left: 10px;
-        }
-      }
-    }
-  }
-
-  .flex-row {
-    display: flex;
-    justify-content: center;
-    font-size: 0.8rem;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-
-    & > * {
-      flex: 1;
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  .body .flex-row:last-child {
-    border-bottom: none;
-    border-radius: 0 0 8px 8px;
-  }
-
-  .buttons {
-    justify-content: flex-end;
-
-    button {
-      border: none;
-      box-shadow: none;
-      background-color: ${(props) => props.theme.backdrop};
-      color: ${(props) => props.theme.primary};
-      border-radius: 8px;
-      padding: 0.3rem 0.8rem;
-      font-size: 0.8rem;
-      transition: color 0.4s ease;
-    }
-
-    button:hover {
-      color: ${(props) => props.theme.accent};
-    }
-
-    button:first-child {
-      border-radius: 8px 0 0 8px;
-      border-right: 1px solid white;
-      width: 64px;
-    }
-
-    button:last-child {
-      border-radius: 0 8px 8px 0;
-    }
-  }
-`;
+import EditTagRow from '../component/edit-tag-row';
+import AddTagRow from '../component/add-tag-row';
+import Tag from '../component/tag';
+import StyledTagsDisplay from '../component/styles/TagsPage';
 
 const sampleData = [
   {

From c7048d193309d59eed1b087a521e8707bb0ec395 Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Fri, 8 Jan 2021 17:59:05 -0600
Subject: [PATCH 28/31] Extract tag types to own directory

---
 .../portal-app/src/component/add-tag-row.tsx  |  9 +----
 .../portal-app/src/component/edit-tag-row.tsx | 21 ++--------
 tenant-file/portal-app/src/component/tag.tsx  |  9 +----
 .../portal-app/src/pages/Tags-Page.tsx        | 38 ++-----------------
 tenant-file/portal-app/src/types/tag.ts       | 15 ++++++++
 tenant-file/portal-app/src/utility.ts         | 24 ++++++++++++
 6 files changed, 48 insertions(+), 68 deletions(-)
 create mode 100644 tenant-file/portal-app/src/types/tag.ts

diff --git a/tenant-file/portal-app/src/component/add-tag-row.tsx b/tenant-file/portal-app/src/component/add-tag-row.tsx
index 108175a..f9f8f0a 100644
--- a/tenant-file/portal-app/src/component/add-tag-row.tsx
+++ b/tenant-file/portal-app/src/component/add-tag-row.tsx
@@ -2,14 +2,7 @@ import React, { useState } from 'react';
 import { TwitterPicker, ColorResult } from 'react-color';
 import Tag from './tag';
 import StyledEditTagRow from './styles/TagEditRow';
-
-type Tags = {
-  name: string;
-  description: string;
-  photoCount: number;
-  id: number;
-  color: string;
-}[];
+import { Tags } from '../types/tag';
 
 type Props = {
   setData: React.Dispatch<React.SetStateAction<Tags>>;
diff --git a/tenant-file/portal-app/src/component/edit-tag-row.tsx b/tenant-file/portal-app/src/component/edit-tag-row.tsx
index 89cad8a..32038fe 100644
--- a/tenant-file/portal-app/src/component/edit-tag-row.tsx
+++ b/tenant-file/portal-app/src/component/edit-tag-row.tsx
@@ -1,23 +1,8 @@
 import React, { useState } from 'react';
 import { TwitterPicker, ColorResult } from 'react-color';
 import StyledEditTagRow from './styles/TagEditRow';
-import Tag from './tag';
-
-type Tag = {
-  name: string;
-  description: string;
-  photoCount: number;
-  id: number;
-  color: string;
-};
-
-type Tags = {
-  name: string;
-  description: string;
-  photoCount: number;
-  id: number;
-  color: string;
-}[];
+import TagButton from './tag';
+import { Tag, Tags } from '../types/tag';
 
 type Props = {
   tag: Tag;
@@ -61,7 +46,7 @@ const EditTagRow = ({ tag, setEditingRow, setData }: Props) => {
     <>
       <div className="flex-row" key={tag.id}>
         <div className="label">
-          <Tag tag={tag} />
+          <TagButton tag={tag} />
         </div>
 
         <div className="description"></div>
diff --git a/tenant-file/portal-app/src/component/tag.tsx b/tenant-file/portal-app/src/component/tag.tsx
index f92d9d8..bcb5c82 100644
--- a/tenant-file/portal-app/src/component/tag.tsx
+++ b/tenant-file/portal-app/src/component/tag.tsx
@@ -1,13 +1,6 @@
 import React from 'react';
 import StyledTag from './styles/Tag';
-
-type Tag = {
-  name: string;
-  description: string;
-  photoCount: number;
-  id: number;
-  color: string;
-};
+import { Tag } from '../types/tag';
 
 type Props = {
   tag: Tag;
diff --git a/tenant-file/portal-app/src/pages/Tags-Page.tsx b/tenant-file/portal-app/src/pages/Tags-Page.tsx
index 6f2f161..c547224 100644
--- a/tenant-file/portal-app/src/pages/Tags-Page.tsx
+++ b/tenant-file/portal-app/src/pages/Tags-Page.tsx
@@ -1,40 +1,10 @@
 import React, { useState } from 'react';
 import EditTagRow from '../component/edit-tag-row';
 import AddTagRow from '../component/add-tag-row';
-import Tag from '../component/tag';
+import TagButton from '../component/tag';
 import StyledTagsDisplay from '../component/styles/TagsPage';
-
-const sampleData = [
-  {
-    name: 'Damages',
-    description: 'Windows, walls, appliance',
-    photoCount: 5,
-    id: 0,
-    color: '#00D084',
-  },
-  {
-    name: 'Conversations',
-    description: 'Records of texts or phone calls',
-    photoCount: 4,
-    id: 1,
-    color: '#0693E3',
-  },
-  {
-    name: 'Documents',
-    description: 'Lease, notices, etc.',
-    photoCount: 5,
-    id: 2,
-    color: '#FF6900',
-  },
-];
-
-type Tag = {
-  name: string;
-  description: string;
-  photoCount: number;
-  id: number;
-  color: string;
-};
+import { Tag } from '../types/tag';
+import { sampleData } from '../utility';
 
 const Tags = () => {
   // Sample data stored here. Can be swapped with redux or other method later.
@@ -61,7 +31,7 @@ const Tags = () => {
     return (
       <div className="flex-row" key={tag.id}>
         <div className="label">
-          <Tag tag={tag} />
+          <TagButton tag={tag} />
         </div>
         <div className="description">{tag.description}</div>
         <div className="photoCount">{tag.photoCount}</div>
diff --git a/tenant-file/portal-app/src/types/tag.ts b/tenant-file/portal-app/src/types/tag.ts
new file mode 100644
index 0000000..94e5856
--- /dev/null
+++ b/tenant-file/portal-app/src/types/tag.ts
@@ -0,0 +1,15 @@
+export type Tag = {
+  name: string;
+  description: string;
+  photoCount: number;
+  id: number;
+  color: string;
+};
+
+export type Tags = {
+  name: string;
+  description: string;
+  photoCount: number;
+  id: number;
+  color: string;
+}[];
diff --git a/tenant-file/portal-app/src/utility.ts b/tenant-file/portal-app/src/utility.ts
index 13039c4..0df2fde 100644
--- a/tenant-file/portal-app/src/utility.ts
+++ b/tenant-file/portal-app/src/utility.ts
@@ -4,3 +4,27 @@ export function isDark(hex: String) {
   const b = parseInt(hex.substring(5, 7), 16);
   return r * 0.299 + g * 0.587 + b * 0.114 < 120;
 }
+
+export const sampleData = [
+  {
+    name: 'Damages',
+    description: 'Windows, walls, appliance',
+    photoCount: 5,
+    id: 0,
+    color: '#00D084',
+  },
+  {
+    name: 'Conversations',
+    description: 'Records of texts or phone calls',
+    photoCount: 4,
+    id: 1,
+    color: '#0693E3',
+  },
+  {
+    name: 'Documents',
+    description: 'Lease, notices, etc.',
+    photoCount: 5,
+    id: 2,
+    color: '#FF6900',
+  },
+];

From 62dbff8fb358e7d8190b8a4620adf2034575ff1f Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Sat, 9 Jan 2021 18:44:41 -0600
Subject: [PATCH 29/31] Extract tag row render method toseperate component

---
 .../portal-app/src/component/tag-row.tsx      | 27 +++++++++++++++++++
 .../portal-app/src/pages/Tags-Page.tsx        | 24 +++++------------
 2 files changed, 34 insertions(+), 17 deletions(-)
 create mode 100644 tenant-file/portal-app/src/component/tag-row.tsx

diff --git a/tenant-file/portal-app/src/component/tag-row.tsx b/tenant-file/portal-app/src/component/tag-row.tsx
new file mode 100644
index 0000000..7027d9a
--- /dev/null
+++ b/tenant-file/portal-app/src/component/tag-row.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import TagButton from './tag';
+import { Tag } from '../types/tag';
+
+type Props = {
+  tag: Tag;
+  setEditingRow: React.Dispatch<React.SetStateAction<number>>;
+  handleDelete: (tagId: number) => void;
+};
+
+const TagRow = ({ tag, setEditingRow, handleDelete }: Props) => {
+  return (
+    <div className="flex-row" key={tag.id}>
+      <div className="label">
+        <TagButton tag={tag} />
+      </div>
+      <div className="description">{tag.description}</div>
+      <div className="photoCount">{tag.photoCount}</div>
+      <div className="buttons">
+        <button onClick={() => setEditingRow(tag.id)}>Edit</button>
+        <button onClick={() => handleDelete(tag.id)}>Delete</button>
+      </div>
+    </div>
+  );
+};
+
+export default TagRow;
diff --git a/tenant-file/portal-app/src/pages/Tags-Page.tsx b/tenant-file/portal-app/src/pages/Tags-Page.tsx
index c547224..3847168 100644
--- a/tenant-file/portal-app/src/pages/Tags-Page.tsx
+++ b/tenant-file/portal-app/src/pages/Tags-Page.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import EditTagRow from '../component/edit-tag-row';
 import AddTagRow from '../component/add-tag-row';
-import TagButton from '../component/tag';
+import TagRow from '../component/tag-row';
 import StyledTagsDisplay from '../component/styles/TagsPage';
 import { Tag } from '../types/tag';
 import { sampleData } from '../utility';
@@ -27,21 +27,7 @@ const Tags = () => {
     }
   }
 
-  function renderTagRow(tag: Tag) {
-    return (
-      <div className="flex-row" key={tag.id}>
-        <div className="label">
-          <TagButton tag={tag} />
-        </div>
-        <div className="description">{tag.description}</div>
-        <div className="photoCount">{tag.photoCount}</div>
-        <div className="buttons">
-          <button onClick={() => setEditingRow(tag.id)}>Edit</button>
-          <button onClick={() => handleDelete(tag.id)}>Delete</button>
-        </div>
-      </div>
-    );
-  }
+  function renderTagRow(tag: Tag) {}
 
   return (
     <StyledTagsDisplay>
@@ -66,7 +52,11 @@ const Tags = () => {
                 setData={setData}
               />
             ) : (
-              renderTagRow(tag)
+              <TagRow
+                tag={tag}
+                setEditingRow={setEditingRow}
+                handleDelete={handleDelete}
+              />
             );
           })}
         </div>

From 5b81acec933fe6cab5a55bcd73ade0e15214dd0e Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Sat, 9 Jan 2021 18:46:19 -0600
Subject: [PATCH 30/31] Clear TypeScript errors

---
 tenant-file/portal-app/src/pages/Tags-Page.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/tenant-file/portal-app/src/pages/Tags-Page.tsx b/tenant-file/portal-app/src/pages/Tags-Page.tsx
index 3847168..175598f 100644
--- a/tenant-file/portal-app/src/pages/Tags-Page.tsx
+++ b/tenant-file/portal-app/src/pages/Tags-Page.tsx
@@ -3,7 +3,6 @@ import EditTagRow from '../component/edit-tag-row';
 import AddTagRow from '../component/add-tag-row';
 import TagRow from '../component/tag-row';
 import StyledTagsDisplay from '../component/styles/TagsPage';
-import { Tag } from '../types/tag';
 import { sampleData } from '../utility';
 
 const Tags = () => {
@@ -27,8 +26,6 @@ const Tags = () => {
     }
   }
 
-  function renderTagRow(tag: Tag) {}
-
   return (
     <StyledTagsDisplay>
       <div className="display">

From 6696e944dce59c0c47b396d2ed294831751842f6 Mon Sep 17 00:00:00 2001
From: Chris Padilla <cdpadilla42@gmail.com>
Date: Sat, 9 Jan 2021 18:50:51 -0600
Subject: [PATCH 31/31] Add comment

---
 tenant-file/portal-app/src/utility.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tenant-file/portal-app/src/utility.ts b/tenant-file/portal-app/src/utility.ts
index 0df2fde..7d0b9cb 100644
--- a/tenant-file/portal-app/src/utility.ts
+++ b/tenant-file/portal-app/src/utility.ts
@@ -5,6 +5,7 @@ export function isDark(hex: String) {
   return r * 0.299 + g * 0.587 + b * 0.114 < 120;
 }
 
+// Dummy data for tags
 export const sampleData = [
   {
     name: 'Damages',