Refactor UI to Tailwind CSS (#33)

UI rebuilt with TailwindCSS

Author: antonkomarev

CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to `cybercog/laravel-paket` will be documented in this file.
 
 ## [Unreleased]
 
+## [1.2.0]
+
+### Changed
+
+- ([#33]) UI rebuilt with Tailwind CSS
+
 ## [1.1.0] - 2019-09-04
 
 ### Added
@@ -26,9 +32,11 @@ All notable changes to `cybercog/laravel-paket` will be documented in this file.
 
 - Initial release
 
-[Unreleased]: https://github.com/cybercog/laravel-paket/compare/1.1.0...master
-[1.1.0]: https://github.com/cybercog/laravel-love/compare/1.0.0...1.1.0
+[Unreleased]: https://github.com/cybercog/laravel-paket/compare/1.2.0...master
+[1.2.0]: https://github.com/cybercog/laravel-paket/compare/1.1.0...1.2.0
+[1.1.0]: https://github.com/cybercog/laravel-paket/compare/1.0.0...1.1.0
 
+[#33]: https://github.com/cybercog/laravel-paket/pull/33
 [#32]: https://github.com/cybercog/laravel-paket/pull/32
 [#28]: https://github.com/cybercog/laravel-paket/pull/28
 [#27]: https://github.com/cybercog/laravel-paket/pull/27

README.md

@@ -38,19 +38,19 @@ Paket exposes a dashboard at `/paket`. By default, you will only be able to acce
 
 ### Dashboard
 
-![Laravel Paket Dashboard](https://user-images.githubusercontent.com/1849174/60401748-80cb9e00-9b8e-11e9-8a38-9d49ab418445.png)
+![Laravel Paket Dashboard](https://user-images.githubusercontent.com/1849174/64376712-90a1ab80-d031-11e9-928e-94b63a0f1d77.png)
 
-### Requirements List
+### Composer Requirements
 
-![Laravel Paket Requirements](https://user-images.githubusercontent.com/1849174/60401755-9fca3000-9b8e-11e9-86d0-b5c8d26b3238.png)
+![Laravel Paket Requirements](https://user-images.githubusercontent.com/1849174/64376736-9b5c4080-d031-11e9-8804-6effc3f31621.png)
 
-### Jobs List
+### Terminal Jobs
 
-![Laravel Paket Jobs](https://user-images.githubusercontent.com/1849174/60400934-4f99a080-9b83-11e9-8bb6-e3ce3fcce1a4.png)
+![Laravel Paket Jobs](https://user-images.githubusercontent.com/1849174/64376752-a1eab800-d031-11e9-8baf-8968cb915ae5.png)
 
-### Job
+### Terminal Job Details
 
-![Laravel Paket Job](https://user-images.githubusercontent.com/1849174/60400942-6fc95f80-9b83-11e9-9afd-f82f76980fb4.png)
+![Laravel Paket Job](https://user-images.githubusercontent.com/1849174/64376758-a616d580-d031-11e9-9a32-bf125d53894f.png)
 
 ## License
 

package.json

@@ -10,19 +10,18 @@
         "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
     },
     "devDependencies": {
+        "@ibm/plex": "^2.0.0",
         "ansi-to-html": "^0.6.10",
         "axios": "^0.18",
-        "bootstrap": "^4.0.0",
         "cross-env": "^5.1",
-        "jquery": "^3.2",
         "laravel-mix": "^4.0.7",
         "moment": "^2.10.6",
         "moment-timezone": "^0.5.21",
-        "popper.js": "^1.12",
         "resolve-url-loader": "^2.3.1",
         "sass": "^1.15.2",
         "sass-loader": "^7.1.0",
         "sweetalert2": "^8.13.0",
+        "tailwindcss": "^1.1.2",
         "vue": "^2.5.7",
         "vue-router": "^3.0.1",
         "vue-template-compiler": "^2.5.21",

public/app.css

@@ -1,4 +1,4 @@
 {
-    "/app.js": "/app.js?id=a9664544006f24b7fe8e",
-    "/app.css": "/app.css?id=bb95d006231a3d23cafe"
+    "/app.js": "/app.js?id=2297f20a440bb65e7fa4",
+    "/app.css": "/app.css?id=0363aa441deba08d8863"
 }

public/app.js

@@ -6,8 +6,6 @@ import globals from './globals';
 import routes from './routes';
 import store from './store';
 
-require('bootstrap');
-
 const token = document.head.querySelector('meta[name="csrf-token"]');
 
 if (token) {

public/mix-manifest.json

@@ -25,13 +25,13 @@
 
             getStatusClass() {
                 const statusClasses = {
-                    Pending: 'secondary',
-                    Running: 'primary',
-                    Success: 'success',
-                    Failed: 'danger',
+                    Pending: 'bg-yellow-200 border-b-2 border-yellow-400 text-yellow-800',
+                    Running: 'bg-blue-200 border-b-2 border-blue-400 text-blue-800',
+                    Success: 'bg-green-200 border-b-2 border-green-400 text-green-800',
+                    Failed: 'bg-red-200 border-b-2 border-red-400 text-red-800',
                 };
 
-                return `badge badge-${statusClasses[this.status]}`;
+                return `px-2 py-1 text-sm inline-block px-2 uppercase font-semibold font-mono tracking-wide ${statusClasses[this.status]}`;
             },
         },
     }

resources/js/app.js

@@ -1,6 +1,7 @@
 <template>
     <button
         type="button"
+        class="bg-indigo-600 hover:bg-indigo-800 text-indigo-100 hover:text-white font-semibold px-2 py-1 text-xs rounded focus:outline-none focus:shadow-outline uppercase"
         :disabled="isFormDisabled()"
         v-text="buttonText"
         v-on:click="install()"

resources/js/components/Job/Status/Badge.vue

@@ -1,21 +1,22 @@
 <template>
-    <div class="input-group">
+    <div class="flex">
         <input
             type="text"
-            class="form-control"
+            class="shadow appearance-none border rounded-l w-full py-2 px-3 text-gray-900 placeholder-gray-700 leading-tight focus:outline-none focus:shadow-outline"
             :readonly="isFormDisabled()"
             v-model="command"
             v-on:keyup.enter="install()"
+            placeholder="Type vendor/package OR composer require vendor/package"
         />
-        <div class="input-group-append">
-            <button
-                type="submit"
-                class="btn btn-primary"
-                :disabled="isFormDisabled()"
-                v-text="buttonText"
-                v-on:click="install()"
-            ></button>
-        </div>
+        <button
+            type="submit"
+            class="bg-indigo-600 hover:bg-indigo-800 text-indigo-100 hover:text-white font-semibold py-2 px-4 rounded-r uppercase"
+            :disabled="isFormDisabled()"
+            v-text="buttonText"
+            v-on:click="install()"
+        >
+            Install
+        </button>
     </div>
 </template>