fix: fixed UI of login to old theme color

ory · Feb 9, 2024 · e73d3bd · e73d3bd
1 parent d30a784
commit e73d3bd
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 5 deletions.
diff --git a/public/HomePageImage.c698ea0f.png b/public/HomePageImage.c698ea0f.png
diff --git a/public/auth-layout.css b/public/auth-layout.css
@@ -22,8 +22,32 @@
 .text-center {
   text-align: center;
 }
+.login-img-position{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.img-fluid {
+  max-width: 100%;
+  max-height: 450px;
+}
+.logo-beta-alignment{
+  align-items: center;
+  justify-content: center;
+}
+.beta-bedge{
+  background:  rgb(220, 53, 69);
+  border-radius: 20px;
+  color: #fff;
+  opacity: 0.75;
+  font-size: 15px;
+font-weight: 700;
+padding: 5.25px 9.75px
+}
 .login-bg {
-  background: url(./login-bg.png) no-repeat center;
+  /* background: url(./login-bg.png) no-repeat center; */
+  background:  linear-gradient(102.6deg, #f9f3f5 0%, #f8e4e9 116.37%);;
   background-size: cover;
   padding: 10px;
   min-height: 100%;
@@ -39,12 +63,13 @@
   bottom: 0;
   left: 0;
   /* background-color: #0a6bc7; */ 
-  background: linear-gradient(102.6deg, #bc264b 0%, #e14c71 116.37%);
+  /* background: linear-gradient(102.6deg, #bc264b 0%, #e14c71 116.37%); */
   opacity: 0.2;
 }
 .login-alignment-wrapper {
   height: 100%;
   justify-content: center;
+  align-items: center;
 }
 #login .ory_elements__card__1t5ly150,
 #login .ory_elements__divider__1312gjt1 {

diff --git a/views/login.hbs b/views/login.hbs
@@ -1,15 +1,17 @@
 <div id="login">
   <div class="mh-100vh d-flex">
-    <div class="min-40 py-5 mt-4">
+    <div class="min-40">
       <div class="d-flex login-alignment-wrapper">
       <div>
-      <div class="text-center pt-4 mb-5">{{> ory_branding}}</div>
+      <div class="d-flex text-center pt-4 mb-5 logo-beta-alignment">{{> ory_branding}} <span class="beta-bedge">Beta</span></div>
       <h1 class="text-center login-heading my-3">Login</h1>
       <p class="text-center login-text">Please use your credentials to access Obsidian and login</p>
       {{{card}}}
       <div class="text-center copywrite-text">47Billion &copy; 2024</div></div></div>
     </div>
-    <div class="login-bg"/>
+    <div class="login-bg pb-5">
+      <div class="login-img-position pb-5"><img src="HomePageImage.c698ea0f.png" class="img-fluid"/></div>
+    </div>
   </div>
 
   {{> webauthn_setup nodes=nodes webAuthnHandler=webAuthnHandler webauthnTriggerName="webauthn_login_trigger"}}