Icons

webpage/src/Icon.js

@@ -8,7 +8,34 @@ import styled from 'styled-components';
 // ******** STYLE *********
 
 const IconDiv = styled.div`
-    width: min-content;
+    width: 15em;
+    height: 20em;
+    border-style: solid;
+    border-radius: 1em;
+    overflow: hidden;
+`;
+
+/**
+ * HeadShot style.
+ */
+const Img = styled.img`
+    width: 100%;
+    height: 75%;
+    display: block;
+`;
+
+/**
+ * Name tag style.
+ *
+ * @type {React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> | never}
+ */
+const NameDiv = styled.h2`
+    width: 100%;
+    height: 18%;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 `;
 
 /**
@@ -18,7 +45,10 @@ const IconDiv = styled.div`
  */
 const StatusDiv = styled.div`
     width: 100%;
-    text-align: center;
+    height: 7%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     background-color: ${(props) => props.status.COLOR};
 `;
 
@@ -52,13 +82,24 @@ class Icon extends Component {
 
         this.state = {
             status: STATUS.LOADING,
+            name: "Loading...",
         };
     }
 
+    /**
+     * Fetch the current plant status from the server.
+     */
+    getStatus = () => {
+
+    };
+
     render() {
         return (
             <IconDiv>
-                <img className="IconImage" src={'Grass_GIS.png'} alt={"icon"}/>
+                <Img className="IconImage" src={'Grass_GIS.png'} alt={"icon"}/>
+                <NameDiv>
+                    {this.state.name}
+                </NameDiv>
                 <StatusDiv status={this.state.status}>
                     Status: {this.state.status.TEXT}
                 </StatusDiv>