Merge branch 'dev' of https://github.com/casper-network/docs into 125…

…9_aws_nodes

source/docs/casper/operators/setup/install-node.md

@@ -119,24 +119,34 @@ For more details, see the [Node Setup](./basic-node-configuration.md#create-fund
 
 ## Getting a Trusted Hash
 
-To get a trusted hash, use the command below. Replace the node address with an address from a node on the network of your choice.
+In the past, we have used a lower `trusted_hash`. Connecting at the tip, we now use as high of a `trusted_hash` as possible.
 
-```bash
-sudo sed -i "/trusted_hash =/c\trusted_hash = '$(casper-client get-block --node-address http://3.14.161.135:7777 -b 20 | jq -r .result.block.hash | tr -d '\n')'" /etc/casper/1_0_0/config.toml
-```
+### Node Address
+
+NODE_ADDR can be set to an IP of a trusted node, or to Casper Labs' public nodes
 
-You can find active peers at https://cspr.live/tools/peers or you can use Casper Labs' public nodes:
+You can find active peers at https://cspr.live/tools/peers or use the following Casper Labs public nodes:
 
 * Testnet - NODE_ADDR=https://rpc.testnet.casperlabs.io
 
 * Mainnet - NODE_ADDR=https://rpc.mainnet.casperlabs.io
 
-## Protocol Version
+### Protocol Version
+
+Protocol version should be set to the largest available protocol version you see in `ls /etc/casper`.  As of writing this, it was 1_5_2:
+
+```bash
+PROTOCOL=1_5_2
+```
+
+### Load `trusted_hash` in Config.toml of the Protocol Version
 
-Protocol version should be set to the largest available protocol version you see in `ls /etc/casper` Currently, it should be:
+The following command uses the previously established NODE_ADDR and PROTOCOL to load the `trusted_hash`:
 
 ```bash
+NODE_ADDR=https://rpc.mainnet.casperlabs.io
 PROTOCOL=1_5_2
+sudo sed -i "/trusted_hash =/c\trusted_hash = '$(casper-client get-block --node-address $NODE_ADDR | jq -r .result.block.hash | tr -d '\n')'" /etc/casper/$PROTOCOL/config.toml
 ```
 
 ## Syncing to Genesis
@@ -223,4 +233,4 @@ The community has created a few tools to monitor your node once it is running, s
 
 The `speculative_exec_server` defaults to off and can be enabled in your *Config.toml* file.
 
-While this is a useful tool, understand that it is also an attack vector for a node.  The intent is for someone to run on their node as a tool. You ***should not*** use this if you are an active validator, as requests into this port can block execution_engine processing for legitimate network traffic.
+While this is a useful tool, understand that it is also an attack vector for a node.  The intent is for someone to run on their node as a tool. You ***should not*** use this if you are an active validator, as requests into this port can block execution_engine processing for legitimate network traffic.

src/assets/scss/theme.scss

@@ -296,56 +296,58 @@ html[data-theme="light"] {
         }
     }
 
