style: export success modal + generally

Author: callumflack

.eslintrc.js

@@ -13,6 +13,7 @@ module.exports = {
     'no-plusplus': 'off',
     'prefer-destructuring': 'off',
     'vue/no-textarea-mustache': 'off',
+    'max-len': ['error', 110],
   },
   parserOptions: {
     parser: 'babel-eslint',

src/assets/css/custom/custom-action-button.css

@@ -22,5 +22,5 @@
 
 .ActionButton button[disabled],
 .ActionButton button:disabled {
-  --button-invert-color: theme(colors.gray.dark);
+  --button-invert-color: theme(colors.gray.mid);
 }

src/assets/icons/arrow-back.svg

@@ -5,6 +5,7 @@
         <template v-slot:trigger>
           <button
             class="Button font-title"
+            tabindex="1000"
           >
             Export
           </button>
@@ -36,6 +37,7 @@ import Popover from '@/components/Popover.vue';
 const GmailFormatter = {
   // Uses text/html
   blockquote(text) {
+    // eslint-disable-next-line
     return `<blockquote style="margin-left: 0; padding: 15px; background: rgb(238, 238, 238); border-radius: 5px; color: rgb(51, 51, 51); font-family: sans-serif; font-size: 14.4px;">${text}</blockquote>`;
   },
 };

src/assets/icons/check-circle.svg

@@ -2,7 +2,7 @@
   <div class="relative">
     <div
       v-if="!$store.state.timestamp"
-      class="Placeholder Text-lg"
+      class="Placeholder Text-lg font-medium"
     >
       Paste here &amp; click to select…
     </div>
@@ -162,7 +162,7 @@ export default {
 .Placeholder {
   @apply font-title text-brand-primary pl-6 mt-1;
   @apply absolute;
-  margin-left: 3px;
+  margin-left: 2px;
 }
 /*
 

src/components/ButtonExport.vue

@@ -59,35 +59,35 @@ export default {
 </script>
 
 <style lang="postcss" scoped>
-  .Modal-backdrop {
-    @apply fixed inset-0 overflow-auto;
-    background-color: rgba(255, 255, 255, 0.96);
-    z-index: 99; /* below vue-headroom */
-  }
+.Modal-backdrop {
+  @apply fixed inset-0 overflow-auto;
+  background-color: rgba(255, 255, 255, 1);
+  z-index: 99; /* below vue-headroom */
+}
 
-  .Modal {
-    /* @apply h-full; */
-    /* @apply bg-white; */
-  }
+.Modal {
+  /* @apply h-full; */
+  /* @apply bg-white; */
+}
 
-  .Modal-close {
-    @apply absolute inset-0 p-4 z-10 cursor-pointer;
-  }
+.Modal-close {
+  @apply absolute inset-0 p-4 z-10 cursor-pointer;
+}
 
-  .Modal-close:focus,
-  .Modal-close:active {
-    @apply outline-none;
-  }
+.Modal-close:focus,
+.Modal-close:active {
+  @apply outline-none;
+}
 
-  /* Transition */
-  .Modal-enter-active,
-  .Modal-leave-active {
-    transition: opacity 500ms cubic-bezier(0.19, 1, 0.22, 1);
-  }
+/* Transition */
+.Modal-enter-active,
+.Modal-leave-active {
+  transition: opacity 500ms cubic-bezier(0.19, 1, 0.22, 1);
+}
 
-  .Modal-enter,
-  .Modal-leave-to {
-    @apply opacity-0;
-    /* transform: scale(1.05); */
-  }
+.Modal-enter,
+.Modal-leave-to {
+  @apply opacity-0;
+  /* transform: scale(1.05); */
+}
 </style>

src/components/Editor.vue

@@ -6,7 +6,7 @@
         class="Text-xl font-title font-bold text-brand-primary"
       >
         <icon v-if="$route.name !== 'home'" name="arrow-back" class="mr-1" />
-        {{ homeLabel }}
+        <span>{{ homeLabel }}</span>
       </router-link>
       <NavBarInfo class="mt-px"></NavBarInfo>
     </nav>
@@ -22,7 +22,7 @@ export default {
   },
   computed: {
     homeLabel() {
-      return this.$route.name === 'home' ? 'Corvid Writing' : 'Corral mode';
+      return this.$route.name === 'home' ? 'Corvid Writing' : 'Revise selection';
     },
   },
 };

src/components/Modal.vue

@@ -8,14 +8,14 @@
       <span v-else class="Timestamp Text-xs">{{ $store.state.timestamp }}</span>
     </template>
     <!-- info toggle -->
-    <span
+    <button
       class="Info Text-xs text-brand-primary"
       ref="infoIcon"
       @click.prevent="toggleMobileNav()"
     >
       <icon v-if="mobileNavOpen" name="close" height="1.75em" width="1.75em"></icon>
       <icon v-else name="info" height="1.25em" width="1.25em"></icon>
-    </span>
+    </button>
     <portal to="modals">
       <Modal :show="mobileNavOpen" @close="mobileNavOpen = false">
         <Info></Info>
