adjsutment butto install

criar-art · Jul 1, 2024 · cc55bcd · cc55bcd
1 parent a59a2c0
commit cc55bcd
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 17 deletions.
diff --git a/src/App.css b/src/App.css
@@ -45,6 +45,10 @@ code {
   border: 1px solid rgba(255,255,255,.2)
 }
 
+.install {
+  display: flex;
+}
+
 .content {
   background: var(--vtl-background);
   background: var(--vtl-background-gradient);
@@ -69,6 +73,8 @@ code {
   border: 1px solid var(--vtl-background);
   padding: .5rem 1rem .5rem .5rem;
   cursor: pointer;
+  margin-bottom: 1rem;
+  margin-left: 1rem;
 }
 .content button svg {
   margin-right: 1rem;
@@ -81,7 +87,7 @@ code {
 
 .input-search {
   padding: 1rem;
-  margin: 1rem 0;
+  margin: 0 0 1rem;
   border-radius: 10px;
   background: var(--vtl-background);
   border: 2px solid var(--vtl-background);

diff --git a/src/App.tsx b/src/App.tsx
@@ -45,22 +45,24 @@ function App() {
         closeModal={() => setModalInstall(false)}
       />
       <div className="content">
-        <h2 className="title">Full list of techs</h2>
-        <code>{`<ReactTechsLogos />`}</code>
-        <button type="button" onClick={() => setModalInstall(true)}>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            version="1.1"
-            width={40}
-            height={40}
-            viewBox="0 0 512 512"
-            fill="var(--vtl-background-svg)"
-          >
-            <path d="m499.139 318.571-37.178-5.407a6.15 6.15 0 0 1-5.228-3.8l-12.054-29.086a6.116 6.116 0 0 1 1-6.379l22.243-29.88c3.533-4.141 3.301-10.314-.554-14.168l-17.602-17.594c-3.846-3.854-10.029-4.104-14.159-.553l-29.889 22.233a6.159 6.159 0 0 1-6.38 1.018l-29.094-12.062a6.213 6.213 0 0 1-3.81-5.228l-5.389-37.169c-.428-5.442-4.96-9.635-10.402-9.635H325.75c-5.45 0-9.983 4.193-10.402 9.635l-5.407 37.169a6.142 6.142 0 0 1-3.792 5.228l-29.103 12.062a6.176 6.176 0 0 1-6.388-1.018l-29.872-22.233c-4.13-3.542-10.304-3.302-14.167.553l-17.594 17.594c-3.854 3.854-4.086 10.028-.554 14.168l22.234 29.888a6.143 6.143 0 0 1 1.009 6.371l-12.054 29.086c-.874 2.159-2.908 3.622-5.219 3.81l-37.195 5.398a10.445 10.445 0 0 0-9.618 10.412v24.883c0 5.442 4.194 9.993 9.618 10.403l37.195 5.398a6.177 6.177 0 0 1 5.219 3.81l12.054 29.086c.901 2.159.5 4.63-1.009 6.388l-22.234 29.889a10.45 10.45 0 0 0 .554 14.168l17.594 17.594c3.863 3.854 10.037 4.086 14.167.544l29.872-22.243a6.191 6.191 0 0 1 6.388-.998l29.103 12.044a6.208 6.208 0 0 1 3.802 5.246l5.398 37.169c.428 5.433 4.952 9.636 10.402 9.636h24.893c5.451 0 9.974-4.203 10.402-9.636l5.389-37.169a6.23 6.23 0 0 1 3.81-5.246l29.103-12.044a6.173 6.173 0 0 1 6.379.998l29.881 22.243c4.13 3.542 10.314 3.31 14.159-.544l17.602-17.594a10.441 10.441 0 0 0 .554-14.168l-22.243-29.889a6.186 6.186 0 0 1-1-6.388l12.054-29.086a6.19 6.19 0 0 1 5.228-3.81l37.178-5.398c5.434-.41 9.627-4.961 9.627-10.403v-24.883a10.448 10.448 0 0 0-9.628-10.413zm-120.046 63.757c-10.93 10.912-25.445 16.926-40.898 16.926-15.444 0-29.978-6.014-40.898-16.926-10.92-10.938-16.943-25.454-16.943-40.907 0-15.444 6.022-29.969 16.943-40.89 10.92-10.939 25.454-16.934 40.898-16.934 15.454 0 29.969 5.995 40.898 16.934 10.92 10.92 16.934 25.446 16.934 40.89 0 15.453-6.013 29.969-16.934 40.907z" />
-            <path d="M187.351 252.156a8.174 8.174 0 0 0 5.122-9.868l-5.898-28.854a4.896 4.896 0 0 1 1.419-4.88l18.263-16.621a4.855 4.855 0 0 1 4.97-.946l27.961 8.466c3.989 1.508 8.485-.294 10.306-4.166l8.297-17.656a8.15 8.15 0 0 0-3.346-10.591l-24.339-16.14c-1.58-.91-2.535-2.632-2.436-4.452l1.16-24.66a4.873 4.873 0 0 1 2.838-4.194l26.008-13.874c3.898-1.74 5.781-6.218 4.336-10.215l-6.603-18.371a8.194 8.194 0 0 0-9.876-5.121l-28.863 5.879c-1.767.5-3.632-.053-4.871-1.41L195.185 56.23a4.795 4.795 0 0 1-.955-4.978l8.468-27.944c1.507-4.006-.294-8.494-4.175-10.306l-17.648-8.306c-3.872-1.821-8.494-.366-10.608 3.354l-16.131 24.34a4.86 4.86 0 0 1-4.444 2.445l-24.66-1.169a4.878 4.878 0 0 1-4.202-2.847L106.974 4.821A8.186 8.186 0 0 0 96.74.485L78.379 7.096a8.158 8.158 0 0 0-5.112 9.859l5.888 28.872a4.83 4.83 0 0 1-1.418 4.862l-18.264 16.63a4.884 4.884 0 0 1-4.987.955l-27.944-8.476c-3.988-1.516-8.476.304-10.305 4.175L7.939 81.622c-1.82 3.872-.366 8.494 3.346 10.599l24.339 16.14a4.806 4.806 0 0 1 2.436 4.435l-1.16 24.66a4.814 4.814 0 0 1-2.837 4.193L8.055 155.522a8.167 8.167 0 0 0-4.336 10.216l6.611 18.37a8.19 8.19 0 0 0 9.859 5.131l28.881-5.906a4.835 4.835 0 0 1 4.862 1.427l16.612 18.255a4.845 4.845 0 0 1 .954 4.987l-8.466 27.944c-1.499 3.997.304 8.485 4.175 10.305l17.648 8.297a8.19 8.19 0 0 0 10.608-3.346l16.122-24.348c.91-1.57 2.623-2.534 4.452-2.428l24.661 1.16a4.873 4.873 0 0 1 4.211 2.846l13.847 25.989c1.767 3.9 6.219 5.8 10.233 4.354l18.362-6.619zm-39.122-79.86c-11.394 4.095-23.714 3.524-34.68-1.633-10.965-5.157-19.245-14.275-23.358-25.678-4.095-11.402-3.524-23.714 1.634-34.67 5.156-10.974 14.283-19.254 25.677-23.357 11.402-4.105 23.714-3.534 34.67 1.641 10.956 5.139 19.254 14.258 23.366 25.66 4.096 11.403 3.516 23.706-1.632 34.672-5.175 10.955-14.285 19.252-25.677 23.365z" />
-          </svg>
-          Learn install
-        </button>
+        <h2 className="title">List of techs</h2>
+        <div className="install">
+          <code>{`<ReactTechsLogos />`}</code>
+          <button type="button" onClick={() => setModalInstall(true)}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              version="1.1"
+              width={40}
+              height={40}
+              viewBox="0 0 512 512"
+              fill="var(--vtl-background-svg)"
+            >
+              <path d="m499.139 318.571-37.178-5.407a6.15 6.15 0 0 1-5.228-3.8l-12.054-29.086a6.116 6.116 0 0 1 1-6.379l22.243-29.88c3.533-4.141 3.301-10.314-.554-14.168l-17.602-17.594c-3.846-3.854-10.029-4.104-14.159-.553l-29.889 22.233a6.159 6.159 0 0 1-6.38 1.018l-29.094-12.062a6.213 6.213 0 0 1-3.81-5.228l-5.389-37.169c-.428-5.442-4.96-9.635-10.402-9.635H325.75c-5.45 0-9.983 4.193-10.402 9.635l-5.407 37.169a6.142 6.142 0 0 1-3.792 5.228l-29.103 12.062a6.176 6.176 0 0 1-6.388-1.018l-29.872-22.233c-4.13-3.542-10.304-3.302-14.167.553l-17.594 17.594c-3.854 3.854-4.086 10.028-.554 14.168l22.234 29.888a6.143 6.143 0 0 1 1.009 6.371l-12.054 29.086c-.874 2.159-2.908 3.622-5.219 3.81l-37.195 5.398a10.445 10.445 0 0 0-9.618 10.412v24.883c0 5.442 4.194 9.993 9.618 10.403l37.195 5.398a6.177 6.177 0 0 1 5.219 3.81l12.054 29.086c.901 2.159.5 4.63-1.009 6.388l-22.234 29.889a10.45 10.45 0 0 0 .554 14.168l17.594 17.594c3.863 3.854 10.037 4.086 14.167.544l29.872-22.243a6.191 6.191 0 0 1 6.388-.998l29.103 12.044a6.208 6.208 0 0 1 3.802 5.246l5.398 37.169c.428 5.433 4.952 9.636 10.402 9.636h24.893c5.451 0 9.974-4.203 10.402-9.636l5.389-37.169a6.23 6.23 0 0 1 3.81-5.246l29.103-12.044a6.173 6.173 0 0 1 6.379.998l29.881 22.243c4.13 3.542 10.314 3.31 14.159-.544l17.602-17.594a10.441 10.441 0 0 0 .554-14.168l-22.243-29.889a6.186 6.186 0 0 1-1-6.388l12.054-29.086a6.19 6.19 0 0 1 5.228-3.81l37.178-5.398c5.434-.41 9.627-4.961 9.627-10.403v-24.883a10.448 10.448 0 0 0-9.628-10.413zm-120.046 63.757c-10.93 10.912-25.445 16.926-40.898 16.926-15.444 0-29.978-6.014-40.898-16.926-10.92-10.938-16.943-25.454-16.943-40.907 0-15.444 6.022-29.969 16.943-40.89 10.92-10.939 25.454-16.934 40.898-16.934 15.454 0 29.969 5.995 40.898 16.934 10.92 10.92 16.934 25.446 16.934 40.89 0 15.453-6.013 29.969-16.934 40.907z" />
+              <path d="M187.351 252.156a8.174 8.174 0 0 0 5.122-9.868l-5.898-28.854a4.896 4.896 0 0 1 1.419-4.88l18.263-16.621a4.855 4.855 0 0 1 4.97-.946l27.961 8.466c3.989 1.508 8.485-.294 10.306-4.166l8.297-17.656a8.15 8.15 0 0 0-3.346-10.591l-24.339-16.14c-1.58-.91-2.535-2.632-2.436-4.452l1.16-24.66a4.873 4.873 0 0 1 2.838-4.194l26.008-13.874c3.898-1.74 5.781-6.218 4.336-10.215l-6.603-18.371a8.194 8.194 0 0 0-9.876-5.121l-28.863 5.879c-1.767.5-3.632-.053-4.871-1.41L195.185 56.23a4.795 4.795 0 0 1-.955-4.978l8.468-27.944c1.507-4.006-.294-8.494-4.175-10.306l-17.648-8.306c-3.872-1.821-8.494-.366-10.608 3.354l-16.131 24.34a4.86 4.86 0 0 1-4.444 2.445l-24.66-1.169a4.878 4.878 0 0 1-4.202-2.847L106.974 4.821A8.186 8.186 0 0 0 96.74.485L78.379 7.096a8.158 8.158 0 0 0-5.112 9.859l5.888 28.872a4.83 4.83 0 0 1-1.418 4.862l-18.264 16.63a4.884 4.884 0 0 1-4.987.955l-27.944-8.476c-3.988-1.516-8.476.304-10.305 4.175L7.939 81.622c-1.82 3.872-.366 8.494 3.346 10.599l24.339 16.14a4.806 4.806 0 0 1 2.436 4.435l-1.16 24.66a4.814 4.814 0 0 1-2.837 4.193L8.055 155.522a8.167 8.167 0 0 0-4.336 10.216l6.611 18.37a8.19 8.19 0 0 0 9.859 5.131l28.881-5.906a4.835 4.835 0 0 1 4.862 1.427l16.612 18.255a4.845 4.845 0 0 1 .954 4.987l-8.466 27.944c-1.499 3.997.304 8.485 4.175 10.305l17.648 8.297a8.19 8.19 0 0 0 10.608-3.346l16.122-24.348c.91-1.57 2.623-2.534 4.452-2.428l24.661 1.16a4.873 4.873 0 0 1 4.211 2.846l13.847 25.989c1.767 3.9 6.219 5.8 10.233 4.354l18.362-6.619zm-39.122-79.86c-11.394 4.095-23.714 3.524-34.68-1.633-10.965-5.157-19.245-14.275-23.358-25.678-4.095-11.402-3.524-23.714 1.634-34.67 5.156-10.974 14.283-19.254 25.677-23.357 11.402-4.105 23.714-3.534 34.67 1.641 10.956 5.139 19.254 14.258 23.366 25.66 4.096 11.403 3.516 23.706-1.632 34.672-5.175 10.955-14.285 19.252-25.677 23.365z" />
+            </svg>
+            Learn install
+          </button>
+        </div>
         <input
           className="input-search"
           type="text"