Final touches on styling

immichat-frontend/src/components/LandingPage.css

@@ -28,6 +28,10 @@
   --frames: 62;
 }
 
+.heart{
+  height:20vh;
+}
+
 .heart html {
   min-height: 100vh;
   display: flex;
@@ -137,14 +141,13 @@
 }
 
 .typing-demo {
-  width: 10ch;
+  width: 12ch;
   animation: typing 2s steps(22), blink 0.5s step-end infinite alternate;
   white-space: nowrap;
   overflow: hidden;
   border-right: 3px solid;
   font-family: "Poppins";
-    font-weight: bold;
-  font-size: 40px;
+  font-weight: bold;
 }
 
 @keyframes typing {

immichat-frontend/src/components/LandingPage.js

@@ -1,7 +1,7 @@
-import "./LandingPage.css";
-import { Navigate, Link } from "react-router-dom";
-import AuthenticationContext from "../context/AuthenticationContext";
-import React from "react";
+import './LandingPage.css';
+import { Navigate, Link } from 'react-router-dom';
+import AuthenticationContext from '../context/AuthenticationContext';
+import React from 'react';
 
 export default function Mission() {
   const { user } = React.useContext(AuthenticationContext);
@@ -28,7 +28,7 @@ export default function Mission() {
               to="/"
               className="navbar-brand"
               href="/"
-              style={{ paddingLeft: 150, fontSize: 40 }}
+              style={{ paddingLeft: 150, fontSize: 30 }}
             >
               <div className="wrapper">
                 <div className="typing-demo">Immichat</div>
@@ -48,14 +48,15 @@ export default function Mission() {
             <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
               <div
                 className="navbar-nav wrapper"
-                style={{ marginLeft: "35%", fontSize: 20 }}
+                style={{ marginLeft: '35%', fontSize: 20 }}
               >
                 <Link
                   className="nav-item nav-link active"
                   to="/home"
                   id="navicon"
                 >
-                  Home{" "}
+                  Home
+                  {' '}
                 </Link>
                 <Link className="nav-item nav-link" to="/auth" id="navicon">
                   Sign Up / Sign In
@@ -71,13 +72,13 @@ export default function Mission() {
                 through discussions, live chats, and resource sharing to
                 ultimately ease the culture shock of moving to a new country.
               </p>
-              <div className="heart">
+              <div className="heart" style={{ marginBottom: '10px' }}>
                 <label className="like">
                   <input type="checkbox" className="input" />
                   <div className="hearth" />
                 </label>
               </div>
-              <span className="message">Click on heart to support!</span>
+              <h3 style={{ marginRight: '10%', fontSize: 25 }}>Click on heart to support!</h3>
             </div>
           </div>
           <div className="rightimage">

immichat-frontend/src/components/Messages.js

@@ -1,5 +1,4 @@
 import Sidebar from "./Sidebar";
-import RightSideBar from "./RightSideBar";
 import AuthenticationContext from "../context/AuthenticationContext";
 import React from "react";
 import InboxList from "./InboxList";

immichat-frontend/src/components/ProfileComponents/Bio.js

@@ -1,6 +1,7 @@
 const Bio = ({ onChange, value }) => (
     <div className="field">
       <div id="last">
+        <div className="theBio">
       <label htmlFor="status">Bio/Status:</label>
       <input
         id="Bio"
@@ -12,6 +13,7 @@ const Bio = ({ onChange, value }) => (
         required
       />
       </div>
+      </div>
     </div>
 );
 

immichat-frontend/src/components/RightSideBar.js

@@ -15,6 +15,7 @@ const RightSideBar = (props) => {
           <button className="btn rounded-pill btn-primary mx-2">Search</button>
         </form> */}
         <div>
+          <h3>Search for friend:</h3>
           <SearchBar />
         </div>
         <div className="pt-5 d-flex flex-wrap justify-content-between border-bottom border-dark">

immichat-frontend/src/components/Sidebar.js

@@ -2,7 +2,6 @@ import {
   Home,
   Message,
   AccountCircle,
-  Settings,
   Notifications,
 } from "@mui/icons-material";
 import LanguageChange from "./translate";

immichat-frontend/src/components/formStuff.js

@@ -160,7 +160,7 @@ const ButtonAnimate = styled.button`
 const Text = styled.div`
   position: absolute;
   z-index: 1000;
-  font-size: 1.75rem;
+  font-size: 1.5rem;
   display: flex;
   flex-direction: column;
   letter-spacing: 0.2rem;

immichat-frontend/src/components/profilecard.css

@@ -1,7 +1,7 @@
 .profilecard body
 {
   font-family: "Poppins";
-    display: flex;
+  display: flex;
   justify-content: center;
   background-repeat: no-repeat, no-repeat;
   background-position: 200% -40%;
@@ -10,7 +10,7 @@
 
 .profilecard  .card
 {
-  width: 40vw;
+  width: 38vw;
   height: 70vh;
   padding: 15px;
   margin-top: 100px;
@@ -38,7 +38,6 @@
 .profilecard  .field
 {
   margin: 5px;
-  display: block;
   align-items: center;
   flex-direction: column;
 }
@@ -52,7 +51,6 @@
 {
   color: #b19cd9;
   font-weight: bold;
-  margin-bottom: 10px;
 }
 
 .card .email
@@ -83,7 +81,7 @@
   padding: 6px;
   cursor: pointer;
   background: linear-gradient(270deg, blueviolet, blueviolet);
-  margin-bottom: 25px;
+  margin-bottom: 10px;
 }
 
 .profilecard  .img-wrap
@@ -219,18 +217,22 @@
 }
 
 .field label,input{
-  display:flex;
+  display: flex;
   flex-direction:column;
 }
 
 .field #first{
   margin-right: 300px;
-  height: 15px;
+  height: 5px;
 }
 
 .field #last{
   margin-left: 350px;
-  height: 20px;
+  height: 30px;
+}
+
+.field #last .theBio{
+  margin-bottom: 40px;
 }
 
 @keyframes savebounce