From af954c73b9ca3c1147a46468f039816f630744b1 Mon Sep 17 00:00:00 2001
From: Romulus21 <romain@delanoe.me>
Date: Tue, 21 Apr 2020 19:22:17 +0200
Subject: [PATCH 1/5] change logo

---
 public/img/logo.svg | 40 +++++++++++++++++++++++-----------------
 1 file changed, 23 insertions(+), 17 deletions(-)

diff --git a/public/img/logo.svg b/public/img/logo.svg
index 0dbdf48..7375c23 100644
--- a/public/img/logo.svg
+++ b/public/img/logo.svg
@@ -7,25 +7,27 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   viewBox="0 0 24 24"
-   class="fill-current"
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
    version="1.1"
-   id="svg6"
-   sodipodi:docname="logo.svg"
+   id="svg4659"
+   sodipodi:docname="portal-logo.svg"
    inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
   <metadata
-     id="metadata12">
+     id="metadata4665">
     <rdf:RDF>
       <cc:Work
          rdf:about="">
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
       </cc:Work>
     </rdf:RDF>
   </metadata>
   <defs
-     id="defs10" />
+     id="defs4663" />
   <sodipodi:namedview
      pagecolor="#ffffff"
      bordercolor="#666666"
@@ -37,19 +39,23 @@
      inkscape:pageshadow="2"
      inkscape:window-width="1850"
      inkscape:window-height="1136"
-     id="namedview8"
+     id="namedview4661"
      showgrid="false"
-     inkscape:zoom="9.8333333"
-     inkscape:cx="12"
-     inkscape:cy="12"
+     inkscape:zoom="0.62441667"
+     inkscape:cx="-99.292673"
+     inkscape:cy="188.97638"
      inkscape:window-x="70"
      inkscape:window-y="27"
      inkscape:window-maximized="1"
-     inkscape:current-layer="svg6" />
-  <title
-     id="title2">Portal</title>
-  <path
-     d="M22.9 10.1c-.1-.1-.2-.2-.3-.2L20 9.5c-.1-.5-.3-.9-.6-1.4.2-.2.4-.6.8-1 .3-.4.6-.8.7-1 .1 0 .1-.2.1-.3 0-.1 0-.2-.1-.3-.3-.5-1.1-1.3-2.4-2.4-.1-.1-.2-.1-.4-.1-.1 0-.3 0-.3.1l-2 1.5c-.4-.2-.8-.4-1.3-.5l-.4-2.6c0-.1-.1-.2-.2-.3-.1-.2-.2-.2-.3-.2h-3.2c-.3 0-.4.1-.5.4-.1.5-.3 1.4-.4 2.7-.5.1-.9.3-1.3.5l-2-1.5c-.1-.1-.3-.2-.4-.2-.2 0-.7.3-1.4 1-.6.7-1.1 1.3-1.4 1.6-.1.1-.1.2-.1.3 0 .1 0 .2.1.3.6.8 1.2 1.4 1.5 2-.2.5-.3.9-.5 1.4l-2.6.4c-.1 0-.2.1-.3.2-.1.1-.1.2-.1.3v3.2c0 .1 0 .2.1.3.1.1.2.2.3.2l2.6.4c.1.5.3.9.6 1.4-.2.2-.4.6-.8 1-.3.4-.6.8-.7 1-.1.1-.1.2-.1.3 0 .1 0 .2.1.3.4.5 1.2 1.3 2.4 2.4.1.1.2.2.4.2.1 0 .3 0 .4-.1l2-1.5c.3.1.7.3 1.2.5l.4 2.6c0 .1.1.2.2.3.1.1.2.1.4.1h3.2c.3 0 .4-.1.5-.4.1-.5.3-1.4.4-2.7.4-.1.9-.3 1.3-.5l2 1.5c.1.1.3.1.4.1.2 0 .7-.3 1.3-1 .7-.7 1.2-1.2 1.4-1.5.1-.1.1-.2.1-.3 0-.1 0-.2-.1-.4-.7-.8-1.2-1.5-1.5-2 .2-.4.4-.8.6-1.3l2.7-.4c.1 0 .2-.1.3-.2.1-.1.1-.2.1-.3v-3.2c-.2-.1-.2-.2-.3-.3zm-8.3 4.5c-.7.7-1.6 1.1-2.6 1.1s-1.9-.4-2.6-1.1c-.7-.7-1.1-1.6-1.1-2.6s.4-1.9 1.1-2.6c.7-.7 1.6-1.1 2.6-1.1s1.9.4 2.6 1.1c.7.7 1.1 1.6 1.1 2.6s-.4 1.9-1.1 2.6z"
-     id="path4"
-     style="fill:#1f6521;fill-opacity:1" />
+     inkscape:current-layer="svg4659" />
+  <g
+     transform="translate(0,-197)"
+     id="g4657"
+     style="fill:#1f6521;fill-opacity:1">
+    <path
+       d="M 188.97656 0 A 188.97638 188.97638 0 0 0 0 188.97656 A 188.97638 188.97638 0 0 0 188.97656 377.95312 A 188.97638 188.97638 0 0 0 377.95312 188.97656 A 188.97638 188.97638 0 0 0 188.97656 0 z M 170.81055 38.818359 L 211.67188 38.818359 C 214.22548 38.818359 215.50235 38.818893 216.7793 40.109375 C 218.05624 41.399857 219.33203 42.684127 219.33203 43.974609 L 224.43945 77.474609 C 230.8238 80.050168 235.93136 82.625534 239.76172 83.916016 L 265.29883 64.589844 C 266.57592 63.299362 269.1293 63.300781 270.40625 63.300781 C 272.9598 63.300781 274.23673 64.584518 275.51367 65.875 C 290.83607 80.047813 301.05271 90.356699 306.16016 96.798828 C 307.4371 98.08931 307.43555 99.375534 307.43555 100.66602 C 307.43555 101.9565 307.4371 103.24077 306.16016 104.53125 C 304.88331 107.10783 301.05106 112.26237 297.2207 117.41602 C 292.11325 122.56959 289.55975 127.72473 287.00586 130.30078 C 290.8367 136.7434 293.39102 141.89572 294.66797 148.33789 L 327.86523 153.49219 C 329.14218 153.49219 330.42032 154.77788 331.69727 156.06836 C 332.97421 157.3588 332.97461 158.64506 332.97461 159.93555 L 332.97461 201.16406 C 332.97461 202.45454 332.97421 203.74081 331.69727 205.03125 C 330.42032 206.32173 329.14218 207.60742 327.86523 207.60742 L 294.66797 212.76172 C 292.11451 219.20389 290.83709 224.3567 288.2832 230.79883 C 292.1138 238.52955 299.77435 246.26064 307.43555 256.56836 C 308.71249 257.85884 308.71289 259.14506 308.71289 260.43555 C 308.71289 261.72603 308.71249 263.01034 307.43555 264.30078 C 303.60495 268.16637 297.22174 275.89734 289.56055 284.91602 C 280.6225 293.93427 274.23749 297.80078 271.68359 297.80078 C 270.4065 297.80078 267.85312 296.51509 266.57617 295.22461 L 241.03906 275.89844 C 235.93161 278.47403 230.8238 281.05131 224.43945 282.3418 C 223.16236 299.09168 220.60898 310.68678 219.33203 317.12891 C 218.05513 320.99253 216.77762 322.2832 212.94727 322.2832 L 172.08789 322.2832 C 170.81143 322.2832 169.53476 322.28312 168.25781 319.70703 C 166.98087 318.41659 165.70312 317.13033 165.70312 315.83984 L 160.5957 282.3418 C 154.2114 281.05324 149.1055 278.47652 143.99805 275.90039 L 118.46094 295.22656 C 118.46094 296.51704 115.90585 296.51758 114.62891 296.51758 C 112.07535 296.51758 110.79843 296.51704 109.52148 295.22656 C 92.922242 281.05375 82.707795 270.74685 78.876953 264.30469 C 77.600006 263.01421 77.599609 261.72798 77.599609 260.4375 C 77.599609 259.14702 77.600006 256.57227 78.876953 256.57227 C 80.153802 253.99523 83.985568 248.84107 87.816406 243.6875 C 92.923905 238.53336 95.477355 233.37882 98.03125 230.80273 C 94.200892 224.36057 91.646084 219.2058 90.369141 212.76367 L 57.169922 207.61133 C 55.893454 207.61133 54.616791 206.32564 53.339844 205.03516 C 52.06338 203.74475 52.06366 202.45845 49.509766 201.16797 L 49.509766 159.93945 C 49.509766 158.64897 49.508209 157.36275 50.785156 156.07227 C 52.06162 154.78662 53.340244 153.49609 54.617188 153.49609 L 89.091797 148.33594 C 91.645544 141.89377 94.200011 136.74004 96.753906 131.58594 C 92.923306 125.14377 86.537701 116.12363 77.599609 105.81641 C 76.322662 103.23835 76.322266 101.95454 76.322266 100.66406 C 76.322266 99.373581 76.322662 98.087357 77.599609 96.796875 C 80.153357 92.931288 86.538513 86.489941 95.476562 77.470703 C 103.13776 68.452977 109.52228 64.585938 112.07617 64.585938 C 113.35283 64.585938 115.90665 64.584518 117.18359 65.875 L 142.7207 85.203125 C 147.8282 82.627528 154.21281 80.050248 159.32031 78.759766 C 160.5974 62.009882 163.15079 50.414785 164.42773 43.972656 C 165.70459 40.109034 166.98019 38.818359 170.81055 38.818359 z M 192.51953 132.88086 C 179.75084 132.88086 168.25836 138.03545 159.32031 147.05469 C 150.38227 156.07385 145.27539 167.67039 145.27539 180.55469 C 145.27539 193.43898 150.38227 205.03353 159.32031 214.05273 C 168.25836 223.07144 179.75084 228.22656 192.51953 228.22656 C 205.28818 228.22656 216.77875 223.07144 225.7168 214.05273 C 234.65489 205.03353 239.76367 193.43898 239.76367 180.55469 C 239.76367 167.67039 234.65489 156.07385 225.7168 147.05469 C 216.77875 138.03545 205.28818 132.88086 192.51953 132.88086 z "
+       transform="matrix(0.26458333,0,0,0.26458333,0,197)"
+       id="path4655"
+       style="fill:#1f6521;fill-opacity:1" />
+  </g>
 </svg>

