fixed ui issues in connect-the-world page

celo-org · Dec 14, 2022 · 76ae787 · 76ae787
1 parent 446f28e
commit 76ae787
Show file tree

Hide file tree

Showing 40 changed files with 11,535 additions and 11,375 deletions.
diff --git a/src/_page-tests/__snapshots__/_error.test.tsx.snap b/src/_page-tests/__snapshots__/_error.test.tsx.snap
@@ -36,12 +36,12 @@ exports[`Error renders 1`] = `
 }
 
 .emotion-2 {
-  font-family: EB Garamond,eb-garamond,Garamond,serif;
+  font-family: GT-Alpina,serif;
   font-size: 48px;
   line-height: 56;
   text-rendering: geometricPrecision;
   color: #111214;
-  font-weight: normal;
+  font-weight: 200;
   margin: 0;
   margin-block-start: 0;
   margin-block-end: 0;
@@ -55,11 +55,11 @@ exports[`Error renders 1`] = `
 }
 
 .emotion-3 {
-  font-weight: normal;
+  font-weight: 200;
   margin: 0;
   margin-block-start: 0;
   margin-block-end: 0;
-  font-family: EB Garamond,eb-garamond,Garamond,serif;
+  font-family: Inter,sans-serif;
   font-size: 28px;
   line-height: 36;
   text-rendering: geometricPrecision;
@@ -70,6 +70,15 @@ exports[`Error renders 1`] = `
 }
 
 .emotion-4 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-family: Inter,sans-serif;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -97,41 +106,43 @@ exports[`Error renders 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  font-family: Jost,futura-pt,futura,sans-serif;
+  font-family: Inter,sans-serif;
   font-size: 16px;
   line-height: 16;
   text-align: center;
   text-rendering: geometricPrecision;
   color: #111214;
   cursor: pointer;
-  font-weight: 500;
+  font-weight: 700;
   line-height: 16px;
   -webkit-text-decoration: none;
   text-decoration: none;
   min-width: 200px;
   padding: 20px 30px;
   font-size: 20px;
-  background-color: #35D07F;
-  border-color: #35D07F;
-  border-radius: 3px;
+  background-color: #FCFF52;
+  border: solid;
+  border-color: rgba(0, 0, 0, 0.2);
+  border-radius: 70px;
   border-width: 1px;
-  font-weight: 500;
-  color: #FFFFFF;
+  padding: 24px 64px;
+  font-weight: 700;
+  color: #000;
 }
 
-.emotion-5:hover {
-  background-color: #4CDD91;
-  border-color: #4CDD91;
-  border-radius: 3px;
+.emotion-5:hover,
+.emotion-5:active {
+  background-color: #000;
+  border-color: rgba(0, 0, 0, 0.2);
+  border-radius: 70px;
   border-width: 1px;
+  color: #FFFFFF;
 }
 
-.emotion-5:active {
-  background-color: #0FB972;
-  border-color: #0FB972;
-  outline-color: #0FB972;
-  border-radius: 3px;
-  border-width: 1px;
+@media (max-width: 576px) {
+  .emotion-5 {
+    padding: 16px 24px;
+  }
 }
 
 <div>