From 36f6037339c6d634d705f7102a2533f3032f040e Mon Sep 17 00:00:00 2001
From: Matthew Gisonno <mgisonno@degdigital.com>
Date: Thu, 4 Apr 2024 04:31:21 -0700
Subject: [PATCH 1/2] Updates to Person, PeopleGrid, and SpeakersGrid
 components, Chakra Theme, and container css.

---
 src/Project/Sugcon2024/Sugcon/src/Theme.ts    |  3 ++
 .../sass/components/_component-container.scss |  3 +-
 .../components/Basic Components/Person.tsx    | 28 ++++++++++---------
 .../components/List Components/PeopleGrid.tsx |  1 +
 .../List Components/SpeakersGrid.tsx          |  2 +-
 5 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/Project/Sugcon2024/Sugcon/src/Theme.ts b/src/Project/Sugcon2024/Sugcon/src/Theme.ts
index 645d0577b..2e0044371 100644
--- a/src/Project/Sugcon2024/Sugcon/src/Theme.ts
+++ b/src/Project/Sugcon2024/Sugcon/src/Theme.ts
@@ -105,6 +105,9 @@ const Link = defineStyleConfig({
     white: {
       color: 'white',
       fontSize: '18px',
+      _hover: {
+        color: 'white',
+      },
     },
     smallWhite: {
       color: 'white',
diff --git a/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/_component-container.scss b/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/_component-container.scss
index 3812b1042..ba123bed4 100644
--- a/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/_component-container.scss
+++ b/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/_component-container.scss
@@ -16,6 +16,7 @@ $size-padding: 8px;
 
 .container {
   padding: 0;
+  max-width: 1440px;
 
   &.fullwidth-container {
     max-width: unset;
@@ -24,5 +25,5 @@ $size-padding: 8px;
   .component-content {
     @include clearfix();
   }
-
 }
+
diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Person.tsx b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Person.tsx
index b513cf2de..d623c2061 100644
--- a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Person.tsx	
+++ b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Person.tsx	
@@ -54,23 +54,23 @@ export interface PersonFields {
 export type PersonProps = {
   params: { [key: string]: string };
   fields: PersonFields;
+  isPeopleGrid?: boolean;
 };
 
 export const Default = (props: PersonProps): JSX.Element => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   return (
-    <Box mb={30}>
+    <Box mb={30} w={props.isPeopleGrid ? 300 : 260}>
       <Image
         as={JssImage}
         src={props.fields.Image?.value?.src}
-        w={260}
+        w={props.isPeopleGrid ? 300 : 260}
         borderRadius={15}
         mb={10}
         onClick={props.params?.LinkToBio == '1' ? onOpen : undefined}
         cursor="pointer"
         field={props.fields.Image}
       />
-
       {props.params?.LinkToBio == '1' && (
         <Button onClick={onOpen} variant="link">
           <Heading as="h3" size="md" mt={2}>
@@ -83,10 +83,18 @@ export const Default = (props: PersonProps): JSX.Element => {
           <JssText field={props.fields.Name} />
         </Heading>
       )}
-      <Text fontSize="16px" color="sugcon.gray.500" mb={0}>
+      <Text
+        fontSize={props.isPeopleGrid ? '18px' : '16px'}
+        color={props.isPeopleGrid ? 'inherit' : 'sugcon.gray.500'}
+        mb={0}
+      >
         <JssText field={props.fields.JobRole} />
       </Text>
-      <Text fontSize="16px" color="sugcon.gray.500" mb={0}>
+      <Text
+        fontSize={props.isPeopleGrid ? '18px' : '16px'}
+        color={props.isPeopleGrid ? 'inherit' : 'sugcon.gray.500'}
+        mb="13px"
+      >
         <JssText field={props.fields.Company} />
       </Text>
       {(isEditorActive() ||
@@ -94,10 +102,7 @@ export const Default = (props: PersonProps): JSX.Element => {
         <Link
           as={JssLink}
           isExternal={props.fields.Linkedin?.value?.target == '_blank'}
-          fontSize="18px"
-          mt={3}
-          textDecoration="underline"
-          color="#28327D"
+          _hover={{ color: 'inherit', textDecoration: 'none' }}
           field={props.fields.Linkedin}
         />
       )}
@@ -115,10 +120,7 @@ export const Default = (props: PersonProps): JSX.Element => {
         <Link
           as={JssLink}
           isExternal={props.fields.Twitter?.value?.target == '_blank'}
-          fontSize="18px"
-          mt={3}
-          textDecoration="underline"
-          color="#28327D"
+          _hover={{ color: 'inherit', textDecoration: 'none' }}
           field={props.fields.Twitter}
         />
       )}
diff --git a/src/Project/Sugcon2024/Sugcon/src/components/List Components/PeopleGrid.tsx b/src/Project/Sugcon2024/Sugcon/src/components/List Components/PeopleGrid.tsx
index fc20aaa30..8a822569c 100644
--- a/src/Project/Sugcon2024/Sugcon/src/components/List Components/PeopleGrid.tsx	
+++ b/src/Project/Sugcon2024/Sugcon/src/components/List Components/PeopleGrid.tsx	
@@ -62,6 +62,7 @@ export const Default = (props: PeopleGridProps): JSX.Element => {
             const pp: PersonProps = {
               params: props.params,
               fields: person.fields,
+              isPeopleGrid: true,
             };
             return <Person key={idx} {...pp}></Person>;
           })}
diff --git a/src/Project/Sugcon2024/Sugcon/src/components/List Components/SpeakersGrid.tsx b/src/Project/Sugcon2024/Sugcon/src/components/List Components/SpeakersGrid.tsx
index 54032f7a2..13df903fa 100644
--- a/src/Project/Sugcon2024/Sugcon/src/components/List Components/SpeakersGrid.tsx	
+++ b/src/Project/Sugcon2024/Sugcon/src/components/List Components/SpeakersGrid.tsx	
@@ -132,7 +132,7 @@ export const Default = (props: PeopleGridProps): JSX.Element => {
 
       <SimpleGrid
         w="full"
-        columns={{ base: 1, md: 2, lg: Math.ceil(cols / 2), xl: cols }} // Using Math.ceil so odd numbers round up.
+        columns={{ base: 1, md: 2, lg: 3, xl: 4, '2xl': cols }}
         mt={10}
         gap="18px"
         justifyItems="center"

From 9084da7fe6c56d2293fac7469e6bad8387761a6f Mon Sep 17 00:00:00 2001
From: Matthew Gisonno <mgisonno@degdigital.com>
Date: Thu, 4 Apr 2024 06:17:13 -0700
Subject: [PATCH 2/2] Update to use stylesheets instead.

---
 .../Sugcon/src/assets/sass/components/index.scss     |  1 +
 .../people-grid/_people-grid-container.scss          | 11 +++++++++++
 .../assets/sass/components/people-grid/index.scss    |  1 +
 .../speakers-grid/_speakers-grid-container.scss      |  6 ++++++
 .../assets/sass/components/speakers-grid/index.scss  |  2 ++
 .../src/components/Basic Components/Person.tsx       | 12 ++----------
 .../src/components/List Components/PeopleGrid.tsx    |  2 +-
 .../src/components/List Components/SpeakersGrid.tsx  |  2 +-
 8 files changed, 25 insertions(+), 12 deletions(-)
 create mode 100644 src/Project/Sugcon2024/Sugcon/src/assets/sass/components/people-grid/_people-grid-container.scss
 create mode 100644 src/Project/Sugcon2024/Sugcon/src/assets/sass/components/speakers-grid/_speakers-grid-container.scss
 create mode 100644 src/Project/Sugcon2024/Sugcon/src/assets/sass/components/speakers-grid/index.scss

diff --git a/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/index.scss b/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/index.scss
index 4d84b36b9..eb0dda20c 100644
--- a/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/index.scss
+++ b/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/index.scss
@@ -15,5 +15,6 @@
 @import 'link-list';
 @import 'rich-text';
 @import 'people-grid';
+@import 'speakers-grid';
 @import 'icon-link-list';
 
diff --git a/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/people-grid/_people-grid-container.scss b/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/people-grid/_people-grid-container.scss
new file mode 100644
index 000000000..d619a4cc5
--- /dev/null
+++ b/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/people-grid/_people-grid-container.scss
@@ -0,0 +1,11 @@
+.people-grid-container {
+  &:not(.red-linear-gradient) {
+    color: #000;
+
+    & .person-job-role,
+    & .person-company {
+      color: #707070;
+    }
+  }
+}
+
diff --git a/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/people-grid/index.scss b/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/people-grid/index.scss
index f4e2a1238..2c41b4926 100644
--- a/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/people-grid/index.scss
+++ b/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/people-grid/index.scss
@@ -1 +1,2 @@
 @import 'red-linear-gradient';
+@import 'people-grid-container';
diff --git a/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/speakers-grid/_speakers-grid-container.scss b/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/speakers-grid/_speakers-grid-container.scss
new file mode 100644
index 000000000..237b5aac4
--- /dev/null
+++ b/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/speakers-grid/_speakers-grid-container.scss
@@ -0,0 +1,6 @@
+.speakers-grid-container {
+  & .person-job-role,
+  & .person-company {
+    color: #707070;
+  }
+}
diff --git a/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/speakers-grid/index.scss b/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/speakers-grid/index.scss
new file mode 100644
index 000000000..e3e3c7d4a
--- /dev/null
+++ b/src/Project/Sugcon2024/Sugcon/src/assets/sass/components/speakers-grid/index.scss
@@ -0,0 +1,2 @@
+@import 'speakers-grid-container';
+
diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Person.tsx b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Person.tsx
index d623c2061..df4335d74 100644
--- a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Person.tsx	
+++ b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Person.tsx	
@@ -83,18 +83,10 @@ export const Default = (props: PersonProps): JSX.Element => {
           <JssText field={props.fields.Name} />
         </Heading>
       )}
-      <Text
-        fontSize={props.isPeopleGrid ? '18px' : '16px'}
-        color={props.isPeopleGrid ? 'inherit' : 'sugcon.gray.500'}
-        mb={0}
-      >
+      <Text className="person-job-role" mb={0}>
         <JssText field={props.fields.JobRole} />
       </Text>
-      <Text
-        fontSize={props.isPeopleGrid ? '18px' : '16px'}
-        color={props.isPeopleGrid ? 'inherit' : 'sugcon.gray.500'}
-        mb="13px"
-      >
+      <Text className="person-company" mb="13px">
         <JssText field={props.fields.Company} />
       </Text>
       {(isEditorActive() ||
diff --git a/src/Project/Sugcon2024/Sugcon/src/components/List Components/PeopleGrid.tsx b/src/Project/Sugcon2024/Sugcon/src/components/List Components/PeopleGrid.tsx
index 8a822569c..415bb5d03 100644
--- a/src/Project/Sugcon2024/Sugcon/src/components/List Components/PeopleGrid.tsx	
+++ b/src/Project/Sugcon2024/Sugcon/src/components/List Components/PeopleGrid.tsx	
@@ -47,7 +47,7 @@ export const Default = (props: PeopleGridProps): JSX.Element => {
   }
 
   return (
-    <Box w="100%" mt={20} className={clsx(props?.params?.Styles)}>
+    <Box w="100%" mt={20} className={clsx('people-grid-container', props?.params?.Styles)}>
       <LayoutFlex flexGrow="1" flexDirection="column" align="start">
         <Heading as={JssText} field={props.fields.Headline} tag="h2" size="lg" />
 
diff --git a/src/Project/Sugcon2024/Sugcon/src/components/List Components/SpeakersGrid.tsx b/src/Project/Sugcon2024/Sugcon/src/components/List Components/SpeakersGrid.tsx
index 13df903fa..0d1533111 100644
--- a/src/Project/Sugcon2024/Sugcon/src/components/List Components/SpeakersGrid.tsx	
+++ b/src/Project/Sugcon2024/Sugcon/src/components/List Components/SpeakersGrid.tsx	
@@ -127,7 +127,7 @@ export const Default = (props: PeopleGridProps): JSX.Element => {
   }
 
   return (
-    <Box w="100%" pr="0" pl="0" className={clsx(props?.params?.Styles)}>
+    <Box w="100%" pr="0" pl="0" className={clsx('speakers-grid-container', props?.params?.Styles)}>
       <Heading as={JssText} field={props.fields.Headline} tag="h2" size="lg" />
 
       <SimpleGrid