new logo and styling tweaks

src/components/widgets/logo/logo.jsx

@@ -0,0 +1,56 @@
+export default function Logo() {
+  return (
+    <div className="w-12 h-12 flex flex-row items-center align-middle mr-3 self-center">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1024 1024"
+        style={{
+          enableBackground: "new 0 0 1024 1024",
+        }}
+        xmlSpace="preserve"
+        className="w-full h-full"
+      >
+        <style>
+          {
+            ".st0{display:none}.st3{stroke-linecap:square}.st3,.st4{fill:none;stroke:#fff;stroke-miterlimit:10}.st6{display:inline;fill:#333}.st7{fill:#fff}"
+          }
+        </style>
+        <g id="Icon">
+          <path
+            d="M771.9 191c27.7 0 50.1 26.5 50.1 59.3v186.4l-100.2.3V250.3c0-32.8 22.4-59.3 50.1-59.3z"
+            style={{
+              fill: "rgba(var(--color-logo-start))",
+            }}
+          />
+          <linearGradient
+            id="homepage_logo_gradient"
+            gradientUnits="userSpaceOnUse"
+            x1={200.746}
+            y1={225.015}
+            x2={764.986}
+            y2={789.255}
+          >
+            <stop
+              offset={0}
+              style={{
+                stopColor: "rgba(var(--color-logo-start))",
+              }}
+            />
+            <stop
+              offset={1}
+              style={{
+                stopColor: "rgba(var(--color-logo-stop))",
+              }}
+            />
+          </linearGradient>
+          <path
+            d="M721.8 250.3c0-32.7 22.4-59.3 50.1-59.3H253.1c-27.7 0-50.1 26.5-50.1 59.3v582.2l90.2-75.7-.1-130.3H375v61.8l88-73.8 258.8 217.9V250.6"
+            style={{
+              fill: "url(#homepage_logo_gradient)",
+            }}
+          />
+        </g>
+      </svg>
+    </div>
+  );
+}

src/components/widgets/openweathermap/weather.jsx

@@ -16,9 +16,9 @@ function Widget({ options }) {
 
   if (error || data?.cod === 401 || data?.error) {
     return (
-      <div className="flex flex-col justify-center first:ml-0 ml-4">
+      <div className="flex flex-col justify-center first:ml-auto ml-4">
         <div className="flex flex-row items-center justify-end">
-          <div className="flex flex-col items-center">
+          <div className="hidden sm:flex flex-col items-center">
             <BiError className="w-8 h-8 text-theme-800 dark:text-theme-200" />
             <div className="flex flex-col ml-3 text-left">
               <span className="text-theme-800 dark:text-theme-200 text-sm">{t("widget.api_error")}</span>
@@ -32,9 +32,9 @@ function Widget({ options }) {
 
   if (!data) {
     return (
-      <div className="flex flex-col justify-center first:ml-0 ml-4">
+      <div className="flex flex-col justify-center first:ml-auto ml-4">
         <div className="flex flex-row items-center justify-end">
-          <div className="flex flex-col items-center">
+          <div className="hidden sm:flex flex-col items-center">
             <WiCloudDown className="w-8 h-8 text-theme-800 dark:text-theme-200" />
           </div>
           <div className="flex flex-col ml-3 text-left">
@@ -49,9 +49,9 @@ function Widget({ options }) {
   const unit = options.units === "metric" ? "celsius" : "fahrenheit";
 
   return (
-    <div className="flex flex-col justify-center first:ml-0 ml-4">
+    <div className="flex flex-col justify-center first:ml-auto ml-2">
       <div className="flex flex-row items-center justify-end">
-        <div className="flex flex-col items-center">
+        <div className="hidden sm:flex flex-col items-center">
           <Icon
             condition={data.weather[0].id}
             timeOfDay={data.dt > data.sys.sunrise && data.dt < data.sys.sundown ? "day" : "night"}
@@ -102,9 +102,13 @@ export default function OpenWeatherMap({ options }) {
 
   if (!location) {
     return (
-      <button type="button" onClick={() => requestLocation()} className="flex flex-col justify-center first:ml-0 ml-4">
+      <button
+        type="button"
+        onClick={() => requestLocation()}
+        className="flex flex-col justify-center first:ml-auto ml-4"
+      >
         <div className="flex flex-row items-center justify-end">
-          <div className="flex flex-col items-center">
+          <div className="hidden sm:flex flex-col items-center">
             {requesting ? (
               <MdLocationSearching className="w-6 h-6 text-theme-800 dark:text-theme-200 animate-pulse" />
             ) : (

src/components/widgets/resources/resources.jsx

@@ -5,7 +5,7 @@ import Memory from "./memory";
 export default function Resources({ options }) {
   const { expanded } = options;
   return (
-    <div className="flex flex-col max-w:full sm:basis-auto self-center m-auto flex-wrap">
+    <div className="flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap">
       <div className="flex flex-row self-center flex-wrap justify-between">
         {options.cpu && <Cpu expanded={expanded} />}
         {options.memory && <Memory expanded={expanded} />}

src/components/widgets/search/search.jsx

@@ -56,7 +56,7 @@ export default function Search({ options }) {
   }
 
   return (
-    <form className="flex-col relative h-8 my-4 min-w-full md:min-w-fit grow first:ml-0 ml-4" onSubmit={handleSubmit}>
+    <form className="flex-col relative h-8 my-4 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" />
       <input
         type="text"

src/components/widgets/widget.jsx

@@ -9,6 +9,7 @@ const widgetMappings = {
   search: dynamic(() => import("components/widgets/search/search")),
   greeting: dynamic(() => import("components/widgets/greeting/greeting")),
   datetime: dynamic(() => import("components/widgets/datetime/datetime")),
+  logo: dynamic(() => import("components/widgets/logo/logo"), { ssr: false }),
 };
 
 export default function Widget({ widget }) {