Starts working on dark theme

issue #33

public/mix-manifest.json

@@ -1,4 +1,4 @@
 {
- "/js/app.js": "/js/app.js?id=90dbd7030a39fa3b14e1",
- "/css/app.css": "/css/app.css?id=078410fc413bdccd8cc9"
+ "/js/app.js": "/js/app.js?id=ab0e692a8ca151492d65",
+ "/css/app.css": "/css/app.css?id=29206b163d08cc6436e4"
 }

resources/css/app.css

@@ -4,73 +4,19 @@
 @import 'simple-syntax-highlighter/dist/sshpre.css';
 @import "vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css";
 @import "xterm/css/xterm.css";
+@import "./components/left-sidebar.css";
+@import "./components/smtp.css";
+@import "./components/label.css";
+@import "./components/screens.css";
+@import "./components/events.css";
+@import "./components/welcome-block.css";
+
+body {
+ @apply bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-50;
+}
 
 .ssh-pre {
  margin-top: 0 !important;
  @apply p-2 md:px-3 lg:px-4 text-2xs sm:text-xs md:text-sm rounded-none border;
 }
 
-.device-desktop {
- @apply w-full h-full border rounded-md;
-}
-
-.device-desktop > div {
- @apply w-full h-full rounded-md bg-white;
-}
-
-.device-tablet {
- @apply justify-center border-2 rounded-3xl px-5;
-}
-
-.device-tablet > div {
- height: 1024px;
- width: 768px;
-}
-
-.device-tablet:after {
- @apply border bg-gray-100 rounded-full block w-12 h-12 my-4;
- content: "";
-}
-
-.device-mobile {
- @apply justify-center border-2 rounded-3xl px-3;
-}
-
-.device-mobile > div {
- height: 568px;
- width: 320px;
-}
-
-.device-tablet:before,
-.device-mobile:before {
- @apply border bg-gray-100 rounded-full block w-3 h-3 my-2;
- content: "";
-}
-
-.device-mobile:after {
- @apply border bg-gray-100 rounded-full block w-8 h-8 my-3;
- content: "";
-}
-
-.device-desktop,
-.device-tablet,
-.device-mobile {
- @apply flex flex-col items-center;
-}
-
-.device-desktop,
-.device-tablet,
-.device-mobile {
- @apply transition-all ease-in duration-300 bg-gray-50;
-}
-
-.device-tablet > div,
-.device-mobile > div {
- @apply border rounded-md bg-white;
-}
-
-.device-desktop iframe,
-.device-tablet iframe,
-.device-mobile iframe {
- @apply rounded-md w-full h-full;
-}

resources/css/components/events.css

@@ -0,0 +1,57 @@
+.event-page {}
+
+.filters .event-type-filters {
+ @apply flex flex-row flex-wrap gap-2 items-center justify-center;
+}
+
+.filters .filter-label {
+ @apply cursor-pointer;
+}
+
+.event-page header {
+ @apply md:sticky md:top-0 z-50 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-600;
+}
+
+.event-page > header > .filters {
+ @apply p-2 flex flex-col md:flex-row justify-center md:justify-between items-center gap-2 border-t border-gray-200 dark:border-gray-600;
+}
+
+.event-page > .event-list {
+ @apply flex flex-col divide-y dark:divide-gray-600;
+}
+
+.event-list .event-item {
+ @apply flex-grow md:flex md:space-y-0 md:space-x-3 lg:space-x-5 p-3 md:p-0 transition-colors md:bg-gray-50 md:dark:bg-gray-700;
+}
+
+.event-list .event-item:hover {
+ @apply md:bg-gray-50 dark:bg-gray-800;
+}
+
+.event-list .event-item.collapsed {
+ @apply overflow-hidden shadow-bottom h-20 md:h-12 lg:h-16;
+}
+
+.event-list .event-item .sidebar {
+ @apply w-full md:w-1/4 pb-3 flex justify-between sm:items-center md:items-start md:px-3 md:py-3 lg:px-5 lg:py-5 md:border-r dark:border-gray-600;
+}
+
+.event-list .event-item .collapse-button {
+ @apply w-5 h-5 md:w-4 md:h-4 leading-none rounded-full opacity-90 hover:opacity-100 transition transition-all hover:ring-4 ring-offset-1 flex items-center justify-center;
+}
+
+.event-list .event-item .collapse-button span {
+ @apply text-sm text-white font-bold leading-none;
+}
+
+.event-list .event-item .delete-button {
+ @apply w-5 h-5 p-1 rounded-full text-red-700 bg-white hover:bg-red-700 hover:text-white transition transition-all hover:ring-4 ring-offset-1;
+}
+
+.event-list .event-item .event-labels {
+ @apply flex flex-wrap flex-row-reverse gap-2 justify-start
+}
+
+.event-list .event-item .body {
+ @apply w-full md:w-3/4 flex-col space-y-5 md:pr-3 lg:pr-5 md:py-3 lg:py-5;
+}

resources/css/components/label.css

