Minor Tweaks

Author: ronakkothari123

dashboard/profile.html

@@ -54,13 +54,13 @@ <h1>Ronak Kothari <img src="../icons/verified.svg" alt=""></h1>
             <h2>@ronakkothari123</h2>
             <p>👋 Hello! I am a cricket enthusiast that is a developer of this Cricket Fantasy League website. My hobbies include, cricket, programming, Minecraft, and mathematics.</p>
             <div id="profile-buttons">
-                <button class="profile-button">
-                    <img src="../icons/friends.svg" alt="">
-                    Add Friend
+                <button class="profile-button" onclick="toggleBtn(0)">
+                    <img src="../icons/addfriend.svg" alt="" id="friend-img">
+                    <p id="friend-btn">Add Friend</p>
                 </button>
-                <button class="profile-button">
-                    <img src="../icons/nostar.svg" alt="">
-                    Follow User
+                <button class="profile-button" onclick="toggleBtn(1)">
+                    <img src="../icons/nostar.svg" alt="" id="follow-img">
+                    <p id="follow-btn">Follow User</p>
                 </button>
             </div>
             <div id="profile-text">

icons/addfriend.svg

@@ -85,9 +85,6 @@ function toggleTheme() {
         document
             .querySelector(":root")
             .style.setProperty("--background-1", "#1b2028");
-        document
-            .querySelector(":root")
-            .style.setProperty("--border-color", "#171a1f");
         document
             .querySelector(":root")
             .style.setProperty("--icon-brightness", 1);
@@ -99,9 +96,6 @@ function toggleTheme() {
         document
             .querySelector(":root")
             .style.setProperty("--background-1", "#ffffff");
-        document
-            .querySelector(":root")
-            .style.setProperty("--border-color", "#cccccc");
         document
             .querySelector(":root")
             .style.setProperty("--icon-brightness", 0);

icons/unfriend.svg

@@ -7,6 +7,9 @@ const profileModal = document.querySelector("#profile-modal")
 const nameUpperCase = true;
 let modalActive = false;
 
+let friend = false;
+let follow = false;
+
 const patterns = [
     "https://www.toptal.com/designers/subtlepatterns/patterns/double-bubble.png",
     "https://www.toptal.com/designers/subtlepatterns/patterns/moroccan-flower.png",
@@ -34,6 +37,29 @@ function hexToRgb(hex) {
     } : null;
 }
 
+function toggleBtn(btnNum){
+    if(btnNum == 0){
+        friend = !friend;
+
+        if(friend){
+            document.getElementById('friend-btn').innerHTML = "Unfriend User"
+            document.getElementById('friend-img').src = "../icons/unfriend.svg"
+        } else {
+            document.getElementById('friend-btn').innerHTML = "Friend User"
+            document.getElementById('friend-img').src = "../icons/addfriend.svg"
+        }
+    } else if(btnNum == 1){
+        follow = !follow;
+
+        if(follow){
+            document.getElementById('follow-btn').innerHTML = "Unfollow User"
+            document.getElementById('follow-img').src = "../icons/fullstar.svg"
+        } else {
+            document.getElementById('follow-btn').innerHTML = "Follow User"
+            document.getElementById('follow-img').src = "../icons/nostar.svg"
+        }
+    }
+}
 
 function toggleModal(){
     modalActive = !modalActive;