fix search and weather widget spacing

This commit is contained in:
Ben Phelps 2022-09-12 11:00:15 +03:00
parent 3660140539
commit cd53440eff
3 changed files with 9 additions and 9 deletions

View File

@ -16,7 +16,7 @@ function Widget({ options }) {
if (error || data?.cod === 401 || data?.error) { if (error || data?.cod === 401 || data?.error) {
return ( return (
<div className="flex flex-col justify-center"> <div className="flex flex-col justify-center first:ml-0 ml-4">
<div className="flex flex-row items-center justify-end"> <div className="flex flex-row items-center justify-end">
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<BiError className="w-8 h-8 text-theme-800 dark:text-theme-200" /> <BiError className="w-8 h-8 text-theme-800 dark:text-theme-200" />
@ -32,7 +32,7 @@ function Widget({ options }) {
if (!data) { if (!data) {
return ( return (
<div className="flex flex-col justify-center"> <div className="flex flex-col justify-center first:ml-0 ml-4">
<div className="flex flex-row items-center justify-end"> <div className="flex flex-row items-center justify-end">
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<WiCloudDown className="w-8 h-8 text-theme-800 dark:text-theme-200" /> <WiCloudDown className="w-8 h-8 text-theme-800 dark:text-theme-200" />
@ -49,7 +49,7 @@ function Widget({ options }) {
const unit = options.units === "metric" ? "celsius" : "fahrenheit"; const unit = options.units === "metric" ? "celsius" : "fahrenheit";
return ( return (
<div className="flex flex-col justify-center"> <div className="flex flex-col justify-center first:ml-0 ml-4">
<div className="flex flex-row items-center justify-end"> <div className="flex flex-row items-center justify-end">
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<Icon <Icon
@ -100,7 +100,7 @@ export default function OpenWeatherMap({ options }) {
if (!location) { if (!location) {
return ( return (
<button type="button" onClick={() => requestLocation()} className="flex flex-col justify-center"> <button type="button" onClick={() => requestLocation()} className="flex flex-col justify-center first:ml-0 ml-4">
<div className="flex flex-row items-center justify-end"> <div className="flex flex-row items-center justify-end">
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
{requesting ? ( {requesting ? (

View File

@ -51,7 +51,7 @@ export default function Search({ options }) {
} }
return ( return (
<form className="flex-col relative h-8 my-4 min-w-full md:min-w-fit grow mr-4" onSubmit={handleSubmit}> <form className="flex-col relative h-8 my-4 min-w-full md:min-w-fit grow first:ml-0 ml-4" onSubmit={handleSubmit}>
<div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-white" /> <div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-white" />
<input <input
type="text" type="text"

View File

@ -16,7 +16,7 @@ function Widget({ options }) {
if (error || data?.error) { if (error || data?.error) {
return ( return (
<div className="flex flex-col justify-center"> <div className="flex flex-col justify-center first:ml-0 ml-4">
<div className="flex flex-row items-center justify-end"> <div className="flex flex-row items-center justify-end">
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<BiError className="w-8 h-8 text-theme-800 dark:text-theme-200" /> <BiError className="w-8 h-8 text-theme-800 dark:text-theme-200" />
@ -32,7 +32,7 @@ function Widget({ options }) {
if (!data) { if (!data) {
return ( return (
<div className="flex flex-col justify-center"> <div className="flex flex-col justify-center first:ml-0 ml-4">
<div className="flex flex-row items-center justify-end"> <div className="flex flex-row items-center justify-end">
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<WiCloudDown className="w-8 h-8 text-theme-800 dark:text-theme-200" /> <WiCloudDown className="w-8 h-8 text-theme-800 dark:text-theme-200" />
@ -49,7 +49,7 @@ function Widget({ options }) {
const unit = options.units === "metric" ? "celsius" : "fahrenheit"; const unit = options.units === "metric" ? "celsius" : "fahrenheit";
return ( return (
<div className="flex flex-col justify-center"> <div className="flex flex-col justify-center first:ml-0 ml-4">
<div className="flex flex-row items-center justify-end"> <div className="flex flex-row items-center justify-end">
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<Icon condition={data.current.condition.code} timeOfDay={data.current.is_day ? "day" : "night"} /> <Icon condition={data.current.condition.code} timeOfDay={data.current.is_day ? "day" : "night"} />
@ -101,7 +101,7 @@ export default function WeatherApi({ options }) {
if (!location) { if (!location) {
return ( return (
<button type="button" onClick={() => requestLocation()} className="flex flex-col justify-center"> <button type="button" onClick={() => requestLocation()} className="flex flex-col justify-center first:ml-0 ml-4">
<div className="flex flex-row items-center justify-end"> <div className="flex flex-row items-center justify-end">
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
{requesting ? ( {requesting ? (