Merge branch 'main' into gychu

Twitter-Clone-Group · Sep 8, 2022 · 0364be5 · 0364be5
2 parents 8f3818a + 26a11d7
commit 0364be5
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 9 deletions.
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
@@ -18,7 +18,7 @@
 <!-- sidebar starts -->
 <div class="sidebar">
 <!--  <i class="fab fa-twitter"></i>-->
-  <img src="https://cdn.discordapp.com/attachments/1009121959516315688/1016814063101165668/0C187506-04B4-4FBE-96F1-F4729304D41D.png" width = "220" height = "50"/>
+  <img src="https://cdn.discordapp.com/attachments/826856558318977048/1017177806016364574/39A1C529-66C3-4369-8705-55745D6EB374.png" width = "220" height = "50"/>
   <div class="sidebarOption active">
     <span class="material-icons"> home </span>
     <button class="sidebarButton" routerLink="/home">Home</button>
@@ -79,8 +79,44 @@ <h2>What's Happening Now</h2>
   </div>
   <div class="widgets__widgetContainer">
     <h2>Who To Follow</h2>
-
-    <button class="sidebarButton" routerLink="/profile">Follow</button>
+    <div>
+      <ol>
+        <li *ngFor="let squeaker of this.squeakers">
+          <div class="post">
+            <div class="post__avatar">
+              <img
+                src="{{squeaker.profilePic}}"
+                alt=""
+              />
+            </div>
+            <div class="post__body">
+              <div class="post__header">
+                <div class="post__headerText">
+                  <h3>
+                    {{ squeaker.username }}
+                    <span class="post__headerSpecial"
+                    ><span class="material-icons post__badge"> verified </span>@{{ squeaker.username }}</span
+                    >
+                  </h3>
+                </div>
+<!--                <div class="post__headerDescription">-->
+<!--                  <p>{{squeak.content}}</p>-->
+<!--                </div>div-->
+              </div>
+              <img
+                src="https://scontent-lga3-1.xx.fbcdn.net/v/t39.30808-6/275550284_2392137017615959_7898902073337599454_n.jpg?_nc_cat=109&ccb=1-7&_nc_sid=09cbfe&_nc_ohc=1oi_mqHsbVUAX-ceWSP&_nc_ht=scontent-lga3-1.xx&oh=00_AT_GpRbzdk5DK_RAB3aKYShOq1qvCxPSjaok_nygBGy_7Q&oe=631AF6E5"
+                alt=""
+              />
+              <div class="post__footer">
+                <span class="material-icons"> repeat </span>
+                <span class="material-icons"> favorite_border </span>
+                <span class="material-icons"> publish </span>
+              </div>
+            </div>
+          </div>
+      </ol>
+    </div>
+            <button class="sidebarButton" routerLink="/profile">Follow</button>
 
   </div>
 

diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
@@ -11,6 +11,7 @@ import {DataService} from "../services/data.service";
 export class HomeComponent implements OnInit {
   // @ts-ignore
   currentSqueaker: Squeaker;
+  squeakers: Squeaker[] = [];
 
   constructor(private squeakerService: SqueakerService, private dataService: DataService) {
   }
@@ -37,5 +38,11 @@ export class HomeComponent implements OnInit {
         )
     )
   }
+  findAllSqueaker (): void {
+    this.squeakerService.findAll().subscribe((data: Squeaker[]) => {
+        this.squeakers = data;
+      }
+    )
+  }
 
 }
diff --git a/src/app/profile/profile.component.css b/src/app/profile/profile.component.css
@@ -47,7 +47,7 @@
   color:rgb(219, 203, 253);
 }
 .btn-outlined:hover{
-  background-color:#eaf5fd;
+  background-color:rgb(219, 203, 253);
   transition: background-color 0.2s;
 }
 .btn-filled{

diff --git a/src/app/profile/profile.component.html b/src/app/profile/profile.component.html
@@ -18,7 +18,7 @@
 <!-- sidebar starts -->
 <div class="sidebar">
   <!--  <i class="fab fa-twitter"></i>-->
-  <img src="https://cdn.discordapp.com/attachments/1009121959516315688/1016814063101165668/0C187506-04B4-4FBE-96F1-F4729304D41D.png" width = "220" height = "50"/>
+  <img src="https://cdn.discordapp.com/attachments/826856558318977048/1017177806016364574/39A1C529-66C3-4369-8705-55745D6EB374.png" width = "220" height = "50"/>
   <div class="sidebarOption active">
     <span class="material-icons"> home </span>
     <button class="sidebarButton" routerLink="/home">Home</button>
@@ -120,6 +120,23 @@ <h3>
     <span class="material-icons widgets__searchIcon"> search </span>
     <input type="text" placeholder="Search" />
   </div>
+  <div class="widgets__widgetContainer">
+    <h2>What's Happening Now</h2>
+    <blockquote class="squeaker-squeak">
+      <p lang="en" dir="ltr">
+        <a href="https://twitter.com/hashtag/squeak?src=hashtag_click&f=live"
+        >#squeak</a>
+      </p>
+    </blockquote>
+
+  </div>
+  <div class="widgets__widgetContainer">
+    <h2>Who To Follow</h2>
+
+    <button class="sidebarButton" routerLink="/profile">Follow</button>
+
+  </div>
+
 
 </div>
 <!-- widgets ends -->

diff --git a/src/styles.css b/src/styles.css
@@ -7,7 +7,7 @@
 
 body {
   --squeaker-color: rgb(219, 203, 253);
-  --squeaker-background: #fafafa;
+  --squeaker-background: #DACBFD;
 }
 
 .sidebarOption {
@@ -29,7 +29,7 @@ body {
 }
 
 .sidebarOption:hover {
-  background-color: var(--squeaker-background);
+  background-color: #F5F8FA;
   border-radius: 30px;
   color: var(--squeaker-color);
   transition: color 100ms ease-out;
@@ -163,7 +163,7 @@ body {
   cursor: pointer;
   background-color: var(--squeaker-color);
   border: none;
-  color: white;
+  color: black;
   font-weight: 900;
 
   border-radius: 30px;
@@ -257,7 +257,7 @@ body {
 }
 
 .widgets__searchIcon {
-  color: gray;
+  color: black;
 }
 
 .widgets__widgetContainer {