devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Completed the Login page and updated the overall colors and font

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-06-12 15:21:30 +01:00
parent 9ce45dfc30
commit 72fc98fccd
5 changed files with 16 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/exam/index.tsx
View File

@@ -207,9 +207,7 @@ export default function Page() {
<link rel="icon" href="/favicon.ico" />
</Head>
<ToastContainer />
{user && (
<main className="w-full h-full min-h-[100vh] flex flex-col items-center bg-neutral-100 text-black pb-4 gap-4">{renderScreen()}</main>
)}
{user && <main className="w-full h-full min-h-[100vh] flex flex-col items-center bg-neutral-100 pb-4 gap-4">{renderScreen()}</main>}
</>
);
}

8
src/pages/index.tsx
View File

@@ -64,7 +64,7 @@ export default function Home() {
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="w-full h-full min-h-[100vh] flex flex-col items-center justify-center bg-neutral-100 text-black">
<main className="w-full h-full min-h-[100vh] flex flex-col items-center justify-center bg-neutral-100">
<Diagnostic user={user} onFinish={() => setShowDiagnostics(false)} />
</main>
</>
@@ -84,7 +84,7 @@ export default function Home() {
</Head>
<ToastContainer />
{user && (
<main className="w-full h-[100vh] flex flex-col bg-mti-gray-smoke text-black">
<main className="w-full h-[100vh] flex flex-col bg-mti-gray-smoke">
<Navbar user={user} />
<div className="h-full w-full flex py-4 pb-8 gap-2">
<Sidebar path="/" />
@@ -94,8 +94,8 @@ export default function Home() {
<div className="flex flex-col gap-4 py-4 w-full">
<div className="flex justify-between w-full gap-8">
<div className="flex flex-col gap-2 py-2">
<h2 className="font-bold text-3xl">{user.name}</h2>
<span className="font-normal text-2xl text-mti-gray-taupe">{capitalize(user.type)}</span>
<h1 className="font-bold text-4xl">{user.name}</h1>
<h6 className="font-normal text-base text-mti-gray-taupe">{capitalize(user.type)}</h6>
</div>
<ProgressBar
label={`Level ${calculateAverageLevel().toFixed(1)}`}

10
src/pages/login.tsx
View File

@@ -69,7 +69,7 @@ export default function Login() {
name="email"
onChange={(e) => setEmail(e.target.value)}
placeholder="Enter email address"
className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash"
className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
/>
</div>
<div className="flex flex-col gap-3 w-full">
@@ -79,7 +79,7 @@ export default function Login() {
name="password"
onChange={(e) => setPassword(e.target.value)}
placeholder="Password"
className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash"
className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
/>
</div>
<Button className="mt-8 w-full" color="green" disabled={isLoading}>
@@ -91,6 +91,12 @@ export default function Login() {
)}
</Button>
</form>
<span className="text-mti-gray-cool text-sm font-normal mt-8">
Don&apos;t have an account?{" "}
<a className="text-mti-green-light" href="/register">
Sign up
</a>
</span>
</section>
</main>
</>

29
src/styles/globals.css
View File

@@ -8,7 +8,7 @@
--font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
"Fira Mono", "Droid Sans Mono", "Courier New", monospace;
--foreground-rgb: 0, 0, 0;
--foreground-rgb: 53, 51, 56;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
@@ -25,26 +25,6 @@
--card-border-rgb: 131, 134, 135;
}
@media (prefers-color-scheme: dark) {
:root {
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
--secondary-glow: linear-gradient(to bottom right, rgba(1, 65, 255, 0), rgba(1, 65, 255, 0), rgba(1, 65, 255, 0.3));
--tile-start-rgb: 2, 13, 46;
--tile-end-rgb: 2, 5, 19;
--tile-border: conic-gradient(#ffffff80, #ffffff40, #ffffff30, #ffffff20, #ffffff10, #ffffff10, #ffffff80);
--callout-rgb: 20, 20, 20;
--callout-border-rgb: 108, 108, 108;
--card-rgb: 100, 100, 100;
--card-border-rgb: 200, 200, 200;
}
}
* {
box-sizing: border-box;
padding: 0;
@@ -57,6 +37,7 @@ body {
height: 100%;
max-width: 100vw;
overflow-x: hidden;
font-family: "Open Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;
}
body {
@@ -68,9 +49,3 @@ a {
color: inherit;
text-decoration: none;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}

1
tailwind.config.js
View File

@@ -17,6 +17,7 @@ module.exports = {
platinum: "#DBDBDB",
"anti-flash": "#EAEBEC",
},
black: "#353338",
},
ielts: {
reading: {DEFAULT: "#1EB3FF", transparent: "rgba(255, 99, 132, 0.5)"},