From 659ef1c9442aa90c55b2286757e89ef5989eb7ae Mon Sep 17 00:00:00 2001
From: Romulus21 <romain@delanoe.me>
Date: Sat, 25 Apr 2020 16:02:42 +0200
Subject: [PATCH 2/5] fix modal

---
 resources/js/views/Memo/MemoShow.vue | 17 +++++++-------
 resources/sass/components/modal.scss | 33 ++++++++++++++--------------
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/resources/js/views/Memo/MemoShow.vue b/resources/js/views/Memo/MemoShow.vue
index 36cde34..acfce01 100755
--- a/resources/js/views/Memo/MemoShow.vue
+++ b/resources/js/views/Memo/MemoShow.vue
@@ -2,6 +2,14 @@
     <div>
         <Loader v-if="loading" />
         <div v-else>
+            <div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
+            <div v-if="modal" class="modal">
+                <p class="m-1 text-center">Are you sure you want to delete this record ?</p>
+                <div class="flex-center m-1 mt-2">
+                    <button class="btn-secondary mr-2" @click="modal = ! modal">Cancel</button>
+                    <button class="btn-alert" @click="destroy"> Delete</button>
+                </div>
+            </div>
             <div class="relative">
                 <img
                     v-if="!loading"
@@ -11,15 +19,6 @@
                 <div class="flex-col flex-between absolute memo-cover">
                     <div class="flex-between px-2 py-1">
                         <router-link to="/memos/" class="btn-secondary">< Back</router-link>
-                        <div v-if="modal" class="modal-container" @click="modal = ! modal">
-                            <div class="modal">
-                                <p class="m-1 text-center">Are you sure you want to delete this record ?</p>
-                                <div class="flex-center m-1 mt-2">
-                                    <button class="btn-secondary mr-2" @click="modal = ! modal">Cancel</button>
-                                    <button class="btn-alert" @click="destroy"> Delete</button>
-                                </div>
-                            </div>
-                        </div>
                         <div class="flex-middle">
                             <router-link :to="'/memos/' + memo.memo_id + '/edit'" class="btn-secondary mr-1" >Edit</router-link>
                             <a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>
diff --git a/resources/sass/components/modal.scss b/resources/sass/components/modal.scss
index b32ff51..a0b0e2e 100644
--- a/resources/sass/components/modal.scss
+++ b/resources/sass/components/modal.scss
@@ -2,25 +2,26 @@ $modal-duration: 1s;
 
 .modal-container {
     background-color: rgba(0,0,0,0.6);
-    //display: none;
     position: fixed;
+    z-index: 10;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
-
-    .modal {
-        background-color: #fff;
-        border-radius: 5px;
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-        position: absolute;
-        overflow: hidden;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        max-width: 100%;
-        width: 400px;
-        animation-name: modalopen;
-        animation-duration: $modal-duration;
-    }
+}
+
+.modal {
+    background-color: #fff;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+    position: absolute;
+    z-index: 20;
+    overflow: hidden;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-width: 100%;
+    width: 400px;
+    animation-name: modalopen;
+    animation-duration: $modal-duration;
 }

From ca7177f676ca830187cc371d321faa9773e2f4cb Mon Sep 17 00:00:00 2001
From: Romulus21 <romain@delanoe.me>
Date: Sun, 26 Apr 2020 11:50:06 +0200
Subject: [PATCH 3/5] add Tailwing & CssPurge

---
 package.json                          |   4 +-
 resources/js/components/App.vue       |   4 +-
 resources/js/components/Avatar.vue    |   4 +-
 resources/js/components/Nav.vue       |  30 ++--
 resources/js/components/TopBar.vue    |  14 +-
 resources/js/views/Memo/MemoIndex.vue |  18 +-
 resources/sass/app.scss               |  55 +++---
 resources/sass/components/_btn.scss   | 125 ++++++++------
 resources/sass/components/nav.scss    | 237 +++++++++++++++++---------
 tailwind.config.js                    |  11 ++
 webpack.mix.js                        |   9 +-
 11 files changed, 317 insertions(+), 194 deletions(-)
 create mode 100644 tailwind.config.js

diff --git a/package.json b/package.json
index d06d4b6..879612a 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
         "eslint-plugin-vue": "^6.2.2",
         "laravel-mix": "^5.0.1",
         "laravel-mix-eslint": "^0.1.3",
+        "laravel-mix-purgecss": "^5.0.0-rc.2",
         "lodash": "^4.17.13",
         "resolve-url-loader": "^2.3.1",
         "sass": "^1.20.1",
