docs: change the remix button from icon to text (#14122)

* docs: change remix button to text button

* docs(fix): trim trailing whitespaces

* fix: remove unnecessary spaces

Co-authored-by: Kamil Śliwak <cameel2@gmail.com>

* fix: remove unnecessary !important in link

* refactor: remove !important in custom.css

* fix: `.. code-block:: Solidity` -> `.. code-block:: solidity`

* fix: broken layout of remix button in list items

* refactor: make selectors more strict

---------

Co-authored-by: Kamil Śliwak <cameel2@gmail.com>

docs/_static/css/custom.css

@@ -6,9 +6,11 @@ pre {
     word-wrap: break-word;
 }
 
-.wy-table-responsive table td, .wy-table-responsive table th {
+.wy-table-responsive table td,
+.wy-table-responsive table th {
     white-space: normal;
 }
+
 .rst-content table.docutils td {
     vertical-align: top;
 }
@@ -27,8 +29,8 @@ pre {
     background: #fafafa;
 }
 
-.wy-side-nav-search img.logo {
+.wy-side-nav-search > a img.logo {
-    width: 100px !important;
+    width: 100px;
     padding: 0;
 }
 
@@ -38,49 +40,36 @@ pre {
 }
 
 /* project version (displayed under project logo) */
-.wy-side-nav-search .version {
+.wy-side-nav-search > div.version {
-    color: #272525 !important;
+    color: #272525;
 }
 
 /* menu section headers */
-.wy-menu .caption {
+.wy-menu p.caption {
-    color: #65afff !important;
+    color: #65afff;
 }
 
 /* Link to Remix IDE shown next to code snippets */
-p.remix-link-container {
+.rst-content p.remix-link-container {
-    position: relative;
-    right: -100%;        /* Positioned next to the the top-right corner of the code block following it. */
-}
-
-a.remix-link {
-    position: absolute;  /* Remove it from normal flow not to affect the original position of the snippet. */
-    top: 0.5em;
-    width: 3.236em;      /* Size of the margin (= right-side padding in .wy-nav-content in the current theme). */
-}
-
-a.remix-link .link-icon {
-    background: url("../img/solid-share-arrow.svg") no-repeat;
     display: block;
-    width: 1.5em;
+    text-align: right;
-    height: 1.5em;
+    margin: 0;
-    margin: auto;
+    line-height: 1em;
 }
 
-a.remix-link .link-text {
+.rst-content .remix-link-container a.remix-link {
-    display: none;       /* Visible only on hover. */
+    display: inline-block;
-    width: 3.3em;        /* Narrow enough to get two lines of text. */
+    font-size: 0.7em;
-    margin: auto;
+    padding: 0.1em 0.4em;
-    text-align: center;
+    background: #e1e4e5;
-    font-size: 0.8em;
+    color: #707070;
-    line-height: normal;
-    color: black;
 }
 
-a.remix-link:hover {
+.rst-content .remix-link-container a.remix-link:hover {
-    opacity: 0.5;
+    background: #c8cbcc;
 }
 
-a.remix-link:hover .link-text {
+.rst-content div.highlight-solidity,
-    display: block;
+.rst-content div.highlight-yul {
+    margin-top: 0;
 }

docs/_static/css/dark.css

@@ -1,7 +1,7 @@
 /* links */
 
 .rst-content a:not(:visited) {
-    color: #aaddff !important;
+    color: #aaddff;
 }
 
 /* code directives */
@@ -626,12 +626,10 @@ code.docutils.literal.notranslate {
 }
 
 
-/* Literal.Number.Integer.Long */
-
-
 /* Link to Remix IDE shown over code snippets */
-a.remix-link {
+
-    filter: invert(1); /* The icon is black. In dark mode we want it white. */
+.rst-content .remix-link-container a.remix-link {
+    color: black;
 }
 
 

docs/analysing-compilation-output.rst

@@ -11,7 +11,7 @@ visual diff of the assembly before and after a change is often very enlightening
 
 Consider the following contract (named, say ``contract.sol``):
 
-.. code-block:: Solidity
+.. code-block:: solidity
 
     // SPDX-License-Identifier: GPL-3.0
     pragma solidity >=0.5.0 <0.9.0;

docs/ext/remix_code_links.py

@@ -26,19 +26,12 @@ def remix_code_url(source_code, language, solidity_version):
 
 
 def build_remix_link_node(url):
-    link_icon_node = docutils.nodes.inline()
+    reference_node = docutils.nodes.reference('', 'open in Remix', internal=False, refuri=url, target='_blank')
-    link_icon_node.set_class('link-icon')
-
-    link_text_node = docutils.nodes.inline(text="open in Remix")
-    link_text_node.set_class('link-text')
-
-    reference_node = docutils.nodes.reference('', '', internal=False, refuri=url)
     reference_node.set_class('remix-link')
-    reference_node += [link_icon_node, link_text_node]
 
     paragraph_node = docutils.nodes.paragraph()
     paragraph_node.set_class('remix-link-container')
-    paragraph_node += reference_node
+    paragraph_node.append(reference_node)
     return paragraph_node
 
 
@@ -49,7 +42,9 @@ def insert_remix_link(app, doctree, solidity_version):
     for literal_block_node in doctree.traverse(docutils.nodes.literal_block):
         assert 'language' in literal_block_node.attributes
         language = literal_block_node.attributes['language'].lower()
-        if language in ['solidity', 'yul']:
+        if language not in ['solidity', 'yul']:
+            continue
+
         text_nodes = list(literal_block_node.traverse(docutils.nodes.Text))
         assert len(text_nodes) == 1
 

docs/natspec-format.rst

@@ -58,7 +58,7 @@ The following example shows a contract and a function using all available tags.
 
   This may change in the future.
 
-.. code-block:: Solidity
+.. code-block:: solidity
 
     // SPDX-License-Identifier: GPL-3.0
     pragma solidity >=0.8.2 < 0.9.0;

docs/smtchecker.rst

@@ -73,7 +73,7 @@ Tutorial
 Overflow
 ========
 
-.. code-block:: Solidity
+.. code-block:: solidity
 
     // SPDX-License-Identifier: GPL-3.0
     pragma solidity >=0.8.0;
@@ -122,7 +122,7 @@ Here, it reports the following:
 If we add ``require`` statements that filter out overflow cases,
 the SMTChecker proves that no overflow is reachable (by not reporting warnings):
 
-.. code-block:: Solidity
+.. code-block:: solidity
 
     // SPDX-License-Identifier: GPL-3.0
     pragma solidity >=0.8.0;
@@ -160,7 +160,7 @@ Since ``f`` is indeed monotonically increasing, the SMTChecker proves that our
 property is correct. You are encouraged to play with the property and the function
 definition to see what results come out!
 
-.. code-block:: Solidity
+.. code-block:: solidity
 
     // SPDX-License-Identifier: GPL-3.0
     pragma solidity >=0.8.0;
@@ -182,7 +182,7 @@ The following code searches for the maximum element of an unrestricted array of
 numbers, and asserts the property that the found element must be greater or
 equal every element in the array.
 
-.. code-block:: Solidity
+.. code-block:: solidity
 
     // SPDX-License-Identifier: GPL-3.0
     pragma solidity >=0.8.0;
@@ -216,7 +216,7 @@ All the properties are correctly proven safe. Feel free to change the
 properties and/or add restrictions on the array to see different results.
 For example, changing the code to
 
-.. code-block:: Solidity
+.. code-block:: solidity
 
     // SPDX-License-Identifier: GPL-3.0
     pragma solidity >=0.8.0;
@@ -268,7 +268,7 @@ Let us place a robot at position (0, 0). The robot can only move diagonally, one
 and cannot move outside the grid. The robot's state machine can be represented by the smart contract
 below.
 
-.. code-block:: Solidity
+.. code-block:: solidity
 
     // SPDX-License-Identifier: GPL-3.0
     pragma solidity >=0.8.0;
@@ -319,7 +319,7 @@ We can also trick the SMTChecker into giving us a path to a certain position we
 think might be reachable.  We can add the property that (2, 4) is *not*
 reachable, by adding the following function.
 
-.. code-block:: Solidity
+.. code-block:: solidity
 
     function reach_2_4() public view {
         assert(!(x == 2 && y == 4));
@@ -368,7 +368,7 @@ In some cases, it is possible to automatically infer properties over state
 variables that are still true even if the externally called code can do
 anything, including reenter the caller contract.
 
-.. code-block:: Solidity
+.. code-block:: solidity
 
     // SPDX-License-Identifier: GPL-3.0
     pragma solidity >=0.8.0;