changes

front-end/src/app/app-routing.module.ts

@@ -1,10 +1,10 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { DraftComponent } from './draft/draft.component';
-import { InboxComponent } from './inbox/inbox.component';
-import { SentComponent } from './sent/sent.component';
+import { DraftComponent } from './email-pages/draft/draft.component';
+import { InboxComponent } from './email-pages/inbox/inbox.component';
+import { SentComponent } from './email-pages/sent/sent.component';
 import { StartPageComponent } from './start-page/start-page.component';
-import { TrashComponent } from './trash/trash.component';
+import { TrashComponent } from './email-pages/trash/trash.component';
 
 const routes: Routes = [
   {

front-end/src/app/app.module.ts

@@ -5,10 +5,10 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { EmailComponent } from './email/email.component';
 import { StartPageComponent } from './start-page/start-page.component';
-import { InboxComponent } from './inbox/inbox.component';
-import { SentComponent } from './sent/sent.component';
-import { DraftComponent } from './draft/draft.component';
-import { TrashComponent } from './trash/trash.component';
+import { InboxComponent } from './email-pages/inbox/inbox.component';
+import { SentComponent } from './email-pages/sent/sent.component';
+import { DraftComponent } from './email-pages/draft/draft.component';
+import { TrashComponent } from './email-pages/trash/trash.component';
 
 @NgModule({
   declarations: [

front-end/src/app/inbox/inbox.component.css → front-end/src/app/email-pages/inbox/inbox.component.css

@@ -1,4 +1,16 @@
-@import "../css/mail-box.css";
+.mails{
+    position: absolute;
+    border: 2px solid  rgb(140, 137, 232);
+    flex: 1;
+    overflow: scroll;
+    border-radius: 10px;
+    width: 1300px;
+    height: 540px;
+    left: 220px;
+    top :145px;
+    box-shadow: 0 8px 10px -7px rgb(226, 226, 251);
+    background: #ffffff;
+}
 .btn{
     border-radius: 5px;
     float: left;

front-end/src/app/email-pages/sent/sent.component.css

@@ -0,0 +1,13 @@
+.mails{
+    position: absolute;
+    border: 2px solid  rgb(140, 137, 232);
+    flex: 1;
+    overflow: scroll;
+    border-radius: 10px;
+    width: 1300px;
+    height: 540px;
+    left: 220px;
+    top :145px;
+    box-shadow: 0 8px 10px -7px rgb(226, 226, 251);
+    background: #ffffff;
+}

front-end/src/app/email-pages/trash/trash.component.css

@@ -0,0 +1,13 @@
+.mails{
+    position: absolute;
+    border: 2px solid  rgb(140, 137, 232);
+    flex: 1;
+    overflow: scroll;
+    border-radius: 10px;
+    width: 1300px;
+    height: 540px;
+    left: 220px;
+    top :145px;
+    box-shadow: 0 8px 10px -7px rgb(226, 226, 251);
+    background: #ffffff;
+}

front-end/src/app/email/email.component.css

@@ -162,6 +162,7 @@ height: 89vh;
     align-items: center;
 }
 .emailList_settings .material-symbols-outlined{
+    border: none;
     margin: 5px;
     cursor: pointer;
 }
@@ -179,7 +180,7 @@ height: 89vh;
     cursor: pointer;
     font-size: 15px;
 }
-.section {
+/* .section {
     display: flex;
     align-items: center;
     border-bottom-width: 2px;
@@ -191,4 +192,52 @@ height: 89vh;
 }
 .section h4{
     font-size: 17px;
+} */
+.emailList_sections {
+    display: flex;
+    flex:0.7;
+    align-items: center;
+    background-color: white;
+    padding: 10px;
+    border-radius: 50px;
+    border: 2px solid  rgb(140, 137, 232);
+}
+.emailList_sections input{
+    border: none;
+    width: 100%;
+    padding: 10px;
+    outline: none;
+    font-size: medium;
+    background-color: transparent;
 }
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #ffffff;
+    min-width: 80px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    border-top-right-radius: 20px ;
+    border-bottom-right-radius: 20px ;
+    border-top-left-radius: 20px ;
+    border-bottom-left-radius: 20px ;
+    border: 2px solid  rgb(140, 137, 232);
+  }
+
+  .dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    cursor: pointer;
+    border-top-right-radius: 50px ;
+    border-bottom-right-radius: 50px ;
+    border-top-left-radius: 50px ;
+    border-bottom-left-radius: 50px ;
+  }
+  .dropdown-content a:hover {background-color: #f1f1f1}
+  .dropdown:hover .dropdown-content {
+    display: block;
+    cursor: pointer;
+  }

front-end/src/app/email/email.component.html

@@ -1,4 +1,3 @@
-
 <head>
     <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
 </head>
@@ -12,9 +11,7 @@
             <!-- <span class = "material-symbols-outlined">menu</span> -->
             <img src="https://cdn-icons-png.flaticon.com/512/3062/3062634.png" >
         </div>
-        <div class = "header-middle">
-
-        </div>
+
         <div class = "header-right">
             <span class = "material-symbols-outlined">apps</span>
             <span class = "material-symbols-outlined">notifications</span>
@@ -59,11 +56,6 @@ <h3>Trash</h3>
             <div class="emailList_settings">
                 <div class="emailList_settingsLeft">
                         <input type="checkbox" class="material-symbols-outlined">
-                        <select class="List" name="List">//search >>>>> need search bar 
-                            <option value="1">All</option>
-                            <option value="2">Subject</option>
-                            <option value="3">Sender</option>
-                        </select>
                         <select class="List" name="List">//filter
                             <option value="1">Filter</option>
                             <option value="2">Subject</option>
@@ -76,27 +68,29 @@ <h3>Trash</h3>
                         </select>
                         <span class="material-symbols-outlined">Refresh</span>
                 </div>
-
+        <!-- sections start -->
                 <div class="emailList_sections">
-                    <div class="section">
-                        <span class="material-symbols-outlined" style=" margin-left: 290px;">Mail</span>
-                        <h4>Mails</h4>
+                    <span class="material-symbols-outlined"> search </span>
+                    <input type="text" placeholder={{search}}/>
+                    <div class="dropdown">
+                        <span class = "material-symbols-outlined">arrow_drop_down</span>
+                        <div class="dropdown-content">
+                            <a (click)="change('All')" value="All">All</a>
+                            <a (click)="change('Subject')" value="Subject">Subject</a>
+                            <a (click)="change('Sender')" value="Sender">Sender</a>
+                        </div>
                     </div>
                 </div>
 
                 <div class="emailList_settingsRight">
                     <span class="material-symbols-outlined">chevron_left</span>
                     <span class="material-symbols-outlined">chevron_right</span>
                 </div>
-
             </div>
-            <!-- sections start -->
             <!-- sections end -->
         </div>
-
         <!-- email body ends -->
     </div>
-
 <!-- main body ends -->
 </div>
 </body>

front-end/src/app/email/email.component.ts

@@ -6,13 +6,13 @@ import { Router } from '@angular/router';
   styleUrls: ['./email.component.css']
 })
 export class EmailComponent implements OnInit {
-
+  search:string|null='Search'
 
   constructor(private router:Router) { }
 
   ngOnInit(): void {
   }
-  goToPage():void {
-    this.router.navigate(['inbox']);
-    }
+  change(s:string):void{
+    this.search=s;
+  }
 }