Updated the State of JS Survey Results (#12350)

Co-authored-by: fisker Cheung <lionkay@gmail.com>
prettier · Mar 24, 2022 · 9e7f7b9 · 9e7f7b9
1 parent becb6c9
commit 9e7f7b9
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 42 deletions.
diff --git a/website/pages/en/index.js b/website/pages/en/index.js
@@ -283,31 +283,34 @@ const UsersSection = ({ language }) => {
         >
           <div style={{ display: "flex", marginTop: "22px" }}>
             <a
-              href="https://2020.stateofjs.com/en-US/other-tools/utilities"
-              className="growOnHover"
+              href="https://2021.stateofjs.com/en-US/other-tools/utilities"
+              style={{ marginTop: "15px" }}
             >
               <img
                 src="/images/state_of_js_grey.svg"
-                style={{ height: "100px" }}
+                style={{ width: "80px" }}
               />
             </a>
             <div style={{ marginLeft: ".7em", width: "260px" }}>
-              <p>
-                Regularly used by more than <strong>70%</strong> of respondents
-                to State of JS 2020
-              </p>
-              <Button href="https://2020.stateofjs.com/en-US/other-tools/utilities">
-                Go to Survey Results
-              </Button>
+              <p>Regularly used by:</p>
+              <ul style={{ marginBottom: "0" }}>
+                <li>
+                  <a href="https://2021.stateofjs.com/en-US/other-tools/#utilities">
+                    More than 83% of respondents to State of JS 2021.
+                  </a>
+                </li>
+                <li>
+                  <a href="https://2020.stateofjs.com/en-US/other-tools/#utilities">
+                    More than 70% of respondents to State of JS 2020.
+                  </a>
+                </li>
+              </ul>
             </div>
           </div>
 
           <div style={{ display: "flex", marginTop: "22px" }}>
-            <a
-              href="https://github.com/prettier/prettier"
-              className="growOnHover"
-            >
-              <img src="/images/github_grey.svg" style={{ height: "100px" }} />
+            <a href="https://github.com/prettier/prettier">
+              <img src="/images/github_grey.svg" style={{ width: "80px" }} />
             </a>
             <div style={{ marginLeft: ".7em", width: "260px" }}>
               <p>
@@ -322,11 +325,8 @@ const UsersSection = ({ language }) => {
           </div>
 
           <div style={{ display: "flex", marginTop: "22px" }}>
-            <a
-              href="https://npmjs.com/package/prettier"
-              className="growOnHover"
-            >
-              <img src="/images/npm_grey.svg" style={{ height: "100px" }} />
+            <a href="https://npmjs.com/package/prettier">
+              <img src="/images/npm_grey.svg" style={{ width: "80px" }} />
             </a>
             <div style={{ marginLeft: ".7em", width: "260px" }}>
               <p>

diff --git a/website/pages/en/users/index.js b/website/pages/en/users/index.js
@@ -23,28 +23,25 @@ class Users extends React.Component {
               </div>
               <blockquote
                 style={{
-                  display: "flex",
-                  alignItems: "center",
                   fontSize: "125%",
+                  textAlign: "left",
                 }}
               >
-                <div className="prose">
-                  Prettier is regularly used by more than <strong>70%</strong>
-                  &nbsp;of the respondents to the “Utilities” section of
-                  the&nbsp;
-                  <a href="https://2020.stateofjs.com/en-US/other-tools/utilities">
-                    State&nbsp;of&nbsp;JS&nbsp;2020
-                  </a>{" "}
-                  survey (14880&nbsp;developers out of 20974).
-                </div>
-                <a href="https://2020.stateofjs.com">
-                  <img
-                    title="State of JS 2020"
-                    src="/images/state_of_js.svg"
-                    width="180"
-                    style={{ background: "#222429", borderRadius: 5 }}
-                  />
-                </a>
+                <p>Prettier is regularly used by:</p>
+                <ul>
+                  <li>
+                    <a href="https://2021.stateofjs.com/en-US/other-tools/#utilities">
+                      More than <strong>83%</strong> of respondents to State of
+                      JS 2021 (10282 developers out of 12360).
+                    </a>
+                  </li>
+                  <li>
+                    <a href="https://2020.stateofjs.com/en-US/other-tools/#utilities">
+                      More than <strong>70%</strong> of respondents to State of
+                      JS 2020 (14880 developers out of 20974).
+                    </a>
+                  </li>
+                </ul>
               </blockquote>
               <div className="logos">{showcase}</div>
               <div className="prose">

diff --git a/website/static/images/state_of_js.svg b/website/static/images/state_of_js.svg
diff --git a/website/static/images/state_of_js_grey.svg b/website/static/images/state_of_js_grey.svg
diff --git a/website/static/overrides.css b/website/static/overrides.css
@@ -415,12 +415,17 @@ em {
 }
 
 .ecosystemSubSection p {
-  padding-top: 4px !important;
+  padding-top: 0 !important;
   font-size: 0.9em;
   color: rgb(176, 196, 206) !important;
   line-height: 1.2em !important;
 }
 
+.ecosystemSubSection ul,
+.ecosystemSubSection ul a {
+  color: rgb(176, 196, 206) !important;
+}
+
 .growOnHover {
   transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
 }