CSS Fixes

Got rid of all the errors of duplicate colors/sizing.

frontend-next/src/app/login/page.js

@@ -45,7 +45,7 @@ function Login() {
                         >
                             <input type="email" id="email" className={(errors.email && errors.password) && "err"} {...register("email", { required: true })} placeholder="Enter Email Address"/><br/>
                             <input type="password" id="password" name="password" className={(errors.email && errors.password) && "err"} {...register("password", { required: true })} placeholder="Enter Password"/><br/>
-                            <button type="submit" className="inline-flex items-center px-4 py-2 transition ease-in-out duration-150 bg-[#dee0e0] m-5 bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">
+                            <button type="submit" className="inline-flex items-center transition ease-in-out duration-150 m-5 bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">
                                 {(isSubmitting || isSubmitted) && <span className="inline-block">
                                     <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                         <circle class="opacity-25" cx="12" cy="12" r="10" strokeWidth="4"></circle>

frontend-next/src/app/register/page.js

@@ -60,7 +60,7 @@ function Register() {
                             <input type="password" {...register("password", {required: true})} className={errors.password && errors.password.type == 'required' && "err"} placeholder="Enter Password"/><br/>
                             <input type ="password" {...register("passwordCheck", {required: false})} className ={errors.passwordCheck && errors.passwordCheck.type == 'required' && "err"} placeholder="Re-enter Password"/><br/>
                                 {passwordMismatch && <p className="text-red-500">Passwords do not match</p>}
-                            <button type="submit" className="bg-[#dee0e0] m-5 bg-cyan-500 text-white font-bold py-2 px-4 rounded-full"> Register</button><br/>
+                            <button type="submit" className=" m-5 bg-cyan-500 text-white font-bold py-2 px-4 rounded-full"> Register</button><br/>
                             Have an account? <a href="/login">Log In</a>
                         </Form>
                     </div>

frontend-next/src/app/user/[stub]/page.js

@@ -129,8 +129,8 @@ function Home({ params }) {
                     {userInterestArray}
                     </div>
                     <div className="grid grid-cols-1 auto-cols-min justify-items-center">
-                    {isOwner && ( <a onClick={() => {setEdit(true)}} className="w-[120px] p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full text-center"> Edit Profile </a> )}
-                    {!isOwner && ( <a className="w-[120px] p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full text-center"> Add Friend </a> )}
+                    {isOwner && ( <a onClick={() => {setEdit(true)}} className="w-[120px] p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full text-center"> Edit Profile </a> )}
+                    {!isOwner && ( <a className="w-[120px] p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full text-center"> Add Friend </a> )}
                     </div>
                   </div>
                 )}
@@ -168,7 +168,7 @@ function Home({ params }) {
                             <textarea className="w-[92%] border-2 border-gray-300 p-2 rounded-lg"  {...register("bio")} type="text" placeholder={profileData.bio}/>
                           </div>
                           <div className="justify-items-center pt-5 col-span-2">
-                            <button type="submit" className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full text-center"> Save Changes </button>
+                            <button type="submit" className="p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full text-center"> Save Changes </button>
                           </div>
                         </div>
                       </Form>

frontend-next/src/components/app/header.js

@@ -91,7 +91,7 @@ export function Header({mainTab, isMyRoom, chatRoomObj, setChatRoomObj, setMainT
                 onClick={() => {
                   addToMyRooms(chatRoomObj, setIsMyRoom, user);
                 }}
-                className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5 flex items-center"
+                className="p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full mr-5 flex items-center"
               >
                 Add to "My Rooms"
               </a>
@@ -101,7 +101,7 @@ export function Header({mainTab, isMyRoom, chatRoomObj, setChatRoomObj, setMainT
                 onClick={() => {
                   removeFromMyRooms(chatRoomObj, setIsMyRoom, user);
                 }}
-                className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5 flex items-center"
+                className="p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full mr-5 flex items-center"
               >
                 Remove from &quot;My Rooms&quot;
               </a>
@@ -111,7 +111,7 @@ export function Header({mainTab, isMyRoom, chatRoomObj, setChatRoomObj, setMainT
                 onClick={() => {
                   closeChatRoom(chatRoomObj, setChatRoomObj, setMainTab, user);
                 }}
-                className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5 flex items-center"
+                className="p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full mr-5 flex items-center"
               >
                 Close Chat
               </a>
@@ -119,7 +119,7 @@ export function Header({mainTab, isMyRoom, chatRoomObj, setChatRoomObj, setMainT
            
                 <Popover className="relative">
                   <Popover.Button as="div">
-                    <div className="mr-5 h-[44px] p-[2px] pr-[15px] cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full shadow-2xl flex">
+                    <div className="mr-5 h-[44px] p-[2px] pr-[15px] cursor-pointer bg-cyan-500 text-white font-bold rounded-full shadow-2xl flex">
                       <div className="flex items-center pl-1">
                       {user.firstName}
                       </div>

frontend-next/src/components/app/main_tab/chat.js

@@ -84,7 +84,7 @@ export function MainTabChatRoom({ roomObj, user }) {
             placeholder="Enter message"
             className="w-[83%] border-[0px] mt-[8px] mb-[8px]"
           />
-          <button className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5 w-[8%]">
+          <button className="p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full mr-5 w-[8%]">
             Send
           </button>
         </Form>

frontend-next/src/components/app/sidebar/home.js

@@ -42,7 +42,7 @@ function CreateRoom({ loc }) {
             Creating room near ({loc.latitude.toFixed(2)},{" "}
             {loc.longitude.toFixed(2)})
           </div>
-          <button className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5">
+          <button className="p-2 cursor-pointer bg-cyan-500 text-white font-bold rounded-full mr-5">
             Create
           </button>
         </Form>