feat: update ui

Author: dancixx

.github/workflows/rust.yml

@@ -2,31 +2,24 @@ name: Rust
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ["main"]
 
 env:
   CARGO_TERM_COLOR: always
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v4
-    - uses: dtolnay/rust-toolchain@nightly
-    
-    - name: Version
-      run: cargo --version --verbose
+      - uses: actions/checkout@v4
+      - uses: dtolnay/rust-toolchain@nightly
+
+      - name: Version
+        run: cargo --version --verbose
 
-    - name: Build
-      run: cargo build --verbose
-    
-    - name: Run tests
-      run: cargo test --verbose
+      - name: Build
+        run: cargo build --verbose
 
-    - name: Deploy to DigitalOcean
-      uses: digitalocean/app_action@v1 # switch to v2 after https://github.com/digitalocean/app_action/issues/123
-      with:
-        app_name: tryrust-org
-        token: ${{ secrets.DIGITALOCEAN_ACCESS_TOKEN }}
+      - name: Run tests
+        run: cargo test --verbose

assets/tailwind.css

@@ -590,6 +590,10 @@ video {
   margin-bottom: 1rem;
 }
 
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
 .ml-auto {
   margin-left: auto;
 }
@@ -602,6 +606,10 @@ video {
   margin-top: 0.125rem;
 }
 
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
@@ -762,10 +770,6 @@ video {
   gap: 0.125rem;
 }
 
-.gap-1 {
-  gap: 0.25rem;
-}
-
 .gap-1\.5 {
   gap: 0.375rem;
 }
@@ -911,6 +915,10 @@ video {
   background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
 }
 
+.bg-amber-400\/5 {
+  background-color: rgb(251 191 36 / 0.05);
+}
+
 .bg-amber-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
@@ -1122,8 +1130,20 @@ video {
   letter-spacing: 0.05em;
 }
 
-.text-amber-300\/70 {
-  color: rgb(252 211 77 / 0.7);
+.text-amber-300\/80 {
+  color: rgb(252 211 77 / 0.8);
+}
+
+.text-amber-300\/90 {
+  color: rgb(252 211 77 / 0.9);
+}
+
+.text-amber-400\/60 {
+  color: rgb(251 191 36 / 0.6);
+}
+
+.text-amber-400\/70 {
+  color: rgb(251 191 36 / 0.7);
 }
 
 .text-amber-400\/90 {
@@ -1143,11 +1163,23 @@ video {
   color: rgb(245 158 11 / 0.7);
 }
 
+.text-amber-500\/80 {
+  color: rgb(245 158 11 / 0.8);
+}
+
+.text-blue-400\/80 {
+  color: rgb(96 165 250 / 0.8);
+}
+
 .text-blue-500 {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity, 1));
 }
 
+.text-cyan-400\/70 {
+  color: rgb(34 211 238 / 0.7);
+}
+
 .text-emerald-400 {
   --tw-text-opacity: 1;
   color: rgb(52 211 153 / var(--tw-text-opacity, 1));
@@ -1166,6 +1198,10 @@ video {
   color: rgb(16 185 129 / 0.7);
 }
 
+.text-purple-400\/80 {
+  color: rgb(192 132 252 / 0.8);
+}
+
 .text-purple-500 {
   --tw-text-opacity: 1;
   color: rgb(168 85 247 / var(--tw-text-opacity, 1));
@@ -1194,6 +1230,11 @@ video {
   color: rgb(212 212 216 / var(--tw-text-opacity, 1));
 }
 
+.text-zinc-400 {
+  --tw-text-opacity: 1;
+  color: rgb(161 161 170 / var(--tw-text-opacity, 1));
+}
+
 .text-zinc-500 {
   --tw-text-opacity: 1;
   color: rgb(113 113 122 / var(--tw-text-opacity, 1));
@@ -1209,6 +1250,11 @@ video {
   color: rgb(63 63 70 / var(--tw-text-opacity, 1));
 }
 
+.text-zinc-800 {
+  --tw-text-opacity: 1;
+  color: rgb(39 39 42 / var(--tw-text-opacity, 1));
+}
+
 .caret-amber-400 {
   caret-color: #fbbf24;
 }
@@ -1250,6 +1296,58 @@ video {
   font-variant-numeric: tabular-nums;
 }
 
+.step-pulse {
+  animation: step-pulse 2s ease-in-out infinite;
+}
+
+.celebrate {
+  animation: celebrate 0.6s ease-out forwards;
+}
+
+.fade-in {
+  animation: fade-in 0.3s ease-out;
+}
+
+@keyframes step-pulse {
+  0%, 100% {
+    border-color: rgba(245, 158, 11, 0.2);
+  }
+
+  50% {
+    border-color: rgba(245, 158, 11, 0.4);
+  }
+}
+
+@keyframes celebrate {
+  0% {
+    transform: scale(1);
+  }
+
+  30% {
+    transform: scale(1.15);
+  }
+
+  60% {
+    transform: scale(0.95);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .placeholder\:text-zinc-700::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(63 63 70 / var(--tw-text-opacity, 1));