Display correct icon color based on status

webclient/src/Admin.js

@@ -3,7 +3,7 @@ import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } f
 import './light.css';
 import { Button, Container, Checkbox, Dimmer, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
 import moment from 'moment';
-import { BasicTable, staticUrl, requester } from './utils.js';
+import { statusColor, BasicTable, staticUrl, requester } from './utils.js';
 import { TransactionList, TransactionEditor } from './Transactions.js';
 
 export function AdminTransactions(props) {
@@ -473,7 +473,10 @@ export function AdminMemberInfo(props) {
 					</Table.Row>
 					<Table.Row>
 						<Table.Cell>Status:</Table.Cell>
-						<Table.Cell>{member.status}</Table.Cell>
+						<Table.Cell>
+							<Icon name='circle' color={statusColor[member.status]} />
+							{member.status || 'Unknown'}
+						</Table.Cell>
 					</Table.Row>
 
 					<Table.Row>

webclient/src/Home.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
 import './light.css';
 import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
-import { BasicTable, staticUrl, requester } from './utils.js';
+import { statusColor, BasicTable, staticUrl, requester } from './utils.js';
 import { LoginForm, SignupForm } from './LoginSignup.js';
 import { AccountForm } from './Account.js';
 
@@ -24,18 +24,16 @@ function MemberInfo(props) {
 				</Grid.Column>
 
 				<Grid.Column width={11}>
-					<Header size='large'>
+					<Header size='large'>{member.preferred_name} {member.last_name}</Header>
-						<Icon.Group size='small'>
-							<Icon name='circle' color='green' />
-						</Icon.Group>
-						<Header.Content>{member.preferred_name} {member.last_name}</Header.Content>
-					</Header>
 
 					<BasicTable>
 						<Table.Body>
 							<Table.Row>
 								<Table.Cell>Status:</Table.Cell>
-								<Table.Cell>{member.status || 'Unknown'}</Table.Cell>
+								<Table.Cell>
+									<Icon name='circle' color={statusColor[member.status]} />
+									{member.status || 'Unknown'}
+								</Table.Cell>
 							</Table.Row>
 							<Table.Row>
 								<Table.Cell>Expiry:</Table.Cell>

webclient/src/Members.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useReducer } from 'react';
 import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
 import './light.css';
 import { Button, Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Input, Item, Menu, Message, Segment, Table } from 'semantic-ui-react';
-import { isAdmin, BasicTable, staticUrl, requester } from './utils.js';
+import { statusColor, isAdmin, BasicTable, staticUrl, requester } from './utils.js';
 import { NotFound, PleaseLogin } from './Misc.js';
 import { AdminMemberInfo, AdminMemberPause, AdminMemberForm, AdminMemberCards, AdminTransactions } from './Admin.js';
 
@@ -54,7 +54,10 @@ export function Members(props) {
 							<Item key={x.member.id} as={Link} to={'/members/'+x.member.id}>
 								<Item.Image size='tiny' src={x.member.photo_small ? staticUrl + '/' + x.member.photo_small : '/nophoto.png'} />
 								<Item.Content verticalAlign='top'>
-									<Item.Header>{x.member.preferred_name} {x.member.last_name}</Item.Header>
+									<Item.Header>
+										<Icon name='circle' color={statusColor[x.member.status]} />
+										{x.member.preferred_name} {x.member.last_name}
+									</Item.Header>
 									<Item.Description>Status: {x.member.status || 'Unknown'}</Item.Description>
 									<Item.Description>Joined: {x.member.current_start_date || 'Unknown'}</Item.Description>
 								</Item.Content>
@@ -112,7 +115,10 @@ export function MemberDetail(props) {
 										<Table.Body>
 											<Table.Row>
 												<Table.Cell>Status:</Table.Cell>
-												<Table.Cell>{member.status || 'Unknown'}</Table.Cell>
+												<Table.Cell>
+													<Icon name='circle' color={statusColor[member.status]} />
+													{member.status || 'Unknown'}
+												</Table.Cell>
 											</Table.Row>
 											<Table.Row>
 												<Table.Cell>Joined:</Table.Cell>

webclient/src/utils.js

@@ -1,13 +1,20 @@
 import React, { useState, useEffect } from 'react';
 import { Table } from 'semantic-ui-react';
 
-export const isAdmin = (user) => user.is_staff || user.member.is_director || user.member.is_staff;
-export const isInstructor = (user) => isAdmin(user) || user.member.is_instructor;
-
 export const siteUrl = window.location.protocol + '//' + window.location.hostname;
 export const apiUrl = window.location.protocol + '//api.' + window.location.hostname;
 export const staticUrl = window.location.protocol + '//static.' + window.location.hostname;
 
+export const isAdmin = (user) => user.is_staff || user.member.is_director || user.member.is_staff;
+export const isInstructor = (user) => isAdmin(user) || user.member.is_instructor;
+
+export const statusColor = {
+	'Current': 'green',
+	'Due': 'yellow',
+	'Overdue': 'red',
+	'Former Member': 'black',
+};
+
 export const BasicTable = (props) => (
 	<Table collapsing padded unstackable basic='very'>
 		{props.children}