Merge pull request #75 from useaurora/feature/fe-improvements

Feature/fe improvements
askides · Aug 6, 2021 · 52ee258 · 52ee258
2 parents 6b6ec6f + df8064c
commit 52ee258
Show file tree

Hide file tree

Showing 41 changed files with 782 additions and 3,018 deletions.
diff --git a/components/Button.js b/components/Button.js
@@ -9,8 +9,7 @@ export const Button = ({ type, block, value, isLoading, onClick }) => (
       block ? "w-full justify-center" : null
     }`}
   >
-    {isLoading && <Loader />}
-    {value}
+    {isLoading ? <Loader /> : value}
   </button>
 );
 

diff --git a/components/Container.js b/components/Container.js
@@ -1,16 +1,20 @@
-import Head from "next/head";
+import { Meta } from "./Meta";
 import { Navbar } from "./Navbar";
 
 export const Container = ({ children, navbar = true }) => {
   return (
     <div className="bg-white dark:bg-black">
-      <Head>
-        <title>Aurora - Open Website Analytics</title>
-      </Head>
+      <Meta />
 
-      {navbar && <Navbar />}
+      {navbar && (
+        <div className="mb-4 sm:mb-16">
+          <Navbar />
+        </div>
+      )}
 
-      <main className="flex flex-col justify-center px-8 bg-white dark:bg-black">{children}</main>
+      <main className="flex flex-col justify-center px-4 sm:px-8 bg-white dark:bg-black">
+        {children}
+      </main>
     </div>
   );
 };
diff --git a/components/Dashboard.js b/components/Dashboard.js
@@ -18,7 +18,7 @@ export const Dashboard = ({ seed }) => {
   const [timeRange, setTimeRange] = useState(TimeRanges.DAY);
 
   return (
-    <div className="sm:border border-gray-200 dark:border-gray-800 rounded-lg py-8 sm:p-8 mt-8 w-full space-y-10">
+    <div className="sm:border border-gray-200 dark:border-gray-800 rounded-lg py-8 sm:p-8 w-full space-y-10">
       <div className="md:flex md:items-center md:justify-between">
         <div className="flex-1 min-w-0">
           <h2 className="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate text-black dark:text-white">

diff --git a/components/Footer.js b/components/Footer.js
@@ -0,0 +1,50 @@
+import { ToggleTheme } from "./ToggleTheme";
+
+export const Footer = () => (
+  <footer className="container flex flex-col items-center px-8 py-16 mx-auto max-w-7xl sm:flex-row">
+    <a
+      rel="noreferrer"
+      target="_blank"
+      href="https://useaurora.app"
+      className="text-xl font-black leading-none text-gray-900 dark:text-gray-100 select-none logo"
+    >
+      useaurora
+    </a>
+    <p className="mt-4 text-sm text-gray-500 text-center sm:text-left sm:ml-4 sm:pl-4 sm:border-l sm:border-gray-200 sm:mt-0">
+      © 2021 Aurora <span className="hidden sm:inline-block">-</span> <br className="sm:hidden" />{" "}
+      Open Web Analytics
+    </p>
+
+    <span className="inline-flex justify-center mt-4 space-x-5 sm:ml-auto sm:mt-0 sm:justify-start">
+      <a
+        rel="noreferrer"
+        target="_blank"
+        href="https://twitter.com/useaurora_app"
+        className="text-gray-400 hover:text-gray-500"
+      >
+        <span className="sr-only">Twitter</span>
+        <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
+        </svg>
+      </a>
+
+      <a
+        rel="noreferrer"
+        target="_blank"
+        href="https://github.com/useaurora/aurora"
+        className="text-gray-400 hover:text-gray-500"
+      >
+        <span className="sr-only">GitHub</span>
+        <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+          <path
+            fillRule="evenodd"
+            d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+            clipRule="evenodd"
+          ></path>
+        </svg>
+      </a>
+
+      <ToggleTheme />
+    </span>
+  </footer>
+);
diff --git a/components/HeadlessTable.js b/components/HeadlessTable.js
diff --git a/components/Icons.js b/components/Icons.js
@@ -1,6 +1,6 @@
 export const Loader = () => (
   <svg
-    className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+    className="animate-spin mx-3 h-5 w-5 text-white"
     xmlns="https://www.w3.org/2000/svg"
     fill="none"
     viewBox="0 0 24 24"

diff --git a/components/Input.js b/components/Input.js
@@ -0,0 +1,16 @@
+export const Input = ({ register, name, type = "text", ...rest }) => (
+  <div>
+    {rest.label && (
+      <label className="block text-sm font-medium text-gray-600 dark:text-gray-100 mb-1">
+        {rest.label}
+      </label>
+    )}
+
+    <input
+      {...register(name)}
+      {...rest}
+      type={type}
+      className="text-black dark:text-gray-100 focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 block w-full sm:text-sm border-gray-300 dark:border-gray-800 rounded-md bg-white dark:bg-black dark:placeholder-gray-500"
+    />
+  </div>
+);
diff --git a/components/Link.js b/components/Link.js
diff --git a/components/Loader.js b/components/Loader.js
diff --git a/components/Meta.js b/components/Meta.js
@@ -0,0 +1,16 @@
+import Head from "next/head";
+
+export const Meta = () => {
+  return (
+    <Head>
+      <title>Aurora - Open Website Analytics</title>
+      <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+      <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+      <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+      <link rel="manifest" href="/site.webmanifest" />
+      <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+      <meta name="msapplication-TileColor" content="#2d89ef" />
+      <meta name="theme-color" content="#ffffff" />
+    </Head>
+  );
+};