diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/PSA.js | 17 | ||||
| -rw-r--r-- | components/travel-advisory/HistoryModal.js | 4 | ||||
| -rw-r--r-- | components/travel-advisory/ListCountries.js | 4 | ||||
| -rw-r--r-- | components/updates/PostPreview.js | 20 |
4 files changed, 24 insertions, 21 deletions
diff --git a/components/PSA.js b/components/PSA.js index 8dad8b3..108924a 100644 --- a/components/PSA.js +++ b/components/PSA.js @@ -11,11 +11,16 @@ const PSA = () => { defaultStyle += ' ' + styleImportant break; case 1: + important = "Latest News:" + styleImportant = "bg-zinc-700" + defaultStyle += ' ' + styleImportant + break; + case 2: important = "WARNING!" styleImportant = "bg-yellow-700" defaultStyle += ' ' + styleImportant break; - case 2: + case 3: important = "EMERGENCY!" styleImportant = "bg-red-800" defaultStyle += ' ' + styleImportant @@ -29,11 +34,11 @@ const PSA = () => { <div className="flex flex-row space-x-3"> <p>{psaMessage.announcement}</p> <p className="text-blue-200 hover:text-blue-500 active:text-blue-700"> - {psaMessage.link && ( - <Link href={psaMessage.link}> - Learn more ↗ - </Link> - )}</p> + {psaMessage.link && ( + <Link href={psaMessage.link}> + Learn more ↗ + </Link> + )}</p> </div> </div> ) diff --git a/components/travel-advisory/HistoryModal.js b/components/travel-advisory/HistoryModal.js index 9ff835a..3ef2ea8 100644 --- a/components/travel-advisory/HistoryModal.js +++ b/components/travel-advisory/HistoryModal.js @@ -27,9 +27,7 @@ const HistoryModal = ({ isVisible, onClose, countries, dangerLevel, history }) = </div> <div> <h1 className="font-medium text-2xl pt-3">History</h1> - <ul> - {historyList} - </ul> + <ul>{historyList}</ul> </div> </div> </div> diff --git a/components/travel-advisory/ListCountries.js b/components/travel-advisory/ListCountries.js index 6cb0c17..9c880e1 100644 --- a/components/travel-advisory/ListCountries.js +++ b/components/travel-advisory/ListCountries.js @@ -40,7 +40,7 @@ export default function Countries(){ const settlementsList = country.settlements.map((settlement) => { return ( <div key={settlement.name}> - <h2 className="font-medium text-3xl">{settlement.name}</h2> + <h2 className="font-medium md:text-3xl text-xl">{settlement.name}</h2> <h2 className="text-base">{getDangerLevel(settlement.danger)}</h2> </div> ) @@ -49,7 +49,7 @@ export default function Countries(){ return ( <div key="countries" className="bg-center bg-no-repeat bg-[image:var(--image-url)] bg-gray-500 bg-blend-multiply" style={{'--image-url': `url(${country.image})`}} > <div className="sm:px-40 px-10 py-10 space-y-3"> - <h1 className="font-medium text-5xl">{country.name}</h1> + <h1 className="font-light md:text-5xl text-3xl">{country.name}</h1> <h2 className="text-lg">{dangerLevel}</h2> <div className="space-y-3">{settlementsList}</div> <button className="transition duration-200 ease-in-out px-4 py-2 font-medium rounded-full bg-blue-600 hover:bg-blue-700 active:bg-blue-800" onClick={()=> { diff --git a/components/updates/PostPreview.js b/components/updates/PostPreview.js index ca261c0..55c2510 100644 --- a/components/updates/PostPreview.js +++ b/components/updates/PostPreview.js @@ -2,14 +2,14 @@ import Link from "next/link"; import DateFormatter from '@/components/updates/DateFormatter' export default function PostPreview(props) { - return ( - <div key="post" className="bg-zinc-800 py-3 px-5 border border-gray-600 rounded-lg space-y-3"> - <Link href={`/updates/${props.slug}`}> - <h2 className="font-medium text-2xl hover:underline">{props.title}</h2> - </Link> - <span>By {props.author}</span> - <p>{props.description}</p> - <p className="font-medium text-sm">Posted on {DateFormatter(props.date)}</p> - </div> - ) + return ( + <div key="post" className="bg-zinc-800 py-3 px-5 border border-gray-600 rounded-lg space-y-3"> + <Link href={`/updates/${props.slug}`}> + <h2 className="font-medium text-2xl hover:underline">{props.title}</h2> + </Link> + <span className="text-sm">{props.author}</span> + <p>{props.description}</p> + <p className="font-medium text-sm">Posted on {DateFormatter(props.date)}</p> + </div> + ) } |