feat: styles updated to apply rebranding

Veriff · Aug 18, 2022 · 29da1e0 · 29da1e0
2 parents e71398b + 7cc9859
commit 29da1e0
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 24 deletions.
diff --git a/src/styles/style.css b/src/styles/style.css
@@ -1,6 +1,7 @@
 #veriff-root {
   max-width: 400px;
   min-width: 208px;
+  font-family: 'Inter' !important;
 }
 
 .veriff-label {
@@ -17,43 +18,47 @@
 .veriff-text {
   width: 100%;
   height: 40px;
-  box-sizing: border-box;
   padding: 8px 16px;
   margin: 0 0 16px;
+  box-sizing: border-box;
+  border: 0px;
   border-radius: 4px;
-  border: 1px solid #e6ebf4;
-  font-size: 16px;
-  background-color: #fafafc;
-  color: #222328;
-  transition-duration: 0.4s;
-  transition-timing-function: ease-in-out;
-  transition-property: background-color, color, border-color, box-shadow, transform;
+  appearance: none;
+  outline: 0px;
+  font-size: 14px;
+  font-weight: 400;
+  background-color: #ffffff;
+  color: #212121;
+  transition-duration: 0.24s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-property: background-color, color, border-color, box-shadow;
+  box-shadow: 0px 2px 5px rgba(60, 66, 87, 0.08), 0px 0px 0px 1px rgba(60, 66, 87, 0.1), 0px 1px 1px rgba(0, 0, 0, 0.1);
 }
 
 .veriff-text::placeholder {
-  color: #bdc0cf;
+  color: #757575;
 }
 
 .veriff-text:hover {
   border-color: #bdc0cf;
+  box-shadow: 0px 4px 5px rgba(60, 66, 87, 0.12), 0px 0px 0px 1px rgba(60, 66, 87, 0.1), 0px 1px 1px rgba(0, 0, 0, 0.1);
 }
 
 .veriff-text:focus {
-  background-color: white;
-  box-shadow: 0 2px 4px 0 rgba(34, 35, 40, 0.08);
-  transform: translateY(-2px);
+  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 78, 95, 0.46),
+    0px 0px 0px 4px var(--genoma-colors-borderBrandHighlight);
 }
 
 .veriff-submit {
   width: 100%;
-  background-color: #004e5f;
+  background-color: #11615c;
   color: white;
   box-sizing: border-box;
-  text-transform: uppercase;
+  text-transform: capitalize;
   font-weight: 500;
-  font-size: 16px;
-  line-height: 40px;
-  letter-spacing: 0.4px;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: -0.005em;
 
   display: inline-block;
   text-align: center;
@@ -64,19 +69,21 @@
   height: 40px;
   padding: 0 16px;
   border-radius: 4px;
-  transition-duration: 0.4s;
-  transition-timing-function: ease-in-out;
-  transition-property: background-color, color, border-color, box-shadow, transform;
-  cursor: pointer;
+  transition-property: color, background-color, box-shadow;
+  transition-duration: 0.15s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  text-decoration: none;
+  user-select: none;
+  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0);
 }
 
 .veriff-submit:hover,
 .veriff-submit:focus {
-  transform: translateY(-2px);
+  background-color: #29716c;
 }
 
 .veriff-description {
-  color: #505366;
+  color: #212121;
   font-size: 12px;
   line-height: 16px;
   margin: 16px 0;
@@ -86,5 +93,5 @@
 .veriff-description a {
   font-weight: 400;
   font-size: 12px;
-  color: #006379;
+  color: #11615c;
 }
diff --git a/src/template.ts b/src/template.ts
@@ -112,6 +112,12 @@ export function createTemplate(parentId: string, options: Options) {
   if (!parent) {
     throw new Error(`Element ${parentId} does not exists`);
   }
+
+  const fontLink = document.createElement('link');
+  fontLink.setAttribute('rel', 'stylesheet');
+  fontLink.setAttribute('href', 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');
+  document.head.appendChild(fontLink);
+
   parent.innerHTML = '';
   const fragment = document.createDocumentFragment();
   const container = document.createElement('form');