@@ -32,6 +33,7 @@
         "dropzone": "^5.7.0",
         "laravel-mix-svg-vue": "^0.2.6",
         "markdown-it": "^10.0.0",
-        "markdown-it-checkbox": "^1.1.0"
+        "markdown-it-checkbox": "^1.1.0",
+        "tailwindcss": "^1.3.5"
     }
 }
diff --git a/resources/js/components/App.vue b/resources/js/components/App.vue
index 41ee1f7..64b82c7 100644
--- a/resources/js/components/App.vue
+++ b/resources/js/components/App.vue
@@ -1,9 +1,9 @@
 <template>
     <div class="flex">
         <Nav />
-        <div v-if="authUser" class="w-100">
+        <div v-if="authUser" class="w-full">
             <TopBar />
-            <main>
+            <main class="bg-orange-200">
                 <router-view :key="$route.fullPath" class="main"></router-view>
             </main>
         </div>
diff --git a/resources/js/components/Avatar.vue b/resources/js/components/Avatar.vue
index 43a8a42..759a057 100644
--- a/resources/js/components/Avatar.vue
+++ b/resources/js/components/Avatar.vue
@@ -1,7 +1,7 @@
 <template>
-    <div>
+    <div class="flex justify-center items-center">
         <img v-if="avatar" src="avatar" alt="alt" class="avatar" v-bind:class="'avatar' + size">
-        <span v-else class="avatar" v-bind:class="'avatar-' + size">{{ alt[0] }}</span>
+        <span v-else class="text-2xl font-bold"  v-bind:class="'avatar-' + size">{{ alt[0] }}</span>
     </div>
 
 </template>
diff --git a/resources/js/components/Nav.vue b/resources/js/components/Nav.vue
index b795fa0..2f3afe9 100644
--- a/resources/js/components/Nav.vue
+++ b/resources/js/components/Nav.vue
@@ -1,18 +1,20 @@
 <template>
-    <nav v-bind:class="{ small: !toggleNav }">
-        <router-link to="/" class="site-logo-main" v-bind:class="{ small: !toggleNav }">
-            <svg-vue icon="logo" />
-        </router-link>
-        <hr>
-        <router-link to="/memos" class="nav-item">
-            <svg-vue icon="memos" />
-            <span v-bind:class="{ navhidden: !toggleNav }">Memos</span>
-        </router-link>
-        <router-link to="/jeux" class="nav-item">
-            <svg-vue icon="games" />
-            <span v-bind:class="{ navhidden: !toggleNav }">Jeux</span>
-        </router-link>
-        <div @click="toggleNavBar"  class="nav-toggle mt-5">
+    <nav v-bind:class="{ small: !toggleNav }" class="h-screen bg-orange-400 flex flex-col justify-between">
+        <div class="">
+            <router-link to="/" class="logo" v-bind:class="{ small: !toggleNav }">
+                <svg-vue icon="logo" />
+            </router-link>
+            <hr>
+            <router-link to="/memos" class="nav-item p-2">
+                <svg-vue icon="memos" />
+                <span v-bind:class="{ navhidden: !toggleNav }">Memos</span>
+            </router-link>
+            <router-link to="/jeux" class="nav-item p-2">
+                <svg-vue icon="games" />
+                <span v-bind:class="{ navhidden: !toggleNav }">Jeux</span>
+            </router-link>
+        </div>
+        <div @click="toggleNavBar"  class="nav-toggle flex ml-2">
             <svg-vue icon="arrow" v-bind:class="{ small: !toggleNav }" />
         </div>
     </nav>
diff --git a/resources/js/components/TopBar.vue b/resources/js/components/TopBar.vue
index 807e8b6..26059bd 100644
--- a/resources/js/components/TopBar.vue
+++ b/resources/js/components/TopBar.vue
@@ -1,17 +1,17 @@
 <template>
-    <div class="flex-between flex-middle py-1 px-2 topbar">
-        <router-link v-if="authUser" :to="'/profile'" class="flex-middle avatar-box">
-            <Avatar :avatar="authUser.data.attributes.avatar" size="small" :alt="authUser.data.attributes.name" class="mr-1"/>
-            {{ authUser.data.attributes.name }}
+    <div class="top-bar flex justify-between bg-orange-300">
+        <router-link v-if="authUser" :to="'/profile'" class="flex items-center m-2">
+            <Avatar :avatar="authUser.data.attributes.avatar" size="small" :alt="authUser.data.attributes.name" class="bg-orange-600 hover:bg-orange-800 w-10 h-10 rounded-full"/>
+            <span class="ml-2 hover:text-orange-900">{{ authUser.data.attributes.name }}</span>
         </router-link>
-        <form v-if="authUser && search" class="search-box">
+        <form v-if="authUser && search" class="m-2">
             <input type="search" name="search" placeholder="Search">
             <button type="submit" value="S">
                 <svg-vue icon="search" />
             </button>
         </form>
-        <router-link to="/dashboard" v-if="authUser" class="mr-1">
-            <svg-vue icon="params" />
+        <router-link to="/dashboard" v-if="authUser" class="text-orange-600 hover:text-orange-800">
+            <svg-vue icon="params" class="w-10 m-2 fill-current" />
         </router-link>
         <router-link v-else to="/login">
             Se connecter
diff --git a/resources/js/views/Memo/MemoIndex.vue b/resources/js/views/Memo/MemoIndex.vue
index 473d2b3..14f9df0 100755
--- a/resources/js/views/Memo/MemoIndex.vue
+++ b/resources/js/views/Memo/MemoIndex.vue
@@ -1,20 +1,22 @@
 <template>
-    <div class="p-2">
-        <div class="flex-between flex-center mb-1">
+    <div class="p-4">
+        <div class="flex justify-between flex-center mb-4">
             <a href="#" class="btn" @click="$router.back()">< Back</a>
             <router-link :to="'/memos/create'" class="btn-primary">Add New Memo</router-link>
         </div>
         <Loader v-if="loading" />
-        <div v-else class="container-cards-list">
+        <div v-else class="flex flex-wrap mb-4">
             <div v-if="memos.lenght === 0">
                 <p>No memos yet. <router-link to="/memos/create">Get Started ></router-link></p>
             </div>
-            <router-link v-for="memo in memos" :key="memo.data.memo_id" :to="'/memos/' + memo.data.memo_id" class="card">
-                <div>
-                    <img :src="memo.data.attributes.cover_image.data.attributes.path" alt="" class="cover">
-                    <h1 class="p-1">{{ memo.data.name }}</h1>
+            <router-link v-for="memo in memos" :key="memo.data.memo_id" :to="'/memos/' + memo.data.memo_id" class="lg:w-1/4 p-2 max-w-lg rounded overflow-hidden shadow-lg bg-white">
+                <img :src="memo.data.attributes.cover_image.data.attributes.path" alt="" class="w-full">
+                <div class="px-6 py-4">
+                    <h1 class="text-gray-700 text-">{{ memo.data.name }}</h1>
+                </div>
+                <div class="px-6 py-4">
+                    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">{{ memo.data.last_updated }}</span>
                 </div>
-                <div class="memo-date p-1">{{ memo.data.last_updated }}</div>
             </router-link>
         </div>
     </div>
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 2932ade..6da9a1a 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -1,30 +1,37 @@
 
