RNS domain search form

rsksmart · Nov 13, 2024 · 3cf0992 · 3cf0992
1 parent d271892
commit 3cf0992
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 47 deletions.
diff --git a/docs/01-concepts/rif-suite/rns/index.md b/docs/01-concepts/rif-suite/rns/index.md
@@ -8,55 +8,41 @@ description: "Information about the RIF token, where to obtain it, how to transf
 
 RNS provides an architecture which enables the identification of blockchain addresses by human-readable names.
 
-<form class="form" id="frm-rns-search">
-  <div class="form-group">
-    <div class="input-group">
-      <input type="text" id="txt-rns-name" class="form-control" placeholder="find your domain" />
-      <div class="input-group-append">
-        <span class="input-group-text">.rsk</span>
-      </div>
-      <div class="input-group-append">
-        <button class="btn btn-rns-register">Register!</button>
-      </div>
+<RNSDomainSearch />
+
+<div className="row rif_blue_text">
+  <div className="col">
+    <div className="rns-index-box">
+      <a href="try-rns">Try the service</a>
+      <br />
+      <br />
+      <p>Register a domain in the Testnet, for free.</p>
     </div>
   </div>
-</form>
-
-<div class="container the-stack">
-  <div class="row rif_blue_text">
-    <div class="col">
-      <div class="rns-index-box">
-        <a href="try-rns">Try the service</a>
-        <br />
-        <br />
-        <p>Register a domain in the Testnet, for free.</p>
-      </div>
-    </div>
-    <div class="col">
-      <div class="rns-index-box">
-        <a href="./integrate">Integrate with RNS</a>
-        <br />
-        <br />
-        <p>Easy guides on how to integrate RNS in your solution.</p>
-      </div>
+  <div className="col">
+    <div className="rns-index-box">
+      <a href="./integrate">Integrate with RNS</a>
+      <br />
+      <br />
+      <p>Easy guides on how to integrate RNS in your solution.</p>
     </div>
   </div>
-  <div class="row rif_blue_text">
-    <div class="col">
-      <div class="rns-index-box">
-        <a href="run-locally">Develop on top of RNS</a>
-        <br />
-        <br />
-        <p>Deploy RNS suite in your local development environment</p>
-      </div>
+</div>
+<div className="row rif_blue_text">
+  <div className="col">
+    <div className="rns-index-box">
+      <a href="run-locally">Develop on top of RNS</a>
+      <br />
+      <br />
+      <p>Deploy RNS suite in your local development environment</p>
     </div>
-    <div class="col">
-      <div class="rns-index-box">
-        <a href="libs">Use the libraries</a>
-        <br />
-        <br />
-        <p>Use simple libraries to interact with RNS service.</p>
-      </div>
+  </div>
+  <div className="col">
+    <div className="rns-index-box">
+      <a href="libs">Use the libraries</a>
+      <br />
+      <br />
+      <p>Use simple libraries to interact with RNS service.</p>
     </div>
   </div>
 </div>
@@ -97,7 +83,7 @@ RNS has four major components:
 | **RNS Registry**  | The RNS Registry is a specification for a tree-structured namespace and the data associated with the names. Conceptually, each node and leaf in the domain name space tree represents a set of information. Query operations attempt to extract specific types of information from a particular set. A query specifies the domain name of interest and the type of resource information desired. | [Specs](./specs/registry)  |
 | **RNS Resolvers** | RNS Resolvers are contracts that provide information from a name in response to client requests. Resolvers must answer a query directly or use referrals to other resolvers. Typically, a resolver is a contract's public function that is directly accessible to user programs or other contracts. No specific protocol is required between the resolver and the user program. | [Specs](./specs/resolver)  |
 | **RNS Registrar** | The RNS Registrar is a critical component within the RIF Name Service, managing the registration of `.rsk` domain names. This contract has the authority to register names in the RSK Owner contract, ensuring that new domain registrations are handled securely and efficiently. | [Specs](./specs/registrar)  |
-| **Renewer**       | The Renewer is a contract designed to facilitate the renewal of names registered in the Node Owner. It is equipped with permissions to renew these names and provides flexibility in how the renewal is executed.                                                     
+| **Renewer**       | The Renewer is a contract designed to facilitate the renewal of names registered in the Node Owner. It is equipped with permissions to renew these names and provides flexibility in how the renewal is executed.
 
 These fours components roughly correspond to the four layers or views of the domain system:
 - From the user's point of view, the domain system is accessed through a simple resolution operation. The domain space consists of a single tree and the user can request information from any section of the tree.

diff --git a/src/components/RNSDomainSearch/index.js b/src/components/RNSDomainSearch/index.js
@@ -0,0 +1,11 @@
+export default function RNSDomainSearch() {
+  return <form target="_blank" className="form mb-12" method="get" action="https://manager.rns.rifos.org/search">
+    <div className="form-group">
+      <div className="input-group">
+        <input name="domain" required={true} maxLength={80} type="text" className="form-control" placeholder="find your domain"/>
+        <span className="input-group-text">.rsk</span>
+        <button type="submit" className="btn btn-no-shadow">Register!</button>
+      </div>
+    </div>
+  </form>
+}
diff --git a/src/scss/base/_forms.scss b/src/scss/base/_forms.scss
@@ -54,7 +54,9 @@ label {
     letter-spacing: 0.01em;
   }
 }
-
+.input-group-text{
+  border-color: var(--rsk-input-border-color, #3D3D3D);
+}
 .form-select {
   --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.59 8.295L12 12.875L7.41 8.295L6 9.705L12 15.705L18 9.705L16.59 8.295Z' fill='black'/%3E%3C/svg%3E%0A");
 

diff --git a/src/scss/base/_theme-variables.scss b/src/scss/base/_theme-variables.scss
@@ -255,6 +255,8 @@ html:root {
   --rsk-input-border-color-focus: var(--bs-primary);
   --rsk-input-focus-bg: #{$gray-100};
 
+  --bs-tertiary-bg: #{$gray-100};
+
   //Highlight
   --bs-highlight-bg: #{$yellow};
 
@@ -376,6 +378,7 @@ html:root {
   --rsk-input-placeholder-color: #{$gray-450};
   --rsk-input-border-color-focus: var(--bs-primary);
   --rsk-input-focus-bg: #{$gray-900};
+  --bs-tertiary-bg: #{$gray-850};
 
   //Steps component
   --rsk-step-border-color: #{$gray-600};

diff --git a/src/theme/MDXComponents.js b/src/theme/MDXComponents.js
@@ -18,11 +18,13 @@ import CardsGridItem from "/src/components/CardsGrid/Card";
 
 import Steps from "/src/components/Steps";
 import Step from "/src/components/Steps/Step";
+import RNSDomainSearch from "/src/components/RNSDomainSearch";
 
 export default {
   // Re-use the default mapping
   ...MDXComponents,
   // Map the "<Highlight>" tag to our Highlight component
   // `Highlight` will receive all props that were passed to `<Highlight>` in MDX
-  Carousel, CarouselItem, Tabs, TabItem, Accordion, Card, Quote, Video, Filter, FilterItem, Button, CardsGrid, CardsGridItem, Shield, Steps, Step
+  Carousel, CarouselItem, Tabs, TabItem, Accordion, Card, Quote, Video, Filter, FilterItem, Button, CardsGrid, CardsGridItem, Shield, Steps, Step,
+  RNSDomainSearch
 };