Skip to content

Commit

Permalink
Merge pull request #42 from dev-asterix/dev
Browse files Browse the repository at this point in the history 
ui theme modifications for more subtle look
  • Loading branch information
@ric-v
ric-v authored Jul 7, 2022
2 parents 1dd7479 + a8a534e commit 6736ec6
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 61 deletions.
57 changes: 25 additions & 32 deletions components/Card.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useEffect, useState } from "react";
import getCurrentTime, { Timezones } from "../functions/timeNow";
import { RiCloseFill } from "react-icons/ri";
import { store } from "../store/store";
import Modal from "./Modal";

Expand Down Expand Up @@ -27,49 +28,41 @@ const Card = ({ tzData }: Props) => {
}, [tzData.name]);

return (
<div
<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}
className=" 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"
>
<div className="flex flex-row justify-between text-sm font-medium">
<h3
className="text-xl leading-6 font-medium text-teal-300 cursor-pointer"
id="modal-title"
onClick={() => { setSelected(tzData) }}
<div>
<div className="flex flex-row justify-between text-sm font-medium">
<h3
className="text-lg leading-6 font-medium text-teal-600 cursor-pointer"
id="modal-title"
onClick={() => { setSelected(tzData) }}
>
{" "}
{tzData.city} - {tzData.country}
</h3>
</div>
<div className="mt-3 text-gray-500 text-xs truncate cursor-pointer"
onClick={() => setSelected(tzData)}
>
{" "}
{tzData.name}
</h3>
</div>
<div className="mt-3 text-gray-200 text-lg font-semibold cursor-pointer"
onClick={() => setSelected(tzData)}
>
{currentTime}
</div>
</div>
<div>
<button
onClick={() =>
store.dispatch({ type: "timezone/remove", payload: tzData })
}
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5 text-rose-500"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
clipRule="evenodd"
/>
</svg>
<RiCloseFill size={24} color='gray' />
</button>
</div>
<div className="mt-3 text-gray-300 truncate cursor-pointer"
onClick={() => setSelected(tzData)}
>
{tzData.city} - {tzData.country}
</div>
<div className="mt-3 text-gray-200 font-semibold cursor-pointer"
onClick={() => setSelected(tzData)}
>
{currentTime}
</div>
{selected && <Modal timezone={selected} setSelected={setSelected} />}
</div>
);
Expand Down
49 changes: 21 additions & 28 deletions components/ListView.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useEffect, useState } from "react";
import getCurrentTime, { Timezones } from "../functions/timeNow";
import { RiCloseFill } from "react-icons/ri";
import { store } from "../store/store";
import Modal from "./Modal";

Expand Down Expand Up @@ -27,44 +28,36 @@ const ListView = ({ tzData }: Props) => {
}, [tzData.name]);

return (
<div
<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}
className="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"
>
<div className="flex flex-row justify-between text-sm font-medium">
<h3
className="text-sm md:text-lg leading-6 font-medium text-teal-300 cursor-pointer"
id="modal-title"
onClick={() => { setSelected(tzData) }}
<div>
<div className="flex flex-row justify-between text-sm font-medium">
<h3
className="text-sm leading-0 font-medium text-teal-600 cursor-pointer"
id="modal-title"
onClick={() => { setSelected(tzData) }}
>
{" "}
{tzData.name} - {tzData.country}
</h3>
</div>
<div className="mt-3 text-gray-200 text-lg md:text-2xl font-semibold cursor-pointer"
onClick={() => setSelected(tzData)}
>
{" "}
{tzData.name} - {tzData.country}
</h3>
{currentTime}
</div>
</div>
<div>
<button
onClick={() =>
store.dispatch({ type: "timezone/remove", payload: tzData })
}
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5 text-rose-500"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
clipRule="evenodd"
/>
</svg>
<RiCloseFill size={24} color='gray' />
</button>
</div>
<div className="mt-3 text-gray-200 text-xl md:text-2xl font-semibold cursor-pointer"
onClick={() => setSelected(tzData)}
>
{currentTime}
</div>
{selected && <Modal timezone={selected} setSelected={setSelected} />}
</div>
);
Expand Down
4 changes: 3 additions & 1 deletion pages/_app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { useState } from 'react';
function AndTheTimeIs({ Component, pageProps }: AppProps) {
return (
<Provider store={store}>
<div className='flex flex-col justify-between min-h-full min-w-full' style={{ backgroundColor: '#1e2122' }}>
<div className='flex flex-col justify-between min-h-full min-w-full bg-gradient-to-br from-slate-700 to-slate-900'>
<div>
<Navbar>
<Component {...pageProps} />
Expand All @@ -24,3 +24,5 @@ function AndTheTimeIs({ Component, pageProps }: AppProps) {
}

export default AndTheTimeIs

// style={{ backgroundColor: '#1e2122' }}

1 comment on commit 6736ec6

@vercel
Copy link

@vercel vercel bot commented on 6736ec6 Jul 7, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

and-the-time-is – ./

and-the-time-is-asterix-dev.vercel.app
and-the-time-is.vercel.app
and-the-time-is-git-main-asterix-dev.vercel.app

Please sign in to comment.