Styling cleanup

bring-shrubbery · Mar 30, 2024 · ffa47e3 · ffa47e3
1 parent 9476a5e
commit ffa47e3
Show file tree

Hide file tree

Showing 10 changed files with 105 additions and 112 deletions.
diff --git a/apps/nextjs/src/app/App.tsx b/apps/nextjs/src/app/App.tsx
@@ -1,23 +1,22 @@
 "use client";
 
+import type { editor } from "monaco-editor";
+import { useEffect, useRef, useState } from "react";
+import { analyticsAtom } from "@/components/analytics";
 import { announcementBarAtom } from "@/components/announcement-bar";
 import { Toolbar } from "@/components/toolbar";
+import { useToast } from "@/components/ui/use-toast";
+import { Settings } from "@/lib/store";
+import { cn } from "@/lib/utils";
+import Editor, { useMonaco } from "@monaco-editor/react";
 import { Allotment } from "allotment";
 import { useAtom } from "jotai";
-import { convert } from "svg-to-swiftui-core";
-
-import Editor, { useMonaco } from "@monaco-editor/react";
-import type { editor } from "monaco-editor";
-
 import LIGHT_THEME from "monaco-themes/themes/IDLE.json";
 import DARK_THEME from "monaco-themes/themes/idleFingers.json";
-import { useEffect, useRef, useState } from "react";
 import { useTheme } from "next-themes";
-import { useToast } from "@/components/ui/use-toast";
-import { Settings } from "@/lib/store";
+import { convert } from "svg-to-swiftui-core";
 import urlJoin from "url-join";
 import xmlFormat from "xml-formatter";
