Skip to content

Mokse 59 dev #98

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JMG3000 merged 5 commits into from
Apr 21, 2026
Merged

Mokse 59 dev #98

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f1e025f
cleaned up programs page, added SimpleGrid, layout of grid is 2x2, ne…
JMG3000 Apr 21, 2026
acfa99f
fixed programs grid for stop the stigma to be in the center with lg t…
JMG3000 Apr 21, 2026
66b8cd6
transformed div to sectionTemplete, nested a vstack for format, resiz…
JMG3000 Apr 21, 2026
841dc4c
cleaned up existing commented-out code, changed background for highli…
JMG3000 Apr 21, 2026
90fc1a1
added midnightblue bg to grid's container
JMG3000 Apr 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
# testing
/coverage
/.sec/
*.log*

# next.js
/.next/
Expand Down
7 changes: 7 additions & 0 deletions .vscode/mcp.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{"servers": {
"chakra-ui": {
"command": "npx",
"args": ["-y", "@chakra-ui/react-mcp"]
}
}
}
10 changes: 3 additions & 7 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
{
"servers": {
"chakra-ui": {
"command": "npx",
"args": ["-y", "@chakra-ui/react-mcp"]
}
},
"typescript.tsdk": "node_modules/typescript/lib"
"typescript.tsdk": "node_modules/typescript/lib", // i get this error: This setting is deprecated. Use js/ts.tsdk.path instead.
Copy link

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This keeps the deprecated typescript.tsdk setting (and an inline comment). Since the comment indicates the setting is deprecated, it’d be better to switch to the recommended key (js/ts.tsdk.path, per the warning) and remove the inline note so the file stays clean and future-proof.

Suggested change
"typescript.tsdk": "node_modules/typescript/lib", // i get this error: This setting is deprecated. Use js/ts.tsdk.path instead.
"js/ts.tsdk.path": "node_modules/typescript/lib",

Copilot uses AI. Check for mistakes.
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]

}
13 changes: 9 additions & 4 deletions app/(Pages)/contact/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,18 @@ import {
Link as ChakraLink,
Image as ChakraImage,
Avatar,
VStack,
} from "@chakra-ui/react";

import checkDeviceSize from "@/components/ui/breakpoints";
import {
HeaderTemplate,
PageBuilder,
SectionTemplate,
} from "@/components/page-builder/template";
import { Icon } from "@/components/ui/icons/icon";
import { poppins } from "@/components/ui/fonts";
import { Section } from "lucide-react";
Copy link

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Section is imported from lucide-react but never used in this file. This will fail lint/typecheck in most configurations; remove the unused import.

Suggested change
import { Section } from "lucide-react";

Copilot uses AI. Check for mistakes.

export default function Contact() {
const notMobileDevice = checkDeviceSize();
Expand All @@ -38,7 +41,8 @@ export default function Contact() {
description="Find out how you can contribute and make a positive impact in your community"
/>

<div>
<SectionTemplate >
<VStack justify={"center"} align={"center"} gap={4} mb={10}>
<Heading as={"h2"}>Get in Touch</Heading>
Comment on lines +44 to 46
Copy link

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

SectionTemplate always renders a section heading/description container even when title/description are undefined (it will output an empty <h2>). Since this usage doesn’t pass title/description, it may introduce extra blank vertical space / empty heading semantics on the page. Consider passing a title (and moving the existing “Get in Touch” heading into it) or using a simpler wrapper component here.

Copilot uses AI. Check for mistakes.
<Text>
We&apos;re here to support you. Reach out to learn more about our
Expand Down Expand Up @@ -80,8 +84,8 @@ export default function Contact() {
<Card.Root
key={info.label}
variant="outline"
w={"sm"}
h={"xs"}
w={"xxs"}
h={"xxs"}
Comment on lines +87 to +88
Copy link

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

w={"xxs"} / h={"xxs"} aren’t standard Chakra size tokens (common ones are xs, sm, etc., or numeric values). If the token isn’t defined, these props will resolve to an invalid CSS value and the cards may render with unexpected sizing. Consider using a supported token (e.g., xs) or an explicit size value.

Suggested change
w={"xxs"}
h={"xxs"}
w={"xs"}
h={"xs"}

Copilot uses AI. Check for mistakes.
>
<Card.Body>
<Avatar.Root my={4} boxSize={12}>
Expand All @@ -96,6 +100,7 @@ export default function Contact() {
);
})}
</HStack>
</VStack>