-    [class*="SearchWrapper"] {
-        > input {
-            background-color: #fff;
-
-        }
-        span, button {
-           > svg {
-               fill: var(--liftedBlack);
-               path {
-                   fill: var(--liftedBlack);
-               }
-           }
-       }
-        > p {
-            background-color: #f4f4f4;
+    [class*="container_icon_search"],
+    [class*="container_icon_cancel"] {
+        > svg {
+            fill: var(--liftedBlack);
+            path {
+                fill: var(--liftedBlack);
+            }
         }
-        > [class*="SearchResult"] {
-            a {
-                color: black;
-                &:hover {
-                    color: var(--casperBlue) !important;
-                }
-                small {
-                    color: black !important;
-                }
+        &:focus
+        > svg {
+            fill: var(--casperYellow);
+            path {
+                fill: var(--casperYellow);
             }
         }
     }
-    [class*="container_search"] {
-        --casperYellow: var(--casperBlue);
-        > input {
-            background: var(--white);
-            color: var(--liftedBlack);
-            border: 1px solid var(--liftedBlack);
+    [class*="container_input"] {
+        background: var(--white);
+        color: var(--liftedBlack);
+        border: 1px solid var(--liftedBlack);
+    }
+    [class*="results_container"] {
+        border: 1px solid rgba(0, 0, 0, 0.25);
+        color: var(--liftedBlack);
+        background-color: var(--white);
+        a,
+        div {
+            border: none;
+        }
+    }
+
+    [class*="results_container_hit"]:hover {
+        color: var(--casperBlue) !important;
+    }
+
+    [class*="results_wrapper"] {
+        > p {
+            background: #f4f4f4;
         }
-        [class*="results_container"] {
-            border: 1px solid rgba(0, 0, 0, 0.25);
-            color: var(--liftedBlack);
-            background-color: var(--white);
-            a,
-            div {
-                border: none;
+        span {
+            p {
+                background: none;
+            }
+            small {
+                color: black !important;
             }
         }
     }
 
     [class*="navbar_logo_container"],
     [class*="social_icons"],
     [class*="navbar_list"],
-    [class*="container_icon"],
     [class*="logoCasper"] {
         color: var(--liftedBlack);
         --casperWhite: var(--liftedBlack);

src/theme/Navbar/ExtendedNavbar/ExtendedNavbar.module.scss

@@ -32,7 +32,7 @@
             display: flex;
             flex-direction: row;
             justify-content: space-between;
-            gap: 3%;
+            gap: 1%;
             align-items: center;
 
             .navbar_logo_container {

src/theme/Navbar/ExtendedNavbar/Nav/Nav.module.scss

@@ -2,7 +2,7 @@
 
 .navbar_list {
     width: 25%;
-    min-width: 350px;
+    min-width: 470px;
 
     font-size: 16px;
     line-height: 24px;
@@ -16,7 +16,7 @@
         flex-direction: row;
         justify-content: flex-start;
         align-items: center;
-        gap: 7%;
+        gap: 5%;
 
         .navbar_list_container_button {
             position: relative;

src/theme/Navbar/ExtendedNavbar/Search/SearchBox/index.tsx

@@ -70,7 +70,7 @@ export default function SearchBox({ placeholder, locale, siteUrl }: any) {
         setShowResults(false);
     }
     return (
-        <div ref={refInput} tabIndex={-1} className={styles.container_search} onFocus={() => setHasFocus(true)}>
+        <div ref={refInput} tabIndex={-1} className={`${styles.container_search}`} onFocus={() => setHasFocus(true)}>
             <input
                 id="inputSearch"
                 tabIndex={0}

src/theme/Navbar/ExtendedNavbar/Search/SearchResult/index.tsx

@@ -17,16 +17,20 @@ export default function SearchResult({ locale, siteUrl, hits, searchTitle, setHa
     const { customFields } = siteConfig;
     const [hitsDisplayed, setHitsDisplayed] = useState<any>([]);
     const [hideResults, setHideResults] = useState<boolean>(false);
+    const [loading, setLoading] = useState(true);
+
     const portalSearchTitle = "Portal Results";
 
     useEffect(() => {
         if (hits) {
             const slicedHits = hits.slice(0, 4);
             if (searchTitle === portalSearchTitle) {
                 setHitsDisplayed(slicedHits);
+                setLoading(false);
             } else {
                 const newGroupHits = groupHits(hits);
                 setHitsDisplayed(newGroupHits);
+                setLoading(false);
             }
         }
     }, [hits]);
@@ -139,8 +143,8 @@ export default function SearchResult({ locale, siteUrl, hits, searchTitle, setHa
                 {searchTitle} <span className={`${hideResults && styles.rotateSvg} ${styles.nonStyle}`}>{icons.chevronDown}</span>
             </p>
             <div className={`${styles.results_container} ${hideResults && styles.hiddenResults} `} onClick={() => setHasFocus(false)}>
-                {hits ? (
-                    hits.length > 0 ? (
+                {!loading ? (
+                    hitsDisplayed.length > 0 ? (
                         hitsDisplayed.map((hit: any, i: number) => {
                             if (hit._highlightResult?.title?.matchedWords?.length > 0 || hit._highlightResult?.internal?.content?.matchedWords?.length > 0) {
                                 return (
@@ -191,7 +195,7 @@ export default function SearchResult({ locale, siteUrl, hits, searchTitle, setHa
                     <div className={`${styles.centerSpinner} spinner`}></div>
                 )}
             </div>
-            {hits && hits.length > 4 && hits.length !== hitsDisplayed.length && (
+            {hits && hits.length > 4 && hits.length > hitsDisplayed.length && (
                 <button className={`halfTitleEyebrow ${styles.showMore} ${hideResults && styles.hiddenResults}`} onClick={loadMoreHits}>
                     Show more
                 </button>

src/theme/Navbar/ExtendedNavbar/Search/SearchResult/styles.module.scss

@@ -29,7 +29,7 @@
     justify-content: flex-start;
     gap: 27px;
     padding: 10px 15px;
-    max-height: 265px;
+    max-height: 266px;
     overflow-y: scroll;
     transition: all 500ms;
 

src/theme/Navbar/ExtendedNavbar/Search/SearchWrapper/index.tsx

@@ -20,6 +20,8 @@ export default function SearchWrapper({ searchIndexes, locale, siteUrl, placehol
     const [hasFocus, setHasFocus] = useState<boolean>(false);
     const [showResults, setShowResults] = useState<boolean>(false);
     const [hits, setHits] = useState<any>({});
+    const [loading, setLoading] = useState<boolean>(true);
+
     const docsIndexName = (siteConfig.themeConfig.algolia?.indexName as string) ?? "casperlabs";
     const siteIndexName = (siteConfig.customFields.siteAlgoliaIndexName as string) ?? "casper";
 
@@ -81,6 +83,7 @@ export default function SearchWrapper({ searchIndexes, locale, siteUrl, placehol
             const value = e.target.value;
             setSearchTerm(value);
             if (value) {
+                setLoading(true);
                 triggerSearchIndexes(value);
             } else {
                 clearSearch();
@@ -105,6 +108,7 @@ export default function SearchWrapper({ searchIndexes, locale, siteUrl, placehol
         }
         setSearchTerm("");
         setShowResults(false);
+        setHits({});
     }
 
     return (

src/theme/Navbar/ExtendedNavbar/index.tsx

@@ -127,7 +127,7 @@ export default function ExtendedNavbar() {
             {navData && (
                 <div className={styles.wrapper}>
                     <header ref={navBarRef} className={styles.navbar_wrapper}>
-                        <div className={`${styles.container} containerSite`}>
+                        <div className={`${styles.container}  containerSite`}>
                             <div className={`${styles.navbar} ${styles.desktop} navBar`}>
                                 {navData?.logo && (
                                     <div className={styles.navbar_logo_container}>

src/theme/Navbar/ThemeSwitch/index.tsx

@@ -17,14 +17,20 @@ function ThemeSwitch() {
         setIsLightTheme(colorMode === "light");
     }, [colorMode]);
 
+    function handleKeyPress(e: any) {
+        if (e.key === "Enter") {
+            setColorMode(colorMode === "light" ? "dark" : "light");
+        }
+    }
+
     return (
         <div className={styles.switchWrapper}>
             {isLightTheme !== undefined ? (
                 <>
-                    <label htmlFor="switch" className={isLightTheme ? styles.light : "dark"}>
+                    <label htmlFor="switch" tabIndex={0} onKeyUp={handleKeyPress} className={isLightTheme ? styles.light : "dark"}>
                         {isLightTheme ? icons.sun : icons.moon}
                     </label>
-                    <input id="switch" type="checkbox" aria-hidden="true" onChange={handleThemeChange}></input>
+                    <input tabIndex={0} id="switch" type="checkbox" aria-hidden="true" onChange={handleThemeChange}></input>
                 </>
             ) : null}
         </div>