Merge pull request #78 from Telios-org/beta

Beta

app/Store.js

@@ -150,8 +150,11 @@ class Store {
     return this.theme;
   }
 
+  getAccountApi() {
+    return this.api.account();
+  }
+
   refreshToken() {
-    console.log(this.account);
     const teliosSDK = new ClientSDK();
     const payload = {
       account_key: this.account.secretBoxPubKey,

app/app.global.css

@@ -131,17 +131,12 @@ li {
 }
 
 a {
-  color: #1675e0;
-  /* opacity: 0.75; */
-  text-decoration: none;
-}
+  @apply text-sky-500 hover:text-sky-600 font-medium hover:underline
 
-a:hover {
-  opacity: 1;
-  text-decoration: underline;
-  cursor: pointer;
 }
 
+
+
 .loading-indicator {
   animation: spin 1s linear infinite;
 }

app/composer_window/Composer.tsx

@@ -183,12 +183,14 @@ const Composer = (props: Props) => {
 
   // When in the Draft folder and Inline, message is set through the Selector
   useEffect(() => {
+    console.log('FIRING OFF 186')
     if (
       isInline &&
       folder?.name === 'Drafts' &&
       dispatch !== null &&
       message.emailId !== null
     ) {
+      // console.log('FIRING OFF 186 - IF STATEMENT')
       dispatch(fetchMsg(message.emailId))
         .then(email => {
           const draft = emailTransform(email, 'draftEdit', false);
@@ -231,6 +233,8 @@ const Composer = (props: Props) => {
   // We get the draft email from the IPC Draft storage that was initialized by 'RENDERER::ingestDraftForInlineComposer' or 'RENDERER::showComposerWindow'
   // In another electron window, the redux store is unavailable
   useEffect(() => {
+    // console.log('FIRING OFF 235')
+
     if (folder?.name !== 'Drafts' || (folder?.name === 'Drafts' && !isInline)) {
       ipcRenderer.on('WINDOW_IPC::contentReady', (event, content, windowID) => {
         console.log('IPC event handler', content, windowID);

app/composer_window/components/FromInput.tsx

@@ -2,6 +2,7 @@ import React, { Fragment, useState, useEffect } from 'react';
 import { Listbox, Transition } from '@headlessui/react';
 import { CheckIcon, SelectorIcon } from '@heroicons/react/solid';
 
+
 // SELECTORS
 import { selectActiveMailbox } from '../../main_window/selectors/mail';
 

app/global_components/BreadCrumbs.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { HomeIcon } from '@heroicons/react/solid';
+import { Link } from 'react-router-dom'
+
+const BreadCrumbs = (props) => {
+
+    const { breadcrumbs } = props
+
+  return <nav className="hidden border-b border-gray-200 dark:border-gray-400 lg:block py-3" aria-label="Breadcrumb">
+  <ol role="list" className="max-w-screen-xl w-full mx-auto px-4 flex space-x-4 sm:px-6 lg:px-8">
+    <li className="flex">
+      <div className="flex items-center">
+        <Link to="/" className="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300">
+          <HomeIcon className="flex-shrink-0 h-5 w-5" aria-hidden="true" />
+          <span className="sr-only">Home</span>
+        </Link>
+      </div>
+    </li>
+    {breadcrumbs.map((item) => (
+      <li key={item.name} className="flex">
+        <div className="flex items-center">
+        <svg
+                            className="flex-shrink-0 h-5 w-5 text-gray-300"
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="currentColor"
+                            viewBox="0 0 20 20"
+                            aria-hidden="true"
+                          >
+                            <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
+                          </svg>
+          <Link
+            to={item.to}
+            className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+            aria-current={item.current ? 'page' : undefined}
+          >
+            {item.name}
+          </Link>
+        </div>
+      </li>
+    ))}
+  </ol>
+</nav>;
+};
+
+export default BreadCrumbs;

app/global_components/Loader.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import clsx from 'clsx';
+
+const Loader = (props) => {
+const { className = "-ml-1 mr-3 h-5 w-5 text-gray-600" } = props
+
+  return (
+    <svg className={clsx("animate-spin", className)} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+    </svg>
+  )
+}
+
+export default Loader

app/global_components/Notification.js

@@ -0,0 +1,99 @@
+/* This example requires Tailwind CSS v2.0+ */
+import React, { Fragment, useState, useEffect } from 'react';
+import { Transition } from '@headlessui/react';
+import { CheckCircleIcon, ExclamationIcon } from '@heroicons/react/outline';
+import { XIcon } from '@heroicons/react/solid';
+
+const Notification = (props) => {
+  const { show, setShow, success, successMsg, errorMsg } = props;
+
+  useEffect(() => {
+    let timeout = null;
+    if (show) {
+      timeout = setTimeout(() => {
+        setShow(false);
+      }, 5000);
+    }
+
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [show]);
+
+  return (
+    <>
+      {/* Global notification live region, render this permanently at the end of the document */}
+      <div
+        aria-live="assertive"
+        className="fixed inset-0 flex items-end px-4 py-20 pointer-events-none sm:items-start"
+      >
+        <div className="w-full flex flex-col items-center space-y-4 sm:items-end">
+          {/* Notification panel, dynamically insert this into the live region when it needs to be displayed */}
+          <Transition
+            show={show}
+            as={Fragment}
+            enter="transform ease-out duration-300 transition"
+            enterFrom="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
+            enterTo="translate-y-0 opacity-100 sm:translate-x-0"
+            leave="transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden">
+              <div className="p-4">
+                <div className="flex items-start">
+                  {success && (
+                    <>
+                      <div className="flex-shrink-0">
+                        <CheckCircleIcon
+                          className="h-6 w-6 text-green-400"
+                          aria-hidden="true"
+                        />
+                      </div>
+                      <div className="ml-3 w-0 flex-1 pt-0.5">
+                        <p className="text-sm font-medium text-gray-900">
+                          {successMsg}
+                        </p>
+                      </div>
+                    </>
+                  )}
+                  {!success && (
+                    <>
+                      <div className="flex-shrink-0">
+                        <ExclamationIcon
+                          className="h-6 w-6 text-red-600"
+                          aria-hidden="true"
+                        />
+                      </div>
+                      <div className="ml-3 w-0 flex-1 pt-0.5">
+                        <p className="text-sm font-medium text-gray-900">
+                          {errorMsg}
+                        </p>
+                      </div>
+                    </>
+                  )}
+                  <div className="ml-4 flex-shrink-0 flex">
+                    <button
+                      type="button"
+                      className="bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
+                      onClick={() => {
+                        setShow(false);
+                      }}
+                    >
+                      <span className="sr-only">Close</span>
+                      <XIcon className="h-5 w-5" aria-hidden="true" />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Transition>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Notification;

app/global_components/button/BackButton.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+// EXTERNAL LIBRAIRIES
+import { useNavigate } from 'react-router';
+import clsx from 'clsx';
+import { ChevronLeftIcon } from '@heroicons/react/outline';
+
+type Props = {
+  className?: string;
+};
+
+const BackButton = (props: Props) => {
+  const { className } = props;
+  const navigate = useNavigate();
+  return (
+    <button
+      type="button"
+      className={clsx(
+        'flex flex-row items-center text-gray-400 hover:text-gray-700 outline-none',
+        className
+      )}
+      onClick={() => navigate(-1)}
+    >
+      <ChevronLeftIcon className="flex-shrink-0 h-5 w-5 " aria-hidden="true" />
+      <span>Back</span>
+    </button>
+  );
+};
+
+BackButton.defaultProps = {
+  className: ''
+};
+
+export default BackButton;

app/global_components/button/Close.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { XIcon } from '@heroicons/react/outline';
+
+type Props = {
+  handleClose: () => void;
+};
+
+const Close = (props: Props) => {
+  const { handleClose } = props;
+
+  const handleKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'Escape') {
+      handleClose();
+    }
+  };
+
+  return (
+    <div
+      className="relative flex flex-col text-center text-sm text-gray-300 hover:text-gray-400 font-medium group outline-none"
+      style={{ cursor: 'pointer' }}
+    >
+      <span
+        className="bg-gray-100 rounded-full p-2 mb-1 group-hover:bg-gray-200 outline-none"
+        role="button"
+        tabIndex={0}
+        onKeyPress={handleKeyPress}
+        onClick={handleClose}
+      >
+        <XIcon className="w-6 h-6" aria-hidden="true" />
+      </span>
+      <span className="absolute -bottom-4 hidden group-hover:block">Close</span>
+    </div>
+  );
+};
+
+export default Close;

app/global_components/button/NavButton.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+// EXTERNAL LIBRAIRIES
+import clsx from 'clsx';
+import { Link } from 'react-router-dom';
+
+const styles = {
+  primary: {
+    btn:
+      'w-full px-6 py-3 rounded-md shadow-sm text-sm font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-blue-600 border border-gray-300 bg-gradient-to-tr from-[#0284C7] to-[#0EA5E9] hover:to-[#0284C7] ',
+    spinner: 'text-white'
+  }, // For some reason the blue gradient doesn't always work and needs to be added in classname on the component declaration.
+  outline: {
+    btn:
+      'w-full px-4 py-3 rounded-md shadow-sm text-sm text-gray-400 hover:text-gray-500 font-medium  border border-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-gray-300',
+    spinner: ''
+  }
+};
+
+type Props = {
+  variant?: string;
+  to: string;
+  className?: string;
+  children: any;
+};
+
+const NavButton = ({ variant = 'primary', to, className, children }: Props) => {
+  const cls = clsx(styles[variant].btn, className, 'text-center hover:no-underline');
+
+  return (
+    <Link to={to} className={cls}>
+      {children}
+    </Link>
+  );
+};
+
+NavButton.defaultProps = {
+  variant: 'primary',
+  className: ''
+};
+
+export default NavButton;