MuhammadIqbalAfandi
/
cahaya-agung
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

style: new login design

Muhammad Iqbal Afandi 3 years ago
parent
ffcdafb8d1
commit
d0c79eb67d
2 changed files with 12 additions and 31 deletions
Unified View Show Diff Stats
  1. 11
    30
      resources/js/layouts/Auth/AuthLayout.vue
  2. 1
    1
      resources/js/pages/Auth/Login.vue

+ 11
- 30
resources/js/layouts/Auth/AuthLayout.vue View File

11 
   <Head :title="title" />
 11 
   <Head :title="title" />
12
12
13 
   <div
 13 
   <div
14 
-    class="surface-0 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden"
14 
+    class="surface-0 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden bg-primary"
15 
   >
 15 
   >
16 
     <div
 16 
     <div
17 
       class="grid flex-column align-items-center p-2 lg:p-0"
 17 
       class="grid flex-column align-items-center p-2 lg:p-0"
18 
       style="min-width: 80%"
 18 
       style="min-width: 80%"
19 
     >
 19 
     >
20 
-      <div class="col-12 xl:col-6 p-0">
20 
+      <div class="max-w-28rem p-6 m-4">
21 
         <AppMessage />
 21 
         <AppMessage />
22 
       </div>
 22 
       </div>
23
23
24 
-      <div class="col-12 xl:col-6 border-gradient">
25 
-        <div class="flex flex-column m-0 p-4 bg-gradient">
26 
-          <p class="text-center mb-5 text-600 font-medium">
27 
-            <slot name="header" />
28 
-          </p>
24 
+      <img src="/images/logo.svg" alt="logo" class="w-5rem" />
29
25
30 
-          <slot />
31 
-        </div>
26 
+      <div class="max-w-28rem bg-white p-6 m-4 border-round-xl">
27 
+        <p class="text-center mb-5 font-bold text-3xl text-color">
28 
+          <slot name="header" />
29 
+        </p>
30 
+
31 
+        <Divider align="center" />
32 
+
33 
+        <slot />
32 
       </div>
 34 
       </div>
33 
     </div>
 35 
     </div>
34 
   </div>
 36 
   </div>
35 
 </template>
 37 
 </template>
36 
-
37 
-<style scoped>
38 
-.border-gradient {
39 
-  border-radius: 56px;
40 
-  padding: 0.3rem;
41 
-  background: linear-gradient(
42 
-    180deg,
43 
-    var(--primary-color),
44 
-    rgba(33, 150, 243, 0) 30%
45 
-  );
46 
-}
47 
-
48 
-.bg-gradient {
49 
-  border-radius: 53px;
50 
-  background: linear-gradient(
51 
-    180deg,
52 
-    var(--surface-50) 38.9%,
53 
-    var(--surface-0)
54 
-  );
55 
-}
56 
-</style>

+ 1
- 1
resources/js/pages/Auth/Login.vue View File

19
19
20 
 <template>
 20 
 <template>
21 
   <AuthLayout title="Sign In">
 21 
   <AuthLayout title="Sign In">
22 
-    <template #header> Masuk untuk melanjutkan </template>
22 
+    <template #header> Selamat Datang Kembali! </template>
23
23
24 
     <AppInputText
 24 
     <AppInputText
25 
       v-model="form.username"
 25 
       v-model="form.username"