Added initial style for homepage.

frontend/app/js/views/Home/index.jsx

@@ -14,6 +14,7 @@ import config from "config";
 @connect(state => ({
 	user: {
 		userId: state.user.get("userId"),
+		role: state.user.get("role"),
 	},
 	loggedIn: state.user.get("loggedIn"),
 }))
@@ -97,26 +98,49 @@ export default class Homepage extends Component {
 		});
 	}
 
+	isOwner = (ownerId) => {
+		if (this.props.loggedIn) {
+			if (this.props.user.role === "admin") return true;
+			if (this.props.user.userId === ownerId) return true;
+		}
+
+		return false;
+	};
+
 	listStations = (type) => {
 		let stations = [];
 
-		let userId = "";
-		if (this.props.user) {
-			userId = this.props.user.userId;
-		}
-
 		this.state.stations[type].forEach((station) => {
+			let icon = null;
+			if (station.type === "official") {
+				if (station.privacy !== "public") icon =
+					<i className="material-icons" title="This station is not visible to other users.">lock</i>;
+			} else {
+				// TODO Add isOwner function globally
+				if (this.isOwner(station.ownerId)) icon =
+					<i className="material-icons" title="This is your station.">home</i>;
+				if (station.privacy !== "public") icon =
+					<i className="material-icons" title="This station is not visible to other users.">lock</i>;
+			}
+
 			stations.push(
 				(
 					<div key={station._id} className="station-card">
 						<div className="station-media">
-							<img style={{width: "64px"}} src={station.currentSong.thumbnail}/>
+							<img src={station.currentSong.thumbnail}/>
+						</div>
+						<div className="station-body">
+							<h3 className="displayName">{station.displayName}</h3>
+							<p className="description">{station.description}</p>
 						</div>
-						<p>{station.displayName}</p>
-						<p>{station.description}</p>
-						<p>{station.userCount}</p>
-						<p>{station.privacy}</p>
-						{ (station.type === "community" || station.owner === userId) ? <p>I am the owner</p> : null }
+						<div className="station-footer">
+							<div className="user-count" title="How many users there are in the station.">
+								<i className="material-icons">people</i>
+								<span>{station.userCount}</span>
+							</div>
+							{ icon }
+						</div>
+						<a href={station.type + "/" + station.name}/>
 					</div>
 				)
 			);
@@ -165,20 +189,24 @@ export default class Homepage extends Component {
 				<h1>{ t("homepage:title") }</h1>
 				<CustomMessages onRef={ ref => (this.messages = ref) } />
 				<h2>Official Stations</h2>
-				{ this.listStations("official") }
+				<div className="official-stations stations">
+					{ this.listStations("official") }
+				</div>
 				<h2>Community Stations</h2>
-				{ (this.props.loggedIn) ? (
-					<div className="station-card">
-						<div className="station-media">
-							<img style={{width: "64px"}} src="/assets/images/notes-transparent.png"/>
+				<div className="community-stations stations">
+					{ (this.props.loggedIn) ? (
+						<div className="station-card">
+							<div className="station-media">
+								<img src="/assets/images/notes-transparent.png"/>
+							</div>
+							<CustomInput type="stationDisplayName" name="title" label="Title" placeholder="Title" onRef={ ref => (this.input.title = ref) } />
+							<CustomInput type="stationDescription" name="description" label="Description" placeholder="Description" onRef={ ref => (this.input.description = ref) } />
+							<span onClick={this.togglePrivate}>Private</span>
+							<button onClick={this.createCommunity}>Add</button>
 						</div>
-						<CustomInput type="stationDisplayName" name="title" label="Title" placeholder="Title" onRef={ ref => (this.input.title = ref) } />
-						<CustomInput type="stationDescription" name="description" label="Description" placeholder="Description" onRef={ ref => (this.input.description = ref) } />
-						<span onClick={this.togglePrivate}>Private</span>
-						<button onClick={this.createCommunity}>Add</button>
-					</div>
-				) : null }
-				{ this.listStations("community") }
+					) : null }
+					{ this.listStations("community") }
+				</div>
 			</main>
 		);
 	}

frontend/app/styles/home.scss

@@ -0,0 +1,91 @@
+@import "colors";
+@import "breakpoints";
+
+main#homepage {
+	width: calc(100% - 24px);
+	margin-left: 12px;
+	margin-right: 12px;
+
+	.stations {
+		display: flex;
+		justify-content: center;
+
+		//TODO Look into issue where margin-left might mess some stuff up sometimes for station-cards.
+
+		.station-card {
+			width: 296px;
+			background-color: $musare_color_white;
+			border: 1px solid hsla(204, 3, 60, .5); //TODO Change this later and/or add to colors
+			position: relative;
+			margin-left: 24px;
+			margin-bottom: 24px;
+
+			.station-media {
+				width: 296px;
+				height: 296px;
+				display: block;
+
+				> * {
+					width: 296px;
+					height: 296px;
+					display: block;
+				}
+			}
+
+			.station-body {
+				padding: 20px;
+				display: block;
+				color: $musare_color_primary_gray;
+
+				h3 {
+					font-size: 23px;
+					line-height: 31px;
+					margin-bottom: 6px;
+				}
+
+				p {
+					font-size: 15px;
+					line-height: 20px;
+					font-weight: 300;
+				}
+			}
+
+			.station-footer {
+				padding: 20px;
+				display: flex;
+				align-items: flex-end;
+				justify-content: space-between;
+
+				.user-count {
+					height: 27px;
+					display: flex;
+					align-items: flex-end;
+
+					i {
+						margin-right: 6px;
+					}
+
+					span {
+						font-size: 20px;
+						line-height: 27px;
+					}
+				}
+			}
+
+			> a {
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+			}
+		}
+	}
+
+	h2 {
+		font-size: 20px;
+		line-height: 27px;
+		margin-bottom: 12px;
+		text-align: center;
+	}
+}

frontend/app/styles/main.scss

@@ -9,6 +9,7 @@
 @import "termsPrivacy";
 @import "profile";
 @import "team";
+@import "home";
 @import "specific/button";
 @import "specific/form";
 @import url("https://fonts.googleapis.com/css?family=Roboto:100,400,500,700");
@@ -22,6 +23,7 @@ html, body {
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-font-smoothing: antialiased;
 	background-color: #F5F5F5;
+	color: $musare_color_primary_gray;
 }
 
 * {
@@ -35,7 +37,6 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
-	color: $musare_color_primary_gray;
 	text-align: center;
 
 	font-size: 32px;