-@import "setup/reset";
-@import "setup/colors";
-@import "setup/fonts";
-@import "setup/positions";
-@import "setup/containers";
-@import "setup/effects";
+@tailwind base;
+@tailwind components;
 
-@import "components/transitions";
+
+//@import "setup/reset";
+//@import "setup/colors";
+//@import "setup/fonts";
+//@import "setup/positions";
+//@import "setup/containers";
+//@import "setup/effects";
+//
+//@import "components/transitions";
 @import "components/btn";
-@import "components/elements";
-@import "components/loader";
-@import "components/events";
-@import "components/main";
+//@import "components/elements";
+//@import "components/loader";
+//@import "components/events";
+//@import "components/main";
 @import "components/nav";
-@import "components/topbar";
-@import "components/modal";
-@import "components/images";
-@import "components/avatar";
-@import "components/alert_box";
-@import "components/search_box";
-@import "components/owfont-regular";
+//@import "components/topbar";
+//@import "components/modal";
+//@import "components/images";
+//@import "components/avatar";
+//@import "components/alert_box";
+//@import "components/search_box";
+//@import "components/owfont-regular";
+//
+//@import "pages/auth";
+//@import "pages/users";
+//@import "pages/memos";
+//@import "pages/meteo";
+//@import "pages/games";
+//
+//@import "pages/games/hangman";
 
-@import "pages/auth";
-@import "pages/users";
-@import "pages/memos";
-@import "pages/meteo";
-@import "pages/games";
 
-@import "pages/games/hangman";
+@tailwind utilities;
diff --git a/resources/sass/components/_btn.scss b/resources/sass/components/_btn.scss
index d5414f7..4ef7eef 100644
--- a/resources/sass/components/_btn.scss
+++ b/resources/sass/components/_btn.scss
@@ -1,68 +1,85 @@
 // Button
 
+//.btn {
+//    font-size: 1.6rem;
+//    border: 1px solid transparent;
+//    padding: 0.5rem 1rem;
+//    border-radius: 0.5rem;
+//    cursor: pointer;
+//    box-shadow: 1px 1px 2px $grey;
+//    text-decoration: none;
+//    transition: background-color 0.2s, color 0.2s;
+//
+//    &:hover {
+//        transition: background-color 0.2s, color 0.2s;
+//        background-color: $mediumDark;
+//        color: $white;
+//    }
+//}
+//
+//.btn-primary {
+//    @extend .btn;
+//    background-color: $medium;
+//    border-color: $medium;
+//    color: $white;
+//
+//    &:visited,
+//    &:focus {
+//        color: $white;
+//    }
+//}
+//
+//.btn-secondary {
+//    @extend .btn;
+//    background-color: $mediumLight;
+//    border-color: $mediumLight;
+//    color: $dark;
+//}
+//
+//.btn-alert {
+//    @extend .btn;
+//    background-color: $error;
+//    border-color: $error;
+//    color: $white;
+//
+//    &:hover {
+//        background-color: $dark;
+//    }
+//}
+//
+//.btn-icon {
+//    @extend .btn;
+//    display: flex;
+//    align-items: center;
+//    height: 4rem;
+//
+//    &:hover svg {
+//        fill: $white;
+//    }
+//
+//    svg {
+//        height: 3rem;
+//        margin-right: 1rem;
+//
+//        &:hover {
+//            fill: $white;
+//        }
+//    }
+//}
+
 .btn {
-    font-size: 1.6rem;
-    border: 1px solid transparent;
-    padding: 0.5rem 1rem;
-    border-radius: 0.5rem;
-    cursor: pointer;
-    box-shadow: 1px 1px 2px $grey;
-    text-decoration: none;
-    transition: background-color 0.2s, color 0.2s;
+    @apply border bg-orange-400 py-2 px-4 shadow-sm rounded-md;
 
     &:hover {
-        transition: background-color 0.2s, color 0.2s;
-        background-color: $mediumDark;
-        color: $white;
+        @apply text-white bg-orange-600 transition-all duration-300;
     }
 }
 
 .btn-primary {
     @extend .btn;
-    background-color: $medium;
-    border-color: $medium;
-    color: $white;
-
-    &:visited,
-    &:focus {
-        color: $white;
-    }
-}
-
-.btn-secondary {
-    @extend .btn;
-    background-color: $mediumLight;
-    border-color: $mediumLight;
-    color: $dark;
-}
-
-.btn-alert {
-    @extend .btn;
-    background-color: $error;
-    border-color: $error;
-    color: $white;
+    @apply bg-orange-600;
 
     &:hover {
-        background-color: $dark;
-    }
-}
-
-.btn-icon {
-    @extend .btn;
-    display: flex;
-    align-items: center;
-    height: 4rem;
-
-    &:hover svg {
-        fill: $white;
-    }
-
-    svg {
-        height: 3rem;
-        margin-right: 1rem;
-
-        &:hover {
-            fill: $white;
-        }
+        @apply bg-orange-800;
     }
 }
diff --git a/resources/sass/components/nav.scss b/resources/sass/components/nav.scss
index e606665..54b8c8d 100644
--- a/resources/sass/components/nav.scss
+++ b/resources/sass/components/nav.scss
@@ -1,103 +1,178 @@
 
