Updates to ScreenTitle and small tweaks (#1028)

minio · Oct 15, 2024 · cae8e2b · cae8e2b
1 parent 467e9e1
commit cae8e2b
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 79 deletions.
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
@@ -93,7 +93,7 @@ const Accordion: FC<AccordionProps> = ({
   sx,
 }) => {
   return (
-    <AccordionContainer id={id} sx={sx}>
+    <AccordionContainer id={id} sx={sx} className={"accordion"}>
       <AccordionTitleBar
         onClick={() => (!disabled ? onTitleClick() : null)}
         className={`accordionTitle ${disabled ? "disabled" : ""}`}

diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx
@@ -38,8 +38,7 @@ const BoxParent = styled.div<BoxProps & React.HTMLAttributes<HTMLDivElement>>(
         border: `${get(theme, "box.border", lightV2.disabledGrey)} 1px solid`,
         borderRadius: customBorderRadius || 16,
         padding: customBorderPadding || 24,
-        boxShadow: get(theme, "box.shadow", "none"),
-        backgroundColor: get(theme, "box.backgroundColor", lightV2.white),
+        backgroundColor: theme.colors["Color/Neutral/colorWhite"],
       };
     }
 

diff --git a/src/components/BoxedIcon/BoxedIcon.tsx b/src/components/BoxedIcon/BoxedIcon.tsx
@@ -53,7 +53,11 @@ const IconContainer = styled.div<IBoxedIconProps>(({ theme, sx }) => ({
 }));
 
 const BoxedIcon: FC<IBoxedIconProps> = ({ sx, children }) => {
-  return <IconContainer sx={sx}>{children}</IconContainer>;
+  return (
+    <IconContainer sx={sx} className={"boxedIcon"}>
+      {children}
+    </IconContainer>
+  );
 };
 
 export default BoxedIcon;
diff --git a/src/components/GlobalStyles/GlobalStyles.tsx b/src/components/GlobalStyles/GlobalStyles.tsx
@@ -282,6 +282,13 @@ const GlobalStyles = createGlobalStyle`
         font-weight: 600;
         line-height: 28px;
     }
+    .Heading3 {
+        font-family: Geist;
+        font-size: 30px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 38px;
+    }
     `;
     }}
 `;

diff --git a/src/components/ScreenTitle/ScreenTitle.stories.tsx b/src/components/ScreenTitle/ScreenTitle.stories.tsx
@@ -42,10 +42,10 @@ const Template: Story<ScreenTitleProps> = (args: ScreenTitleProps) => (
 export const Default = Template.bind({});
 Default.args = {
   title: "Object Title",
+  superTitle: "Super Title",
   titleOptions: [
     { title: "Created", value: "Wed, Feb 28 2024 · 23:56:02" },
     { title: "Access", value: "PUBLIC" },
-    { title: "Size", value: "1,2024 MiB - 2 Objects" },
   ],
   actions: (
     <Fragment>
@@ -84,9 +84,10 @@ NoIcon.args = {
 
 export const CustomSubElement = Template.bind({});
 CustomSubElement.args = {
+  icon: <TestIcon />,
+  superTitle: "Super Title",
   title: "Object Title",
   titleOptions: [
-    { title: "Created", value: "Wed, Feb 28 2024 · 23:56:02" },
     { title: "Access", value: "PUBLIC" },
     { title: "Size", value: "1,2024 MiB - 2 Objects" },
   ],
@@ -101,21 +102,6 @@ CustomSubElement.args = {
       </Button>
     </Fragment>
   ),
-  icon: <TestIcon />,
-  subTitle: (
-    <Box
-      sx={{
-        display: "flex",
-        alignItems: "center",
-        color: "#080",
-        fontSize: 12,
-        gap: 6,
-        "& svg": { width: 12, height: 12, minWidth: 12, minHeight: 12 },
-      }}
-    >
-      <TestIcon /> <span>Online</span>
-    </Box>
-  ),
 };
 
 export const NoSubItems = Template.bind({});

diff --git a/src/components/ScreenTitle/ScreenTitle.tsx b/src/components/ScreenTitle/ScreenTitle.tsx
@@ -43,8 +43,8 @@ const ScreenTitleContainer = styled.div<ScreenTitleContainerProps>(
       display: "flex",
       alignItems:
         !subTitle && !titleOptions ? "center" : ("flex-start" as const),
+      gap: 24,
       justifyContent: "space-between",
-      padding: 8,
       width: "100%",
     },
     "& .headerBarIcon": {
@@ -54,64 +54,40 @@ const ScreenTitleContainer = styled.div<ScreenTitleContainerProps>(
         height: 44,
       },
     },
-    "& .headerBarSubheader": {
-      color: get(theme, `screenTitle.subtitleColor`, lightV2.mutedText),
-      fontSize: 14,
-    },
     "& .titleColumn": {
-      height: !subTitle && !titleOptions ? "60px" : ("auto" as const),
+      height: !subTitle && !titleOptions ? "56px" : ("auto" as const),
       justifyContent: "center",
       display: "flex",
       flexFlow: "column",
       alignItems: "flex-start",
-      gap: 4 as const,
+      gap: 0,
       "& .titleElement": {
-        fontSize: 24,
-        fontWeight: 600,
-        fontStyle: "normal" as const,
-        lineHeight: "28px",
-        color: get(
-          theme,
-          `screenTitle.titleColor`,
-          themeColors["Color/Neutral/Text/colorText"].lightMode,
-        ),
+        color: theme.colors["Color/Neutral/Text/colorTextHeading"],
       },
-      "& .options": {
-        display: "flex",
-        gap: 28,
-        "& .title": {
-          fontSize: 12,
-          fontStyle: "normal",
-          fontWeight: 400,
-          lineHeight: "16px",
-          color: get(
-            theme,
-            `screenTitle.subtitleColor`,
-            themeColors["Color/Neutral/Text/colorTextTertiary"].lightMode,
-          ),
-        },
-        "& .value": {
-          fontSize: 12,
-          fontStyle: "normal",
-          fontWeight: 600,
-          lineHeight: "16px",
-          color: get(
-            theme,
-            `screenTitle.subtitleColor`,
-            themeColors["Color/Neutral/Text/colorTextLabel"].lightMode,
-          ),
-        },
+      "& .subTitle, .superTitle": {
+        color: theme.colors["Color/Neutral/Text/colorTextQuaternary"],
       },
     },
     "& .leftItems": {
+      flexGrow: 1,
       display: "flex",
-      alignItems: "flex-start" as const,
+      justifyContent: "space-between",
       gap: 16,
+      "& .titleColumn": {
+        flexGrow: "1",
+      },
+      "& .options": {
+        display: "flex",
+        alignItems: "center",
+        color: theme.colors["Color/Neutral/Text/colorTextTertiary"],
+        gap: 24,
+      },
     },
     "& .rightItems": {
       display: "flex",
       alignItems: "center",
-      gap: 10,
+      gap: 8,
+      height: "100%",
     },
     "& .optionElement": {
       display: "flex",
@@ -146,6 +122,7 @@ const ScreenTitleContainer = styled.div<ScreenTitleContainerProps>(
 
 const ScreenTitle: FC<ScreenTitleProps & HTMLAttributes<HTMLDivElement>> = ({
   icon,
+  superTitle = "",
   subTitle = "",
   title,
   actions,
@@ -157,29 +134,45 @@ const ScreenTitle: FC<ScreenTitleProps & HTMLAttributes<HTMLDivElement>> = ({
     <ScreenTitleContainer
       className={"screen-title"}
       sx={sx}
+      superTitle={superTitle}
       subTitle={subTitle}
       titleOptions={titleOptions}
       {...restProps}
     >
       <Box className={"stContainer"}>
         <Box className={"leftItems"}>
-          {icon ? <BoxedIcon>{icon}</BoxedIcon> : null}
+          {icon ? (
+            <BoxedIcon
+              sx={(theme) => ({
+                "& .min-icon": {
+                  color: theme.colors["Color/Brand/_minio/Raspberry"],
+                  width: 24,
+                  height: 24,
+                },
+              })}
+            >
+              {icon}
+            </BoxedIcon>
+          ) : null}
           <Box className={"titleColumn"}>
-            <Box className={"titleElement"}>{title}</Box>
-            {subTitle && (
-              <span className={"headerBarSubheader"}>{subTitle}</span>
+            {superTitle && (
+              <span className={"superTitle SM_Normal"}>{superTitle}</span>
             )}
-            {titleOptions && (
-              <Box className={"options"}>
-                {titleOptions?.map((optionItem, index) => (
-                  <Box className={"optionElement"} key={`option-${index}`}>
-                    <Box className={"title"}>{optionItem.title}</Box>
-                    <Box className={"value"}>{optionItem.value}</Box>
-                  </Box>
-                ))}
-              </Box>
+            <Box className={"titleElement Heading3"}>{title}</Box>
+            {subTitle && (
+              <span className={"subTitle SM_Normal"}>{subTitle}</span>
             )}
           </Box>
+          {titleOptions && (
+            <Box className={"options"}>
+              {titleOptions?.map((optionItem, index) => (
+                <Box className={"optionElement"} key={`option-${index}`}>
+                  <Box className={"title SM_Normal"}>{optionItem.title}</Box>
+                  <Box className={"value SM_Strong"}>{optionItem.value}</Box>
+                </Box>
+              ))}
+            </Box>
+          )}
         </Box>
         {actions && <Box className={"rightItems"}>{actions}</Box>}
       </Box>

diff --git a/src/components/ScreenTitle/ScreenTitle.types.ts b/src/components/ScreenTitle/ScreenTitle.types.ts
@@ -20,6 +20,7 @@ import { OverrideTheme } from "../../global/global.types";
 
 export interface ScreenTitleProps {
   icon: React.ReactNode;
+  superTitle?: React.ReactNode;
   subTitle?: React.ReactNode;
   title: string;
   actions?: React.ReactNode;
@@ -28,6 +29,7 @@ export interface ScreenTitleProps {
 }
 
 export interface ScreenTitleContainerProps {
+  superTitle?: React.ReactNode;
   subTitle?: React.ReactNode;
   titleOptions?: ScreenTitleOptions[];
   sx?: OverrideTheme;
@@ -36,5 +38,5 @@ export interface ScreenTitleContainerProps {
 
 export interface ScreenTitleOptions {
   title: string;
-  value: string;
+  value?: string;
 }
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
@@ -76,7 +76,7 @@ const TabsContainer = styled.div<TabsContainerProps>(
       "& .tabsPanels": {
         flexGrow: 1,
         width: "100%",
-        padding: 15,
+        padding: 24,
         border: horizontal
           ? "none"
           : `${get(