Small css changes

lashwi · Nov 17, 2023 · ca7460b · ca7460b
1 parent 7ec52e7
commit ca7460b
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 27 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx
@@ -20,10 +20,6 @@ export default function Home() {
       <Navbar />
       <Toolbar />
       <div>
-        {/* Button to open/close the TaskPopup */}
-        <button onClick={handleTogglePopup}>Task Details</button>
-        {/* Conditionally render the TaskPopup based on showPopup state */}
-        {showPopup && <TaskDetails onClose={handleTogglePopup} />}
       </div>
     </div>
   );

diff --git a/client/src/components/Board/styles.css b/client/src/components/Board/styles.css
@@ -1,5 +1,5 @@
 .board-bg-grid {
   background-size: 50px 50px;
-  background-image: radial-gradient(circle, #666666 2px, rgba(0, 0, 0, 0) 2px);
+  background-image: radial-gradient(circle, #c8c8c8 2px, rgba(0, 0, 0, 0) 2px);
   background-position: left 25px top 25px;
 }
diff --git a/client/src/components/Navbar/Navbar.module.css b/client/src/components/Navbar/Navbar.module.css
@@ -2,11 +2,12 @@
   /* NavBar.module.css */
 
 .navBar {
+  width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.5em; /* Adjust padding as needed */
-  background: #f8f8f8; /* Example background color */
+  padding: 0.2em 0.5em; /* Adjust padding as needed */
+  background: rgba(239, 224, 255); /* Example background color */
 }
 
 .icon, .titleInput, .navigationButtons, .userArea {
@@ -22,7 +23,7 @@
 /* Style for the input area */
 .titleInput {
   border: 1px solid #ddd; /* Example border style */
-  padding: 0.5em;
+  padding: 0.2em;
   font-size: 1em;
   width: 300px;
 }

diff --git a/client/src/components/Navbar/index.tsx b/client/src/components/Navbar/index.tsx
@@ -8,7 +8,7 @@ export default function Navbar() {
   return (
     <nav className={`${styles.navBar} absolute top-0 left-0 z-20`}>
       <div className={styles.icon}>
-        <FolderOpenIcon className={styles.addButton} style={{ fontSize: '40px', color: 'black' }} /> {/* Replace with your folder icon path */}
+        <FolderOpenIcon className={styles.addButton} style={{ fontSize: '24px', color: 'black' }} /> {/* Replace with your folder icon path */}
       </div>
       <input type="text" className={styles.titleInput} placeholder="Title" />
       <div className={styles.navigationButtons}>

diff --git a/client/src/components/TaskDetails/DependencyView.tsx b/client/src/components/TaskDetails/DependencyView.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React from 'react';
 import styles from './TaskPopup.module.css';
+import CloseIcon from '@mui/icons-material/Close';
 
 type DependencyGraphPopupProps = {
   onClose: () => void; // function to close the popup
@@ -13,16 +14,7 @@ function DependencyView({ onClose }: DependencyGraphPopupProps) {
   return (
     <div className={styles.overlay}>
       <div className={styles.popup}>
-        <div className={styles.closeButton} onClick={onClose} style={{ position: 'relative' }}>
-          <span style={{
-            position: 'absolute',
-            top: '0',
-            right: '5px',
-            fontSize: '24px',
-            lineHeight: '24px',
-            cursor: 'pointer' // Optional, for a pointer cursor on hover
-          }}>×</span>
-        </div>
+      <CloseIcon className={styles.closeButton2} onClick={onClose}></CloseIcon>
         <div style={{ width: '50%', margin: '0px auto' }}>
           <div style={{ alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
             {task1.map((number, idx) =>

diff --git a/client/src/components/TaskDetails/TaskPopup.module.css b/client/src/components/TaskDetails/TaskPopup.module.css
@@ -23,7 +23,7 @@
   max-height: 180vh;
   overflow: auto;
   padding: 20px;
-  font-size: large;
+  font-size: medium;
 }
 
 .leftPanel {
@@ -56,7 +56,7 @@
   padding: 8px;
   border: 1px solid #ddd;
   border-radius: 8px;
-  font-size: larger;
+  font-size: large;
 }
 
 .inputField {
@@ -85,9 +85,9 @@
 
 .bottomButton {
   margin-top: auto;
-  padding: 10px 20px;
+  padding: 0.2em 0.5em;
   text-align: center;
-  font-size: larger;
+  font-size: large;
   color: #efe0ff;
   background-color: #463D62;
   border-top: 1px solid #ddd;
@@ -115,3 +115,14 @@
   margin-bottom: 8px;
   padding: 8px;
 }
+
+.closeButton {
+  color:#463D62;
+}
+
+.closeButton2 {
+  display: flex;
+  align-self: flex-end;
+  color:#463D62;
+  cursor: 'pointer';
+}
diff --git a/client/src/components/TaskDetails/index.tsx b/client/src/components/TaskDetails/index.tsx
@@ -4,6 +4,7 @@ import React, { useState } from 'react';
 import styles from './TaskPopup.module.css';
 import Dropdown from '@/components/Dropdown';
 import { Button } from '@mui/joy';
+import CloseIcon from '@mui/icons-material/Close';
 import Select from 'react-select';
 
 import DependencyView from './DependencyView';
@@ -106,14 +107,13 @@ export default function TaskDetails({ onClose }: TaskPopupProps) {
             </div>
 
             <div >
-              <Button onClick={handleDependencyGraph}>View dependency graph</Button>
+              <Button onClick={handleDependencyGraph} className={styles.bottomButton}>View dependency graph</Button>
               {showDependencyGraph && <DependencyView onClose={handleDependencyGraph} />}
             </div>
           </div>
 
-          <div className={styles.closeButton} onClick={onClose}>
-            ✖️
-          </div>
+
+          <CloseIcon className={styles.closeButton} onClick={onClose}></CloseIcon>
         </div>
       </div>
     </div>