Merge pull request #141 from buggregator/issue/#134-add-logo

Issue/#134 add logo

Author: butschster

src/assets/index.css

@@ -9,4 +9,5 @@ body a:hover {
 }
 body a[disabled="true"] {
   pointer-events: none;
+  text-decoration: none !important;
 }

src/assets/mixins.scss

@@ -8,8 +8,7 @@
 
 @mixin layout-head {
   @apply justify-between;
-  @apply backdrop-blur-sm bg-gradient-to-b from-white/80 to-white/20 dark:from-gray-800/80 dark:to-gray-800/20;
-  //@apply backdrop-blur dark:backdrop-brightness-150 dark:bg-black/30 bg-white/30;
+  @apply backdrop-blur-sm bg-gradient-to-b from-white/100 to-white/20 dark:from-gray-800/100 dark:to-gray-800/20;
   @apply absolute left-0 right-0 z-50;
   @apply h-9 sm:h-10 md:h-14;
   @apply px-2 md:px-4;

src/shared/ui/icon-svg/icon-svg-originals/logo-short.svg

@@ -52,26 +52,32 @@ const toggleUpdate = () => {
 
 .pause-button {
   @include button;
-  @apply bg-blue-400 dark:bg-gray-700 hover:bg-blue-500 dark:hover:bg-blue-800;
-  @apply flex items-center space-x-1;
-  @apply text-gray-800 dark:text-white hover:opacity-100 opacity-40 relative;
-  @apply relative;
+  @apply flex items-center space-x-1 relative;
+  @apply bg-blue-300 hover:bg-blue-500 text-gray-200;
+  @apply dark:bg-gray-700 dark:hover:bg-blue-800 dark:text-white;
 
   &[disabled] {
-    @apply bg-gray-400 dark:bg-gray-700 opacity-40 text-gray-400 cursor-not-allowed;
+    @apply bg-gray-400 opacity-50 cursor-not-allowed text-white;
+    @apply dark:bg-gray-700 dark:text-white;
   }
 }
 
 .pause-button--active {
-  @apply opacity-100 bg-blue-500 dark:bg-blue-800;
+  @apply opacity-100 bg-blue-500 dark:bg-blue-800 text-white;
 }
 
 .pause-button__icon {
   @apply w-4 h-4 stroke-white animate-pulse;
+
+  [disabled] > & {
+    @apply animate-none;
+  }
 }
 
-.pause-button--active .pause-button__icon {
-  @apply animate-none;
+.pause-button__icon {
+  .pause-button--active & {
+    @apply animate-none;
+  }
 }
 
 .pause-button__count {

src/shared/ui/icon-svg/icon-svg-originals/logo.svg

@@ -60,6 +60,14 @@ const logout = () => {
 <template>
   <aside class="layout-sidebar">
     <nav class="layout-sidebar__nav">
+      <NuxtLink
+        to="/"
+        title="Events"
+        class="layout-sidebar__link layout-sidebar__link--logo"
+      >
+        <IconSvg class="layout-sidebar__link-icon" name="logo-short" />
+      </NuxtLink>
+
       <NuxtLink to="/" title="Events" class="layout-sidebar__link">
         <IconSvg class="layout-sidebar__link-icon" name="events" />
       </NuxtLink>
@@ -164,16 +172,21 @@ const logout = () => {
 
 .layout-sidebar__link {
   @apply block relative;
-  @apply text-blue-500 hover:text-white;
-  @apply hover:bg-gray-700;
   @apply flex items-center justify-center;
   @apply md:mx-1 lg:mx-1.5 md:mt-1 lg:mt-1.5 md:rounded-lg;
+  @apply text-blue-500 hover:text-white hover:bg-gray-700 hover:opacity-100;
 
   &.router-link-active {
     @apply bg-blue-700 text-blue-200;
   }
 }
 
+.layout-sidebar__link--logo,
+.layout-sidebar__link--logo.router-link-active {
+  @apply text-blue-600 bg-transparent hover:text-blue-600  hover:bg-transparent;
+  @apply dark:text-blue-500 dark:bg-transparent hover:dark:text-blue-200  hover:dark:bg-transparent;
+}
+
 .layout-sidebar__link-icon {
   @apply flex items-center justify-center;
   @apply fill-current;

src/shared/ui/icon-svg/icon-svg.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import PagePlaceholderItem from "./page-placeholder-item.vue";
 import { IconSvg } from "~/src/shared/ui";
+import PagePlaceholderItem from "./page-placeholder-item.vue";
 
 const items = [
   {
@@ -23,8 +23,8 @@ const items = [
 
 <template>
   <div class="page-placeholder">
-    <div class="logo">
-      <IconSvg name="logo"/>
+    <div class="page-placeholder__logo">
+      <IconSvg class="page-placeholder__logo-in" name="logo" />
     </div>
     <ul class="page-placeholder__list">
       <PagePlaceholderItem
@@ -40,18 +40,18 @@ const items = [
 
 <style lang="scss" scoped>
 .page-placeholder {
-  @apply p-4 md:p-6 lg:p-10 w-1/2;
+  @apply p-6 lg:p-10 w-1/2 md:w-1/3 lg:w-1/3;
   @apply bg-white dark:bg-gray-900;
   @apply border dark:border-gray-600 rounded-lg;
   @apply text-gray-600 dark:text-gray-300;
 }
 
-.logo {
-  @apply mb-10 flex h-10;
+.page-placeholder__logo {
+  @apply mb-4 md:mb-6 lg:mb-10 flex text-black dark:text-white w-full;
+}
 
-  svg {
-    @apply h-10;
-  }
+.page-placeholder__logo-in {
+  @apply h-8 md:h-12 lg:h-14;
 }
 
 .page-placeholder__list {