{/* Google Maps Embed Section */}
<section>
Expand All @@ -116,7 +121,7 @@ export default function Contact() {
<section>
<ContactForm />
</section>
</div>
</SectionTemplate>

<main></main>
</PageBuilder>
Expand Down
173 changes: 15 additions & 158 deletions app/(Pages)/programs/stop-the-stigma/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,35 +174,20 @@ export default function StopTheStigma() {
</Center>
</Flex>
</Container>
</SectionTemplate>
{/* </SectionTemplate>

<SectionTemplate>
<Container
fluid
// position="relative"
// w={"100%"}
// h={"0vh"}
// bgImage={`url(${"/assets/stop-the-stigma/stop-stigma-sect1_background.webp"})`}
// bgSize={"cover"}
// backgroundPosition={"center"}
// bgRepeat={"no-repeat"}
// aria-label={`${"Stop The Stigma Conference"} Image`}
>
{/* <AbsoluteCenter
textAlign="center"
bg="rgba(0, 0, 0, 0.4)"
w={"100%"}
h={"100%"}
alignItems={"center"}
> */}
<Flex gapX={24} p={20}>
<Heading as={"h2"} size={'5xl'}>
Conference Highlights
</Heading>
<SectionTemplate> */}
<Container fluid height={"100"} h={"100"} bgColor={"midnightblue"} color={"white"} >
Comment on lines +177 to +180
Copy link

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There’s a commented-out </SectionTemplate> / <SectionTemplate> block in the middle of this JSX. Leaving commented structural tags makes the section boundaries hard to reason about and increases the chance of accidental nesting bugs later. Prefer either deleting the old markup or actually closing/opening SectionTemplate properly without comments.

Copilot uses AI. Check for mistakes.
Copy link

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

height={"100"} / h={"100"} are string values without units. Unless "100" is a defined design token, this becomes invalid CSS and the container height won’t apply as intended. Use a number (height={100} for px) or a unit-bearing string like "100%" / "100vh".

Suggested change
<Container fluid height={"100"} h={"100"} bgColor={"midnightblue"} color={"white"} >
<Container fluid h={"100%"} bgColor={"midnightblue"} color={"white"} >

Copilot uses AI. Check for mistakes.

<SimpleGrid columns={{ base: 1, md: 2 }} gap={6}>
<Heading as={"h2"} size={'5xl'} textAlign={"center"} mb={10} fontWeight={'bold'} >
Conference Highlights
</Heading>

<VStack gapY={16} >
<SimpleGrid columns={2} gap="75px" mb="20" w="40vw" textStyle={"lg"} >
Copy link

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The highlights grid is now hard-coded to columns={2} with w="40vw". This removes the previous responsive behavior and will likely overflow or become unreadable on smaller viewports. Consider restoring responsive props (e.g., columns={{ base: 1, md: 2 }} and a responsive width) so the section remains usable on mobile/tablet.

Suggested change
<SimpleGrid columns={2} gap="75px" mb="20" w="40vw" textStyle={"lg"} >
<SimpleGrid
columns={{ base: 1, md: 2 }}
gap={{ base: "6", md: "10", lg: "75px" }}
mb="20"
w={{ base: "full", lg: "40vw" }}
textStyle={"lg"}
>

Copilot uses AI. Check for mistakes.

<FeatureCard
<FeatureCard

title={"Opening Night Film - Being Michelle"}
description={
"A groundbreaking documentary that sets the tone for the conference by centering the lived experience of a Deaf woman navigating incarceration and disability."
Expand Down Expand Up @@ -230,145 +215,17 @@ export default function StopTheStigma() {
}
icon={"ObjectGroup"}
/>
</SimpleGrid>
<Box bg={"white "} boxSize={100}>
<Image asChild aspectRatio={4 / 5} fit={"contain"} maxW={"830px"} mx={"auto"} width={"full"} >
<NextImage
src={"/assets/stop-the-stigma/Linkedin-Carousels.png"}
width={1080}
height={1350}
alt={"test"}
fetchPriority={"high"}
sizes={"(max-width:1080px) 100vw,1080px"} />
</Image>
</Box>
</Flex>
{/* </AbsoluteCenter> */}

</SimpleGrid>
</VStack>
</Container>

</SectionTemplate>

<HeaderTemplate
image="/assets/stop-the-stigma/stop-stigma-sect2_background.webp"
imageHeight="100vh"
imageHeight="25vh"
imageLabel="Stop The Stigma Conference"
/>

{/* <section
className="elementor-section elementor-top-section elementor-element elementor-element-ln1z48d elementor-section-full_width elementor-section-content-middle elementor-section-height-default elementor-section-height-default"
data-id="ln1z48d"
data-element_type="section"
data-settings='{"background_background":"classic"}'
>
<div className="elementor-container elementor-column-gap-no">
<div
className="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-4292f5a"
data-id="4292f5a"
data-element_type="column"
>
<div className="elementor-widget-wrap elementor-element-populated">
<div
className="elementor-element elementor-element-6d93f44 elementor-widget elementor-widget-image"
data-id="6d93f44"
data-element_type="widget"
data-widget_type="image.default"
>
<div className="elementor-widget-container">
<img
fetchPriority="high"
decoding="async"
width="1080"
height="1350"
src="https://mokse.org/wp-content/uploads/2025/12/Linkedin-Carousels.png"
className="attachment-full size-full wp-image-1852"
alt="Stop The Stigma Conference Flyer"
srcSet="https://mokse.org/wp-content/uploads/2025/12/Linkedin-Carousels.png 1080w, https://mokse.org/wp-content/uploads/2025/12/Linkedin-Carousels-240x300.png 240w, https://mokse.org/wp-content/uploads/2025/12/Linkedin-Carousels-819x1024.png 819w, https://mokse.org/wp-content/uploads/2025/12/Linkedin-Carousels-768x960.png 768w"
sizes="(max-width: 1080px) 100vw, 1080px"
/>
</div>
</div>
</div>
</div>
<div
className="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-a8c8ff0"
data-id="a8c8ff0"
data-element_type="column"
>
<div className="elementor-widget-wrap elementor-element-populated">
<section
className="elementor-section elementor-inner-section elementor-element elementor-element-a893ccd elementor-section-boxed elementor-section-height-default elementor-section-height-default"
data-id="a893ccd"
data-element_type="section"
>
<div className="elementor-container elementor-column-gap-no">
<div
className="elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-6534f2c"
data-id="6534f2c"
data-element_type="column"
>
<div className="elementor-widget-wrap elementor-element-populated">
<div
className="elementor-element elementor-element-fc9b946 elementor-widget elementor-widget-heading"
data-id="fc9b946"
data-element_type="widget"
data-widget_type="heading.default"
>
<div className="elementor-widget-container">
<h1 className="elementor-heading-title elementor-size-default">
What is STOP THE STIGMA?
</h1>{" "}
</div>
</div>
<div
className="elementor-element elementor-element-2d62856 elementor-widget elementor-widget-text-editor"
data-id="2d62856"
data-element_type="widget"
data-widget_type="text-editor.default"
>
<div className="elementor-widget-container">
<p>
STOP THE STIGMA is an annual conference centered
on the stigma of disability and incarceration. Now
in itsfourth year the conference continues to
provide a space for justice impacted individuals
to have their voices and stories heard. Presented
by Mokse and The Community, STOP THE STIGMA
integrates innovative media, storytelling, and
design to engage audiences and amplify impact.
Together, we build an inclusive platform to
challenge assumptions and inspire action.
</p>{" "}
</div>
</div>
<div
className="elementor-element elementor-element-319cf5c elementor-align-left elementor-widget elementor-widget-button"
data-id="319cf5c"
data-element_type="widget"
data-widget_type="button.default"
>
<div className="elementor-widget-container">
<div className="elementor-button-wrapper">
<a
className="elementor-button elementor-button-link elementor-size-sm"
href="https://docs.google.com/forms/d/e/1FAIpQLSe4Z0LI5JpkPH3eKBw-8ANquRWRxNJKwpS465KOStu3Jb4v_A/viewform?usp=embed_facebook"
>
<span className="elementor-button-content-wrapper">
<span className="elementor-button-text">
Register Here
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</section> */}
</PageBuilder >
</>
);
Expand Down
Loading
Loading