redesigned the index,chats,notifications and message pages

samuelegin · Dec 23, 2023 · 8222c8f · 8222c8f
1 parent 011d380
commit 8222c8f
Show file tree

Hide file tree

Showing 11 changed files with 64 additions and 103 deletions.
diff --git a/Assets/Pages/chats.html b/Assets/Pages/chats.html
@@ -32,35 +32,21 @@
             <h2>Chats</h2>
           </div>
         </div>
-        <div class="cont-two">
+
+        <div class="live-calls">
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            width="32"
-            height="32"
-            fill="purple"
-            id="bi-command"
+            width="28"
+            height="28"
+            fill="currentColor"
+            class="bi bi-phone"
             viewBox="0 0 16 16"
           >
             <path
-              d="M3.5 2A1.5 1.5 0 0 1 5 3.5V5H3.5a1.5 1.5 0 1 1 0-3zM6 5V3.5A2.5 2.5 0 1 0 3.5 6H5v4H3.5A2.5 2.5 0 1 0 6 12.5V11h4v1.5a2.5 2.5 0 1 0 2.5-2.5H11V6h1.5A2.5 2.5 0 1 0 10 3.5V5H6zm4 1v4H6V6h4zm1-1V3.5A1.5 1.5 0 1 1 12.5 5H11zm0 6h1.5a1.5 1.5 0 1 1-1.5 1.5V11zm-6 0v1.5A1.5 1.5 0 1 1 3.5 11H5z"
+              d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"
             />
+            <path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
           </svg>
-
-          <div id="chatcircle">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              fill="currentColor"
-              id="bi-x"
-              viewBox="0 0 16 16"
-            >
-              <path
-                d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
-              />
-            </svg>
-            <a href="">Start chat circle</a>
-          </div>
         </div>
       </div>
 
@@ -262,39 +248,6 @@ <h4>Samuel Egin</h4>
           </div>
         </div>
       </div>
-
-      <div class="navigation">
-        <div class="live-calls">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="28"
-            height="28"
-            fill="currentColor"
-            class="bi bi-phone"
-            viewBox="0 0 16 16"
-          >
-            <path
-              d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"
-            />
-            <path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
-          </svg>
-        </div>
-
-        <div class="add-friends">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="28"
-            height="28"
-            fill="currentColor"
-            class="bi bi-person"
-            viewBox="0 0 16 16"
-          >
-            <path
-              d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"
-            />
-          </svg>
-        </div>
-      </div>
     </div>
 
     <script src="../script/chat.js"></script>

diff --git a/Assets/Pages/message.html b/Assets/Pages/message.html
@@ -4,7 +4,11 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
+    <title>Message</title>
+    <link
+    rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
+  />
     <link rel="stylesheet" href="../styles/message.css" />
   </head>
   <body>
@@ -46,7 +50,7 @@ <h4>user</h4>
             <h4>User</h4>
           </div>
           <div class="sender-msg">
-            <p>whats poppin man?</p>
+            <p>whats poppin man? its been a while since i heard from you</p>
           </div>
           <span class="time-sent">2:15</span>
         </div>
@@ -56,7 +60,7 @@ <h4>User</h4>
             <h4>You</h4>
           </div>
           <div class="recipient-msg">
-            <p>Hw u doing it's been a while</p>
+            <p>yh yh it's been a while</p>
           </div>
           <span class="time-sent">2:17</span>
         </div>
@@ -66,7 +70,7 @@ <h4>You</h4>
             <h4>User</h4>
           </div>
           <div class="sender-msg">
-            <p>Doing cool what u building 🤔</p>
+            <p>Doing cool what're u up to🤔</p>
           </div>
           <span class="time-sent">2:22</span>
         </div>
@@ -113,23 +117,7 @@ <h4>You</h4>
             ></textarea>
           </div>
           <div class="send-msg">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="28"
-              height="28"
-              fill="current-fill"
-              class="bi bi-box-arrow-up-right"
-              viewBox="0 0 16 16"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"
-              />
-              <path
-                fill-rule="evenodd"
-                d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"
-              />
-            </svg>
+           <i class="bi bi-send"></i>
           </div>
 
           <div class="voice-clips">

diff --git a/Assets/Pages/notifications.html b/Assets/Pages/notifications.html
@@ -13,7 +13,7 @@
   </head>
   <body>
     <header class="header">
-      <a href="#!">
+      <a href="../../index.html">
         <i class="bi bi-arrow-left-circle"></i>
       </a>
       <h2>Notifications</h2>

diff --git a/Assets/Pages/post.html b/Assets/Pages/post.html
@@ -9,12 +9,12 @@
       href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
     />
     <title>Post</title>
