Merge pull request #58 from ric-v/main

UI Improvements and footer actions added

components/Footer.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import ButtonGroup from "./ui-elements/ButtonGroup";
+import Label from "./ui-elements/Label";
 
 type Props = {
   hidden: string,
@@ -16,7 +17,7 @@ const Footer = ({ hidden }: Props) => {
    * @param {string} text
    * @param {string} link
    */
-  const footerNav = (text: string, link: string, position: 'right' | 'middle' | 'left') => {
+  const footerNav = (text: string, link: string, position: 'right' | 'middle' | 'left', _action?: () => void) => {
     if (link === hidden) {
       return null;
     }
@@ -25,7 +26,7 @@ const Footer = ({ hidden }: Props) => {
       <ButtonGroup position={position} toLayout='grid' layout={"grid"} setLayout={() => { }} >
         <Link passHref={true} href={link} as={link}>
           <a target={link.startsWith('http') ? '_blank' : '_self'}>
-            <button className="text-white p-2">
+            <button className="text-white p-2" onClick={_action}>
               {text}
             </button>
           </a>
@@ -35,20 +36,46 @@ const Footer = ({ hidden }: Props) => {
   }
 
   return (
-    <div className='flex flex-col justify-center text-center mt-10 mb-5 bg-slate-900'>
+    <div className='flex flex-col justify-center text-center mt-10 pb-5 bg-slate-900 border-t border-dashed border-gray-600'>
       <div className="flex flex-row justify-center">
-        <div className='grid grid-cols-2 md:grid-cols-2 text-center p-5'>
+        <div className='grid grid-cols-2 md:grid-cols-4 text-center p-5'>
           {footerNav('the time is 🕟', '/', 'left')}
           {footerNav('the time was? ⌚', '/TimeWas', 'left')}
+          {footerNav('Suggestions 🤔', '', 'middle', () => window.open('mailto:[email protected]?subject=Issue Report on and-the-time-is.web&body=Please describe the issue you are facing. Add the page on which the issue occured and screenshots if available.'))}
+          {footerNav('Report bug 🪲', 'https://github.com/dev-asterix/and-the-time-is.web/issues/new?assignees=&labels=&template=bug_report.md&title=', 'middle')}
           {footerNav('make it better 🚀', 'https://github.com/dev-asterix/and-the-time-is', 'right')}
         </div>
       </div>
-      <div className='text-red-800 font-semibold text-sm lg:text-md'>
-        *Disclaimer: This is a demo app. Timezones and timestamps displayed here are not accurate yet. This is still work in progress.
+      <div className='text-red-700 font-semibold text-sm lg:text-md mt-5'>
+        *Disclaimer: Data inaccuracies are expected.
       </div>
       <div className='text-teal-500 font-bold'>
         source: <a href="https://en.wikipedia.org/wiki/List_of_tz_database_time_zones">Wikipedia tz database</a>
       </div>
+      {/* <>
+        <Label text='About' key={'about'} classes={'pb-2'} />
+        <div className='text-center md:text-left text-gray-400 
+                md:border-l md:shadow-[-40px_0px_40px_-20px_rgba(0,0,0,0.33)] border-dashed border-slate-500 pl-2'>
+          <p className='font-nova-flat'>
+            <span className='text-teal-300'>&apos;And the time is&apos; </span>app is for those who wants to track current timestamps across the globe.
+            Search for the timezones to keep track of and pin them to the dashboard for easy access.
+          </p>
+          <br />
+          <p className='font-nova-flat'>
+            <span className='text-teal-300'>&apos;And the time was&apos;</span> helps you to track what the time was at a specific timezone compared to your location.
+            It comes with a time picker to set the time you want to track across all selected timezones.
+          </p>
+          <br />
+          <p className='font-nova-flat'>
+            This is a free and open source project under GPL-3 copyleft license. You can find the source code on <a className='text-teal-300' href='https://github.com/dev-asterix/and-the-time-is.web' target={'_blank'} rel="noreferrer" >Github</a>.
+          </p>
+          <div className='text-teal-500 font-bold'>
+            source: <a href="https://en.wikipedia.org/wiki/List_of_tz_database_time_zones">Wikipedia tz database</a>
+          </div>
+          <br />
+          <p className='font-nova-flat'>Code. Share. Prosper.</p>
+        </div>
+      </> */}
     </div>
   )
 }

components/Main.tsx

@@ -9,6 +9,7 @@ import { store } from '../store/store';
 import ButtonGroup from './ui-elements/ButtonGroup';
 import Card from './ui-elements/Card';
 import DateFormatModal from './DateFormatModal';
+import TimezoneSearch from './TimezoneSearch';
 
 type mainProps = {
   page: string;

components/Navbar.tsx

@@ -9,6 +9,7 @@ import { store } from '../store/store';
 import TimePicker from './TimePicker';
 import TimestampModal from './TimestampModal';
 import TimezoneSearch from './TimezoneSearch';
+import Label from './ui-elements/Label';
 
 export type TimePickerType = {
   year: string;
@@ -70,8 +71,8 @@ const Navbar = ({ title, searchBar, timePicker }: navbarProps) => {
   return (
     <>
       <div
-        className='h-1/2 lg:h-1/2 text-center curve shadow-[0px_50px_30px_-15px_rgba(0,0,0,0.33)] bg-gradient-to-br 
-           from-cyan-800 to-slate-900 text-slate-300
+        className='h-1/2 text-center shadow-[0px_50px_30px_-15px_rgba(0,0,0,0.33)] bg-gradient-to-br 
+           from-cyan-800 to-slate-900 text-slate-300 border-b border-dashed border-gray-600
           sm:shadow-[0px_50px_50px_-15px_rgba(0,0,0,0.6)]'>
         <div className="grid lg:grid-cols-2">
           <div className='p-2 lg:p-8 mt-2 lg:mt-10'>
@@ -94,7 +95,7 @@ const Navbar = ({ title, searchBar, timePicker }: navbarProps) => {
           </div>
           <div className={`p-2 ${searchBar ? 'lg:p-10' : 'lg:p-2'} md:z-10`}>
             {timePicker && <TimePicker now={now} dateString={dateString} setDateString={setDateString} />}
-            <TimezoneSearch />
+            {searchBar && <TimezoneSearch />}
           </div>
         </div>
       </div>

components/TimePicker.tsx

@@ -38,7 +38,7 @@ const TimePicker = ({ now, dateString, setDateString }: timePickerProps) => {
   }, [setDateString, unixTime]);
 
   return (
-    <div className="mt-2 mb-1 sm:mt-2 w-full border-b border-dashed  border-gray-500 pb-3 shadow-[30px_20px_40px_-15px_rgba(0,0,0,0.53)]">
+    <div className="mt-2 mb-1 sm:mt-2 w-full pb-3">
 
       <div className={`flex flex-row justify-center items-center align-center mb-10 cursor-pointer
         transition-all duration-1000 ease-in-out border-b border-dashed  border-gray-500 shadow-[10px_20px_40px_-15px_rgba(0,0,0,0.53)]

components/TimestampModal.tsx

@@ -46,7 +46,7 @@ function TimestampModal({ timezone, setSelected }: Props) {
   return (
     <ModalBase body={
       <>
-        <ModalTitle title={`📌 ${timezone.name}`} />
+        <ModalTitle title={timezone.name} />
 
         {/* table with timezone details */}
         <table className="table-responsive w-full mt-5">

components/TimezoneSearch.tsx

@@ -24,7 +24,7 @@ const TimezoneSearch = () => {
   if (error) return <div>failed to load</div>;
 
   return (
-    <div className="mt-2 mb-4 sm:mt-10">
+    <div className="mb-4 p-3 md:p-5 text-white">
       <div className="w-full">
         <Label text='Search Timezone' />
         <p className="text-gray-500 text-md italic mb-2">
@@ -35,6 +35,7 @@ const TimezoneSearch = () => {
         <input
           type="text"
           className="h-14 w-full bg-slate-700 transition-colors duration-1000 rounded-3xl px-5 pr-14 
+            border border-dashed border-gray-500
             shadow-[0px_50px_50px_-15px_rgba(0,0,0,0.6)] focus:outline-none focus:bg-slate-800 sm:px-5"
           placeholder="Search for a timezone code / timezone location / city..."
           value={search}
@@ -46,7 +47,7 @@ const TimezoneSearch = () => {
         {/* search entry drop down */}
         {data && (
           <div
-            className="w-full px-2 bg-slate-800 rounded-xl 
+            className="w-full px-2 bg-slate-800 rounded-xl border-x border-dashed border-gray-500
             shadow-[0px_50px_50px_-15px_rgba(0,0,0,0.6)] max-h-72 scrollbar-thin
             scrollbar-thumb-gray-800 scrollbar-track-gray-700"
           >

components/modal/ModalBase.tsx

@@ -21,7 +21,7 @@ const ModalBase = ({ body, actionBar }: Props) => {
                 {body}
               </div>
             </div>
-            <div className="bg-gradient-to-br from-slate-700 to-slate-800 px-4 py-3 sm:px-6 flex flex-row justify-end">
+            <div className="bg-gradient-to-br from-slate-700 to-slate-800 px-4 py-3 sm:px-6 flex flex-row justify-end border-t border-dashed border-gray-500">
               {actionBar}
             </div>
           </div>

components/modal/ModalButton.tsx

@@ -14,7 +14,7 @@ const ModalButton = ({ text, close, handleClick, classes, disabled }: Props) =>
       disabled={disabled}
       type="button"
       className={`mt-3 mx-1 inline-flex justify-center rounded-md border-t border-l border-gray-500 
-                  px-4 py-2 text-base font-medium text-gray-300 focus:outline-none 
+                  px-4 py-2 text-base font-medium text-gray-300 focus:outline-none border-dashed
                   focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 
                   sm:ml-3 sm:w-auto sm:text-sm transition duration-1000 ease-in-out
                   shadow-[10px_10px_20px_-5px_rgba(0,0,0,0.53)]

components/modal/ModalTitle.tsx

@@ -2,14 +2,18 @@ import React from 'react'
 
 type Props = {
   title: string
+  _editable?: boolean
   _classes?: string
 }
 
-const ModalTitle = ({ title, _classes }: Props) => {
+const ModalTitle = ({ title, _editable, _classes }: Props) => {
   return (
-    <h2 className={`text-2xl font-nova-flat leading-6 font-semibold text-teal-500 mb-2 ${_classes}`} id="modal-title">
-      {title}
-    </h2>
+    <input
+      type="text"
+      value={`📌 ${title}`}
+      className={`text-2xl font-nova-flat leading-6 font-semibold text-teal-500 mb-2 
+        appearance-none bg-transparent focus:border-0 text-center ${_classes}`}
+    />
   )
 }
 

components/ui-elements/ButtonGroup.tsx

@@ -24,8 +24,8 @@ const ButtonGroup = ({ children, layout, toLayout, position, setLayout }: Props)
   return (
     <button
       disabled={layout === toLayout}
-      className={`bg-transparent border p-1.5 border-gray-300 hover:bg-slate-700 disabled:border-gray-500 
-      shadow-[15px_20px_20px_-5px_rgba(0,0,0,0.53)] transition duration-1000 ease-in-out ${position === 'left' ? 'rounded-l-lg' : 'rounded-r-lg'}`}
+      className={`bg-transparent border p-1.5 border-gray-300 border-dashed hover:bg-slate-700 disabled:border-gray-500 
+      shadow-[15px_20px_20px_-5px_rgba(0,0,0,0.53)] transition duration-1000 ease-in-out ${position === 'left' ? 'rounded-l-lg' : position === 'middle' ? '' : 'rounded-r-lg'}`}
       onClick={() => {
         localStorage.setItem('layout', toLayout);
         setLayout(toLayout);

components/ui-elements/Card.tsx

@@ -38,18 +38,17 @@ const Card = ({ tzData, page }: Props) => {
   }, [page, tzData.name]);
 
   return (
-    <div className="flex flex-row justify-between border border-slate-700 shadow-[0px_50px_30px_-15px_rgba(0,0,0,0.33)]
-    bg-gradient-to-br from-slate-800 to-slate-900 rounded-lg p-4"
-      key={tzData.name}
-    > 
+    <div className='flex flex-row justify-between bg-gradient-to-br from-slate-800 to-slate-900 
+        border border-slate-600 border-dashed shadow-[0px_50px_30px_-15px_rgba(0,0,0,0.33)] rounded-lg p-4'
+      key={tzData.name}>
       <div>
         <div className="flex flex-row justify-between text-sm font-medium">
           <h3
             className="text-lg leading-6 font-medium truncate text-teal-600 cursor-pointer"
             id="modal-title"
             onClick={() => { setSelected(tzData) }}
           >
-            {tzData.city} - {tzData.country}
+            {tzData.customname === undefined ? `${tzData.city} - ${tzData.country}` : tzData.customname}
           </h3>
         </div>
 
@@ -59,7 +58,7 @@ const Card = ({ tzData, page }: Props) => {
           {currentTime}
         </div>
       </div>
-      <div className='flex flex-col items-center justify-center p-2 border-l border-t border-solid border-slate-800 cursor-pointer
+      <div className='flex flex-col items-center justify-center p-2 border-l border-t border-slate-700 cursor-pointer border-dashed
       rounded-lg text-gray-600 transition duration-500 ease-in-out hover:bg-pink-900 hover:text-white  shadow-[0px_10px_20px_-5px_rgba(0,0,0,0.33)]'
         onClick={() =>
           store.dispatch({ type: "timezone/remove", payload: { timezone: tzData, dateFormat: '' } })

components/ui-elements/Select.tsx

@@ -13,7 +13,9 @@ type Props = {
 const Select = ({ field, limit, dateString, optionDisplay, selectVal, handler, _classes }: Props) => {
   return (
     <select
-      className='bg-gray-700 overflow-y-auto text-center rounded-lg p-2 scrollbar-thin scrollbar-track-gray-700 scrollbar-thumb-gray-800  shadow-[10px_30px_30px_-10px_rgba(0,0,0,0.53)]'
+      className='bg-gray-700 overflow-y-auto text-center rounded-lg p-2 scrollbar-thin 
+        scrollbar-track-gray-700 scrollbar-thumb-gray-800 boder border border-dashed border-gray-500  
+        shadow-[10px_30px_30px_-10px_rgba(0,0,0,0.53)]'
       onChange={(e) => {
         handler({ ...dateString, [field]: e.target.value })
       }}

pages/api/functions/timeNow.ts

@@ -5,6 +5,7 @@ import { store } from '../../../store/store';
  * type Timezones
  */
 export type Timezones = {
+  customname: string;
   code: string;
   name: string;
   country: string;

tailwind.config.js

@@ -7,6 +7,7 @@ module.exports = {
   theme: {
     fontFamily: {
       "nova-flat": '"Nova Flat"',
+      "proxima-nova": '"Proxima Nova"',
     },
     extend: {},
   },