Overnight push

GDGVIT · Sep 2, 2024 · 351bec7 · 351bec7
1 parent 6ad91a3
commit 351bec7
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 72 deletions.
diff --git a/ao3 webpages/components/Sidebar/Sidebar.jsx b/ao3 webpages/components/Sidebar/Sidebar.jsx
@@ -171,7 +171,7 @@ const Sidebar = () => {
                 </div>
             </div>
             <div className="bottom-icons">
-                <div className="icon-wrapper">
+                <div className={`icon-wrapper ${activeItem === 'Settings' ? 'active' : ''}`} onClick={() => handleItemClick('Settings')}>
 
                     <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M12.3137 15.273C14.1212 15.273 15.5865 13.8077 15.5865 12.0003C15.5865 10.1928 14.1212 8.72754 12.3137 8.72754C10.5063 8.72754 9.04102 10.1928 9.04102 12.0003C9.04102 13.8077 10.5063 15.273 12.3137 15.273Z" stroke="#6B7A8F" strokeWidth="1.8" />

diff --git a/ao3 webpages/src/pages/settings.jsx b/ao3 webpages/src/pages/settings.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Edit2, Heart } from 'lucide-react';
-
+import Sidebar from '../../components/Sidebar/Sidebar';
 const SettingsPage = () => {
   const [username, setUsername] = useState('rounakag');
   const [email, setEmail] = useState('[email protected]');
@@ -13,6 +13,8 @@ const SettingsPage = () => {
       margin: 0,
       padding: 0,
       minHeight: '100vh',
+      minWidth: '80vw',
+      marginLeft: '15vw',
     },
     container: {
       maxWidth: '1200px',
@@ -129,6 +131,7 @@ const SettingsPage = () => {
     toggleButtonHover: {
       transform: 'scale(1.05)',
     },
+
   };
 
   const handleProfilePictureHover = () => {
@@ -137,78 +140,81 @@ const SettingsPage = () => {
   };
 
   return (
-    <div style={styles.body}>
-      <div style={styles.container}>
-        <header style={styles.header}>
-          <h1 style={styles.title}>Settings</h1>
-          <span style={styles.madeWith}>
-            Made with <Heart size={16} style={styles.heart} /> by GDSC - VIT
-          </span>
-        </header>
-        <h2 style={styles.sectionTitle}>Profile</h2>
-        <section style={styles.section}>
-
-          <div style={styles.profileContainer}>
-            <div style={styles.profileInputs}>
-              <div style={styles.inputContainer}>
-                <label style={styles.label}>Username</label>
-                <input
-                  type="text"
-                  value={username}
-                  onChange={(e) => setUsername(e.target.value)}
-                  style={styles.input}
-                  onMouseEnter={(e) => Object.assign(e.target.style, styles.inputHover)}
-                  onMouseLeave={(e) => Object.assign(e.target.style, styles.input)}
-                />
-                <Edit2 size={16} style={styles.editIcon} />
-              </div>
-              <div style={styles.inputContainer}>
-                <label style={styles.label}>Email</label>
-                <input
-                  type="email"
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  style={styles.input}
-                  onMouseEnter={(e) => Object.assign(e.target.style, styles.inputHover)}
-                  onMouseLeave={(e) => Object.assign(e.target.style, styles.input)}
-                />
-                <Edit2 size={16} style={styles.editIcon} />
+    <div className="flex bg-gray-50">
+      <Sidebar />
+      <div style={styles.body}>
+        <div style={styles.container}>
+          <header style={styles.header}>
+            <h1 style={styles.title}>Settings</h1>
+            <span style={styles.madeWith}>
+              Made with <Heart size={16} style={styles.heart} /> by GDSC - VIT
+            </span>
+          </header>
+          <h2 style={styles.sectionTitle}>Profile</h2>
+          <section style={styles.section}>
+
+            <div style={styles.profileContainer}>
+              <div style={styles.profileInputs}>
+                <div style={styles.inputContainer}>
+                  <label style={styles.label}>Username</label>
+                  <input
+                    type="text"
+                    value={username}
+                    onChange={(e) => setUsername(e.target.value)}
+                    style={styles.input}
+                    onMouseEnter={(e) => Object.assign(e.target.style, styles.inputHover)}
+                    onMouseLeave={(e) => Object.assign(e.target.style, styles.input)}
+                  />
+                  <Edit2 size={16} style={styles.editIcon} />
+                </div>
+                <div style={styles.inputContainer}>
+                  <label style={styles.label}>Email</label>
+                  <input
+                    type="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    style={styles.input}
+                    onMouseEnter={(e) => Object.assign(e.target.style, styles.inputHover)}
+                    onMouseLeave={(e) => Object.assign(e.target.style, styles.input)}
+                  />
+                  <Edit2 size={16} style={styles.editIcon} />
+                </div>
               </div>
+              <div
+                style={styles.profilePicture}
+                onMouseEnter={handleProfilePictureHover}
+              ></div>
+            </div>
+          </section>
+          <h2 style={styles.sectionTitle}>Appearance</h2>
+          <section style={styles.section}>
+
+            <div style={styles.toggleContainer}>
+              <button
+                onClick={() => setAppearance('light')}
+                style={{
+                  ...styles.toggleButton,
+                  ...(appearance === 'light' ? styles.activeToggle : styles.inactiveToggle),
+                }}
+                onMouseEnter={(e) => Object.assign(e.target.style, styles.toggleButtonHover)}
+                onMouseLeave={(e) => Object.assign(e.target.style, appearance === 'light' ? { ...styles.toggleButton, ...styles.activeToggle } : { ...styles.toggleButton, ...styles.inactiveToggle })}
+              >
+                Light
+              </button>
+              <button
+                onClick={() => setAppearance('dark')}
+                style={{
+                  ...styles.toggleButton,
+                  ...(appearance === 'dark' ? styles.activeToggle : styles.inactiveToggle),
+                }}
+                onMouseEnter={(e) => Object.assign(e.target.style, styles.toggleButtonHover)}
+                onMouseLeave={(e) => Object.assign(e.target.style, appearance === 'dark' ? { ...styles.toggleButton, ...styles.activeToggle } : { ...styles.toggleButton, ...styles.inactiveToggle })}
+              >
+                Dark
+              </button>
             </div>
-            <div 
-              style={styles.profilePicture}
-              onMouseEnter={handleProfilePictureHover}
-            ></div>
-          </div>
-        </section>
-        <h2 style={styles.sectionTitle}>Appearance</h2>
-        <section style={styles.section}>
-
-          <div style={styles.toggleContainer}>
-            <button
-              onClick={() => setAppearance('light')}
-              style={{
-                ...styles.toggleButton,
-                ...(appearance === 'light' ? styles.activeToggle : styles.inactiveToggle),
-              }}
-              onMouseEnter={(e) => Object.assign(e.target.style, styles.toggleButtonHover)}
-              onMouseLeave={(e) => Object.assign(e.target.style, appearance === 'light' ? {...styles.toggleButton, ...styles.activeToggle} : {...styles.toggleButton, ...styles.inactiveToggle})}
-            >
-              Light
-            </button>
-            <button
-              onClick={() => setAppearance('dark')}
-              style={{
-                ...styles.toggleButton,
-                ...(appearance === 'dark' ? styles.activeToggle : styles.inactiveToggle),
-              }}
-              onMouseEnter={(e) => Object.assign(e.target.style, styles.toggleButtonHover)}
-              onMouseLeave={(e) => Object.assign(e.target.style, appearance === 'dark' ? {...styles.toggleButton, ...styles.activeToggle} : {...styles.toggleButton, ...styles.inactiveToggle})}
-            >
-              Dark
-            </button>
-          </div>
-        </section>
+          </section>
+        </div>
       </div>
     </div>
   );