Fix styles and allow required and title in FormSection

EyeSeeTea · Jun 27, 2024 · 648a88d · 648a88d
1 parent 2338b34
commit 648a88d
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 12 deletions.
diff --git a/src/webapp/components/form-section/FormSection.tsx b/src/webapp/components/form-section/FormSection.tsx
@@ -6,23 +6,37 @@ import { Separator } from "../separator/Separator";
 import { IconButton } from "../icon-button/IconButton";
 
 type FormSectionProps = {
-    title: string;
+    title?: string;
+    required?: boolean;
     children: React.ReactNode;
     hasSeparator?: boolean;
     onClickInfo?: () => void;
     direction?: "row" | "column";
 };
 
 export const FormSection: React.FC<FormSectionProps> = React.memo(
-    ({ title, hasSeparator = false, children, onClickInfo, direction = "row" }) => {
+    ({
+        title,
+        hasSeparator = false,
+        children,
+        onClickInfo,
+        direction = "row",
+        required = false,
+    }) => {
         return (
             <FormSectionContainer>
                 {hasSeparator && <Separator margin="12px" />}
                 <Container direction={direction}>
-                    <TitleContainer>
-                        <RequiredText>{title}</RequiredText>
-                        {onClickInfo && <IconButton icon={<IconInfo24 />} onClick={onClickInfo} />}
-                    </TitleContainer>
+                    {title && (
+                        <TitleContainer>
+                            <RequiredText className={required ? "required" : ""}>
+                                {title}
+                            </RequiredText>
+                            {onClickInfo && (
+                                <IconButton icon={<IconInfo24 />} onClick={onClickInfo} />
+                            )}
+                        </TitleContainer>
+                    )}
                     <FormContainer>{children}</FormContainer>
                 </Container>
             </FormSectionContainer>
@@ -58,7 +72,8 @@ const RequiredText = styled.span`
     font-size: 0.875rem;
     font-weight: 700;
     white-space: nowrap;
-    &::after {
+
+    &.required::after {
         content: "*";
         color: ${props => props.theme.palette.common.red};
         margin-inline-start: 4px;

diff --git a/src/webapp/components/layout/side-bar/SideBarContent.tsx b/src/webapp/components/layout/side-bar/SideBarContent.tsx
@@ -50,7 +50,7 @@ export const SideBarContent: React.FC<SideBarContentProps> = React.memo(
         }, [history]);
 
         return (
-            <SideBarContainer>
+            <SideBarContainer hideOptions={hideOptions}>
                 {hideOptions ? null : children ? (
                     children
                 ) : showCreateEvent ? (
@@ -78,19 +78,18 @@ const StyledText = styled(ListItemText)<{ selected?: boolean }>`
         color: ${props => props.theme.palette.sidebar.text};
         font-weight: ${props => (props.selected ? 700 : 400)};
         font-size: 0.875rem;
+        padding-inline-start: 8px;
     }
 `;
 
-const SideBarContainer = styled.div`
+const SideBarContainer = styled.div<{ hideOptions?: boolean }>`
     display: flex;
     max-width: 245px;
+    width: ${props => (props.hideOptions ? "338px" : "initial")};
     background-color: ${props => props.theme.palette.sidebar.background};
     .MuiList-root {
         padding-block: 50px;
     }
-    .MuiListItem-root {
-        margin-inline: 8px;
-    }
     .MuiButtonBase-root {
         padding-inline: 24px;
         padding-block: 4px;