Lots of fixes - see trello (#347)

* A ton of fixes

* Fix project deletion message

assets/styles/components.scss

@@ -31,8 +31,6 @@
 
   box-shadow: inset 0px -1px 1px rgba(17, 24, 39, 0.1);
 
-  max-height: 2rem;
-
   color: var(--color-button-text);
   background-color: var(--color-button-bg);
   text-decoration: none;
@@ -385,23 +383,19 @@
 
 .multiselect {
   color: var(--color-text) !important;
+  max-height: 40px;
 
   input {
     background: transparent;
   }
 
-  &.top-margin {
-    .multiselect__tags {
-      padding-top: 10px;
-    }
-  }
-
   .multiselect__tags {
     border-radius: 1.25rem;
     background: var(--color-dropdown-bg);
     border: none;
     cursor: pointer;
     padding-left: 1rem;
+    padding-top: 10px;
 
     &:active,
     &:hover {
@@ -436,6 +430,8 @@
     background: var(--color-dropdown-bg);
     border: none;
     overflow-x: hidden;
+    border-bottom-left-radius: var(--size-rounded-card);
+    border-bottom-right-radius: var(--size-rounded-card);
 
     .multiselect__element {
       .multiselect__option--highlight {
@@ -470,6 +466,10 @@ label {
   span {
     flex: 2;
     padding-right: var(--spacing-card-lg);
+
+    &.no-padding {
+      padding-right: 0;
+    }
   }
 
   input,
@@ -518,8 +518,10 @@ label {
 }
 
 .stylized-toggle {
+  min-height: 32px;
   height: 32px;
   width: 52px;
+  max-width: 52px;
   border-radius: 16px;
   display: inline-block;
   position: relative;
@@ -563,8 +565,14 @@ label {
   height: 1.75rem;
   width: 1.75rem;
   border-radius: 1.5rem;
-  background-color: var(--color-button-bg);
+  color: var(--color-brand-inverted);
+  background-color: var(--color-brand);
   margin-right: var(--spacing-card-sm);
+
+  &:hover {
+    background-color: var(--color-brand-hover);
+  }
+
   svg {
     width: 1.25rem;
     margin: auto;
@@ -682,3 +690,29 @@ label {
 
   // box-shadow: var(--shadow-card);
 }
+
+.vue-notification-group {
+  right: 25px !important;
+
+  .vue-notification-template {
+    border-radius: var(--size-rounded-card);
+    margin: 0 0 25px 0;
+
+    .notification-title {
+      font-size: var(--font-size-lg);
+      margin-right: auto;
+    }
+
+    .notification-content {
+      font-size: var(--font-size-md);
+    }
+  }
+}
+
+.card-divider {
+  background-color: var(--color-divider);
+  border: none;
+  color: var(--color-divider);
+  height: 1px;
+  margin: var(--spacing-card-bg) 0;
+}

assets/styles/global.scss

@@ -2,10 +2,6 @@ html {
   @extend .light-mode;
 }
 
-body {
-  overflow-y: scroll;
-}
-
 .light-mode {
   --color-icon: #6b7280;
   --color-text: hsl(221, 39%, 11%);
@@ -30,7 +26,7 @@ body {
   --color-brand-3: #30b27b;
   --color-brand-disabled: #e2e8f0;
 
-  --color-button-bg: #e6e7eb;
+  --color-button-bg: #e0e0e5;
   --color-button-text: var(--color-text-dark);
   --color-button-bg-hover: #d9dce0;
   --color-button-text-hover: #1b1e24;
@@ -259,15 +255,9 @@ textarea {
   padding: 0.5rem 1rem;
   border: 2px solid transparent;
 
-  &:focus,
-  &:hover:not([disabled]) {
+  &:hover:not([disabled]):not(:focus) {
     background: var(--color-button-bg-hover);
     color: var(--color-text);
-    //outline: none; Bad for accessibility
-
-    &::placeholder {
-      color: var(--color-text);
-    }
   }
 
   &:focus {
@@ -275,10 +265,6 @@ textarea {
     border-color: var(--color-divider-dark);
   }
 
-  &::placeholder {
-    color: var(--color-color-text);
-  }
-
   &:disabled,
   &[disabled] {
     opacity: 0.6;

assets/styles/layout.scss

@@ -48,6 +48,11 @@
     flex-direction: row;
     margin: 0 auto;
     max-width: 80rem;
+    column-gap: 0.75rem;
+
+    &.alt-layout {
+      flex-direction: row-reverse;
+    }
   }
 
   .normal-page__sidebar {
@@ -55,7 +60,6 @@
   }
 
   .normal-page__content {
-    padding-left: 0.75rem;
     width: 60rem;
   }
 }

assets/styles/utils.scss

@@ -6,6 +6,7 @@
   width: 100%;
 }
 
-html {
+body {
   overflow-y: scroll;
+  overflow-x: hidden;
 }