Merge pull request #38 from bliutech/ContributeCSS

formatted CSS
bliutech · Jul 17, 2023 · db22ab4 · db22ab4
2 parents 0f5cd40 + 36822b7
commit db22ab4
Show file tree

Hide file tree

Showing 10 changed files with 104 additions and 23 deletions.
diff --git a/client/src/components/DropdownMenu.jsx b/client/src/components/DropdownMenu.jsx
@@ -1,3 +1,5 @@
+import styles from "../styles/components/DropdownMenu.module.css";
+
 import { useEffect, useState } from "react";
 function DropdownMenu() {
   const [selected, setSelected] = useState("");
@@ -21,7 +23,7 @@ function DropdownMenu() {
 
   return (
     <select id="myDropdown" onChange={handleChange}>
-      <option value="">Select an option</option>
+      <option value="">Select a dataset</option>
       {dropDownOptions.map((option) => (
         <option key={option.value} value={option.value}>
           {option.text}

diff --git a/client/src/components/NavBar.jsx b/client/src/components/NavBar.jsx
@@ -10,7 +10,7 @@ function NavBar() {
   return (
     <div id={styles.navBar}>
       <div id={styles.bar}>
-        <div className={styles.logo}>BlockData</div>
+        <div className={styles.logo}>SeBRUS</div>
         <li>
           <Link id={styles.navLink} to="/">
             Home
@@ -26,6 +26,11 @@ function NavBar() {
             Dashboard
           </Link>
         </li>
+        <li>
+          <Link id={styles.navLink} to="/contribute">
+            Contribute
+          </Link>
+        </li>
         <li>
           <Link id={styles.navLink} to="/profile">
             Profile

diff --git a/client/src/pages/ContributePage.jsx b/client/src/pages/ContributePage.jsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import DropdownMenu from "../components/DropdownMenu";
+import styles from "../styles/pages/ContributePage.module.css";
 
 function ImageUploader() {
   const [image, setImage] = useState("");
@@ -10,6 +11,10 @@ function ImageUploader() {
 
   const handleImageChange = (event) => {
     let file = event.target.files[0];
+    if (file === undefined) {
+      alert("Please upload a file");
+      return;
+    }
     console.log(file);
     const fileReader = new FileReader();
     fileReader.readAsDataURL(file);
@@ -32,13 +37,26 @@ function ImageUploader() {
   const [selected, setSelected] = useState("");
 
   return (
-    <div>
-      <h2>Image Uploader</h2>
-      <DropdownMenu selected={selected} />
+    <div className={styles.contribute}>
+      <p className={styles.header}>Upload Images</p>
+      <br></br>
+      <div>
+        <DropdownMenu selected={selected} />
+      </div>
       <p></p>
-      <input type="file" name="image" onChange={handleImageChange} />
-      <button onClick={handleSubmit}>Submit</button>
-
+      <input
+        type="file"
+        name="image"
+        className={styles.file}
+        onChange={handleImageChange}
+      ></input>
+      <p></p>
+      <input
+        type="button"
+        value="Upload"
+        className={styles.uploader}
+        onClick={() => handleSubmit()}
+      ></input>
       {image === "" ? null : <img src={image} alt="Upload image" />}
     </div>
   );

diff --git a/client/src/pages/HomePage.jsx b/client/src/pages/HomePage.jsx
@@ -5,7 +5,7 @@ function HomePage() {
 
   return (
     <div>
-      <text className={styles.logo}>BlockData</text>
+      <text className={styles.logo}>SeBRUS</text>
       <br></br>
       <br></br>
       <div className="home-image-container">

diff --git a/client/src/pages/ProfilePage.jsx b/client/src/pages/ProfilePage.jsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useCookies } from "react-cookie";
 import { Link } from "react-router-dom";
-import styles from "../styles/components/LoginForm.module.css";
+import styles from "../styles/pages/ProfilePage.module.css";
 import { useNavigate } from "react-router-dom";
 import React from "react";
 
@@ -16,16 +16,14 @@ function ProfilePage() {
   }
 
   return (
-    <div>
-      <p>{cookies.name}'s account</p>
-      <li>
-        <input
-          type="button"
-          id={styles.button}
-          placeholder="Signout"
-          onClick={() => handleSignout()}
-        ></input>
-      </li>
+    <div className={styles.profPage}>
+      <p class={styles.acctText}>{cookies.name}'s Account</p>
+      <input
+        type="button"
+        class={styles.but}
+        value="Signout"
+        onClick={() => handleSignout()}
+      ></input>
     </div>
   );
 }

diff --git a/client/src/styles/components/DropdownMenu.module.css b/client/src/styles/components/DropdownMenu.module.css
diff --git a/client/src/styles/components/NavBar.module.css b/client/src/styles/components/NavBar.module.css
@@ -1,5 +1,6 @@
 @import url('https://fonts.googleapis.com/css?family=Dosis');
 @import url('https://fonts.googleapis.com/css?family=Lato');
+@import url('https://fonts.googleapis.com/css?family=Cairo');
 
 .format {
     display: flex;
@@ -35,25 +36,27 @@
 .logo {
     color: #282c34;
     font-size: 50px;
-    font-family: "Play";
+    font-family: "Cairo";
     font-weight: 550;
     position: relative;
     z-index: 1;
     padding-bottom: 3px;
 }
 
 #navLink {
+    color: #282c34;
     font-size: 20px;
     text-decoration: none;
     cursor: pointer;
 }
 
 #navLink:hover {
-    color: rgb(236, 230, 230);
+    color: snow;
 }
 
 .regis {
     background-color: snow;
+    color: #282c34;
     border-radius: 20px;
     padding: 0 25px;
     padding-top: 5px;

diff --git a/client/src/styles/pages/ContributePage.module.css b/client/src/styles/pages/ContributePage.module.css
@@ -0,0 +1,31 @@
+.contribute {
+    background-color: #282c34;
+    color: snow;
+    margin: 50px;
+    border-radius: 30px;
+    width: 40vw;
+    height: 100vh;
+}
+
+.header {
+    color: snow;
+    margin: 20px;
+    margin-top: 30px;
+}
+
+.file {
+    margin-left: 70px;
+}
+
+.uploader {
+    font-family: Verdana, sans-serif;
+    border-radius: 30px;
+    border-color: black;
+    width: 300px;
+    height: 40px;
+    font-size: 12pt;
+    color: 282c34;
+    margin: 0 px;
+    bottom: 0px;
+    background-color: snow;
+}
diff --git a/client/src/styles/pages/HomePage.module.css b/client/src/styles/pages/HomePage.module.css
@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css?family=Play');
+@import url('https://fonts.googleapis.com/css?family=Cairo');
 
 a:link,
 a:visited {
@@ -14,6 +15,6 @@ a:visited:active {
 .logo {
     color: #282c34;
     font-size: 50px;
-    font-family: "Play";
+    font-family: "Cairo";
     font-weight: 550;
 }
diff --git a/client/src/styles/pages/ProfilePage.module.css b/client/src/styles/pages/ProfilePage.module.css
@@ -0,0 +1,23 @@
+.but {
+    font-family: Verdana, sans-serif;
+    border-radius: 30px;
+    border-color: snow;
+    width: 200px;
+    height: 40px;
+    font-size: 12pt;
+    color: 282c34;
+    position: absolute;
+    bottom: 0px;
+    background-color: snow;
+}
+
+.profPage {
+    background-color: #282c34;
+    color: snow;
+    margin: 50px;
+    border-radius: 30px;
+    width: 40vw;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+}