Merge pull request #446 from matthewgisonno/bugfix/font-color-people-…

…grid Updates to Person, PeopleGrid, and SpeakersGrid components, Chakra Theme, and container css.
Sitecore · Apr 4, 2024 · c991933 · c991933
2 parents 710df20 + 9084da7
commit c991933
Show file tree

Hide file tree

Showing 10 changed files with 37 additions and 17 deletions.
diff --git 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
@@ -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/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/...ject/Sugcon2024/Sugcon/src/assets/sass/components/people-grid/_people-grid-container.scss b/...ject/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
@@ -1 +1,2 @@
 @import 'red-linear-gradient';
+@import 'people-grid-container';
diff --git a/.../Sugcon2024/Sugcon/src/assets/sass/components/speakers-grid/_speakers-grid-container.scss b/.../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
@@ -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
@@ -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,21 +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 className="person-job-role" mb={0}>
         <JssText field={props.fields.JobRole} />
       </Text>
-      <Text fontSize="16px" color="sugcon.gray.500" mb={0}>
+      <Text className="person-company" mb="13px">
         <JssText field={props.fields.Company} />
       </Text>
       {(isEditorActive() ||
         (props.params?.DisplaySocialLinks == '1' && props.fields.Linkedin?.value?.href !== '')) && (
         <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 +112,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
@@ -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" />
 
@@ -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
@@ -127,12 +127,12 @@ 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
         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"