Merge pull request #40 from bliutech/moreCSS

finished formatting

client/src/components/DropdownMenu.jsx

@@ -1,5 +1,3 @@
-import styles from "../styles/components/DropdownMenu.module.css";
-
 import { useEffect, useState } from "react";
 function DropdownMenu() {
   const [selected, setSelected] = useState("");
@@ -22,7 +20,7 @@ function DropdownMenu() {
   };
 
   return (
-    <select id="myDropdown" onChange={handleChange}>
+    <select onChange={handleChange}>
       <option value="">Select a dataset</option>
       {dropDownOptions.map((option) => (
         <option key={option.value} value={option.value}>

client/src/pages/ContributePage.jsx

@@ -13,6 +13,7 @@ function ImageUploader() {
     let file = event.target.files[0];
     if (file === undefined) {
       alert("Please upload a file");
+      setImage();
       return;
     }
     console.log(file);
@@ -39,7 +40,6 @@ function ImageUploader() {
   return (
     <div className={styles.contribute}>
       <p className={styles.header}>Upload Images</p>
-      <br></br>
       <div>
         <DropdownMenu selected={selected} />
       </div>
@@ -51,13 +51,14 @@ function ImageUploader() {
         onChange={handleImageChange}
       ></input>
       <p></p>
+      {image === "" ? null : <img className={styles.image} src={image} />}
+      <p></p>
       <input
         type="button"
         value="Upload"
         className={styles.uploader}
         onClick={() => handleSubmit()}
       ></input>
-      {image === "" ? null : <img src={image} alt="Upload image" />}
     </div>
   );
 }

client/src/pages/DashboardPage.jsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useCookies } from "react-cookie";
+import styles from "../styles/pages/DashboardPage.module.css";
 
 function DashboardPage() {
   document.title = "Dashboard";

client/src/pages/DatasetPage.jsx

@@ -1,12 +1,13 @@
 import { useState } from "react";
 import { useCookies } from "react-cookie";
+import styles from "../styles/pages/DatasetPage.module.css";
 
 function DatasetPage() {
   document.title = "Datasets";
   const [cookies, setCookie, removeCookie] = useCookies("");
   const [auth, setAuth] = useState(false);
 
-  return <p></p>;
+  return <div className={styles.data}></div>;
 }
 
 export default DatasetPage;

client/src/pages/HomePage.jsx

@@ -4,18 +4,18 @@ function HomePage() {
   document.title = "GSET23BSG";
 
   return (
-    <div>
-      <text className={styles.logo}>SeBRUS</text>
-      <br></br>
-      <br></br>
-      <div className="home-image-container">
-        <img
-          alt="filler"
-          width="300"
-          height="200"
-          src="https://media.istockphoto.com/id/953499010/photo/blockchain-technology-structure-defocused.jpg?s=1024x1024&w=is&k=20&c=5x3Mmp9kIsHraabTUGK9Lbm9fJZ0PkbqW0WE_oYTF64="
-        />
-      </div>
+    <div className={styles.home}>
+      {/* <text className={styles.logo}>SeBRUS</text>
+            <br></br>
+            <br></br>
+            <div className="home-image-container">
+                <img
+                    alt="filler"
+                    width="300"
+                    height="200"
+                    src="https://media.istockphoto.com/id/953499010/photo/blockchain-technology-structure-defocused.jpg?s=1024x1024&w=is&k=20&c=5x3Mmp9kIsHraabTUGK9Lbm9fJZ0PkbqW0WE_oYTF64="
+                />
+            </div> */}
     </div>
   );
 }

client/src/styles/pages/ContributePage.module.css

@@ -4,15 +4,21 @@
     margin: 50px;
     border-radius: 30px;
     width: 40vw;
-    height: 100vh;
+    padding-bottom: 30px;
+    overflow-x: visible;
+    overflow-y:auto;
 }
 
 .header {
     color: snow;
-    margin: 20px;
     margin-top: 30px;
 }
 
+.image {
+    width:90%;
+    object-fit: contain;
+}
+
 .file {
     margin-left: 70px;
 }

client/src/styles/pages/HomePage.module.css

@@ -18,3 +18,13 @@ a:visited:active {
     font-family: "Cairo";
     font-weight: 550;
 }
+
+
+.home {
+    width: 100vw;
+    height: 100vh;
+    background-image: url(../../assets/sebrus2.png);
+    /* background-repeat: no-repeat; */
+    background-size:100vw 100vh;
+    opacity: 0.7;
+}