-import { analyticsAtom } from "@/components/analytics";
 
 export const App = ({
   exampleList,
@@ -122,7 +121,7 @@ export const App = ({
         onExampleSelect={handleExampleSelect}
       />
 
-      <Allotment className={height}>
+      <Allotment className={cn(height, "bg-background")}>
         <Allotment.Pane className={height}>
           <Editor
             height="100%"
@@ -141,7 +140,7 @@ export const App = ({
                 ...DARK_THEME,
                 colors: {
                   ...DARK_THEME.colors,
-                  "editor.background": "#27272A",
+                  "editor.background": "#0C0A09",
                 },
               });
 

diff --git a/apps/nextjs/src/app/globals.css b/apps/nextjs/src/app/globals.css
@@ -5,70 +5,55 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-
+    --foreground: 20 14.3% 4.1%;
     --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-
+    --card-foreground: 20 14.3% 4.1%;
     --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-
+    --popover-foreground: 20 14.3% 4.1%;
+    --primary: 24.6 95% 53.1%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 60 4.8% 95.9%;
+    --secondary-foreground: 24 9.8% 10%;
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 5.9% 10%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+    --ring: 24.6 95% 53.1%;
     --radius: 0.5rem;
   }
 
   .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+    --primary: 20.5 90.2% 48.2%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 12 6.5% 15.1%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+    --ring: 20.5 90.2% 48.2%;
   }
 }
 
 @layer base {
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
   }

diff --git a/apps/nextjs/src/app/layout.tsx b/apps/nextjs/src/app/layout.tsx
@@ -2,14 +2,15 @@ import "./globals.css";
 import "allotment/dist/style.css";
 
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
 import type { PropsWithChildren } from "react";
-
-import { Providers } from "./providers";
-import { Toaster } from "@/components/ui/toaster";
+import { Inter } from "next/font/google";
+import Script from "next/script";
 import { AnalyticsProvider } from "@/components/analytics";
+import { Toaster } from "@/components/ui/toaster";
+import { cn } from "@/lib/utils";
 import { Analytics } from "@vercel/analytics/react";
-import Script from "next/script";
+
+import { Providers } from "./providers";
 
 const fontSans = Inter({
   subsets: ["latin"],
@@ -66,18 +67,18 @@ export const metadata: Metadata = {
     "how to convert svg to swiftui",
     "convert svg to swiftui",
     "convert svg to swift",
-    "ios"
-  ]
+    "ios",
+  ],
 };
 
 export default function RootLayout({ children }: PropsWithChildren) {
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={[
-          fontSans.className,
-          "antialiased h-screen bg-white dark:bg-zinc-800 text-black dark:text-zinc-50 w-full font-sans",
-        ].join(" ")}
+        className={cn(
+          "h-screen w-full bg-background font-sans text-foreground antialiased",
+          fontSans.variable,
+        )}
       >
         <Providers>{children}</Providers>
         <Toaster />

diff --git a/apps/nextjs/src/app/page.tsx b/apps/nextjs/src/app/page.tsx
@@ -18,7 +18,7 @@ export default async function Home() {
     <>
       <AnnouncementBar adsEnabled={!!adsEnabled} />
       <Navbar githubStars={githubStars} />
-      <main className="block text-black dark:text-white">
+      <main>
         <App exampleList={[]} />
       </main>
       {/* <ConsentToast /> */}

diff --git a/apps/nextjs/src/components/IconLink.tsx b/apps/nextjs/src/components/IconLink.tsx
@@ -1,9 +1,10 @@
 "use client";
 
-import { cn } from "@/lib/utils";
-import Link, { type LinkProps } from "next/link";
+import type { LinkProps } from "next/link";
 import { PropsWithChildren } from "react";
+import Link from "next/link";
 import { toggleVariants } from "@/components/ui/toggle";
+import { cn } from "@/lib/utils";
 
 export const IconLink = ({
   href,
@@ -13,7 +14,7 @@ export const IconLink = ({
   return (
     <Link
       href={href}
-      className={cn(toggleVariants(), "p-0 w-12 h-12 rounded-full")}
+      className={cn(toggleVariants(), "h-12 w-12 rounded-full p-0")}
       {...props}
     >
       {children}

diff --git a/apps/nextjs/src/components/Navbar.tsx b/apps/nextjs/src/components/Navbar.tsx
@@ -1,24 +1,25 @@
-import { SVGtoSwiftUILogo } from "./icons/S2SLogo";
-import { IoLogoGithub } from "react-icons/io5";
-import { IconLink } from "./IconLink";
-import { DarkModeToggle } from "./darkmode-toggle";
 import Link from "next/link";
-import { QuassumType } from "./icons/quassum-type";
-import { cn } from "@/lib/utils";
 import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 import { StarIcon } from "lucide-react";
+import { IoLogoGithub } from "react-icons/io5";
+
 import CountingNumbers from "./counting-numbers";
+import { DarkModeToggle } from "./darkmode-toggle";
+import { IconLink } from "./IconLink";
+import { QuassumType } from "./icons/quassum-type";
+import { SVGtoSwiftUILogo } from "./icons/S2SLogo";
 
 export function Navbar({ githubStars }: { githubStars?: number }) {
   return (
-    <header className="w-full px-6 py-2 bg-white dark:bg-zinc-900/40 flex justify-between select-none items-center">
+    <header className="flex w-full select-none items-center justify-between px-6 py-2">
       {/* Left side content */}
       <div className="flex h-full items-center">
-        <SVGtoSwiftUILogo width={64} height={64} className="w-16 h-16" />
+        <SVGtoSwiftUILogo width={64} height={64} className="h-16 w-16" />
 
         <div className="relative hidden sm:block ">
           <h1
-            className="font-bold text-4xl pl-3 pt-1 bg-gradient-to-r from-[#F5E338] to-[#F05137] bg-clip-text"
+            className="bg-gradient-to-r from-[#F5E338] to-[#F05137] bg-clip-text pl-3 pt-1 text-4xl font-bold"
             style={{
               WebkitTextFillColor: "transparent",
             }}
@@ -28,7 +29,7 @@ export function Navbar({ githubStars }: { githubStars?: number }) {
 
           <Link
             href="https://quassum.com/?utm_source=svg-to-swiftui"
-            className="absolute -bottom-5 right-0 flex items-bottom"
+            className="items-bottom absolute -bottom-5 right-0 flex"
             target="_blank"
             rel="noopener noreferrer"
           >
@@ -39,8 +40,8 @@ export function Navbar({ githubStars }: { githubStars?: number }) {
       </div>
 
       {/* Right side content */}
-      <div className="flex items-center text-slate-900 dark:text-slate-50">
-        <div className="mx-4 rounded-lg overflow-hidden border-2 border-transparent hidden md:block">
+      <div className="flex items-center">
+        <div className="mx-4 hidden overflow-hidden rounded-lg border-2 border-transparent md:block">
           <iframe
             src="https://github.com/sponsors/bring-shrubbery/button"
             title="Sponsor bring-shrubbery"
@@ -72,16 +73,16 @@ export const StarOnGithubButton = ({
       <Link
         className={cn(
           buttonVariants({ variant: "outline" }),
-          "gap-2 whitespace-pre md:flex overflow-hidden h-[34px]",
-          "group relative justify-center transition-all duration-300 ease-out"
+          "h-[34px] gap-2 overflow-hidden whitespace-pre md:flex",
+          "group relative justify-center transition-all duration-300 ease-out",
         )}
         href={"https://github.com/bring-shrubbery/SVG-to-SwiftUI"}
       >
-        <span className="absolute -right-10 -mt-12 h-32 w-8 translate-x-16 rotate-45 transform bg-white opacity-10 transition-all duration-1000 ease-out group-hover:-translate-x-40 blur-lg" />
+        <span className="absolute -right-10 -mt-12 h-32 w-8 translate-x-16 rotate-45 transform bg-white opacity-10 blur-lg transition-all duration-1000 ease-out group-hover:-translate-x-40" />
         <IoLogoGithub className="h-4 w-4" />
         Star on GitHub
-        <div className="hidden lg:flex items-center gap-1 text-sm text-zinc-50 w-[54px]">
-          <StarIcon className="h-4 w-4 group-hover:text-yellow-300 transition-all duration-300" />
+        <div className="hidden w-[54px] items-center gap-1 text-sm text-zinc-50 lg:flex">
+          <StarIcon className="h-4 w-4 transition-all duration-300 group-hover:text-yellow-300" />
           <CountingNumbers
             value={githubStars}
             className="font-display font-medium text-white"

diff --git a/apps/nextjs/src/components/announcement-bar.tsx b/apps/nextjs/src/components/announcement-bar.tsx
@@ -17,7 +17,7 @@ export const AnnouncementBar = ({ adsEnabled }: { adsEnabled: boolean }) => {
   return (
     <div
       className={
-        "relative w-full bg-zinc-100 py-3 text-black dark:bg-zinc-800 dark:text-white"
+        "relative w-full bg-zinc-100 py-3 text-black dark:bg-zinc-800/80 dark:text-white"
       }
       style={{
         display: announcementBarHidden ? "none" : "block",

diff --git a/apps/nextjs/src/components/toolbar-settings.tsx b/apps/nextjs/src/components/toolbar-settings.tsx
@@ -1,18 +1,18 @@
 "use client";
 
-import { SettingsIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
 import { Slider } from "@/components/ui/slider";
-import { useAtom } from "jotai";
 import { Settings } from "@/lib/store";
+import { useAtom } from "jotai";
+import { SettingsIcon } from "lucide-react";
 
 export const ToolbarSettings = () => {
   const [structName, setStructName] = useAtom(Settings.structName);
@@ -22,18 +22,18 @@ export const ToolbarSettings = () => {
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <Button className="rounded-full p-0 w-10 h-10" variant="ghost">
+        <Button className="h-10 w-10 rounded-full p-0" variant="ghost">
           <SettingsIcon />
         </Button>
       </PopoverTrigger>
+
       <PopoverContent className="mx-4 w-fit">
-        <CardHeader className="p-0 w-fit">
+        <CardHeader className="w-fit p-0">
           <CardTitle>Settings</CardTitle>
           <CardDescription>
             {'Modify settings, then click "Convert" again.'}
           </CardDescription>
-
-          <div className="w-auto pt-4 grid grid-cols-[auto,200px] gap-x-4 gap-y-6 items-center">
+          <div className="grid w-auto grid-cols-[auto,200px] items-center gap-x-4 gap-y-6 pt-4">
             <Label htmlFor="struct-name" className="whitespace-nowrap">
               {"Struct Name"}
             </Label>
@@ -44,16 +44,19 @@ export const ToolbarSettings = () => {
               onChange={(e) => setStructName(e.target.value)}
             />
 
-            <Label htmlFor="float-precision" className="whitespace-nowrap">
-              Float Precision ({"5"})
+            <Label
+              htmlFor="float-precision"
+              className="min-w-[130px] whitespace-nowrap"
+            >
+              {`Float Precision (${precision})`}
             </Label>
             <Slider
               min={1}
-              max={15}
+              max={12}
               defaultValue={[precision]}
               className="my-2"
               value={[precision]}
-              onValueCommit={([v]) => v && setPrecision(v)}
+              onValueChange={([v]) => v && setPrecision(v)}
             />
 
             <Label htmlFor="indentation" className="whitespace-nowrap">