Added margin top and search bar to the IMessage

Author: siddharthmohite

app/routes/components/IMessage.jsx

@@ -53,7 +53,9 @@ export default function IMessage({ onClose ,  dayState, monthState, dateState, c
                  <div className='Message-holder'>
                     <span className='Message-content'>Hope you have a great time exploring my site welcome back and enjoy!</span>
                 </div>
-                
+                <div className='Search-bar-container'>
+                    <input type="text" className="search-bar" placeholder="iMessage" />
+                </div>
             </div> 
         </div>
     </div>    

app/routes/styles/IMessage.scss

@@ -191,6 +191,30 @@
     color:rgba(255, 255, 255, 0.9);
     font-size: 0.8rem;
 }
+
+.IMessage-container{
+  display: flex;
+  flex-direction: column;
+  height: 85%;
+}
+.search-bar{
+    width:100%;
+  height: 26px;
+  padding: 4px 8px; /* adds some internal spacing */
+  border-radius: 999px; /* fully rounded */
+  border: 1px solid #ccc;
+  font-size: 12px;
+  box-sizing: border-box; /* ensures padding doesn't break layout */
+}
+.Search-bar-container{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top:auto;
+    width: 93%;
+    margin-left: auto;
+    margin-right: auto;    
+}
 .sidebar__buttons-min.active {
     background-color: #a5a0a0 !important;
 }