Merge branch 'develop' into feature/bootstrap-debug-logs

README-ci-failures.md

@@ -0,0 +1,31 @@
+CI jobs are dispatched by a script which responds to both the `ci-build-me`
+label and comments by MinaProtocol organization members containing exactly
+`!ci-build-me`. If your CI job has not started after adding the `ci-build-me`
+label, please comment on the pull request with `!ci-build-me` to attempt to
+re-trigger the script.
+
+**Please note:**
+* If you encounter an error where jobs are not run, it should normally suffice
+  to retry the script with a `!ci-build-me` comment on your PR when the fix has
+  been deployed.
+* If your CI error is related to a timeout logged by one of the integration
+  test runnners, this is a known issue and re-running the test in the CircleCI
+  interface will usually succeed.
+
+If CI jobs are not running after applying both the `ci-build-me` label and
+comment, you may be able to find and fix the error in the script. The script
+lives in `frontend/ci-build-me/src/index.js`, and instructions for deploying
+the new version are in the readme at `frontend/ci-build-me/README.md`. You
+should still follow normal procedure: submit a pull request and await approval
+for the changes before attempting to deploy the fixed script.
+
+If an issue arises, please post an update in both `development` on the Mina
+Protocol discord and `engineering-internal` on the O(1) Labs discord with the
+details and links to the failures.
+
+Where you have a bugfix for failing CI, or are seeing a CI failure across
+multiple PRs, the best people to contact are:
+* @bkase (bkase#2492 on discord) (Europe - misc.)
+* @lk86 (linuskrom#2287 on discord) (US West Coast)
+* @OxO1 (awilson#6424 on discord) (US West Coast)
+* @mrmr1993 (matthew#4797 on discord) (UK)

frontend/website-redesign/src/components/AnnouncementBanner.re

@@ -50,6 +50,7 @@ module Styles = {
         marginLeft(`rem(0.4)),
         marginRight(`rem(0.2)),
         cursor(`pointer),
+        hover([borderBottom(`px(1), `solid, Theme.Colors.orange)]),
       ]),
     ]);
 

frontend/website-redesign/src/components/FeaturedSingleRow.re

@@ -12,7 +12,7 @@ module Row = {
     buttonTextColor: Css.color,
     buttonText: string,
     dark: bool,
-    href: [`External(string) | `Internal(string)],
+    href: [ | `External(string) | `Internal(string)],
   };
 
   type t = {
@@ -60,7 +60,7 @@ module SingleRow = {
         alignItems(`flexStart),
         justifyContent(`spaceBetween),
         padding(`rem(3.)),
-        important(backgroundSize(`cover)),
+        backgroundSize(`cover),
         media(
           Theme.MediaQuery.notMobile,
           [margin(`zero), overflow(`hidden), ...additionalNotMobileStyles],
@@ -135,7 +135,12 @@ module SingleRow = {
             bottom(`percent(6.)),
             media(
               Theme.MediaQuery.tablet,
-              [bottom(`zero), top(`inherit_), right(`zero), width(`rem(29.))],
+              [
+                bottom(`zero),
+                top(`inherit_),
+                right(`zero),
+                width(`rem(29.)),
+              ],
             ),
           ]),
         ]);
@@ -215,17 +220,17 @@ module SingleRow = {
             </p>
           </div>
           <div className=Css.(style([marginTop(`rem(1.))]))>
-              <Button
-                bgColor={row.button.buttonColor}
-                dark={row.button.dark}
-                href={row.button.href}>
-                <span className={Styles.buttonText(row.button.buttonTextColor)}>
-                  {React.string(row.button.buttonText)}
-                  <span className=Css.(style([marginTop(`rem(0.8))]))>
-                    <Icon kind=Icon.ArrowRightSmall />
-                  </span>
+            <Button
+              bgColor={row.button.buttonColor}
+              dark={row.button.dark}
+              href={row.button.href}>
+              <span className={Styles.buttonText(row.button.buttonTextColor)}>
+                {React.string(row.button.buttonText)}
+                <span className=Css.(style([marginTop(`rem(0.8))]))>
+                  <Icon kind=Icon.ArrowRightSmall />
                 </span>
-              </Button>
+              </span>
+            </Button>
           </div>
         </div>
       </div>;

frontend/website-redesign/src/components/Footer.re

@@ -80,12 +80,18 @@ module SocialIcons = {
         width(`rem(14.)),
         height(`rem(2.)),
         color(white),
-        selector("a", [width(`rem(2.)), color(white), hover([color(Theme.Colors.orange)])]),
+        selector("a:visited", [color(white)]),
+        selector(
+          "a",
+          [
+            width(`rem(2.)),
+            color(white),
+            hover([color(Theme.Colors.orange)]),
+          ],
+        ),
       ]);
 
-    let anchor = style([
-      textDecoration(`none)
-    ]);
+    let anchor = style([textDecoration(`none)]);
   };
 
   [@react.component]
@@ -103,7 +109,11 @@ module SocialIcons = {
       <a className=Styles.anchor href="http://bit.ly/MinaTelegram">
         <Icon kind=Icon.Telegram size=2. />
       </a>
-      <a className=Styles.anchor href="https://forums.codaprotocol.com/t/coda-protocol-chinese-resources/200"> <Icon kind=Icon.WeChat size=2. /> </a>
+      <a
+        className=Styles.anchor
+        href="https://forums.codaprotocol.com/t/coda-protocol-chinese-resources/200">
+        <Icon kind=Icon.WeChat size=2. />
+      </a>
     </div>;
   };
 };
@@ -121,14 +131,9 @@ module LeftSide = {
       ]);
 
     let emailInputSection =
-      style([media(Theme.MediaQuery.desktop, [marginTop(`rem(10.5))])]);
+      style([media(Theme.MediaQuery.desktop, [marginTop(`rem(10.3))])]);
 
-    let logo =
-      style([
-        height(`rem(3.1)),
-        width(`rem(11.)),
-        marginBottom(`rem(4.)),
-      ]);
+    let logo = style([height(`rem(3.1)), width(`rem(11.))]);
 
     let label =
       merge([Theme.Type.h4, style([color(white), lineHeight(`rem(2.))])]);

