Use the user's stored profile picture in content

Also adds styles!

components/GridRep/index.tsx

@@ -83,11 +83,12 @@ const GridRep = (props: Props) => {
         if (props.user)
             return (
                 <img 
-                    alt="Gran"
+                    alt={props.user.picture.picture}
-                    className="gran"
+                    className={`profile ${props.user.picture.element}`}
-                    srcSet="/profile/gran.png,
+                    srcSet={`/profile/${props.user.picture.picture}.png,
-                            /profile/gran@2x.png 2x"
+                            /profile/${props.user.picture.picture}@2x.png 2x`}
-                    src="/profile/gran.png" />
+                    src={`/profile/${props.user.picture.picture}.png`} 
+                />
             )
         else
             return (<div className="no-user" />)

pages/[username].tsx

@@ -22,7 +22,12 @@ const ProfileRoute: React.FC = () => {
     const [user, setUser] = useState<User>({
         id: '',
         username: '',
-        granblueId: 0
+        granblueId: 0,
+        picture: {
+            picture: '',
+            element: ''
+        },
+        private: false
     })
 
     // Filter states
@@ -63,7 +68,9 @@ const ProfileRoute: React.FC = () => {
                     setUser({
                         id: response.data.user.id,
                         username: response.data.user.username,
-                        granblueId: response.data.user.granblue_id
+                        granblueId: response.data.user.granblue_id,
+                        picture: response.data.user.picture,
+                        private: response.data.user.private
                     })
 
                     const parties: Party[] = response.data.user.parties
@@ -113,11 +120,12 @@ const ProfileRoute: React.FC = () => {
             <FilterBar onFilter={receiveFilters} scrolled={scrolled}>
                 <div className="UserInfo">
                     <img 
-                        alt="Gran"
+                        alt={user.picture.picture}
-                        className="gran"
+                        className={`profile ${user.picture.element}`}
-                        srcSet="/profile/gran.png,
+                        srcSet={`/profile/${user.picture.picture}.png,
-                                /profile/gran@2x.png 2x"
+                                 /profile/${user.picture.picture}@2x.png 2x`}
-                        src="/profile/gran.png" />
+                        src={`/profile/${user.picture.picture}.png`} 
+                    />
                     <h1>{user.username}</h1>
                 </div>
             </FilterBar>

styles/globals.scss

@@ -290,6 +290,43 @@ select {
     }
 }
 
+.profile {
+    background: $grey-90;
+    
+    &.fire {
+        background: $fire-bg-light;
+    }
+
+    &.water {
+        background: $water-bg-light;
+    }
+
+    &.wind {
+        background: $wind-bg-light;
+    }
+
+    &.earth {
+        background: $earth-bg-light;
+    }
+
+    &.dark {
+        background: $dark-bg-light;
+    }
+
+    &.light {
+        background: $light-bg-light;
+    }
+}
+
+i.tag {
+    background: $grey-90;
+    border-radius: $unit / 2;
+    font-size: 10px;
+    font-weight: $bold;
+    padding: 4px 6px;
+    text-transform: uppercase;
+}
+
 @keyframes openModal {
     0% {
         opacity: 0;