From ea4183d309ca80d78d7b857a0e403d8a82947f32 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sun, 30 Jul 2023 19:16:18 +0200
Subject: [PATCH] extract controls from dashboard

---
 src/modules/feature/FlowControls.vue  | 48 +++++++++++++++++++++++++++
 src/modules/feature/FlowDashboard.vue | 44 +++++++++---------------
 2 files changed, 63 insertions(+), 29 deletions(-)
 create mode 100644 src/modules/feature/FlowControls.vue

diff --git a/src/modules/feature/FlowControls.vue b/src/modules/feature/FlowControls.vue
new file mode 100644
index 0000000..b5af140
--- /dev/null
+++ b/src/modules/feature/FlowControls.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import EraserIcon from '@/icons/EraserIcon.vue'
+import ProblemSolvingIcon from '@/icons/ProblemSolvingIcon.vue'
+import PullSystemIcon from '@/icons/PullSystemIcon.vue'
+import PushSystemIcon from '@/icons/PushSystemIcon.vue'
+import { useFeatureStore } from '@/modules/feature/feature-store'
+
+const NUMBER_OF_FEATURES = 20
+
+const featureStore = useFeatureStore()
+</script>
+
+<template>
+  <div class="flow-controls">
+    <div class="row">
+      <button
+        @click="featureStore.nextDay('push')"
+        :disabled="featureStore.isProjectFinished"
+      >
+        <PushSystemIcon color="white" />
+      </button>
+      <button
+        @click="featureStore.nextDay('pull')"
+        :disabled="featureStore.isProjectFinished"
+      >
+        <PullSystemIcon color="white" />
+      </button>
+      <button
+        @click="featureStore.nextDay('problem-solving')"
+        :disabled="featureStore.isProjectFinished"
+      >
+        <ProblemSolvingIcon color="white" />
+      </button>
+      <button @click="featureStore.initBoard(NUMBER_OF_FEATURES)">
+        <EraserIcon color="white" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.flow-controls {
+  .row {
+    display: flex;
+    justify-content: center;
+  }
+}
+</style>
diff --git a/src/modules/feature/FlowDashboard.vue b/src/modules/feature/FlowDashboard.vue
index 3168c47..bf3098b 100644
--- a/src/modules/feature/FlowDashboard.vue
+++ b/src/modules/feature/FlowDashboard.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import ProblemSolvingIcon from '@/icons/ProblemSolvingIcon.vue'
-import PullSystemIcon from '@/icons/PullSystemIcon.vue'
-import PushSystemIcon from '@/icons/PushSystemIcon.vue'
 import SeparatorIcon from '@/icons/SeparatorIcon.vue'
+import FlowControls from '@/modules/feature/FlowControls.vue'
 import { useFeatureStore } from '@/modules/feature/feature-store'
 
 const featureStore = useFeatureStore()
@@ -58,26 +56,7 @@ const featureStore = useFeatureStore()
       </div>
     </div>
     <SeparatorIcon />
-    <div class="row">
-      <button
-        @click="featureStore.nextDay('push')"
-        :disabled="featureStore.isProjectFinished"
-      >
-        <PushSystemIcon color="white" />
-      </button>
-      <button
-        @click="featureStore.nextDay('pull')"
-        :disabled="featureStore.isProjectFinished"
-      >
-        <PullSystemIcon color="white" />
-      </button>
-      <button
-        @click="featureStore.nextDay('problem-solving')"
-        :disabled="featureStore.isProjectFinished"
-      >
-        <ProblemSolvingIcon color="white" />
-      </button>
-    </div>
+    <FlowControls />
   </div>
 </template>
 
@@ -88,11 +67,6 @@ const featureStore = useFeatureStore()
   flex-direction: column;
   align-items: center;
 
-  .row {
-    display: flex;
-    justify-content: center;
-  }
-
   .cards {
     display: flex;
     flex-wrap: wrap;
@@ -102,7 +76,19 @@ const featureStore = useFeatureStore()
   }
 
   .card {
-    background-color: #f7d794;
+    background-image: linear-gradient(
+      335deg,
+      hsl(223deg 58% 88%) 0%,
+      hsl(224deg 57% 88%) 21%,
+      hsl(224deg 58% 89%) 30%,
+      hsl(223deg 57% 89%) 39%,
+      hsl(222deg 56% 89%) 46%,
+      hsl(223deg 57% 90%) 54%,
+      hsl(222deg 55% 90%) 61%,
+      hsl(223deg 53% 91%) 69%,
+      hsl(221deg 56% 91%) 79%,
+      hsl(222deg 53% 92%) 100%
+    );
     padding: 0 1rem;
     display: flex;
     flex-direction: column;