Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Daniel0 #10

Merged
merged 6 commits into from
Oct 8, 2023
Merged

Daniel0 #10

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5e7accd
ui overhall
larkindaniel Oct 8, 2023
e0f284c
frontend integration
larkindaniel Oct 8, 2023
b9243c4
front end- integration
larkindaniel Oct 8, 2023
d5286dd
merge conflict fix
larkindaniel Oct 8, 2023
071714b
routing change
larkindaniel Oct 8, 2023
9eb0fe9
finished front end
larkindaniel Oct 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
ui overhall
  • Loading branch information
@larkindaniel
larkindaniel committed Oct 8, 2023
commit 5e7accd448d4d1517eb4ab34b8328a5118ca64da
5 changes: 2 additions & 3 deletions client/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import "./index.css";
import AppLayout from "./components/AppLayout";
import Decks from "./components/Decks";
import Login from "./components/Login";

const App = () => {
return (
Expand All @@ -12,9 +13,7 @@ const App = () => {
<Route path="/app/*" element={<AppLayout />}>
<Route path="decks" element={<Decks />} />
</Route>
{/* <Route path="/login" element={<Login />} />
<Route path="/signup" element={<SignUp />} /> */}
{/* <Route path="*" element={<ErrorPage />} /> */}
<Route path="/login/*" element={<Login />}></Route>
</Routes>
</Router>
{/* <Dashboard /> */}
Expand Down
4 changes: 4 additions & 0 deletions client/src/components/AppLayout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from "react";
import { Outlet } from "react-router-dom";
import SideBar from "./smaller_components/SideBar";
import TopBar from "./smaller_components/TopBar";
import Upload from "./smaller_components/Upload";

const AppLayout = () => {
return (
Expand All @@ -12,6 +13,9 @@ const AppLayout = () => {
<div className="flex">
<TopBar />
</div>
<div className="flex">
<Upload />
</div>
<div className="content">
<Outlet />
</div>
Expand Down
52 changes: 33 additions & 19 deletions client/src/components/Login.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState } from "react";

const Login = () => {
const [isLogin, setIsLogin] = useState(true);
Expand All @@ -10,37 +10,51 @@ const Login = () => {
return (
<div className="flex w-full h-screen">
<div className="w-full flex items-center justify-center lg:w-1/2">
<div className='bg-white px-10 py-20 rounded-3xl border-gray-200'>
<h1 className='text-5xl font-semibold'>Welcome {isLogin ? 'Back' : 'New User'}</h1>
<p className='font-medium text-lg text-gray-500 mt-4'>{isLogin ? 'Welcome back! Please sign in.' : 'Join us today! Create an account.'}</p>
<div className="bg-white px-10 py-20 rounded-3xl border-gray-200">
<h1 className="text-5xl font-semibold">
Welcome {isLogin ? "Back" : "New User"}
</h1>
<p className="font-medium text-lg text-gray-500 mt-4">
{isLogin
? "Welcome back! Please sign in."
: "Join us today! Create an account."}
</p>
<div className="mt-8">
<label className='text-lg font-medium'>Email</label>
<input className='w-full bottom-2 border border-gray-500 rounded-xl p-4 mt-1 bg-transparent' placeholder='Enter your email'></input>
<label className="text-lg font-medium">Email</label>
<input
className="w-full bottom-2 border border-gray-500 rounded-xl p-4 mt-1 bg-transparent"
placeholder="Enter your email"
></input>
</div>
<div className="mt-8">
<label className='text-lg font-medium'>Password</label>
<input className='w-full bottom-2 rounded-xl p-4 mt-1 bg-transparent border border-gray-500' placeholder='Enter your password'></input>
<label className="text-lg font-medium">Password</label>
<input
className="w-full bottom-2 rounded-xl p-4 mt-1 bg-transparent border border-gray-500"
placeholder="Enter your password"
></input>
</div>
<div className='mt-8 flex justify-between items-center'>
<div className="mt-8 flex justify-between items-center">
<div>
<input type='checkbox' id="remember" />
<label className="ml-2 font-medium text-base" htmlFor="remember">Remember for 30 days</label>
<input type="checkbox" id="remember" />
<label className="ml-2 font-medium text-base" htmlFor="remember">
Remember for 30 days
</label>
</div>
{isLogin ? (
<button className='ml-4 font-medium text-base text-violet-500'>Forgot Password</button>
<button className="ml-4 font-medium text-base text-violet-500">
Forgot Password
</button>
) : null}
</div>
<div className='mt-8 flex flex-col gap-y-4'>
<button
className='active:scale-[.98] active:duration-75 hover:scale-[1.02] ease-in-out transition-all py-3 rounded-xl bg-violet-500 text-white text-lg font-bold'
>
{isLogin ? 'Sign in' : 'Sign up'}
<div className="mt-8 flex flex-col gap-y-4">
<button className="active:scale-[.98] active:duration-75 hover:scale-[1.02] ease-in-out transition-all py-3 rounded-xl bg-violet-500 text-white text-lg font-bold">
{isLogin ? "Sign in" : "Sign up"}
</button>
<button
onClick={toggleCard}
className='active:scale-[.98] active:duration-75 hover:scale-[1.02] ease-in-out transition-all py-3 rounded-xl border-2 border-gray-200'
className="active:scale-[.98] active:duration-75 hover:scale-[1.02] ease-in-out transition-all py-3 rounded-xl border-2 border-gray-200"
>
{isLogin ? 'Sign up' : 'Back to Login'}
{isLogin ? "Sign up" : "Back to Login"}
</button>
</div>
</div>
Expand Down
3 changes: 1 addition & 2 deletions client/src/components/smaller_components/TopBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,8 @@ const SideBarIcon = ({ icon }) => (

const TopBar = () => {
return (
<div className="flex align-top w-full sticky top-0 h-24 m-0 bg-primary-light shadow-lg">
<div className="flex align-top w-full sticky top-0 h-24 m-0 bg-primary-background shadow-lg">
<SideBarIcon icon={<MdLogout size="30" />} />

</div>
);
};
Expand Down
90 changes: 90 additions & 0 deletions client/src/components/smaller_components/Upload.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
import React from "react";

const Upload = () => {
return (
<div>
<div class="bg-primary-background h-[80vh] w-screen flex items-center justify-center">
<div class="max-w-lg w-4/5 max-h-lg bg-white p-8 rounded-lg shadow-lg">
<div className="mr-4 ml-4">
<div class="mb-10 mt-12">
<label
for="postContent"
class="block text-primary-dark text-sm font-bold mb-2"
>
Title:
</label>
<textarea
id="postContent"
name="postContent"
rows="1"
class="w-full border-2 rounded-md pt-4 pb-4 px-4 py-2 leading-5 transition duration-150 ease-in-out sm:text-sm
sm:leading-5 resize-none focus:outline-none focus:border-primary-main"
placeholder=""
></textarea>
</div>

<div class="mb-10">
<label
for="fileAttachment"
class="block text-primary-dark text-sm font-bold mb-2"
>
Photo:
</label>
<div class="relative border-2 rounded-md px-4 py-3 bg-white flex items-center justify-between hover:border-primary-main transition duration-150 ease-in-out">
<input
type="file"
id="fileAttachment"
name="fileAttachment"
class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
/>
<div class="flex items-center">
<svg
class="w-6 h-6 text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
></path>
</svg>
<span class="ml-2 text-sm text-gray-600">
Upload Your Notes Here
</span>
</div>
<span class="text-sm text-gray-500"></span>
</div>
</div>
<div class="flex items-center justify-between mb-12">
<button
type="submit"
class="flex justify-center items-center bg-primary-main hover:bg-primary-dark focus:outline-none focus:shadow-outline-blue text-primary-background py-2 px-4 rounded-md transition duration-300 gap-2 active:scale-[.98] active:duration-75 hover:scale-[1.02] ease-in-out "
>
{" "}
Create Deck{" "}
<svg
xmlns="http://www.w3.org/2000/svg"
width="19"
height="19"
viewBox="0 0 24 24"
id="send"
fill="#fff"
>
<path fill="none" d="M0 0h24v24H0V0z"></path>
<path d="M3.4 20.4l17.45-7.48c.81-.35.81-1.49 0-1.84L3.4 3.6c-.66-.29-1.39.2-1.39.91L2 9.12c0 .5.37.93.87.99L17 12 2.87 13.88c-.5.07-.87.5-.87 1l.01 4.61c0 .71.73 1.2 1.39.91z"></path>
</svg>
</button>
<span class="text-gray-500 text-sm"></span>
</div>
</div>
</div>
</div>
</div>
);
};

export default Upload;
7 changes: 3 additions & 4 deletions client/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,11 @@
.sidebar-icon {
@apply relative flex items-center justify-center h-16 w-16 mt-4 mb-4 mx-auto shadow-lg bg-primary-main text-secondary-light hover:bg-primary-dark rounded-2xl hover:rounded-md transition-all duration-300 ease-linear cursor-pointer;
}
.sidebar-icon-top{
@apply relative flex items-center justify-center drop-shadow-2xl h-16 w-16 mt-auto mb-auto ml-auto mr-10 shadow-lg bg-primary-main text-secondary-light hover:bg-primary-dark rounded-2xl hover:rounded-md transition-all duration-300 ease-linear cursor-pointer;

.sidebar-icon-top {
@apply relative flex items-center justify-center drop-shadow-2xl h-16 w-16 mt-auto mb-auto ml-auto mr-10 shadow-lg bg-primary-background text-primary-dark hover:bg-white rounded-2xl hover:rounded-md transition-all duration-300 ease-linear cursor-pointer;
}
}

body {
background: #f1f1f1;
background: #fffffa;
}
13 changes: 7 additions & 6 deletions client/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,15 @@ module.exports = {
extend: {
colors: {
primary: {
light: "#954bb4",
main: "#7b1fa2",
dark: "#561571",
light: "#52796f",
main: "#354f52",
dark: "#2f3e46",
background: "#FFFFFA",
},
secondary: {
light: "#f73378",
main: "#f50057",
dark: "#ab003c",
light: "#FCFBF4",
main: "#cad2c5",
dark: "#84a98c",
},
},
},
Expand Down