Design Updates

2024-11-20 15:56:14 -08:00
parent 93b7ce6eba
commit 16432a6ebc
72 changed files with 571 additions and 587 deletions
@@ -751,7 +751,7 @@ watch(conversationFilters, (newVal, oldVal) => {

 <template>
  <div
-    class="flex flex-col flex-shrink-0 overflow-hidden border-r conversations-list-wrap rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
+    class="flex flex-col flex-shrink-0 overflow-hidden border-r conversations-list-wrap bg-n-solid-1 border-n-weak"
    :class="[
      { hidden: !showConversationList },
      isOnExpandedLayout ? 'basis-full' : 'flex-basis-clamp',
@@ -892,6 +892,7 @@ watch(conversationFilters, (newVal, oldVal) => {

 <style scoped>
@tailwind components;
+
@layer components {
  .flex-basis-clamp {
    flex-basis: clamp(20rem, 4vw + 21.25rem, 27.5rem);
@@ -75,9 +75,9 @@ onMounted(() => {
      @mousedown="handleMouseDown"
    >
      <div
-        class="relative max-h-full overflow-auto bg-white shadow-md modal-container rtl:text-right dark:bg-slate-800 skip-context-menu"
+        class="relative max-h-full overflow-auto shadow-xl modal-container rtl:text-right bg-n-alpha-3 backdrop-blur-[100px] skip-context-menu"
        :class="{
-          'rounded-xl w-[37.5rem]': !fullWidth,
+          'rounded-xl w-[36rem]': !fullWidth,
          'items-center rounded-none flex h-full justify-center w-full':
            fullWidth,
          [size]: true,
@@ -102,38 +102,44 @@ onMounted(() => {
 <style lang="scss">
 .modal-mask {
  @apply flex items-center justify-center bg-modal-backdrop-light dark:bg-modal-backdrop-dark z-[9990] h-full left-0 fixed top-0 w-full;
+
  .modal-container {
    &.medium {
      @apply max-w-[80%] w-[56.25rem];
    }
-    // .content-box {
-    //   @apply h-auto p-0;
-    // }
+
    .content {
-      @apply p-8;
+      @apply p-6;
    }
+
    form,
    .modal-content {
      @apply pt-4 pb-8 px-8 self-center;
+
      a {
        @apply p-4;
      }
    }
  }
 }
+
 .modal-big {
  @apply w-full;
 }
+
 .modal-mask.right-aligned {
  @apply justify-end;
+
  .modal-container {
    @apply rounded-none h-full w-[30rem];
  }
 }
+
 .modal-enter,
 .modal-leave {
  @apply opacity-0;
 }
+
 .modal-enter .modal-container,
 .modal-leave .modal-container {
  transform: scale(1.1);
@@ -23,13 +23,13 @@ export default {

 <template>
  <div
-    class="ml-0 mr-0 flex py-8 w-full xl:w-3/4 flex-col xl:flex-row"
+    class="ml-0 mr-0 flex py-8 w-full flex-col xl:flex-row"
    :class="{
      'border-b border-solid border-slate-50 dark:border-slate-700/30':
        showBorder,
    }"
  >
-    <div class="w-full xl:w-1/4 min-w-0 xl:max-w-[30%] pr-12">
+    <div class="w-full xl:w-1/3 min-w-0 xl:max-w-[40%] pr-12">
      <p
        v-if="title"
        class="text-base text-woot-500 dark:text-woot-500 mb-0 font-medium"
@@ -48,7 +48,7 @@ export default {
        {{ note }}
      </p>
    </div>
-    <div class="w-full xl:w-1/2 min-w-0 xl:max-w-[50%]">
+    <div class="w-full xl:w-2/3 min-w-0 xl:max-w-[50%]">
      <slot />
    </div>
  </div>
@@ -89,7 +89,7 @@ export default {
        @apply bg-woot-500 dark:bg-woot-500;
      }

-      & + .item {
+      &+.item {
        &::before {
          @apply bg-woot-500 dark:bg-woot-500;
        }
@@ -201,10 +201,10 @@ export default {

 <style lang="scss" scoped>
 .filter {
-  @apply bg-slate-50 dark:bg-slate-800 p-2 border border-solid border-slate-75 dark:border-slate-600 rounded-md mb-2;
+  @apply p-2 border border-solid border-slate-75 dark:border-slate-600 rounded-md mb-2;

  &.is-a-macro {
-    @apply mb-0 bg-white dark:bg-slate-700 p-0 border-0 rounded-none;
+    @apply mb-0 p-0 border-0 rounded-none;
  }
 }

@@ -244,6 +244,7 @@ export default {
    @apply mb-0;
  }
 }
+
 .filter__answer {
  &.answer--text-input {
    @apply mb-0;
@@ -270,9 +271,11 @@ export default {
 .multiselect {
  @apply mb-0;
 }
+
 .action-message {
  @apply mt-2 mx-0 mb-0;
 }
+
 // Prosemirror does not have a native way of hiding the menu bar, hence
 ::v-deep .ProseMirror-menubar {
  @apply hidden;
@@ -14,16 +14,11 @@ export default {
 </script>

 <template>
-  <div
-    class="bg-slate-25 dark:bg-slate-900 pt-4 pb-0 px-8 border-b border-solid border-slate-50 dark:border-slate-800/50"
-  >
-    <h2 class="text-2xl text-slate-800 dark:text-slate-100 mb-1 font-medium">
+  <div class="pb-0 px-8 border-b border-n-weak">
+    <h2 class="text-2xl text-n-slate-12 mb-1 font-medium">
      {{ headerTitle }}
    </h2>
-    <p
-      v-if="headerContent"
-      class="w-full text-slate-600 dark:text-slate-300 text-sm mb-2"
-    >
+    <p v-if="headerContent" class="w-full text-n-slate-11 text-sm mb-2">
      {{ headerContent }}
    </p>
    <slot />
@@ -95,7 +95,7 @@ export default {

 <template>
  <div
-    class="conversation-details-wrap bg-slate-25 dark:bg-slate-800"
+    class="conversation-details-wrap"
    :class="{ 'with-border-right': !isOnExpandedLayout }"
  >
    <ConversationHeader
@@ -36,7 +36,7 @@ defineProps({
    </div>
    <div class="mt-auto">
      <p
-        class="text-base text-slate-800 dark:text-slate-100 font-interDisplay font-semibold tracking-[0.3px]"
+        class="text-base text-slate-800 dark:text-slate-100  font-semibold tracking-[0.3px]"
      >
        {{ title }}
      </p>
@@ -32,7 +32,7 @@ const greetingMessage = computed(() => {
  >
    <div class="col-span-full self-start">
      <p
-        class="text-xl font-semibold text-slate-900 dark:text-white font-interDisplay tracking-[0.3px]"
+        class="text-xl font-semibold text-slate-900 dark:text-white  tracking-[0.3px]"
      >
        {{ greetingMessage }}
      </p>