@@ -0,0 +1,67 @@
+.label {
+ @apply font-bold px-2 rounded-full text-2xs inline-flex items-center cursor-help transition-colors;
+}
+
+.label.active {
+ @apply bg-blue-500 text-white;
+}
+
+.label.gray {
+ @apply bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-50 border dark:border-gray-600;
+}
+.label.gray:hover {
+ @apply bg-gray-100 dark:bg-gray-500;
+}
+
+.label.gray.active {
+ @apply bg-gray-700 text-white dark:bg-gray-900;
+}
+
+.label.blue {
+ @apply bg-blue-50 dark:bg-blue-700 text-blue-800 dark:text-blue-50 border dark:border-blue-600;
+}
+.label.blue:hover {
+ @apply bg-blue-100 dark:bg-blue-500;
+}
+
+.label.red {
+ @apply bg-red-50 dark:bg-red-700 text-red-800 dark:text-red-50 border dark:border-red-600;
+}
+.label.red:hover {
+ @apply bg-red-100 dark:bg-red-500;
+}
+
+.label.orange {
+ @apply bg-orange-50 dark:bg-orange-700 text-orange-800 dark:text-orange-50 border dark:border-orange-600;
+}
+.label.orange:hover {
+ @apply bg-orange-100 dark:bg-orange-500;
+}
+
+.label.green {
+ @apply bg-green-50 dark:bg-green-700 text-green-800 dark:text-green-50 border dark:border-green-600;
+}
+.label.green:hover {
+ @apply bg-green-100 dark:bg-green-500;
+}
+
+.label.pink {
+ @apply bg-pink-50 dark:bg-pink-700 text-pink-800 dark:text-pink-50 border dark:border-pink-600;
+}
+.label.pink:hover {
+ @apply bg-pink-100 dark:bg-pink-500;
+}
+
+.label.purple {
+ @apply bg-purple-50 dark:bg-purple-700 text-purple-800 dark:text-purple-50 border dark:border-purple-600;
+}
+.label.purple:hover {
+ @apply bg-purple-100 dark:bg-purple-500;
+}
+
+.label.pink {
+ @apply bg-pink-50 dark:bg-pink-700 text-pink-800 dark:text-pink-50 border dark:border-pink-600;
+}
+.label.pink:hover {
+ @apply bg-pink-100 dark:bg-pink-500;
+}

resources/css/components/left-sidebar.css

@@ -0,0 +1,15 @@
+.left-sidebar {
+ @apply bg-gray-200 dark:bg-gray-800 border-r border-gray-300 dark:border-gray-600 flex flex-col justify-between;
+}
+
+.left-sidebar > nav {
+ @apply divide-y divide-gray-300 dark:divide-gray-600;
+}
+
+.left-sidebar > nav > a {
+ @apply text-blue-500 p-3 md:p-4 lg:p-5 block hover:bg-blue-500 hover:text-white;
+}
+
+.left-sidebar > nav > a.active {
+ @apply bg-blue-700 text-blue-200;
+}

resources/css/components/screens.css

@@ -0,0 +1,38 @@
+.screens {
+ @apply flex flex-col md:flex-row px-4 py-2 space-y-2 md:space-y-0 md:justify-between items-center bg-gray-100 dark:bg-gray-800;
+}
+
+.screens .screen-title {
+ @apply font-bold flex space-x-2 items-center;
+}
+
+.screens .buttons {
+ @apply flex gap-2 items-center justify-center;
+}
+
+.screens .buttons .current {
+ @apply h-4 w-4 border border-gray-100 dark:border-gray-600 bg-white dark:bg-black rounded;
+}
+
+.screens .buttons .screen {
+ @apply w-4 h-4 cursor-pointer text-gray-100 dark:text-gray-600 transition-colors;
+}
+
+.screens .buttons .screen:hover {
+ @apply text-gray-600 dark:text-gray-100;
+}
+
+.screens .buttons > button {
+ @apply w-4 h-4 flex text-xs font-bold items-center justify-center cursor-pointer text-gray-300 transition-colors;
+}
+.screens .buttons > .new-screen {
+ @apply text-gray-300 dark:text-gray-500 ;
+}
+
+.screens .buttons > .new-screen:hover {
+ @apply text-gray-600 dark:text-gray-300;
+}
+
+.screens .clear-events {
+ @apply px-3 py-1 text-xs bg-red-800 text-white rounded-sm hover:bg-red-700 transition transition-all duration-300;
+}

resources/css/components/welcome-block.css

@@ -0,0 +1,3 @@
+.welcome-block {
+ @apply flex-1 p-4 flex flex-col justify-center items-center bg-gray-50 dark:bg-gray-800;
+}

resources/js/Components/Event.vue

@@ -1,45 +1,31 @@
 <template>
