Update styles

PotLock · Nov 26, 2024 · 80dbc7b · 80dbc7b
1 parent d5a9bfe
commit 80dbc7b
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 95 deletions.
diff --git a/src/common/ui/styles/theme.css b/src/common/ui/styles/theme.css
@@ -54,6 +54,9 @@
     --accent: 30 89% 96%;
     --accent-foreground: 21 82% 53%;
 
+    --success: 86 78% 35%;
+    --success-foreground: 210 40% 98%;
+
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
 
@@ -110,12 +113,6 @@
   }
 }
 
-@layer base {
-  * {
-    @apply border-border;
-  }
-}
-
 body {
   min-height: 100vh;
 }

diff --git a/src/modules/pot/components/PotApplicationRequirements.tsx b/src/modules/pot/components/PotApplicationRequirements.tsx
@@ -13,7 +13,7 @@ export const PotApplicationRequirements: React.FC<PotApplicationRequirementsProp
   return (
     <div
       className={cn(
-        "xl:w-126.5 flex h-[232px] w-full flex-col items-start justify-start",
+        "xl:w-126.5 min-w-87.5 lg:w-fit flex h-[232px] w-full flex-col items-start justify-start",
         "rounded-2xl bg-[#f7f7f7] p-2",
       )}
     >
@@ -42,7 +42,7 @@ export const PotApplicationRequirements: React.FC<PotApplicationRequirementsProp
             className={cn("inline-flex items-center justify-start gap-2 self-stretch")}
             key={text}
           >
-            <MdCheckCircleOutline className="relative h-6 w-6" />
+            <MdCheckCircleOutline className="color-success relative h-6 w-6" />
             <span className="text-sm font-normal leading-tight text-neutral-600">{text}</span>
           </div>
         ))}