@@ -64,8 +64,7 @@ export default {
 .Info:hover {
   @apply text-brand-primary;
 }
-.Info svg {
-  /* height: 1.25em !important; */
-  /* width: 1.25em !important; */
+.Info:focus {
+  @apply outline-none;
 }
 </style>

src/components/NavBar.vue

@@ -2,9 +2,9 @@
 var icon = require('vue-svgicon')
 icon.register({
   'arrow-back': {
-    width: 16,
-    height: 16,
+    width: 24,
+    height: 24,
     viewBox: '0 0 24 24',
-    data: '<path pid="0" d="M5 12l11 7V5z"/><path pid="1" d="M24 24H0V0h24z" fill="none"/>'
+    data: '<path pid="0" d="M0 0h24v24H0z" fill="none"/><path pid="1" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>'
   }
 })

src/components/NavBarInfo.vue

@@ -0,0 +1,10 @@
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'check-circle': {
+    width: 24,
+    height: 24,
+    viewBox: '0 0 24 24',
+    data: '<path pid="0" d="M0 0h24v24H0z" fill="none"/><path pid="1" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>'
+  }
+})

src/components/icons/arrow-back.js

@@ -1,5 +1,6 @@
 /* eslint-disable */
 require('./arrow-back')
+require('./check-circle')
 require('./close')
 require('./delete')
 require('./edit')

src/components/icons/check-circle.js

@@ -65,20 +65,30 @@
         class="reply-input reply-input--contextual Input"
         placeholder="Add a summary…"
         rows="3"
-        tabindex="32767"
+        tabindex="999"
         @input="handleOutroInput"
       >{{ $store.state.repliesOutro }}</textarea>
-
-      <ButtonExport @onExport="handleExport" :groupedSelections="groupedSelections" />
     </div>
+    <ButtonExport @onExport="handleExport" :groupedSelections="groupedSelections" />
+    <!-- success modal -->
     <portal to="modals">
-      <Modal :show="isResetModalOpen" @close="isResetModalOpen = false" ref="resetModal">
-        <div class="max-w-xl">
-          <p class="s-p">Successfully copied to your clipboard!</p>
-          <div class="flex">
-            <button class="mr-2 w-1/2 Button" @click="resetState">Start again</button>
-            <button class="ml-2 w-1/2 Button Button--outline" @click="dismiss">Keep Editing</button>
-          </div>
+      <Modal
+        :show="isResetModalOpen"
+        @close="isResetModalOpen = false"
+        ref="resetModal"
+      >
+        <p class="s-h font-title font-medium text-form-goo Text-base">
+          <icon name="check-circle" class="text-form-good mr-2px" height="1.25em" width="1.25em"></icon>
+          Copied to your clipboard
+        </p>
+        <hr class="s-h" />
+        <div class="flex pt-1">
+          <button class="mr-2 w-1/2 font-title font-semibold Button" @click="resetState">
+            Start again
+          </button>
+          <button class="ml-2 w-1/2 font-title font-semibold Button Button--outline" @click="dismiss">
+            Keep editing
+          </button>
         </div>
       </Modal>
     </portal>
@@ -183,7 +193,7 @@ export default {
 }
 .selection:not(:last-of-type) {
   /* less than Block-sm-b */
-  margin-bottom: calc(theme(spacing.10) * var(--block-size-ratio));
+  margin-bottom: calc(theme(spacing.8) * var(--block-size-ratio));
 }
 .selection-content {
   flex-grow: 1;
@@ -195,7 +205,7 @@ export default {
 .selection__options {
   @apply absolute inset-0 right-auto text-right;
   top: var(--inset);
-  left: -3.5rem;
+  left: -3rem;
 }
 .selection .option-button {
   @apply opacity-0;
@@ -267,18 +277,30 @@ export default {
 } */
 
 /*
-   Modal
+  Modal
+  1. Move it above everything incl the nav
  */
 .Modal-backdrop {
+  @apply flex justify-center items-start;
   background: rgba(255, 255, 255, 0.7);
+  background: rgba(250, 248, 245, 0.7);
+  background: rgba(244, 242, 240, 0.7);
+  z-index: 101; /* 1 */
 }
-
 >>> .Modal {
-  box-shadow: 0 0 6px 4px #eaeaea;
+  /* @apply max-w-sm;  */
+  @apply shadow-xl;
+  @apply rounded-lg bg-white;
+  /* @apply border border-form-good; */
+  @apply p-8;
+  padding: calc(theme(spacing.8) * var(--block-size-ratio));
+  margin-top: calc(theme(spacing.48) * var(--block-size-ratio));
+  margin-top: 25vh;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.05);
 }
-
 >>> .Modal .Button {
   white-space: nowrap;
+}
 
 /*
   Draggable

src/components/icons/index.js

@@ -22,7 +22,7 @@ module.exports = {
         blue: '#1b495a',
         blueneutral: '#f1f2f3',
         bluelight: blueLight,
-        neutral: '#FAF8F5',
+        neutral: '#f4f2f0',
       },
       group: {
         2: 'hsl(110, 63%, 43%)',