Skip to content

Commit 7ec970d

Browse files
author
Rajat Saxena
committed
Fixed cards and text renderer styling
1 parent 38a7bbf commit 7ec970d

13 files changed

Lines changed: 102 additions & 324 deletions

File tree

‎apps/web/components/public/base-layout/template/index.tsx‎

Lines changed: 4 additions & 290 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@ import { WidgetInstance } from "@courselit/common-models";
33
import { Footer, Header } from "@courselit/page-blocks";
44
import { Toaster } from "@courselit/components-library";
55
import { AppDispatch, AppState } from "@courselit/state-management";
6-
import convert, { HSL } from "color-convert";
6+
import { HSL } from "color-convert";
77
import EditableWidget from "./editable-widget";
8+
import { generateThemeStyles } from "@/lib/theme-styles";
9+
import { Theme } from "@courselit/page-models";
810

911
type PageData = Record<string, unknown> & {
1012
pageType?: "product" | "site" | "blog" | "community";
@@ -117,295 +119,7 @@ const Template = (props: TemplateProps) => {
117119
/>
118120
)}
119121
<Toaster />
120-
{/* {injectThemeStyles && ( */}
121-
<style jsx global>{`
122-
.courselit-theme {
123-
--background: ${themeColors?.light?.background
124-
? formatHSL(
125-
convert.hex.hsl(
126-
themeColors?.light?.background?.replace(
127-
"#",
128-
"",
129-
),
130-
),
131-
)
132-
: ""};
133-
--foreground: ${themeColors?.light?.foreground
134-
? formatHSL(
135-
convert.hex.hsl(
136-
themeColors?.light?.foreground?.replace(
137-
"#",
138-
"",
139-
),
140-
),
141-
)
142-
: ""};
143-
--card: ${themeColors?.light?.card
144-
? formatHSL(
145-
convert.hex.hsl(
146-
themeColors?.light?.card?.replace("#", ""),
147-
),
148-
)
149-
: ""};
150-
--card-foreground: ${themeColors?.light?.cardForeground
151-
? formatHSL(
152-
convert.hex.hsl(
153-
themeColors?.light?.cardForeground?.replace(
154-
"#",
155-
"",
156-
),
157-
),
158-
)
159-
: ""};
160-
--primary: ${themeColors?.light?.primary
161-
? formatHSL(
162-
convert.hex.hsl(
163-
themeColors?.light?.primary?.replace("#", ""),
164-
),
165-
)
166-
: ""};
167-
--primary-foreground: ${themeColors?.light
168-
?.primaryForeground
169-
? formatHSL(
170-
convert.hex.hsl(
171-
themeColors?.light?.primaryForeground?.replace(
172-
"#",
173-
"",
174-
),
175-
),
176-
)
177-
: ""};
178-
--secondary: ${themeColors?.light?.secondary
179-
? formatHSL(
180-
convert.hex.hsl(
181-
themeColors?.light?.secondary?.replace(
182-
"#",
183-
"",
184-
),
185-
),
186-
)
187-
: ""};
188-
--secondary-foreground: ${themeColors?.light
189-
?.secondaryForeground
190-
? formatHSL(
191-
convert.hex.hsl(
192-
themeColors?.light?.secondaryForeground?.replace(
193-
"#",
194-
"",
195-
),
196-
),
197-
)
198-
: ""};
199-
--muted: ${themeColors?.light?.muted
200-
? formatHSL(
201-
convert.hex.hsl(
202-
themeColors?.light?.muted?.replace("#", ""),
203-
),
204-
)
205-
: ""};
206-
--muted-foreground: ${themeColors?.light?.mutedForeground
207-
? formatHSL(
208-
convert.hex.hsl(
209-
themeColors?.light?.mutedForeground?.replace(
210-
"#",
211-
"",
212-
),
213-
),
214-
)
215-
: ""};
216-
--accent: ${themeColors?.light?.accent
217-
? formatHSL(
218-
convert.hex.hsl(
219-
themeColors?.light?.accent?.replace("#", ""),
220-
),
221-
)
222-
: ""};
223-
--accent-foreground: ${themeColors?.light?.accentForeground
224-
? formatHSL(
225-
convert.hex.hsl(
226-
themeColors?.light?.accentForeground?.replace(
227-
"#",
228-
"",
229-
),
230-
),
231-
)
232-
: ""};
233-
--border: ${themeColors?.light?.border
234-
? formatHSL(
235-
convert.hex.hsl(
236-
themeColors?.light?.border?.replace("#", ""),
237-
),
238-
)
239-
: ""};
240-
--destructive: ${themeColors?.light?.destructive
241-
? formatHSL(
242-
convert.hex.hsl(
243-
themeColors?.light?.destructive?.replace(
244-
"#",
245-
"",
246-
),
247-
),
248-
)
249-
: ""};
250-
--input: ${themeColors?.light?.input
251-
? formatHSL(
252-
convert.hex.hsl(
253-
themeColors?.light?.input?.replace("#", ""),
254-
),
255-
)
256-
: ""};
257-
--shadow-2xs: ${themeColors?.light?.shadow2xs};
258-
--shadow-xs: ${themeColors?.light?.shadowXs};
259-
--shadow-sm: ${themeColors?.light?.shadowSm};
260-
--shadow-md: ${themeColors?.light?.shadowMd};
261-
--shadow-lg: ${themeColors?.light?.shadowLg};
262-
--shadow-xl: ${themeColors?.light?.shadowXl};
263-
--shadow-2xl: ${themeColors?.light?.shadow2xl};
264-
}
265-
.dark .courselit-theme {
266-
--background: ${themeColors?.dark?.background
267-
? formatHSL(
268-
convert.hex.hsl(
269-
themeColors?.dark?.background?.replace(
270-
"#",
271-
"",
272-
),
273-
),
274-
)
275-
: ""};
276-
--foreground: ${themeColors?.dark?.foreground
277-
? formatHSL(
278-
convert.hex.hsl(
279-
themeColors?.dark?.foreground?.replace(
280-
"#",
281-
"",
282-
),
283-
),
284-
)
285-
: ""};
286-
--card: ${themeColors?.dark?.card
287-
? formatHSL(
288-
convert.hex.hsl(
289-
themeColors?.dark?.card?.replace("#", ""),
290-
),
291-
)
292-
: ""};
293-
--card-foreground: ${themeColors?.dark?.cardForeground
294-
? formatHSL(
295-
convert.hex.hsl(
296-
themeColors?.dark?.cardForeground?.replace(
297-
"#",
298-
"",
299-
),
300-
),
301-
)
302-
: ""};
303-
--primary: ${themeColors?.dark?.primary
304-
? formatHSL(
305-
convert.hex.hsl(
306-
themeColors?.dark?.primary?.replace("#", ""),
307-
),
308-
)
309-
: ""};
310-
--primary-foreground: ${themeColors?.dark?.primaryForeground
311-
? formatHSL(
312-
convert.hex.hsl(
313-
themeColors?.dark?.primaryForeground?.replace(
314-
"#",
315-
"",
316-
),
317-
),
318-
)
319-
: ""};
320-
--secondary: ${themeColors?.dark?.secondary
321-
? formatHSL(
322-
convert.hex.hsl(
323-
themeColors?.dark?.secondary?.replace(
324-
"#",
325-
"",
326-
),
327-
),
328-
)
329-
: ""};
330-
--secondary-foreground: ${themeColors?.dark
331-
?.secondaryForeground
332-
? formatHSL(
333-
convert.hex.hsl(
334-
themeColors?.dark?.secondaryForeground?.replace(
335-
"#",
336-
"",
337-
),
338-
),
339-
)
340-
: ""};
341-
--muted: ${themeColors?.dark?.muted
342-
? formatHSL(
343-
convert.hex.hsl(
344-
themeColors?.dark?.muted?.replace("#", ""),
345-
),
346-
)
347-
: ""};
348-
--muted-foreground: ${themeColors?.dark?.mutedForeground
349-
? formatHSL(
350-
convert.hex.hsl(
351-
themeColors?.dark?.mutedForeground?.replace(
352-
"#",
353-
"",
354-
),
355-
),
356-
)
357-
: ""};
358-
--accent: ${themeColors?.dark?.accent
359-
? formatHSL(
360-
convert.hex.hsl(
361-
themeColors?.dark?.accent?.replace("#", ""),
362-
),
363-
)
364-
: ""};
365-
--accent-foreground: ${themeColors?.dark?.accentForeground
366-
? formatHSL(
367-
convert.hex.hsl(
368-
themeColors?.dark?.accentForeground?.replace(
369-
"#",
370-
"",
371-
),
372-
),
373-
)
374-
: ""};
375-
--border: ${themeColors?.dark?.border
376-
? formatHSL(
377-
convert.hex.hsl(
378-
themeColors?.dark?.border?.replace("#", ""),
379-
),
380-
)
381-
: ""};
382-
--destructive: ${themeColors?.dark?.destructive
383-
? formatHSL(
384-
convert.hex.hsl(
385-
themeColors?.dark?.destructive?.replace(
386-
"#",
387-
"",
388-
),
389-
),
390-
)
391-
: ""};
392-
--input: ${themeColors?.dark?.input
393-
? formatHSL(
394-
convert.hex.hsl(
395-
themeColors?.dark?.input?.replace("#", ""),
396-
),
397-
)
398-
: ""};
399-
--shadow-2xs: ${themeColors?.dark?.shadow2xs};
400-
--shadow-xs: ${themeColors?.dark?.shadowXs};
401-
--shadow-sm: ${themeColors?.dark?.shadowSm};
402-
--shadow-md: ${themeColors?.dark?.shadowMd};
403-
--shadow-lg: ${themeColors?.dark?.shadowLg};
404-
--shadow-xl: ${themeColors?.dark?.shadowXl};
405-
--shadow-2xl: ${themeColors?.dark?.shadow2xl};
406-
}
407-
`}</style>
408-
{/* )} */}
122+
<style>{generateThemeStyles(state.theme as Theme)}</style>
409123
</div>
410124
);
411125
};