frontend/website-redesign/src/components/FooterLinks.re

@@ -16,6 +16,7 @@ module Styles = {
           gridTemplateColumns([
             `repeat((`num(3), `minmax((`rem(11.), `rem(11.5))))),
           ]),
+          gridTemplateRows([`repeat((`num(2), `rem(15.1)))]),
         ],
       ),
       media(
@@ -92,7 +93,14 @@ let make = () => {
         <a className=Styles.linkStyle> {React.string("Tokenomics")} </a>
       </Next.Link>
     </div>
-    <div className=Css.(style([display(`none), media(Theme.MediaQuery.tablet, [display(`block)])])) />
+    <div
+      className=Css.(
+        style([
+          display(`none),
+          media(Theme.MediaQuery.tablet, [display(`block)]),
+        ])
+      )
+    />
     <div className=Styles.linksGroup>
       <h4 className=Styles.linksHeader> {React.string("Community")} </h4>
       <Next.Link href="/about">

frontend/website-redesign/src/components/Nav.re

@@ -48,9 +48,11 @@ module Styles = {
       flexDirection(`column),
       position(`absolute),
       left(`zero),
+      right(`zero),
       top(`rem(4.25)),
-      width(`percent(100.)),
+      width(`percent(90.)),
       background(Theme.Colors.digitalBlack),
+      margin2(~h=`auto, ~v=`zero),
       media(Theme.MediaQuery.tablet, [top(`rem(6.25))]),
       media(
         Theme.MediaQuery.desktop,
@@ -80,7 +82,7 @@ module Styles = {
           Theme.MediaQuery.desktop,
           [
             position(`relative),
-            marginRight(`rem(1.25)),
+            marginRight(`rem(2.5)),
             width(`auto),
             height(`auto),
             padding(`zero),
@@ -227,8 +229,8 @@ let make = (~dark=false) => {
     </Next.Link>
     <input type_="checkbox" id="nav_toggle" className=Styles.hiddenToggle />
     <label htmlFor="nav_toggle" className=Styles.navToggle>
-      <span id="open-nav"> <Icon kind=Icon.BurgerMenu /> </span>
-      <span id="close-nav"> <Icon kind=Icon.CloseMenu /> </span>
+      <span id="open-nav"> <Icon kind=Icon.BurgerMenu size=2./> </span>
+      <span id="close-nav"> <Icon kind=Icon.CloseMenu size=2./> </span>
     </label>
     <nav className=Styles.nav>
       <NavLink label="About" href="/about" dark />

frontend/website-redesign/src/components/Page.re

@@ -3,13 +3,15 @@ module Styles = {
 
   let fadeIn = keyframes([(0, [opacity(0.)]), (100, [opacity(1.)])]);
 
-  let main = style([
-    opacity(0.),
-    animationName(fadeIn),
-    animationDuration(1000),
-    animationDelay(200),
-    animationFillMode(`forwards),
-  ]);
+  let main =
+    style([
+      position(`relative),
+      opacity(0.),
+      animationName(fadeIn),
+      animationDuration(1000),
+      animationDelay(200),
+      animationFillMode(`forwards),
+    ]);
 };
 
 let siteDescription = "Mina is the first cryptocurrency with a succinct blockchain. Our lightweight blockchain means anyone can use Mina directly from any device, in less data than a few tweets.";

frontend/website-redesign/src/components/WorldMapSection.re

@@ -1,6 +1,11 @@
 module Styles = {
   open Css;
-  let container = style([position(`relative), height(`rem(32.8))]);
+  let container =
+    style([
+      position(`relative),
+      width(`percent(100.)),
+      height(`rem(35.8)),
+    ]);
   let text =
     style([
       top(`rem(4.)),
@@ -79,41 +84,39 @@ module Styles = {
 };
 [@react.component]
 let make = () => {
-  <Wrapped>
-    <div className=Styles.container>
-      <>
-        <div className=Styles.text>
-          <h2 className=Styles.header>
-            {React.string("A Growing Global Community")}
-          </h2>
-          <span className=Styles.sectionSubhead>
-            {React.string("See where Genesis members are around the world ->")}
-          </span>
-        </div>
-        <div className=Styles.remainingSpots>
-          <div>
-            <p className=Styles.number> {React.string("850")} </p>
-            <span className=Styles.label>
-              {React.string("Genesis Spots Remaining")}
-            </span>
-          </div>
-          <span className=Styles.icon>
-            <Icon kind=Icon.GenesisProgram size=6.25 />
-          </span>
-        </div>
-      </>
-      <>
-        <img
-          className=Styles.worldMapImage
-          src="/static/svg/World_Map_Illustration.svg"
-        />
-        <div className=Styles.activeMembers>
-          <p className=Styles.mintNumber> {React.string("150")} </p>
-          <span className=Styles.whiteLabel>
-            {React.string("Active Genesis Members")}
+  <div className=Styles.container>
+    <>
+      <div className=Styles.text>
+        <h2 className=Styles.header>
+          {React.string("A Growing Global Community")}
+        </h2>
+        <span className=Styles.sectionSubhead>
+          {React.string("See where Genesis members are around the world ->")}
+        </span>
+      </div>
+      <div className=Styles.remainingSpots>
+        <div>
+          <p className=Styles.number> {React.string("850")} </p>
+          <span className=Styles.label>
+            {React.string("Genesis Spots Remaining")}
           </span>
         </div>
-      </>
-    </div>
-  </Wrapped>;
+        <span className=Styles.icon>
+          <Icon kind=Icon.GenesisProgram size=6.25 />
+        </span>
+      </div>
+    </>
+    <>
+      <img
+        className=Styles.worldMapImage
+        src="/static/svg/World_Map_Illustration.svg"
+      />
+      <div className=Styles.activeMembers>
+        <p className=Styles.mintNumber> {React.string("150")} </p>
+        <span className=Styles.whiteLabel>
+          {React.string("Active Genesis Members")}
+        </span>
+      </div>
+    </>
+  </div>;
 };