-    <link rel="stylesheet" href="../Assets/styles/post.css" />
+    <link rel="stylesheet" href="../styles/post.css" />
   </head>
   <body>
     <header>
       <div class="return">
-        <a href="">
+        <a href="../../index.html">
           <i class="bi bi-chevron-left"></i>
         </a>
         <span>Create a new post</span>

diff --git a/Assets/script/script.js b/Assets/script/script.js
@@ -1,8 +1,7 @@
 const openOthers = document.getElementsByClassName("bi-three-dots-vertical");
 const closeOthers = document.getElementsByClassName("bi-x");
 const others = document.getElementsByClassName("others-div");
-const posts = document.querySelectorAll(".post-img");
-const likes = document.querySelectorAll(".bi-heart-fill");
+const likes = document.querySelectorAll(".bi .bi-heart-fill");
 
 for (let i = 0; i < openOthers.length; i++) {
   openOthers[i].addEventListener("click", function () {
@@ -16,8 +15,8 @@ for (let i = 0; i < closeOthers.length; i++) {
   });
 }
 
-for (let i = 0; i < posts.length; i++) {
-  posts[i].addEventListener("dblclick", function () {
+for (let i = 0; i < likes.length; i++) {
+  likes[i].addEventListener("click", ()=> {
     likes[i].style.color = "red";
   });
 }
diff --git a/Assets/styles/message.css b/Assets/styles/message.css
@@ -80,10 +80,11 @@ p {
   box-shadow: hsl(0, 0%, 80%) 0 0 1.6rem;
   padding: 0.5rem 1rem 0.5rem 0.5rem;
   border-radius: 0.7rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.9rem;
   float: left;
   clear: both;
   width: fit-content;
+  width: 15rem;
 }
 
 .msg-div {
@@ -98,15 +99,18 @@ p {
   margin-top: 0.5rem;
   font-size: 0.7rem;
   color: gray;
+  width: 15rem;
+  padding-right: 0.7rem;
 }
 
 .sender-msg p {
   font-size: 0.9rem;
+  word-wrap: break-word;
 }
 
 .time-sent {
   font-family: monospace;
-  float: left;
+  /* float: left; */
   clear: both;
   margin-top: 0.7rem;
   color: purple;
@@ -120,8 +124,9 @@ p {
   float: right;
   clear: both;
   width: fit-content;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.9rem;
   display: inline;
+  width: 15rem;
 }
 
 .recipient:last-child {
@@ -139,11 +144,11 @@ p {
   border-left: none;
   border-top: none;
   border-bottom: none;
-  padding: 0.3rem;
+  padding: 0.4rem;
 }
 
 .recipient-msg {
-  text-align: right;
+  text-align: left;
   margin-top: 0.5rem;
   padding-left: 0;
   color: gray;
@@ -152,6 +157,8 @@ p {
 
 .recipient-msg p {
   font-size: 0.9rem;
+  word-wrap: break-word;
+  line-height: 1.3rem;
 }
 
 .nav {
@@ -199,4 +206,12 @@ button {
   .msg-cont {
     padding: 0 6rem;
   }
+
+  .header{
+    padding: 0.5rem 6rem;
+  }
+
+  .nav{
+    padding: 0.5rem 5rem;
+  }
 }
diff --git a/Assets/styles/notifications.css b/Assets/styles/notifications.css
@@ -24,6 +24,7 @@ body {
   box-shadow: hsl(0, 0%, 90%) 0 0 4px;
   padding: 1em 1.5em;
   z-index: 4;
+  background-color: white;
 }
 .header h2 {
   font-size: 1rem;

diff --git a/Assets/styles/post.css b/Assets/styles/post.css
@@ -17,10 +17,12 @@ header {
   justify-content: center;
   align-items: center;
   position: relative;
+  gap: 1.5rem;
 }
 
 i.bi-caret-left {
   margin-top: 0.3rem;
+  font-size: 1rem;
 }
 
 button {

diff --git a/Assets/styles/style.css b/Assets/styles/style.css
@@ -66,6 +66,8 @@ i.bi-bell {
   display: none;
 }
 
+
+
 main {
   margin: 4em 0 2em;
   height: fit-content;
@@ -253,6 +255,7 @@ main {
   color: black;
   padding: 1rem;
 }
+
 .fprofile {
   display: none;
 }
@@ -291,6 +294,9 @@ main {
     background: white;
     z-index: 99;
   }
+  .desktop-nav a{
+    color: black;
+  }
   .icon-nav-links {
     display: flex;
     align-items: center;