Skip to content

Commit

Permalink
Styling refinements
Browse files Browse the repository at this point in the history
  • Loading branch information
@jhuleatt
jhuleatt committed May 11, 2024
1 parent e39ec81 commit b8a9134
Show file tree
Hide file tree
Showing 4 changed files with 51 additions and 32 deletions.
27 changes: 14 additions & 13 deletions angularfire-start/src/app/components/header/header.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,35 +8,36 @@
</span>
</a>
@if(user$ | async; as user) {
<div class="flex flex-wrap items-end auth">
<div class="flex flex-wrap justify-between text-white">
<div class="flex flex-wrap items-center content-center auth">
<div class="hidden sm:flex flex-wrap items-center content-center text-white">
<img class="w-10 h-10 rounded-full" [src]="user?.photoURL"
[alt]="user?.displayName" />
<span class="text-white text-xl whitespace-nowrap font-light px-4 lg:px-5 py-2 lg:py-2.5">
{{user?.displayName}}
</span>
<div class="dropdown inline-block relative shadow-lg">
<button class=" text-gray-700 py-2 px-4 rounded inline-flex items-center font-semibold">
<img class="w-8 h-8 rounded-full" src="../../../assets/menu.svg" />
</button>
<ul class="dropdown-menu absolute hidden text-gray-700 pt-3 w-48 right-2">
<li class="bg-white p-4 flex-row">
</div>
<div class="dropdown rounded-lg px-4 py-2 hover:bg-navy-700 transition-colors">
<div class="flex items-center">
<button class="text-gray-700 inline-flex items-center font-semibold">
<img class="w-8 h-8" src="../../../assets/menu.svg" />
</button></div>
<ul class="dropdown-menu absolute hidden bg-white w-48 p-1 right-2 shadow-xl rounded-lg">
<li class="bg-white flex flex-row gap-2 items-center px-4 py-4 rounded-lg">
<img class="w-10 h-10 rounded-full" [src]="user?.photoURL"
[alt]="user?.displayName" />
<span
class="text-navy-200 text-md whitespace-nowrap px-4 lg:px-5 py-2 lg:py-2.5 mr-6">
class="text-navy-200 text-md whitespace-nowrap">
{{user?.displayName}}
</span>
</li>
<li class="">
<a class="bg-white hover:bg-navy-20 py-3 px-4 block whitespace-no-wrap text-navy-500 font-semibold"
<li>
<a class="bg-white hover:bg-navy-20 rounded-md mt-4 py-3 px-4 block whitespace-no-wrap text-navy-500 font-semibold"
href="/" (click)="this.chatService.logout()">
Logout
Sign out
</a>
</li>
</ul>
</div>
</div>
</div>
}
</div>
Expand Down
38 changes: 28 additions & 10 deletions angularfire-start/src/app/pages/chat-page/chat-page.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,52 @@
<div class="min-h-screen h-full w-full bg-navy-30">
<div class="w-3/4 bg-navy-10 min-h-screen h-full mx-auto flex flex-col flex-grow pb-56">
<div class="w-3/4 bg-navy-10 min-h-screen h-full mx-auto flex flex-col flex-grow pb-56 overflow-auto">
@for (message of (messages$ | async)?.reverse(); track message) {
<div> <!-- TODO: I think this div can be removed-->
<div class="flex flex-col flex-grow p-4 overflow-scroll space-x-3">
<div class="flex flex-col flex-grow p-4 gap-3">
@if (user$ | async; as user) {
<div>
<div class="flex flex-wrap min-h-[50px] mt-4">
<div class="flex flex-nowrap gap-4" [class.flex-row-reverse]="user.uid === message['uid']">
<img class="w-10 h-10 rounded-full" [src]="message['profilePicUrl']"
[alt]="message['name']" />
<span class="text-gray-500 mx-5 my-auto">{{message['name']}}: </span>
</div>
<div class="mt-4 ml-12 p-5 rounded-full max-w-xl bg-amber-200 shadow-lg border-b-2">
<div class="flex flex-wrap gap-1 text-neutral-800" [class.flex-row-reverse]="user.uid === message['uid']">
<div class="p-4 rounded-lg max-w-xl flex flex-col justify-between gap-1" [class.bg-amber-200]="user.uid === message['uid']" [class.bg-white]="user.uid !== message['uid']">
@if (message['text'] && message['text'].length > 0){
<div>
{{message['text']}}
</div>
}
@if (message['imageUrl'] && message['imageUrl'].length > 0) {
<div class="flex justify-center">
<img class="max-w-[50vw] max-h-[30vh] rounded-md" [src]="message['imageUrl']" alt="image" />
</div>
}
<div class="flex flex-nowrap justify-end">
<span class="text-neutral-500 text-sm">
{{message['timestamp'].toDate().toLocaleTimeString()}}
</span>
</div>
</div>

@if (message['response'] && message['response'].length > 0){
<div class="transition-all opacity-30 hover:opacity-100 hover:border-2 hover:border-navy-200 hover:py-6 gap-1 p-4 rounded-lg max-w-xl flex flex-col justify-between">
<div>
<img class="max-w-[150px]" [src]="message['imageUrl']" alt="image" />
{{message['response']}}
</div>
<div class="flex flex-nowrap justify-end">
<span class="text-neutral-500 text-sm">
✨ ai generated
</span>
</div>
</div>
}
</div>

</div>
}
</div>
</div>
}
</div>
<div class="bg-navy-10 w-full shadow-[0_35px_60px_-15px_rgba(0,0,0,1)] min-h-32 h-auto bottom-0 fixed">
<div class="bg-navy-10 w-full shadow-[0_35px_60px_-15px_rgba(0,0,0,1)] bottom-0 fixed">
<div class="flex-wrap flex w-5/6 mx-auto">
<input type="file" class="file-input hidden" (change)="this.uploadImage($event)" #fileUpload>
<div class="file-upload w-16 h-16 rounded-full bg-amber-800 my-3">
Expand All @@ -37,7 +55,7 @@
</button>
</div>
<textarea
class="w-4/5 mx-auto h-16 rounded-3xl my-auto overflow-scroll text-gray-900 dark:placeholder-gray-400 p-4"
class="w-4/5 mx-auto h-16 rounded-3xl my-auto overflow-auto text-gray-900 dark:placeholder-gray-400 p-4"
placeholder="Write your thoughts here..." [(ngModel)]="this.text"></textarea>
<button class="w-16 h-16 rounded-full bg-amber-800 my-3" (click)="this.sendTextMessage()">
<img class="w-16 h-16" src="../../../assets/send.svg" alt="Send message" />
Expand Down
16 changes: 8 additions & 8 deletions angularfire-start/src/app/pages/login-page/login-page.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<div class="min-h-screen h-full w-full bg-slate-100 flex min-w-screen">
<div class="w-[50%] h-full items-center m-auto">
<div class="min-h-[80vh] h-full w-full py-10 flex flex-wrap flex-col-reverse sm:flex-row items-center min-w-screen">
<div class="min-w-screen sm:w-[50%] h-full items-center m-auto">
<img src="../../../assets/WithFirebase.png" class="w-[350px] m-auto" />
</div>
<div class="w-[50%] items-center h-full mt-[15%]">
<div class="mx-auto justify-center mr-28 ml-16">
<img src="../../../assets/FriendlyChatLogo.png" class="w-[200px] mx-10" />
<span class="text-navy-600 text-5xl font-light ">Friendly Chat</span>
<div class="min-w-screen sm:w-[50%] flex flex-col gap-5 items-center h-full gap-5">
<div>
<img src="../../../assets/FriendlyChatLogo.png" class="w-[200px]" />
<span class="text-navy-600 text-5xl font-light mt-5">Friendly Chat</span>
</div>
<button class="w-[400px] bg-white shadow-md flex flex-wrap mt-12" (click)="this.chatService.login()">
<button class="transition-all w-[400px] bg-white shadow-md flex flex-wrap items-center rounded-lg p-2 hover:shadow-xl justify-between" (click)="this.chatService.login()">
<img src="../../../assets/Google.png" class="w-8 m-2" />
<span class="text-slate-700 text-xl m-auto">Sign in with Google</span>
<span class="text-slate-700 text-xl flex-grow">Sign in with Google</span>
</button>
</div>
</div>
2 changes: 1 addition & 1 deletion angularfire-start/src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<body class="bg-slate-100">
<app-root></app-root>
</body>
</html>

0 comments on commit b8a9134

Please sign in to comment.