Merge pull request #108 from RonLek/improve-unsigned-home

[NEW] Home Demo Layout, Localized string resources

Author: Sing-Li

client/package-lock.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@brainhubeu/react-carousel": "^2.0.2",
     "@material-ui/core": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",
     "axios": "^0.21.1",

client/package.json

@@ -17,7 +17,6 @@
 }
 
 .unsigned-home-heading {
-  font-weight: 600;
   color: hsl(240, 6%, 17%);
   margin: 20px 0;
   font-weight: 200;
@@ -31,18 +30,22 @@
 
 .unsigned-home-header {
   margin: 40px 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   text-align: center;
 }
 
 .button-container {
   display: flex;
   justify-content: center;
   align-items: center;
+  margin-top: 20px;
 }
 
 .main-stats-container {
   margin-top: 70px;
-  margin-bottom: 70px;
+  margin-bottom: 55px;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -57,22 +60,22 @@
   align-items: center;
   color: #29292e;
   background-color: #e0e0e01a;
-  border-radius: 100px;
-  height: 170px;
-  width: 170px;
+  border-radius: 50%;
+  height: 140px;
+  width: 140px;
   margin: 10px;
   box-shadow: 0px 8px 12px -7px #a9a6a6fc;
 }
 
 .stat-icon {
-  width: 60px;
-  height: 60px;
+  width: 45%;
+  height: 45%;
   display: block;
-  margin-bottom: 15px;
+  margin-bottom: 5px;
 }
 
 .stat-number {
-  font-size: 40px;
+  font-size: 30px;
   letter-spacing: 2px;
   margin-bottom: 5px;
   font-weight: 500;
@@ -104,7 +107,7 @@
 }
 
 .signed-home-header p {
-  font-size: 0.90em;
+  font-size: 0.9em;
   line-height: 27px;
   color: #252525;
 }
@@ -114,14 +117,14 @@
 }
 
 .signed-home-shortcut-container h5 {
-  font-size: 0.90em;
+  font-size: 0.9em;
 }
 
 .signed-home-shortcut {
   background-color: #e3e9fe66;
   padding: 14px;
   border-radius: 5px;
-  font-size: 0.90em;
+  font-size: 0.9em;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -142,3 +145,171 @@
   height: 1.7em;
   margin-right: 5px;
 }
+
+.select-role-button {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  border-radius: 50%;
+  height: 150px;
+  width: 150px;
+  border: 5px solid #ee4a5b;
+}
+
+.select-role-button:hover {
+  border: 5px solid #2f343d;
+  cursor: pointer;
+}
+
+.carousel-item-wrapper {
+  width: 100%;
+  margin: 20px;
+  text-align: center;
+}
+
+.carousel-item-link {
+  text-decoration: none;
+  color: #000000;
+}
+
+.carousel-item-image {
+  width: 100%;
+  height: 100%;
+}
+
+.carousel-item-description {
+  color: hsl(240, 5%, 36%);
+}
+
+.demo-mode-toggle {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.unsigned-search-wrapper {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.unsigned-search-input {
+  width: 50%;
+}
+
+.stats-heading {
+  text-align: center;
+  margin-top: 100px;
+  margin-bottom: 40px;
+  color: hsl(240, 6%, 17%);
+  font-weight: 200;
+}
+
+.featured-content-heading {
+  text-align: center;
+  margin-bottom: 40px;
+  color: hsl(240, 6%, 17%);
+  font-weight: 200;
+}
+
+.select-role-heading {
+  text-align: center;
+  margin-top: 30px;
+  margin-bottom: 60px;
+  color: hsl(240, 6%, 17%);
+  font-weight: 200;
+}
+
+.select-role-buttons-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  margin-bottom: 100px;
+}
+
+.select-role-button-icon {
+  height: 50px;
+  width: 50px;
+  margin-bottom: 20px;
+}
+
+.communities-wrapper {
+  margin-bottom: 60px;
+  margin-top: 30px;
+}
+
+.community-activity-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+
+.community-activity-content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 80%;
+}
+
+.community-activity-author-image {
+  border-radius: 50%;
+  height: 40px;
+  width: 40px;
+  margin-right: 20px;
+}
+
+.community-activity-heading {
+  margin-right: 40px;
+}
+
+.community-activity-info {
+  color: hsl(240, 5%, 36%);
+}
+
+.community-activity-actions-wrapper {
+  display: flex;
+  flex-direction: row;
+  width: 20%;
+}
+
+.community-activity-action {
+  display: flex;
+  width: 50%;
+  align-items: center;
+}
+
+.community-activity-action-button {
+  height: 25px;
+  width: 25px;
+  margin-right: 15px;
+  margin-left: 30px;
+}
+
+.community-activity-action-button:hover {
+  cursor: pointer;
+}
+
+.main-stats-container-demo {
+  width: 100%;
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+
+.button-container-demo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px;
+  margin-bottom: 20px;
+}
+
+.header-link {
+  color: hsl(240, 5%, 36%);
+}