Add black div

dump-hr · Jan 22, 2025 · 61d88a9 · 61d88a9
1 parent 6fb1c86
commit 61d88a9
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 44 deletions.
diff --git a/apps/app/src/pages/LoginPage/LoginPage.module.scss b/apps/app/src/pages/LoginPage/LoginPage.module.scss
@@ -1,11 +1,32 @@
+.wrapper {
+  background-color: $primary-black;
+}
+
+.blackDiv {
+  @include heading-4;
+  color: $primary-background;
+  text-transform: uppercase;
+  height: 116px;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  padding-left: 24px;
+  padding-top: 64px;
+
+  @media (min-width: $breakpoint-tablet) {
+    justify-content: center;
+    padding-bottom: 40px;
+  }
+}
+
 .container {
   display: flex;
   flex-direction: column;
   border-radius: 16px 16px 0px 0px;
   background-color: $primary-background;
   box-shadow: 0px -4px 20px 0px rgba(23, 22, 21, 0.3);
 
-  @media (min-width: $breakpoint-desktop) {
+  @media (min-width: $breakpoint-tablet) {
     box-shadow: none;
   }
 }
@@ -16,7 +37,7 @@
   justify-content: space-between;
   padding: 24px;
 
-  @media (min-width: $breakpoint-desktop) {
+  @media (min-width: $breakpoint-tablet) {
     justify-content: center;
     padding-top: 48px;
   }
@@ -33,7 +54,7 @@
   width: 295px;
   white-space: nowrap;
 
-  @media (min-width: $breakpoint-desktop) {
+  @media (min-width: $breakpoint-tablet) {
     text-align: center;
     @include heading-1;
     line-height: 30px;
@@ -49,7 +70,7 @@
   justify-content: center;
   align-items: center;
 
-  @media (min-width: $breakpoint-desktop) {
+  @media (min-width: $breakpoint-tablet) {
     display: none;
   }
 }
@@ -61,7 +82,7 @@
   padding: 0px 24px;
   gap: 32px;
 
-  @media (min-width: $breakpoint-desktop) {
+  @media (min-width: $breakpoint-tablet) {
     margin: 0 auto;
     min-width: 500px;
     padding-top: 48px;
@@ -88,7 +109,7 @@
   gap: 12px;
   margin-top: 330px;
 
-  @media (min-width: $breakpoint-desktop) {
+  @media (min-width: $breakpoint-tablet) {
     margin: 0 auto;
     min-width: 500px;
     padding-top: 56px;
@@ -111,7 +132,7 @@
   justify-content: space-between;
   padding: 24px;
 
-  @media (min-width: $breakpoint-desktop) {
+  @media (min-width: $breakpoint-tablet) {
     margin: 0 auto;
     min-width: 500px;
   }

diff --git a/apps/app/src/pages/LoginPage/LoginPage.tsx b/apps/app/src/pages/LoginPage/LoginPage.tsx
@@ -12,44 +12,49 @@ export const LoginPage = () => {
 
   return (
     <div>
-      <div className={c.container}>
-        <div className={c.titleContainer}>
-          <h1 className={c.title}>Dobro došli natrag!</h1>
-          <img src={closeIcon} alt='Close login' className={c.closeIcon} />
+      <div className={c.wrapper}>
+        <div className={c.blackDiv}>
+          <h1>Prijava</h1>
         </div>
-        <div className={c.formContainer}>
-          <Input
-            label='Email'
-            type='text'
-            placeholder='Email'
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-          />
-          <Input
-            label='Lozinka'
-            type='password'
-            placeholder='Lozinka'
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-          />
-          <a href={RouteNames.PASSWORD_RESET} className={c.forgotPassword}>
-            Zaboravili ste lozinku?
-          </a>
-        </div>
-        <div className={c.buttonContainer}>
-          <Button variant='orange' onClick={() => {}}>
-            Prijavi se
-          </Button>
-          <Button variant='black' onClick={() => {}}>
-            <img src={googleIcon} alt='icon' className={c.googleIcon} />
-            Nastavi s Google
-          </Button>
-        </div>
-        <div className={c.registerContainer}>
-          <span className={c.noAccount}>Nemaš račun?</span>
-          <a href={RouteNames.REGISTER} className={c.registerLink}>
-            Registriraj se
-          </a>
+        <div className={c.container}>
+          <div className={c.titleContainer}>
+            <h1 className={c.title}>Dobro došli natrag!</h1>
+            <img src={closeIcon} alt='Close login' className={c.closeIcon} />
+          </div>
+          <div className={c.formContainer}>
+            <Input
+              label='Email'
+              type='text'
+              placeholder='Email'
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
+            <Input
+              label='Lozinka'
+              type='password'
+              placeholder='Lozinka'
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
+            <a href={RouteNames.PASSWORD_RESET} className={c.forgotPassword}>
+              Zaboravili ste lozinku?
+            </a>
+          </div>
+          <div className={c.buttonContainer}>
+            <Button variant='orange' onClick={() => {}}>
+              Prijavi se
+            </Button>
+            <Button variant='black' onClick={() => {}}>
+              <img src={googleIcon} alt='icon' className={c.googleIcon} />
+              Nastavi s Google
+            </Button>
+          </div>
+          <div className={c.registerContainer}>
+            <span className={c.noAccount}>Nemaš račun?</span>
+            <a href={RouteNames.REGISTER} className={c.registerLink}>
+              Registriraj se
+            </a>
+          </div>
         </div>
       </div>
     </div>