From 760047d3a3b048376b3dbae847fdb5ffcb99fcb5 Mon Sep 17 00:00:00 2001
From: christodharma <13521009@std.stei.itb.ac.id>
Date: Tue, 14 Nov 2023 00:12:34 +0700
Subject: [PATCH] feat: spa inits feat: tailwind dependency feat: global css
TODO: choose global color palette
---
package-lock.json | 3 ++
package.json | 3 ++
src/components/HomePage/HomePage.css | 0
src/components/HomePage/index.tsx | 13 +++++++
src/components/Profile/Profile.css | 0
src/components/Profile/index.tsx | 54 ++++++++++++++++++++++++++++
src/styles/global.css | 38 ++++++++++++++++++++
tailwind.config.js | 9 +++++
8 files changed, 120 insertions(+)
create mode 100644 src/components/HomePage/HomePage.css
create mode 100644 src/components/HomePage/index.tsx
create mode 100644 src/components/Profile/Profile.css
create mode 100644 src/components/Profile/index.tsx
create mode 100644 src/styles/global.css
create mode 100644 tailwind.config.js
diff --git a/package-lock.json b/package-lock.json
index 5d6978d..4594f4c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,9 @@
"react-scripts": "5.0.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
+ },
+ "devDependencies": {
+ "tailwindcss": "^3.3.5"
}
},
"node_modules/@aashutoshrathi/word-wrap": {
diff --git a/package.json b/package.json
index 6d1cd3f..78b1a84 100644
--- a/package.json
+++ b/package.json
@@ -39,5 +39,8 @@
"last 1 firefox version",
"last 1 safari version"
]
+ },
+ "devDependencies": {
+ "tailwindcss": "^3.3.5"
}
}
diff --git a/src/components/HomePage/HomePage.css b/src/components/HomePage/HomePage.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/HomePage/index.tsx b/src/components/HomePage/index.tsx
new file mode 100644
index 0000000..54b0d14
--- /dev/null
+++ b/src/components/HomePage/index.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client'
+import './HomePage.css';
+
+function HomePage() {
+ return (
+ <div className = "HomePageContainer">
+
+ </div>
+ )
+}
+
+export default HomePage;
\ No newline at end of file
diff --git a/src/components/Profile/Profile.css b/src/components/Profile/Profile.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Profile/index.tsx b/src/components/Profile/index.tsx
new file mode 100644
index 0000000..4aad5fd
--- /dev/null
+++ b/src/components/Profile/index.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './Profile.css'
+
+function Profile() {
+ return (
+ <div className="ProfilePageContainer">
+ <h1>
+ Account Details
+ </h1>
+ <div className="text-field">
+ <label className="detail-label">Email</label>
+ {/* <input className="detail-value" type="text" id="email-value" placeholder=
+ <?php echo isset($_SESSION["email"])?$_SESSION['email']:"<nologin>"?>
+ disabled> */}
+ </div>
+ <div className="text-field">
+ <label className="detail-label">Username</label>
+ {/* <input className="detail-value" type="text" id="username-value" placeholder=
+ <?php echo isset($_SESSION["username"])?$_SESSION['username']:"<nologin>"?>
+ disabled> */}
+ </div>
+ <div className="text-field">
+ <label className="detail-label">Password</label>
+ {/* <input className="detail-value password" type="password" id="password-value" placeholder="--------" disabled oninput="confirmPassword()" onchange="cancelConfirmPassword()"> */}
+ <p className="password-criteria"></p>
+ </div>
+ <div className="text-field" id="confirm-password-field">
+ <label className="detail-label">Confirm Password</label>
+ {/* <input className="detail-value password" type="password" id="confirm-password-value" placeholder="Re-Type Password" oninput="confirmCorrectRetype()"> */}
+ <p className="password-criteria"></p>
+ </div>
+ <div className="button-field">
+ <button id="edit-profile-button"
+ // onclick="startEdit()"
+ >
+ Edit profile
+ </button>
+ <button id="cancel-edit-button"
+ // onclick="cancelEdit()"
+ >
+ Cancel
+ </button>
+ <button id="submit-edit-button"
+ // onclick="submitEdit()"
+ >
+ Submit
+ </button>
+ </div>
+ </div>
+ )
+}
+
+export default Profile;
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
new file mode 100644
index 0000000..ca5161f
--- /dev/null
+++ b/src/styles/global.css
@@ -0,0 +1,38 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+ /* TODO: Add color pallete */
+ /* --primary: #292629;
+ --secondary: #4863D8;
+ --tertiary: #F9F6D5;
+ --quaternary: #D6E9B0;
+ --quinary: #F4602C; */
+}
+@media (prefers-color-scheme: dark) {
+ :root {
+ --foreground-rgb: 255, 255, 255;
+ --background-start-rgb: 0, 0, 0;
+ --background-end-rgb: 0, 0, 0;
+ }
+}
+body {
+ color: var(--tertiary);
+ /* background: linear-gradient(to bottom, var(--primary), var(--secondary)); */
+ /* background-color: #222536; */
+ background-image: linear-gradient(to bottom, #000000 40%, #30344d);
+ margin: 0;
+
+}
+* {
+ font-family: 'Montserrat', sans-serif;
+}
+.container{
+ min-width: 100%;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..e5b64f3
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: ["./src/**/*.{html,js}"],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+}
+
--
GitLab