‎packages/components-library/src/styles.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -37,32 +37,32 @@
3737
}
3838

3939
:is(h1) {
40-
@apply text-4xl font-semibold mb-5;
40+
@apply text-4xl font-bold mb-4;
4141
color: inherit;
4242
}
4343

4444
:is(h2) {
45-
@apply text-3xl font-semibold mb-4;
45+
@apply text-3xl font-bold mb-4;
4646
color: inherit;
4747
}
4848

4949
:is(h3) {
50-
@apply text-2xl font-semibold mb-3;
50+
@apply text-2xl font-semibold mb-4;
5151
color: inherit;
5252
}
5353

5454
:is(h4) {
55-
@apply text-xl font-semibold mb-2;
55+
@apply text-xl font-semibold mb-4;
5656
color: inherit;
5757
}
5858

5959
:is(h5) {
60-
@apply text-lg font-semibold mb-1;
60+
@apply text-lg font-semibold mb-4;
6161
color: inherit;
6262
}
6363

6464
:is(h6) {
65-
@apply text-base font-semibold mb-1;
65+
@apply text-base font-semibold mb-4;
6666
color: inherit;
6767
}
6868

‎packages/page-blocks/src/blocks/featured/widget.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ export default function Widget({
119119
</Subheader1>
120120
)}
121121
</div>
122-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
122+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 items-stretch">
123123
{productItems.length === 0 && (
124124
<>
125125
{Array.from({ length: 3 }).map((_, index) => (

0 commit comments

Comments
 (0)