diff --git a/src/modules/pot/components/PotHero.tsx b/src/modules/pot/components/PotHero.tsx
@@ -72,25 +72,20 @@ export const PotHero: React.FC<PotHeroProps> = ({ potId }) => {
 
       <div
         className={cn(
-          "lg:p-2 flex flex-col items-center justify-start",
-          "rounded-2xl bg-[#f7f7f7] p-2",
+          "lg:p-2 flex flex-col items-center justify-start p-1",
+          "md:w-a md:bg-neutral-50 w-full rounded-2xl",
         )}
       >
         {pot ? <PotTimeline {...{ potId }} /> : <Skeleton className="h-96 w-full" />}
 
         <div
           className={cn(
-            "min-h-122 flex flex-col items-start justify-start p-14",
-            "lg:gap-8 gap-10 self-stretch rounded-lg bg-background",
+            "min-h-122 md:p-14 flex flex-col items-start justify-start",
+            "lg:gap-8 bg-background gap-10 self-stretch rounded-lg",
           )}
         >
           <div className="lg:flex-row flex flex-col items-start justify-between gap-10 self-stretch">
-            <div
-              className={cn(
-                "inline-flex w-[506px] flex-col",
-                "items-start justify-start gap-10 self-stretch",
-              )}
-            >
+            <div className="max-w-126.5 min-w-87.5 flex flex-col items-start justify-start gap-10">
               {pot ? (
                 <div
                   className={cn(
@@ -110,31 +105,10 @@ export const PotHero: React.FC<PotHeroProps> = ({ potId }) => {
                 {pot ? (
                   <div
                     className={cn(
-                      "self-stretch",
-                      "text-[17px] font-normal leading-normal text-neutral-600",
+                      "self-stretch text-[17px] font-normal leading-normal text-neutral-600",
                     )}
                   >
-                    <ReactMarkdown
-                      remarkPlugins={[remarkGfm]}
-                      components={{
-                        a: ({ node: _, ...props }) => (
-                          <a
-                            {...props}
-                            className="text-blue-500 underline"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            onClick={(event) => {
-                              event.stopPropagation();
-                            }}
-                          >
-                            {"More Info"}
-                          </a>
-                        ),
-                      }}
-                      className="markdown-link"
-                    >
-                      {pot.description}
-                    </ReactMarkdown>
+                    <ReactMarkdown remarkPlugins={[remarkGfm]}>{pot.description}</ReactMarkdown>
                   </div>
                 ) : (
                   <Skeleton className="h-9 w-full" />
@@ -170,8 +144,8 @@ export const PotHero: React.FC<PotHeroProps> = ({ potId }) => {
 
           <div
             className={cn(
-              "inline-flex items-center justify-between self-stretch",
-              "w-full border-t border-neutral-200 pt-4",
+              "md:flex-row flex flex-col items-center justify-between gap-8",
+              "w-full self-stretch border-t border-neutral-200 pt-4",
             )}
           >
             <div className="inline-flex flex-col items-start justify-center gap-1">

diff --git a/src/modules/pot/components/PotTimeline.tsx b/src/modules/pot/components/PotTimeline.tsx
@@ -158,7 +158,7 @@ export const PotTimeline: React.FC<PotTimelineProps> = ({ potId, classNames }) =
       </Container>
 
       <svg
-        className="xl:display-[none] transition-300 w-4 transition-all ease-in-out"
+        className="xl:not-displayed transition-300 w-4 transition-all ease-in-out"
         style={{
           rotate: isMobileMenuActive ? "180deg" : "0deg",
         }}

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -3,16 +3,15 @@ import { fontFamily } from "tailwindcss/defaultTheme";
 
 const config = {
   darkMode: ["class"],
-  content: [
-    "./pages/**/*.{ts,tsx}",
-    "./components/**/*.{ts,tsx}",
-    "./src/**/*.{ts,tsx}",
-  ],
+  content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"],
   prefix: "",
+
+  // TODO: Complete theme migration to `uno.config.ts`
   theme: {
     screens: {
       xs: "475px",
     },
+
     container: {
       center: true,
       padding: {
@@ -24,58 +23,28 @@ const config = {
         "2xl": "1400px",
       },
     },
+
     extend: {
       backgroundImage: {
         hero: "url('/assets/images/hero-bg.svg')",
       },
+
       fontSize: {
         xl: "22px", // Customize the text-xl size to 22px
       },
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
+
       borderRadius: {
         lg: "var(--radius)",
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
+
       boxShadow: {
         "button-focus": "var(--focus-shadow)",
         "button-primary": "var(--button-primary)",
         "button-tonal": "var(--button-tonal)",
       },
+
       keyframes: {
         "accordion-down": {
           from: { height: "0" },
@@ -90,16 +59,19 @@ const config = {
           "50%": { transform: "scale(1.3)" },
         },
       },
+
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
         beacon: "beacon 1.5s infinite",
       },
+
       fontFamily: {
         lora: ["var(--font-lora)", ...fontFamily.sans],
       },
     },
   },
+
   plugins: [require("tailwindcss-animate")],
 } satisfies Config;
 

diff --git a/uno.config.ts b/uno.config.ts
@@ -5,9 +5,9 @@ import {
   presetUno,
   transformerVariantGroup,
 } from "unocss";
-import presetAnimations from "unocss-preset-animations";
+import { presetAnimations } from "unocss-preset-animations";
 import presetAutoprefixer from "unocss-preset-autoprefixer";
-import presetShadcn from "unocss-preset-shadcn";
+import { presetShadcn } from "unocss-preset-shadcn";
 
 export default defineConfig({
   presets: [
@@ -16,9 +16,7 @@ export default defineConfig({
     presetAttributify(),
     presetTypography(),
     presetAnimations(),
-    presetShadcn({
-      color: "slate",
-    }),
+    presetShadcn({ color: "slate" }),
   ],
 
   transformers: [transformerVariantGroup()],
@@ -40,9 +38,11 @@ export default defineConfig({
           dark: "hsl(222.2 47.4% 11.2%)",
         },
       },
+
       peach: {
         50: "#fef6ee",
       },
+
       neutral: {
         50: "#f7f7f7",
         100: "#ebebeb",
@@ -55,102 +55,121 @@ export default defineConfig({
         800: "#464646",
         900: "#2e2e2e",
       },
+
       background: {
         DEFAULT: "hsl(var(--background))",
         light: "hsl(0 0% 100%)",
         dark: "hsl(222.2 84% 4.9%)",
       },
+
       foreground: {
         DEFAULT: "hsl(var(--foreground))",
         light: "hsl(222.2 84% 4.9%)",
         dark: "hsl(210 40% 98%)",
       },
+
       card: {
         DEFAULT: "hsl(var(--card))",
         light: "hsl(0 0% 100%)",
         dark: "hsl(222.2 84% 4.9%)",
+
         foreground: {
           DEFAULT: "hsl(var(--card-foreground))",
           light: "hsl(222.2 84% 4.9%)",
           dark: "hsl(210 40% 98%)",
         },
       },
+
       popover: {
         DEFAULT: "hsl(var(--popover))",
         light: "hsl(0 0% 100%)",
         dark: "hsl(222.2 84% 4.9%)",
+
         foreground: {
           DEFAULT: "hsl(var(--popover-foreground))",
           light: "hsl(222.2 84% 4.9%)",
           dark: "hsl(210 40% 98%)",
         },
       },
+
       secondary: {
         DEFAULT: "hsl(var(--secondary))",
         light: "hsl(210 40% 96.1%)",
         dark: "hsl(217.2 32.6% 17.5%)",
+
         foreground: {
           DEFAULT: "hsl(var(--secondary-foreground))",
           light: "hsl(222.2 47.4% 11.2%)",
           dark: "hsl(210 40% 98%)",
         },
       },
+
       muted: {
         DEFAULT: "hsl(var(--muted))",
         light: "hsl(210 40% 96.1%)",
         dark: "hsl(217.2 32.6% 17.5%)",
+
         foreground: {
           DEFAULT: "hsl(var(--muted-foreground))",
           light: "hsl(215.4 16.3% 46.9%)",
           dark: "hsl(215 20.2% 65.1%)",
         },
       },
+
       accent: {
         DEFAULT: "hsl(var(--accent))",
         light: "hsl(30 89% 96%)",
         dark: "hsl(217.2 32.6% 17.5%)",
+
         foreground: {
           DEFAULT: "hsl(var(--accent-foreground))",
           light: "hsl(21 82% 53%)",
           dark: "hsl(210 40% 98%)",
         },
       },
+
+      success: {
+        DEFAULT: "hsl(var(--success))",
+      },
+
       destructive: {
         DEFAULT: "hsl(var(--destructive))",
         light: "hsl(0 84.2% 60.2%)",
         dark: "hsl(0 62.8% 30.6%)",
+
         foreground: {
           DEFAULT: "hsl(var(--destructive-foreground))",
           light: "hsl(210 40% 98%)",
           dark: "hsl(210 40% 98%)",
         },
       },
+
       border: {
         DEFAULT: "hsl(var(--border))",
         light: "hsl(214.3 31.8% 91.4%)",
         dark: "hsl(217.2 32.6% 17.5%)",
       },
+
       input: {
         DEFAULT: "hsl(var(--input))",
         light: "hsl(0 0% 65%)",
         dark: "hsl(0 0% 86%)",
       },
+
       ring: {
         DEFAULT: "hsl(var(--ring))",
         light: "hsl(0 0% 78%)",
         dark: "hsl(212.7 26.8% 83.9%)",
       },
     },
   },
+
   shortcuts: {
     "not-displayed": "display-[none]",
     "btn-primary": "bg-primary text-primary-foreground hover:bg-primary/90",
-    "btn-secondary":
-      "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-    "btn-destructive":
-      "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-    "btn-outline":
-      "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+    "btn-secondary": "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+    "btn-destructive": "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+    "btn-outline": "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
     "focus-shadow": "shadow-[var(--focus-shadow)]",
     "button-primary": "shadow-[var(--button-primary)]",
     "button-tonal": "shadow-[var(--button-tonal)]",