fix css

arcana-network · Jul 30, 2024 · fdd8707 · fdd8707
1 parent 5504e17
commit fdd8707
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/src/ui/components.tsx b/src/ui/components.tsx
@@ -87,7 +87,11 @@ const EmailLogin = ({
           type="text"
           placeholder={'Enter your email'}
         />
-        <button disabled={disabled} onClick={clickHandler} class="xar-btn">
+        <button
+          disabled={disabled}
+          onClick={clickHandler}
+          class="xar-btn xar-btn__input-arrow"
+        >
           <img src={MISC_ICONS[mode].arrow} alt="proceed" />
         </button>
       </div>

diff --git a/src/ui/style.css b/src/ui/style.css
@@ -17,6 +17,7 @@
   --separator-text-color: #74919c;
   --error-text-color: #f61d1d;
   --more-icon-bg: #47545b;
+  --email-id-color: #1d2a31;
 }
 
 .xar-dark-mode {
@@ -34,6 +35,7 @@
   --separator-text-color: #829299;
   --error-text-color: #fa3636;
   --more-icon-bg: #47545b;
+  --email-id-color: #d4d7d8;
 }
 
 .compact {
@@ -143,9 +145,7 @@
 .xar-email-login__input-container {
   display: flex;
   min-height: 45px;
-  background: var(--bg);
-  border-radius: 8px;
-  padding: 0 10px;
+  position: relative;
 }
 
 .xar-email-login__input {
@@ -159,6 +159,13 @@
   background: var(--bg);
   border: none;
   outline: none;
+  border-radius: 8px;
+  padding: 0px 10px;
+  box-sizing: border-box;
+}
+
+input[type='text']:focus {
+  border: 1px solid var(--sub-text-color);
 }
 
 .xar-social-container {
@@ -296,6 +303,14 @@
   text-transform: capitalize;
 }
 
+.xar-btn__input-arrow {
+  position: absolute;
+  left: 290px;
+  height: 100%;
+  display: inline-flex;
+  justify-content: right;
+}
+
 .xar-btn {
   background: transparent;
   border: none;
@@ -452,13 +467,13 @@
   font-size: 12px;
   font-weight: 400;
   text-align: center;
-  color: var(--sub-text-color);
+  color: var(--text-color);
 }
 
 .xar-otp-email {
   font-size: 14px;
   font-weight: 700;
-  color: var(--sub-text-color);
+  color: var(--email-id-color);
 }
 
 .xar-otp-error-heading {