create ui component

src/app.css

@@ -15,6 +15,6 @@
 body {
   margin: 0;
   padding: 0;
-  background-color: #F2F2F2;
+  background-color: #F3F4F9;
   width: 100vw;
 }

src/components/Header.svelte

@@ -1,5 +1,4 @@
-
-    <div class="head">SMART HOME</div>
+<div class="head">SMART HOME</div>
 
 <style>
   .head {
@@ -7,7 +6,7 @@
     width: 100vw;
     height: 70px;
     display: flex;
-        align-items:center;
+    align-items: center;
     justify-content: flex-start;
     padding-left: 20px;
     box-shadow: 0px 2px 4px rgba(0, 0, 3, 0.05);

src/libs/DeviceDetails.svelte

@@ -1,5 +1,8 @@
 <script>
+  import Button from "./ui/Button.svelte";
+  import Stepper from "./ui/Stepper.svelte";
   export let deviceLog;
+  let buttonText = "Run";
 </script>
 
 <div class="table-wrapper">
@@ -25,6 +28,10 @@
         <div>{log.battery_life}</div>
       {:else}
         <div>door switch</div>
+        <div><Button {buttonText} /></div>
+        <br>
+        <div><Stepper /></div>
+        <br>
       {/if}
     {/each}
     <div class="divider"></div>
@@ -64,12 +71,6 @@
     text-decoration: none;
     color: inherit;
   }
-    .table-body-item {
-      width: calc(100% / 7);
-      display: flex;
-      justify-content: start;
-      padding: 5px 10px 10px 10px;
-    }
   .table-head {
     font-size: 15px;
   }
@@ -93,4 +94,4 @@
     color: inherit;
     background-color: #f3f3f3;
   }
-  </style>
+</style>

src/libs/ui/Button.svelte

@@ -0,0 +1,32 @@
+<script>
+  export let buttonText;
+</script>
+
+<div class="button">
+  {buttonText}
+</div>
+
+<style>
+  .button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: 5px;
+    width: 100px;
+    height: 38px;
+    border-radius: 5px;
+    background-color: #364bc5;
+    color: #fff;
+    cursor: pointer;
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+    -khtml-user-select: none; /* Konqueror HTML */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
+  }
+  .button:active {
+    background-color: #6a7bdd;
+  }
+</style>

src/libs/ui/Stepper.svelte

@@ -0,0 +1,86 @@
+<script>
+  let counter = 0;
+
+  const increaseCounter = () => {
+    counter++;
+  };
+  const decreaseCounter = () => {
+    counter = counter < 1 ? 0 : counter - 1;
+  };
+</script>
+
+<div class="stepper">
+  <div
+    class="button decrease"
+    on:click={decreaseCounter}
+    tabindex="0"
+    role="button"
+    on:keydown={(e) => e.key === "Enter" && decreaseCounter()}
+  >
+    -
+  </div>
+  <div class="number">{counter}</div>
+  <div
+    class="button increase"
+    on:click={increaseCounter}
+    tabindex="0"
+    role="button"
+    on:keydown={(e) => e.key === "Enter" && decreaseCounter()}
+  >
+    +
+  </div>
+</div>
+
+<style>
+  .stepper {
+    height: 45px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 5px;
+    border: solid 1px #7B819E;
+    box-sizing: border-box;
+    padding: 0px;
+  }
+  .number {
+    width: 40px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-left: solid 1px #7B819E;
+    border-right: solid 1px #7B819E;
+    color: #4a4d5d;
+  }
+  .button {
+    width: 40px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28px;
+    color: #7B819E;
+    cursor: pointer;
+    box-sizing: border-box;
+    padding: 0px;
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+    -khtml-user-select: none; /* Konqueror HTML */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
+  }
+  .button:hover {
+    background-color: #4759ba;
+    color: #fff;
+  }
+  .button:active {
+    background-color: #6a7bdd;
+  }
+  .increase {
+    border-radius: 0px 3px 3px 0px;
+  }
+  .decrease {
+    border-radius: 3px 0px 0px 3px;
+  }
+</style>