+//nav {
+//    background-color: $mediumDark;
+//    height: 100vh;
+//    width: 15rem;
+//    flex-shrink: 0;
+//    display: flex;
+//    flex-direction: column;
+//    box-shadow: inset -3px -2px 3px rgba(0,0,0,0.2);
+//    transition: width $transition-delay;
+//
+//    &.small {
+//        width: 5.5rem;
+//    }
+//
+//    hr {
+//        width: 90%;
+//        border-radius: 1px;
+//        border: 1px solid $dark;
+//    }
+//
+//    .nav-item {
+//        display: flex;
+//        align-items: center;
+//        text-decoration: none;
+//        color: $light;
+//        padding-top: 1rem;
+//        padding-bottom: 1rem;
+//
+//        span {
+//            overflow: hidden;
+//        }
+//
+//        svg {
+//            margin: 0 1rem;
+//            width: 3rem;
+//            transition: fill 0.2s;
+//            fill: $light;
+//        }
+//
+//        &:hover {
+//            color: $dark;
+//            background-color: $light;
+//            transition: color 0.2s, background-color 0.2s;
+//
+//            svg {
+//                fill: $dark;
+//                transition: fill 0.2s;
+//            }
+//        }
+//
+//        //&:visited {
+//        //    color: $dark;
+//        //}
+//    }
+//}
+//
+//.site-logo {
+//    width: 3rem;
+//    fill: $light;
+//    transition: fill 0.2s;
+//
+//    &:hover {
+//        fill: $dark;
+//        transition: fill 0.2s;
+//    }
+//}
+//
+//.navhidden {
+//    width: 0;
+//}
+//
+//
+//.site-logo-main {
+//    @extend .site-logo;
+//    display: block;
+//    margin: 1rem;
+//    width: 13rem;
+//    transition: width $transition-delay;
+//
+//    svg {
+//
+//        width: 100%;
+//    }
+//
+//    &.small {
+//        //padding-bottom: 10rem;
+//        width: 3.5rem;
+//    }
+//}
+//
+//.nav-toggle {
+//    @extend .site-logo;
+//    align-self: center;
+//
+//    svg {
+//        transition: transform $transition-delay;
+//    }
+//
+//    svg.small {
+//            transform: rotate(-180deg);
+//    }
+//}
+
 nav {
-    background-color: $mediumDark;
-    height: 100vh;
-    width: 15rem;
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-    box-shadow: inset -3px -2px 3px rgba(0,0,0,0.2);
-    transition: width $transition-delay;
+    @apply w-48;
+    transition: width 0.3s;
 
-    &.small {
-        width: 5.5rem;
+    svg {
+        @apply fill-current text-orange-600 w-12 p-2;
+        transition: color 0.3s;
+
+        &:hover {
+            @apply text-orange-800;
+        }
     }
 
-    hr {
-        width: 90%;
-        border-radius: 1px;
-        border: 1px solid $dark;
+    .logo {
+        @apply block;
+
+        svg {
+            @apply w-40 m-2;
+            transition: width 0.3s, color 0.3s;
+        }
     }
 
     .nav-item {
-        display: flex;
-        align-items: center;
-        text-decoration: none;
-        color: $light;
-        padding-top: 1rem;
-        padding-bottom: 1rem;
+        @apply flex items-center;
+
 
         span {
-            overflow: hidden;
-        }
+            @apply font-bold text-xl ml-2 overflow-hidden;
+            transition: width 0.3s;
 
-        svg {
-            margin: 0 1rem;
-            width: 3rem;
-            transition: fill 0.2s;
-            fill: $light;
-        }
-
-        &:hover {
-            color: $dark;
-            background-color: $light;
-            transition: color 0.2s, background-color 0.2s;
-
-            svg {
-                fill: $dark;
-                transition: fill 0.2s;
+            &:hover {
+                @apply text-orange-800;
             }
         }
 
-        //&:visited {
-        //    color: $dark;
-        //}
+        &:hover {
+            @apply bg-orange-500;
+
+            span,
+            svg {
+                @apply text-orange-800;
+            }
+        }
+    }
+
+    .nav-toggle svg {
+        transition: transform 0.3s;
     }
 }
 
-.site-logo {
-    width: 3rem;
-    fill: $light;
-    transition: fill 0.2s;
+nav.small {
+    @apply w-16;
 
-    &:hover {
-        fill: $dark;
-        transition: fill 0.2s;
+    .logo {
+        @apply w-16 p-0;
+
+        svg {
+            @apply w-16 m-0;
+        }
+    }
+
+    .nav-item span {
+        @apply w-0;
+    }
+
+    .nav-toggle svg {
+        transform: rotate(-180deg);
     }
 }
 
-.navhidden {
-    width: 0;
-}
-
-
-.site-logo-main {
-    @extend .site-logo;
-    display: block;
-    margin: 1rem;
-    width: 13rem;
-    transition: width $transition-delay;
-
-    svg {
-
-        width: 100%;
-    }
-
-    &.small {
-        //padding-bottom: 10rem;
-        width: 3.5rem;
-    }
-}
-
-.nav-toggle {
-    @extend .site-logo;
-    align-self: center;
-
-    svg {
-        transition: transform $transition-delay;
-    }
-
-    svg.small {
-            transform: rotate(-180deg);
-    }
+.app {
+    //min-width: 100%;
+    width: initial;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..bf31657
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,11 @@
+module.exports = {
+  theme: {
+    extend: {
+        width: {
+            '96': '24rem'
+        }
+    },
+  },
+  variants: {},
+  plugins: [],
+}
diff --git a/webpack.mix.js b/webpack.mix.js
index afa1b25..6cab0aa 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -1,6 +1,13 @@
 const mix = require('laravel-mix');
+const tailwindcss = require('tailwindcss')
+require('laravel-mix-purgecss');
 require('laravel-mix-svg-vue');
 
 mix.js('resources/js/app.js', 'public/js')
     .svgVue()
-   .sass('resources/sass/app.scss', 'public/css');
+    .sass('resources/sass/app.scss', 'public/css')
+    .options({
+        processCssUrls: false,
+        postCss: [ tailwindcss('./tailwind.config.js') ],
+    })
+    .purgeCss();

From 578c51eb1a0df4d2b572c2c3d79f2c015ce14874 Mon Sep 17 00:00:00 2001
From: Romulus21 <romain@delanoe.me>
Date: Sun, 26 Apr 2020 19:23:18 +0200
Subject: [PATCH 4/5] almost finish tailwind transform

---
 resources/js/components/App.vue              |   8 +-
 resources/js/components/Avatar.vue           |   4 +-
 resources/js/components/InputField.vue       |   8 +-
 resources/js/components/Loader.vue           |   2 +-
 resources/js/components/TextAreaField.vue    |   6 +-
 resources/js/components/TopBar.vue           |   2 +-
 resources/js/views/DashBoard.vue             |   8 +-
 resources/js/views/Games/GameIndex.vue       |   8 +-
 resources/js/views/Games/HangMan/Hangman.vue |   6 +-
 resources/js/views/Memo/MemoCreate.vue       |  10 +-
 resources/js/views/Memo/MemoEdit.vue         |  10 +-
 resources/js/views/Memo/MemoIndex.vue        |  18 ++--
 resources/js/views/Memo/MemoShow.vue         |  16 +--
 resources/js/views/User/ProfileUser.vue      |   8 +-
 resources/js/views/User/UserAdmin.vue        |  10 +-
 resources/sass/app.scss                      |   5 +-
 resources/sass/components/_btn.scss          |  24 ++++-
 resources/sass/components/_elements.scss     | 104 ++++++++++++++-----
 resources/sass/components/_transitions.scss  |  10 ++
 resources/sass/components/modal.scss         |  26 +++--
 20 files changed, 188 insertions(+), 105 deletions(-)

diff --git a/resources/js/components/App.vue b/resources/js/components/App.vue
index 64b82c7..8a80cbe 100644
--- a/resources/js/components/App.vue
+++ b/resources/js/components/App.vue
@@ -1,10 +1,10 @@
 <template>
-    <div class="flex">
+    <div class="flex bg-orange-200 h-screen overflow-y-hidden">
         <Nav />
-        <div v-if="authUser" class="w-full">
+        <div v-if="authUser" class="w-full overflow-y-auto">
             <TopBar />
-            <main class="bg-orange-200">
-                <router-view :key="$route.fullPath" class="main"></router-view>
+            <main>
+                <router-view :key="$route.fullPath"></router-view>
             </main>
         </div>
     </div>
diff --git a/resources/js/components/Avatar.vue b/resources/js/components/Avatar.vue
index 759a057..1683f02 100644
--- a/resources/js/components/Avatar.vue
+++ b/resources/js/components/Avatar.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="flex justify-center items-center">
+    <div class="flex justify-center items-center rounded-full bg-orange-600 hover:bg-orange-800">
         <img v-if="avatar" src="avatar" alt="alt" class="avatar" v-bind:class="'avatar' + size">
-        <span v-else class="text-2xl font-bold"  v-bind:class="'avatar-' + size">{{ alt[0] }}</span>
+        <span v-else class="text-2xl font-bold"  v-bind:class="'text-' + size">{{ alt[0] }}</span>
     </div>
 
 </template>
diff --git a/resources/js/components/InputField.vue b/resources/js/components/InputField.vue
index 17b92b6..8cc8758 100644
--- a/resources/js/components/InputField.vue
+++ b/resources/js/components/InputField.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="relative mt-1">
-        <label :for="name" class="pb-1">{{ label }}</label>
-        <input :id="name" :type="type" :placeholder="placeholder" v-model="value" @input="updateField()" :class="errorClassObject()">
-        <p class="text-alert m-0" v-text="errorMessage()">Error Here</p>
+    <div class="relative mb-2">
+        <label :for="name" class="pb-2 font-bold text-xl ml-1">{{ label }}</label>
+        <input :id="name" :type="type" :placeholder="placeholder" v-model="value" @input="updateField()" :class="errorClassObject()" class="w-full rounded p-2">
+        <p class="text-red-600 m-0" v-text="errorMessage()">Error Here</p>
     </div>
 </template>
 
diff --git a/resources/js/components/Loader.vue b/resources/js/components/Loader.vue
index 2473068..fdb4c2d 100644
--- a/resources/js/components/Loader.vue
+++ b/resources/js/components/Loader.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="loading" class="flex-center">
+    <div v-if="loading" class="flex items-center">
         <svg-vue icon="loader" class="loader"/>
     </div>
 </template>
diff --git a/resources/js/components/TextAreaField.vue b/resources/js/components/TextAreaField.vue
index 2f87898..02f5f5b 100644
--- a/resources/js/components/TextAreaField.vue
+++ b/resources/js/components/TextAreaField.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="relative mt-1">
+    <div class="relative mb-2">
         <label v-if="label" :for="name" class="pb-1">{{ label }}</label>
-        <textarea :id="name" type="text" v-model="value" :placeholder="placeholder" @input="updateField()" :class="errorClassObject()" class="p-1">{{ data }}</textarea>
-        <p class="text-alert m-0" v-text="errorMessage()">Error Here</p>
+        <textarea :id="name" type="text" v-model="value" :placeholder="placeholder" @input="updateField()" :class="errorClassObject()" class="w-full h-64 rounded p-2">{{ data }}</textarea>
+        <p class="text-red-600 m-0" v-text="errorMessage()">Error Here</p>
     </div>
 </template>
 
diff --git a/resources/js/components/TopBar.vue b/resources/js/components/TopBar.vue
index 26059bd..e006e5e 100644
--- a/resources/js/components/TopBar.vue
+++ b/resources/js/components/TopBar.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="top-bar flex justify-between bg-orange-300">
         <router-link v-if="authUser" :to="'/profile'" class="flex items-center m-2">
-            <Avatar :avatar="authUser.data.attributes.avatar" size="small" :alt="authUser.data.attributes.name" class="bg-orange-600 hover:bg-orange-800 w-10 h-10 rounded-full"/>
+            <Avatar :avatar="authUser.data.attributes.avatar" size="small" :alt="authUser.data.attributes.name" class="w-10 h-10"/>
             <span class="ml-2 hover:text-orange-900">{{ authUser.data.attributes.name }}</span>
         </router-link>
         <form v-if="authUser && search" class="m-2">
diff --git a/resources/js/views/DashBoard.vue b/resources/js/views/DashBoard.vue
index 092e88c..6f757d0 100644
--- a/resources/js/views/DashBoard.vue
+++ b/resources/js/views/DashBoard.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="m-2">
-        <div class="flex-between">
-            <h1 class="mb-3">Administration</h1>
-            <a href="#" @click.prevent="logout" class="btn btn-icon">
+    <div class="p-4">
+        <div class="flex justify-between">
+            <h1 class="page-title">Administration</h1>
+            <a href="#" @click.prevent="logout" class="btn">
                 <svg-vue icon="logout" /> Déconnexion
             </a>
         </div>
diff --git a/resources/js/views/Games/GameIndex.vue b/resources/js/views/Games/GameIndex.vue
index f632881..7ba23e1 100644
--- a/resources/js/views/Games/GameIndex.vue
+++ b/resources/js/views/Games/GameIndex.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="p-2">
-        <h1>Liste des jeux</h1>
-        <div class="container-cards-list mt-2">
-            <HangmanIndex link="/jeux/pendu" class="card" />
+    <div class="p-4">
+        <h1 class="page-title">Liste des jeux</h1>
+        <div class="flex flex-wrap mt-4">
+            <HangmanIndex link="/jeux/pendu" class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 card" />
         </div>
     </div>
 </template>
diff --git a/resources/js/views/Games/HangMan/Hangman.vue b/resources/js/views/Games/HangMan/Hangman.vue
index b3cb848..cb5900d 100644
--- a/resources/js/views/Games/HangMan/Hangman.vue
+++ b/resources/js/views/Games/HangMan/Hangman.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="p-2 game-container">
-        <h1 class="text-center">Pendu</h1>
-        <p class="text-center">Trouve le mot du pendu - Saisi les lettres</p>
-        <div class="flex-center dic-select">
+        <h1 class="text-3xl text-center text-orange-900 font-bold">Pendu</h1>
+        <p class="text-center mb-4">Trouve le mot du pendu - Saisi les lettres</p>
+        <div class="flex justify-center dic-select">
             <div v-for="(dic, key) in dictionary">
                 <a v-if="!selectedWord" class="btn-primary mr-1" @click="selectWord">{{ key }}</a>
             </div>
diff --git a/resources/js/views/Memo/MemoCreate.vue b/resources/js/views/Memo/MemoCreate.vue
index 7c0a74f..7a7e9c7 100755
--- a/resources/js/views/Memo/MemoCreate.vue
+++ b/resources/js/views/Memo/MemoCreate.vue
@@ -1,14 +1,14 @@
 <template>
-    <div class="memo-edit p-2">
-        <div class="flex-between mb-1">
+    <div class="p-4">
+        <div class="flex justify-between flex-center mb-4">
             <router-link to="/memos/" class="btn">< Back</router-link>
-            <button @click="$router.back()" class="btn-alert mr-1">Cancel</button>
+            <button @click="$router.back()" class="btn-alert">Cancel</button>
         </div>
         <form @submit.prevent="submitForm">
             <InputField name="name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
-            <TextAreaField class="memo-text-area" name="memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
+            <TextAreaField class="" name="memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
 
-            <div class="flex-end mt-1">
+            <div class="flex justify-end mt-2">
                 <button class="btn-primary">Add New Memo</button>
             </div>
         </form>
diff --git a/resources/js/views/Memo/MemoEdit.vue b/resources/js/views/Memo/MemoEdit.vue
index 746449d..4c94a10 100755
--- a/resources/js/views/Memo/MemoEdit.vue
+++ b/resources/js/views/Memo/MemoEdit.vue
@@ -12,15 +12,15 @@
                 :model="form.type"
                 classes="cover"
                 :alt="form.name"/>
-            <div class="flex-between ml-2 mt-1 absolute t-0">
-                <router-link :to="'/memos/' + this.$route.params.id" class="btn-secondary">< Back</router-link>
-            </div>
         </div>
-        <div class="p-2">
+        <div class="p-4">
+            <div class="flex justify-between mb-4">
+                <router-link :to="'/memos/' + this.$route.params.id" class="btn">< Back</router-link>
+            </div>
             <form @submit.prevent="submitForm">
                 <InputField name="name" :data="form.name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
                 <TextAreaField class="memo-text-area" name="memo" :data="form.memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
-                <div class="flex-end mt-1">
+                <div class="flex justify-end mt-2">
                     <button class="btn-primary">Save</button>
                 </div>
 
diff --git a/resources/js/views/Memo/MemoIndex.vue b/resources/js/views/Memo/MemoIndex.vue
index 14f9df0..ee49c71 100755
--- a/resources/js/views/Memo/MemoIndex.vue
+++ b/resources/js/views/Memo/MemoIndex.vue
@@ -5,17 +5,19 @@
             <router-link :to="'/memos/create'" class="btn-primary">Add New Memo</router-link>
         </div>
         <Loader v-if="loading" />
-        <div v-else class="flex flex-wrap mb-4">
+        <div v-else class="flex flex-wrap -m-2">
             <div v-if="memos.lenght === 0">
                 <p>No memos yet. <router-link to="/memos/create">Get Started ></router-link></p>
             </div>
-            <router-link v-for="memo in memos" :key="memo.data.memo_id" :to="'/memos/' + memo.data.memo_id" class="lg:w-1/4 p-2 max-w-lg rounded overflow-hidden shadow-lg bg-white">
-                <img :src="memo.data.attributes.cover_image.data.attributes.path" alt="" class="w-full">
-                <div class="px-6 py-4">
-                    <h1 class="text-gray-700 text-">{{ memo.data.name }}</h1>
-                </div>
-                <div class="px-6 py-4">
-                    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">{{ memo.data.last_updated }}</span>
+            <router-link v-for="memo in memos" :key="memo.data.memo_id" :to="'/memos/' + memo.data.memo_id" class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4">
+                <div class="m-2 max-w-lg rounded overflow-hidden shadow-lg bg-white">
+                    <img :src="memo.data.attributes.cover_image.data.attributes.path" alt="" class="w-full">
+                    <div class="px-6 py-4">
+                        <h1 class="text-gray-700 text-">{{ memo.data.name }}</h1>
+                    </div>
+                    <div class="flex justify-end py-2">
+                        <span class="inline-block bg-orange-400 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">{{ memo.data.last_updated }}</span>
+                    </div>
                 </div>
             </router-link>
         </div>
diff --git a/resources/js/views/Memo/MemoShow.vue b/resources/js/views/Memo/MemoShow.vue
index acfce01..b0b0672 100755
--- a/resources/js/views/Memo/MemoShow.vue
+++ b/resources/js/views/Memo/MemoShow.vue
@@ -4,8 +4,8 @@
         <div v-else>
             <div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
             <div v-if="modal" class="modal">
-                <p class="m-1 text-center">Are you sure you want to delete this record ?</p>
-                <div class="flex-center m-1 mt-2">
+                <p class="m-2 text-center">Are you sure you want to delete this record ?</p>
+                <div class="flex justify-center mx-2 my-4">
                     <button class="btn-secondary mr-2" @click="modal = ! modal">Cancel</button>
                     <button class="btn-alert" @click="destroy"> Delete</button>
                 </div>
@@ -16,22 +16,22 @@
                     class="cover"
                     :src="memo.attributes.cover_image.data.attributes.path"
                 />
-                <div class="flex-col flex-between absolute memo-cover">
-                    <div class="flex-between px-2 py-1">
+                <div class="absolute flex flex-col justify-between w-full top-0 bottom-0">
+                    <div class="flex items-center justify-between p-4">
                         <router-link to="/memos/" class="btn-secondary">< Back</router-link>
                         <div class="flex-middle">
                             <router-link :to="'/memos/' + memo.memo_id + '/edit'" class="btn-secondary mr-1" >Edit</router-link>
                             <a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>
                         </div>
                     </div>
-                    <h1 class="memo-title flex-center">{{ memo.name }}</h1>
+                    <h1 class="flex justify-center text-white text-3xl px-4 font-bold text-shadow">{{ memo.name }}</h1>
                 </div>
             </div>
     <!--           <TagBox :memo="memo" />-->
-            <div class="p-2">
+            <div class="p-4">
 
-                <p class="memo-style pt-1" v-html="memoMarkdown"></p>
-                <div class="memo-change">@last update : {{ memo.last_updated }}</div>
+                <p class="pt-2" v-html="memoMarkdown"></p>
+                <div class="bg-orange-400 rounded mt-2 px-2 py-1 flex justify-end">@last update {{ memo.last_updated }}</div>
             </div>
         </div>
     </div>
diff --git a/resources/js/views/User/ProfileUser.vue b/resources/js/views/User/ProfileUser.vue
index 76ee3f3..374ba78 100644
--- a/resources/js/views/User/ProfileUser.vue
+++ b/resources/js/views/User/ProfileUser.vue
@@ -9,9 +9,9 @@
                 :author="authUser"
                 :id="authUser.data.user_id"
                 :model="authUser.data.type"
-                classes="cover"
+                classes=""
                 :alt="authUser.data.attributes.name"/>
-            <div class="absolute b-0">
+            <div class="absolute w-64 bottom-0">
                 <UploadableImage
                     :image-width=750
                     :image-height=750
@@ -20,9 +20,9 @@
                     :author="authUser"
                     :id="authUser.data.user_id"
                     :model="authUser.data.type"
-                    classes="profile absolute"
+                    classes="absolute w-64 h-64 -bottom-12 left-8 rounded-full"
                     :alt="authUser.data.attributes.name"/>
-                <h1 class="profile-title">{{ authUser.data.attributes.name }}</h1>
+                <h1 class="relative z-10 text-white text-shadow text-3xl left-80 bottom-0">{{ authUser.data.attributes.name }}</h1>
             </div>
         </div>
     </div>
diff --git a/resources/js/views/User/UserAdmin.vue b/resources/js/views/User/UserAdmin.vue
index 7a798ff..983f8ac 100644
--- a/resources/js/views/User/UserAdmin.vue
+++ b/resources/js/views/User/UserAdmin.vue
@@ -1,10 +1,10 @@
 <template>
   <div v-if="authUser">
-    <div class="flex mb-4">
+    <div class="flex m-4">
       <div class="avatar mr-2">
-        <Avatar :avatar="authUser.data.attributes.avatar" size="large" :alt="authUser.data.attributes.name" />
+        <Avatar :avatar="authUser.data.attributes.avatar" size="6xl" :alt="authUser.data.attributes.name" class="w-24 h-24" />
       </div>
-      <div class="flex-col flex-center">
+      <div class="flex flex-col justify-center ml-2">
         <div><strong>{{ authUser.data.attributes.name }}</strong></div>
         <div><strong>{{ authUser.data.attributes.email }}</strong></div>
       </div>
@@ -18,10 +18,10 @@
             <transition name="fade">
               <form @submit.prevent="addMember" v-if="userAddToggle"  class="box-toggle-content" >
                   <AlertBox v-if="alertType" :type="alertType" :message="alertMessage" class="mb-1" />
-                  <div class="flex mb-1">
+                  <div class="flex mb-2">
                       <InputField name="name" label="Nom du nouveau membre" placeholder="Nom" required :errors="errors" @update:field="form.name = $event" class="mr-1" />
                       <InputField name="email" type="email" label="Adresse email du nouveau membre" placeholder="E-mail" required :errors="errors" @update:field="form.email = $event" class="mr-1" />
-                      <div class="flex-middle mt-4">
+                      <div class="flex items-end mb-2">
                           <button class="btn-primary">Ajouter</button>
                       </div>
                   </div>
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 6da9a1a..01bfe22 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -10,11 +10,10 @@
 //@import "setup/containers";
 //@import "setup/effects";
 //
-//@import "components/transitions";
+@import "components/transitions";
 @import "components/btn";
-//@import "components/elements";
+@import "components/elements";
 //@import "components/loader";
-//@import "components/events";
 //@import "components/main";
 @import "components/nav";
 //@import "components/topbar";
diff --git a/resources/sass/components/_btn.scss b/resources/sass/components/_btn.scss
index 4ef7eef..38afde8 100644
--- a/resources/sass/components/_btn.scss
+++ b/resources/sass/components/_btn.scss
@@ -68,11 +68,15 @@
 //}
 
 .btn {
-    @apply border bg-orange-400 py-2 px-4 shadow-sm rounded-md;
+    @apply border bg-orange-400 text-white py-2 px-4 shadow-sm rounded-md;
 
     &:hover {
         @apply text-white bg-orange-600 transition-all duration-300;
     }
+
+    svg {
+        @apply w-4 fill-current mr-2 inline;
+    }
 }
 
 .btn-primary {
@@ -83,3 +87,21 @@
         @apply bg-orange-800;
     }
 }
+
+.btn-secondary {
+    @extend .btn;
+    @apply bg-orange-600;
+
+    &:hover {
+        @apply bg-orange-800;
+    }
+}
+
+.btn-alert {
+    @extend .btn;
+    @apply bg-red-600 text-white;
+
+    &:hover {
+        @apply bg-red-800;
+    }
+}
diff --git a/resources/sass/components/_elements.scss b/resources/sass/components/_elements.scss
index dfa71dd..3edc9bf 100644
--- a/resources/sass/components/_elements.scss
+++ b/resources/sass/components/_elements.scss
@@ -1,42 +1,94 @@
 // Elements
 
-label {
-    display: block;
+.text-shadow {
+    text-shadow: 1px 1px 2px #000;
 }
 
-textarea,
-input {
-    width: 100%;
-    border: 1px solid $light;
-    background-color: $greyLight;
-    font-size: 1.6rem;
-    font-family: $fontMain;
-    padding: 0.5rem 1rem;
-    border-radius: 0.2rem;
-
-    &:focus {
-        background-color: $white;
-        border-color: $dark;
-    }
+.left-8 {
+    left: 2rem;
 }
 
-input[type="checkbox"] {
-    width: unset;
+.left-80 {
+    left: 20rem;
+}
 
-    & + label {
-        display: inline;
-    }
+.-bottom-12 {
+    bottom: -3rem;
+}
+
+.max-h-64 {
+    max-height: 16rem;
+}
+
+.page-title {
+    @apply text-3xl font-bold text-orange-900;
 }
 
 a {
-    color: $mediumDark;
+    @apply text-orange-700;
 
-    &:focus,
-    &:visited {
-        color: $dark;
+    &:hover {
+        @apply text-orange-900;
     }
 }
 
-pre {
+$modal-duration: 1s;
 
+.modal-container {
+    @apply top-0 bottom-0 left-0 right-0 fixed bg-black opacity-50 z-10;
+}
+
+.modal {
+    @apply bg-white absolute rounded z-20 overflow-hidden shadow max-w-full;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 400px;
+    animation-name: modalopen;
+    animation-duration: $modal-duration;
+}
+
+.box-toggle {
+    @apply shadow;
+
+    &-header {
+        @apply flex justify-between items-center px-4 py-2 rounded bg-orange-400 font-bold cursor-pointer;
+
+        svg {
+            @apply w-8 text-orange-600 fill-current;
+        }
+    }
+
+    svg {
+        transform: rotate(270deg);
+        transition: transform 0.3s;
+
+        &.open {
+            transform: rotate(90deg);
+        }
+    }
+
+    &-content {
+        padding: 0.5rem 1rem;
+    }
+}
+
+.card {
+    @apply bg-orange-300 rounded;
+
+    svg {
+        @apply max-w-full max-h-64 m-auto fill-current;
+    }
+
+    h2 {
+        @apply text-2xl text-center font-bold;
+    }
+
+    &:hover {
+        @apply bg-orange-500;
+
+        h2 {
+            @apply text-orange-700;
+        }
+    }
 }
diff --git a/resources/sass/components/_transitions.scss b/resources/sass/components/_transitions.scss
index 824567d..8ad2ac5 100644
--- a/resources/sass/components/_transitions.scss
+++ b/resources/sass/components/_transitions.scss
@@ -4,3 +4,13 @@
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
     opacity: 0;
 }
+
+@keyframes modalopen {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
diff --git a/resources/sass/components/modal.scss b/resources/sass/components/modal.scss
index a0b0e2e..22c7da5 100644
--- a/resources/sass/components/modal.scss
+++ b/resources/sass/components/modal.scss
@@ -1,27 +1,25 @@
 $modal-duration: 1s;
 
 .modal-container {
-    background-color: rgba(0,0,0,0.6);
-    position: fixed;
-    z-index: 10;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    @apply top-0 bottom-0 left-0 right-0 fixed bg-black opacity-50 z-10;
 }
 
 .modal {
-    background-color: #fff;
-    border-radius: 5px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-    position: absolute;
-    z-index: 20;
-    overflow: hidden;
+    @apply bg-white absolute rounded z-20 overflow-hidden shadow max-w-full;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    max-width: 100%;
     width: 400px;
     animation-name: modalopen;
     animation-duration: $modal-duration;
 }
+
+@keyframes modalopen {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}

From 8ce0f34cd6f1fc3373d0c6406bbfdac4f1a8df15 Mon Sep 17 00:00:00 2001
From: Romulus21 <romain@delanoe.me>
Date: Mon, 27 Apr 2020 21:41:55 +0200
Subject: [PATCH 5/5] almost finish tailwind integration

---
 resources/sass/app.scss                 |  2 +-
 resources/sass/pages/games/hangman.scss | 19 +++++++++----------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 01bfe22..e953642 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -30,7 +30,7 @@
 //@import "pages/meteo";
 //@import "pages/games";
 //
-//@import "pages/games/hangman";
+@import "pages/games/hangman";
 
 
 @tailwind utilities;
diff --git a/resources/sass/pages/games/hangman.scss b/resources/sass/pages/games/hangman.scss
index e51b322..cb53665 100644
--- a/resources/sass/pages/games/hangman.scss
+++ b/resources/sass/pages/games/hangman.scss
@@ -17,14 +17,14 @@
 
 .figure-container {
     fill: transparent;
-    stroke: $mediumDark;
+    stroke: orange;
     stroke-width: 4px;
     stroke-linecap: round;
 }
 
 .figure-part {
     display: none;
-    stroke: $dark;
+    stroke: #7b341e;
 }
 
 .wrong-letters-container {
@@ -47,13 +47,11 @@
 }
 
 .word {
-    display: flex;
-    align-self: center;
-    justify-self: center;
+    @apply flex justify-center items-center;
     bottom: 1rem;
 
     .letter {
-        border-bottom: 3px solid $medium;
+        border-bottom: 3px solid #c05621;
         display: inline-flex;
         font-size: 30px;
         align-items: center;
@@ -69,16 +67,17 @@
     width: calc(100% - 6rem);
 
     .popup {
-        background-color: $medium;
+        background-color: #c05621;
         border-radius: 5px;
-        color: $light;
+        color: #fbd38d;
+        min-height: 10rem;
         padding: 20px;
         text-align: center;
 
         button {
             cursor: pointer;
             background-color: #fff;
-            color: $dark;
+            color: #7b341e;
             border: 0;
             margin-top: 20px;
             padding: 12px 20px;
@@ -96,7 +95,7 @@
 }
 
 .notification-container {
-    background-color: $mediumLight;
+    background-color: #ed8936;
     border-radius: 2px;
     padding: 1rem;
     text-align: center;