API example new ui

examples/api/README.md

@@ -5,20 +5,33 @@ In the future, this app will be used on Tauri's integration tests.
 ![App screenshot](./screenshot.png?raw=true)
 
 ## Running the example
-- Install dependencies
+- Install dependencies (Run inside of this folder tauri/examples/api/)
 ```bash
 # with yarn
 $ yarn
 # with npm
 $ npm install
 ```
 
-- Compile the app
+- Compile tauri
+go to root of the tauri repo and run
+
+Linux / Mac:
+```
+sh .scripts/setup.sh
+```
+
+Windows:
+```
+./.scripts/setup.ps1
+```
+
+- Compile the app (Run inside of this folder tauri/examples/api/)
 ```bash
 # with yarn
-$ yarn tauri:build
+$ yarn tauri dev
 # with npm
-$ npm run tauri:build
+$ npm run tauri dev
 ```
 
 - Run the app

examples/api/public/global.css

@@ -1,15 +1,25 @@
+@import url('https://fonts.googleapis.com/css2?family=Tauri&display=swap');
+
 * {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Tauri, Arial, Helvetica, sans-serif;
 }
 
 body {
-  background: #889;
+  background: #18191a;
+}
+
+.noselect {
+  -webkit-touch-callout: none;
+    -webkit-user-select: none;
+     -khtml-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
 }
 
 .logo-container {
   width: 95%;
   margin: 0px auto;
-  overflow: hidden;
 }
 
 .logo-link {
@@ -30,35 +40,37 @@ body {
 }
 
 #response {
-  position: absolute;
-  left: 10px;
-  right: 10px;
-  top: 440px;
-  min-height: 110px;
-  background: #aab;
+  height:100%;
+  max-height: 100%;
+  margin-top: 1em;
+  background: rgb(36, 37, 38);
+  color: #f0f4f5;
+  border: solid 1px rgba(255, 255, 255, 0.055);
+  box-shadow: 0 1px 5px 0 rgb(0 0 0 / 20%);
   font-family: "Courier New", Courier, monospace;
   font-size: 12px;
   word-wrap: break-word;
-  padding: 5px;
-  border-radius: 5px;
+  padding: 0px 15px;
   overflow-y: auto;
 }
 
 input,
-select {
-  background: white;
+select, textarea {
+  background: rgb(53, 53, 53);
+  color: #fff;
   font-family: system-ui, sans-serif;
-  border: 0;
+  border: none !important;
   border-radius: 0.25rem;
   font-size: 1rem;
   line-height: 1.2;
   padding: 0.25rem 0.5rem;
   margin: 0.25rem;
+  transition: 0.2s ease;
 }
 
 button:hover,
 button:focus {
-  background: #0053ba;
+  background: #ffe07a;
 }
 
 button:focus {
@@ -73,8 +85,8 @@ button:active {
 .button {
   border: 0;
   border-radius: 0.25rem;
-  background: #1e88e5;
-  color: white;
+  background: #67D6ED;
+  color: rgb(0, 0, 0);
   font-family: system-ui, sans-serif;
   font-size: 1rem;
   line-height: 1.2;
@@ -83,6 +95,7 @@ button:active {
   padding: 0.25rem 0.5rem;
   margin: 0.25rem;
   cursor: pointer;
+  transition: 0.2s ease;
 }
 
 .bottom {
@@ -99,68 +112,71 @@ button:active {
 .dark-link {
   color: white;
   text-decoration: none !important;
+  padding: 0.5em;
+  background: rgb(36, 37, 38);
+  transition: 0.2s ease;
+  border: solid 1px rgba(255, 255, 255, 0.055);
+  box-shadow: 0 1px 5px 0 rgb(0 0 0 / 20%);
 }
 
-.tabs-container {
-  position: fixed;
-  height: 400px;
-  top: 20px;
-  left: 10px;
-  right: 10px;
-  z-index: 9;
-}
-
-.tabs {
-  position: relative;
-  min-height: 400px;
-  clear: both;
-}
-
-.tab {
-  float: left;
-}
-
-.tab > label {
-  background: #eee;
-  padding: 10px;
-  border: 1px solid transparent;
-  margin-left: -1px;
-  position: relative;
-  left: 1px;
+.dark-link:hover{
+  background: #3d392a;
 }
 
-.tabs > .tabber {
-  border-top-left-radius: 5px;
+.nv{
+  color: #fff;
+  cursor: pointer;
+  transition: 0.25s ease;
 }
 
-.tabs > .tabber ~ .tabber {
-  border-top-left-radius: none;
+.nv:hover{
+  color: #ffe07a;
+  padding-left: 8px;
+  border-left: solid 5px #ffe07a;
 }
 
-.tab [type="radio"] {
-  display: none;
+.nv_selected{
+  color: #67D6ED;
+  padding-left: 8px;
+  border-left: solid 5px #67D6ED;
 }
 
 .content {
-  position: absolute;
-  top: 28px;
-  left: 0;
-  background: #bbc;
-  right: 0;
-  bottom: 0;
+  background: rgb(36, 37, 38);
+  color: #f0f4f5;
   padding: 20px;
-  border: 1px solid transparent;
-  border-top-right-radius: 5px;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
+  width: 100%;
+  border: solid 1px rgba(255, 255, 255, 0.055);
+  box-shadow: 0 1px 5px 0 rgb(0 0 0 / 20%);
+}
+
+main{
+  height: 100%;
 }
 
 [type="radio"]:checked ~ label {
-  background: #bbc;
+  background: rgb(36, 37, 38);
+  color: #67D6ED;
   border-bottom: 1px solid transparent;
   z-index: 2;
 }
 
 [type="radio"]:checked ~ label ~ .content {
   z-index: 1;
 }
+
+.flex {
+  display: flex;
+}
+
+.row {
+  flex-direction: row;
+}
+
+.col {
+  flex-direction: column;
+}
+
+.just-around{
+  justify-content: space-between;
+}