Update popup colors (#205)

* Update colors

* Update the card color

* Update border-radius of button

src/ui/style.css

@@ -1,19 +1,17 @@
 @import url('https://fonts.googleapis.com/css2?family=Sora:wght@100;400;600;700&display=block');
 
 .xar-light-mode {
-  --fg: #101010;
-  --bg: #f7f7f7;
-  --background: #ffffff;
-  --inputShadow: inset -1px -7px 7px rgba(255, 255, 255, 0.7),
-    inset 3px 1px 6px rgba(174, 174, 192, 0.2);
+  --fg: #333333;
+  --bg: #eff1f3;
+  --background: #fcfcfc;
+  --inputShadow: 0 0 8px 3px rgba(126, 126, 126, 0.25);
 }
 
 .xar-dark-mode {
-  --fg: #f7f7f7;
-  --bg: #101010;
-  --background: #262626;
-  --inputShadow: inset -2px -2px 4px rgb(57 57 57 / 44%),
-    inset 5px 5px 10px rgb(11 11 11 / 50%);
+  --fg: #ffffff;
+  --bg: #313131;
+  --background: #1f1f1f;
+  --inputShadow: 0 0 8px 3px rgba(0, 0, 0, 0.05);
 }
 
 .compact {
@@ -51,18 +49,18 @@
 .xar-header-logo__container {
   width: 70px;
   height: 70px;
-  border-radius: 60px;
+  border-radius: 50%;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 2px solid var(--bg);
+  border: 2px solid var(--fg);
 }
 
 .xar-header-logo__empty-container {
   width: 70px;
   height: 70px;
-  border-radius: 60px;
+  border-radius: 50%;
   margin: 0 auto;
   display: flex;
   align-items: center;
@@ -77,14 +75,15 @@
 }
 
 .xar-header-heading {
-  font-family: 'Montserrat', sans-serif;
+  font-family: 'Sora', sans-serif;
   text-align: center;
 }
 
 .xar-header-subtext {
   font-family: 'Sora', sans-serif;
   font-size: 12px;
   font-weight: 400;
+  max-width: 200px;
 }
 
 .xar-email-login {
@@ -100,7 +99,7 @@
 .xar-email-login__label {
   text-align: left;
   font-size: 14px;
-  color: #8d8d8d;
+  color: var(--fg);
   font-weight: 400;
 }
 
@@ -116,7 +115,7 @@
   color: var(--fg);
   background: var(--bg);
   border: none;
-  border-radius: 10px;
+  border-radius: 5px;
   outline: none;
   box-shadow: var(--inputShadow);
 }
@@ -184,7 +183,7 @@
   color: var(--bg);
   background: var(--fg);
   border: none;
-  border-radius: 10px;
+  border-radius: 5px;
 }
 
 .xar-btn:disabled {
@@ -233,7 +232,7 @@
 .xar-separator:after {
   content: '';
   flex: 1 1 auto;
-  border-bottom: 1px solid #000;
+  border-bottom: 1px solid var(--fg);
 }
 
 .xar-separator:before {
@@ -248,7 +247,7 @@
   text-underline-offset: 3px;
   text-transform: uppercase;
   text-decoration: underline;
-  color: #13a3fd;
+  color: #3e9aff;
   font-weight: 700;
   font-size: var(--action-link-size);
   line-height: 19px;