css for profile section

yale-swe · Apr 16, 2024 · 8f98b77 · 8f98b77
1 parent 5aa078a
commit 8f98b77
Show file tree

Hide file tree

Showing 4 changed files with 196 additions and 47 deletions.
diff --git a/frontend/src/app/page.module.css b/frontend/src/app/page.module.css
@@ -287,43 +287,3 @@
   }
 }
 
-.floatingProfileButton {
-  position: fixed;
-  bottom: 20px;
-  right: 70px;
-  width: 50px; 
-  height: 50px; 
-  padding: 10px 15px;
-  border-radius: 50%;
-  background-color: #468ff2;
-  background-image: url('profile_icon.png'); 
-  background-repeat: no-repeat;
-  background-position: center; 
-  background-size: 40%; 
-  color: white;
-  border: none;
-  cursor: pointer;
-  box-shadow: 2px 2px 10px rgb(0 0 0 / 20%);
-  z-index: 1200;
-}
-
-
-.profileContainer {
-  position: fixed;
-  bottom: 70px; /* Adjust based on your design */
-  right: 10px;
-  width: 300px; /* Adjust size as needed */
-  background: white;
-  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-  transition: right 0.3s ease-in-out;
-  /* More styles */
-} 
-
-
-.profileVisible {
-  right: 10px; /* Adjust to make visible */
-}
-
-.closeButton {
-  /* Style the close button */
-}
diff --git a/frontend/src/app/profile.module.css b/frontend/src/app/profile.module.css
@@ -0,0 +1,187 @@
+.floatingProfileButton {
+    position: fixed;
+    bottom: 20px;
+    right: 90px; /* Adjust based on chat button placement */
+    z-index: 1001;
+    background-image: url('profile-icon.png'); 
+    background-size: cover;
+    width: 50px; 
+    height: 50px; 
+    padding: 10px 15px;
+    border-radius: 50%;
+    background-color: white;
+    background-repeat: no-repeat;
+    background-position: center; 
+    background-size: 130%; 
+    color: white;
+    border: none;
+    cursor: pointer;
+    box-shadow: 2px 2px 10px rgb(0 0 0 / 20%);
+  }
+
+/* Profile Popup styling */
+.profileContainer {
+  background-color: #fff;
+  padding: 15px;
+  /* padding-top: 40px;  */
+  border-radius: 8px;
+  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+}
+
+.profileHeader {
+  background-color: #468ff2; /* Lighter blue to match button */
+  color: white;
+  padding: 8px 20px;
+  border-radius: 8px 8px 0 0;
+  font-size: 1.1em;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  margin-top: 10px;
+  margin-bottom: 10px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+}
+
+.profileDetails {
+  padding: 10px;
+  background-color: #f7f7f7; /* Softer background for contrast */
+  margin-top: -10px; /* Overlap with header */
+  border-radius: 0 0 8px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px; /* Consistent spacing between inputs */
+}
+
+.inputField, .searchInput {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 10px 15px;
+  font-size: 1em;
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
+}
+
+.button {
+  display: inline-block;
+  padding: 10px 20px;
+  margin-top: 10px;
+  font-size: 1em;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.saveButton {
+  background-color: #5C7AEA;
+  color: white;
+}
+
+.saveButton:hover {
+  background-color: #4a65d0;
+}
+
+.closeButton {
+  position: absolute;
+  top: 12px;
+  right: 20px;
+  width: 30px;
+  height: 30px;
+  line-height: 30px; 
+  text-align: center;
+  border-radius: 50%;
+  background-color: #ccc;
+  color: white;
+  font-size: 18px;
+  font-weight: bold;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0; /* Remove padding to avoid offset */
+}
+
+.closeButton:hover {
+  background-color: #b1b1b1;
+}
+
+.courseSearch {
+  margin-top: 10px;
+}
+
+.saveButton::before {
+  /* content: url('save-icon.png'); */
+  margin-right: 8px;
+}
+
+.closeButton::before {
+  /* content: url('close-icon.png'); */
+  margin-right: 8px;
+}
+
+.profileContainer {
+  transform: scale(0.9);
+  opacity: 0;
+  transition: all 0.3s ease-in-out;
+}
+
+.profileVisible {
+  transform: scale(1);
+  opacity: 1;
+}
+
+  .profileContainer {
+    position: fixed;
+    bottom: 80px; 
+    right: 50px;
+    width: 300px; /* Adjust size as needed */
+    height: 400px;
+    background: white;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    transition: right 0.3s ease-in-out;
+    border: 2px solid var(--color-border);
+    box-shadow: 0 0 10px 10px rgb(0 0 0 / 20%);
+    overflow-y: auto;
+    border-radius: 10px;
+    z-index: 1100;
+  } 
+
+
+  .profileVisible {
+    right: 80px; /* Adjust to make visible */
+  }
+
+  .profileButton, .closeButton, .toggleChatHistoryButton, .sendButton {
+    padding: 6px 12px;
+    border: none;
+    border-radius: 20px;
+    background-color: #468ff2;
+    color: white;
+    font-weight: bold;
+    cursor: pointer;
+    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+    transition: background-color 0.3s;
+  }
+
+  .profileButton:hover, .closeButton:hover, .toggleChatHistoryButton:hover, .sendButton:hover {
+    background-color: #356ad2;
+  }
+
+  .inputField, .searchInput {
+    width: calc(100% - 32px);
+    padding: 10px 16px;
+    margin: 10px 0;
+    border: 1px solid #ccc;
+    border-radius: 20px;
+    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+    font-size: 14px;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  }
+
+  .profileDetails, .courseSearch {
+    padding: 10px;
+    background-color: #f9f9f9;
+    border-radius: 10px;
+    margin-bottom: 10px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  }
+
diff --git a/frontend/src/app/profile_icon.png b/frontend/src/app/profile_icon.png
diff --git a/frontend/src/app/profiles.tsx b/frontend/src/app/profiles.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState } from "react";
-import styles from "./page.module.css"; 
+import styles from "./profile.module.css"; 
 
 const ProfilePopup = () => {
     const [popupVisible, setPopupVisible] = useState(false);
@@ -73,16 +73,18 @@ const ProfilePopup = () => {
 
                     <div className={styles.profileHeader}>User Profile</div>
                     <div className={styles.profileDetails}>
-                        <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder="Username" />
-                        <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
-                        <button onClick={handleSaveProfile}>Save</button>
+                        <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} className={styles.inputField} placeholder="Username" />
+                        <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} className={styles.inputField} placeholder="Email" />
+                        <button onClick={handleSaveProfile} className={styles.sendButton}>Save</button>
                     </div>
                     <div className={styles.courseSearch}>
-                        <input type="text" value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Search courses" />
-                        <button onClick={handleAddCourse}>Add Course</button>
+                        <input type="text" value={search} onChange={(e) => setSearch(e.target.value)} className={styles.inputField} placeholder="Search courses" />
+                        <button onClick={handleAddCourse} className={styles.sendButton}>Add Course</button>
                         {courses.map(course => <div key={course}>{course}</div>)}
                     </div>
-                    <button onClick={togglePopupVisibility} className={styles.closeButton}>Close</button>
+                    <button onClick={togglePopupVisibility} className={styles.closeButton}>
+                        &times;
+                    </button>
                 </div>
             )}