- <div ref="event"
- class="md:flex md:space-y-0 md:space-x-3 lg:space-x-5 p-3 md:p-0 hover:bg-gray-50"
- :class="{'overflow-hidden shadow-bottom h-20 md:h-12 lg:h-16': event.collapsed}">
- <div
- :class="{'md:bg-gray-50': !event.collapsed}"
- class="w-full md:w-1/4 pb-3 flex justify-between sm:items-center md:items-start md:px-3 md:py-3 lg:px-5 lg:py-5 md:border-r">
+ <div ref="event" :class="{'collapsed': event.collapsed, 'open': !event.collapsed}">
+ <div class="sidebar">
  <div class="flex items-center space-x-2">
- <button @click="toggle"
- class="w-5 h-5 md:w-4 md:h-4 leading-none rounded-full opacity-90 hover:opacity-100 transition transition-all hover:ring-4 ring-offset-1 flex items-center justify-center"
- :class="color">
- <span class="text-sm text-white font-bold leading-none">{{ !event.collapsed ? '-' : '+' }}</span>
+ <button @click="toggle" class="collapse-button" :class="color">
+ <span>{{ !event.collapsed ? '-' : '+' }}</span>
  </button>
- <button
- class="w-5 h-5 p-1 rounded-full text-red-700 bg-white hover:bg-red-700 hover:text-white transition transition-all"
- @click="deleteEvent">
- <svg xmlns="http:https://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"
- fill="currentColor">
- <g id="close">
- <path id="x"
- d="M18.717 6.697l-1.414-1.414-5.303 5.303-5.303-5.303-1.414 1.414 5.303 5.303-5.303 5.303 1.414 1.414 5.303-5.303 5.303 5.303 1.414-1.414-5.303-5.303z"/>
- </g>
- </svg>
+ <button class="delete-button" @click="deleteEvent">
+ <svg xmlns="http:https://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="currentColor"><g id="close"><path id="x" d="M18.717 6.697l-1.414-1.414-5.303 5.303-5.303-5.303-1.414 1.414 5.303 5.303-5.303 5.303 1.414 1.414 5.303-5.303 5.303 5.303 1.414-1.414-5.303-5.303z"/></g></svg>
  </button>
  </div>
 
- <div class="flex flex-wrap flex-row-reverse gap-2 justify-start">
- <Label :class="`border-${event.color}-600 text-${event.color}-600`">
+ <div class="event-labels">
+ <Label :color="event.color">
  {{ date }}
  </Label>
- <Label class="border-blue-600 text-blue-600">
+ <Label :color="event.color">
  {{ event.app }}
  </Label>
 
  <div v-if="hasLabels" class="flex gap-2">
- <Label v-for="label in labels" class="text-gray-500 ">
+ <Label v-for="label in labels" :color="event.color">
  {{ label }}
  </Label>
  </div>
  </div>
  </div>
- <div class="w-full md:w-3/4 flex-col space-y-5 md:pr-3 lg:pr-5 md:py-3 lg:py-5">
+ <div class="body">
  <slot></slot>
  </div>
  </div>

resources/js/Components/Layout/Colors.vue

@@ -1,12 +1,7 @@
 <template>
  <div class="flex flex-row flex-wrap items-center gap-2">
  <button v-if="hasSelectedColors" class="w-4 h-4 text-red-700 -ml-6" @click="clear">
- <svg xmlns="http:https://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="currentColor">
- <g id="close">
- <path id="x"
- d="M18.717 6.697l-1.414-1.414-5.303 5.303-5.303-5.303-1.414 1.414 5.303 5.303-5.303 5.303 1.414 1.414 5.303-5.303 5.303 5.303 1.414-1.414-5.303-5.303z"/>
- </g>
- </svg>
+ <svg xmlns="http:https://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="currentColor"><g id="close"><path id="x" d="M18.717 6.697l-1.414-1.414-5.303 5.303-5.303-5.303-1.414 1.414 5.303 5.303-5.303 5.303 1.414 1.414 5.303-5.303 5.303 5.303 1.414-1.414-5.303-5.303z"/></g></svg>
  </button>
  <div v-else class="w-4 h-4 -ml-6"></div>
  <ColorButton v-for="color in colors" :color="color"/>

resources/js/Components/Layout/Labels.vue

@@ -1,13 +1,13 @@
 <template>
- <div class="flex flex-row flex-wrap gap-2 items-center justify-center">
+ <section class="event-type-filters">
  <Label @click="toggleLabel(label)"
  v-for="label in labels"
- class="cursor-pointer"
- :class="{'bg-blue-500 text-white': selectedLabels.includes(label)}"
+ class="filter-label"
+ :class="{'active': selectedLabels.includes(label)}"
  >
  {{ label }}
  </Label>
- </div>
+ </section>
 </template>
 
 <script>

resources/js/Components/Layout/Main.vue

@@ -7,7 +7,7 @@
  </LeftSidebar>
  </div>
 
- <div class="flex flex-col h-full flex-1">
+ <div class="flex flex-col h-full flex-1" :class="classes">
  <slot></slot>
  </div>
  </div>
@@ -22,7 +22,8 @@ import LeftSidebar from './Sidebar/Left'
 export default {
  components: {LeftSidebar},
  props: {
- title: String
+ title: String,
+ classes: String
  }
 }
 </script>