Add support for sublabels in cells

1 files changed, 27 insertions, 0 deletions

diff --git a/gui/src/renderer/components/cell/Label.tsx b/gui/src/renderer/components/cell/Label.tsx
index 3a64908315..b72f698255 100644
--- a/gui/src/renderer/components/cell/Label.tsx
+++ b/gui/src/renderer/components/cell/Label.tsx
@@ -12,6 +12,13 @@ const StyledLabel = styled.div<{ disabled: boolean }>(buttonText, (props) => ({
   flex: 1,
   color: props.disabled ? colors.white40 : colors.white,
   textAlign: 'left',
+
+  [`${LabelContainer} &&`]: {
+    marginTop: '5px',
+    marginBottom: 0,
+    height: '20px',
+    lineHeight: '20px',
+  },
 }));
 
 const StyledSubText = styled.span<{ disabled: boolean }>(tinyText, (props) => ({
@@ -38,6 +45,21 @@ const StyledTintedIcon = styled(ImageView).attrs((props: IImageViewProps) => ({
   },
 }));
 
+const StyledSubLabel = styled.div<{ disabled: boolean }>(tinyText, {
+  display: 'flex',
+  alignItems: 'center',
+  color: colors.white60,
+  marginBottom: '5px',
+  lineHeight: '14px',
+  height: '14px',
+});
+
+export const LabelContainer = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+});
+
 export function Label(props: React.HTMLAttributes<HTMLDivElement>) {
   const disabled = useContext(CellDisabledContext);
   return <StyledLabel disabled={disabled} {...props} />;
@@ -74,3 +96,8 @@ export function Icon(props: IImageViewProps) {
     </StyledIconContainer>
   );
 }
+
+export function SubLabel(props: React.HTMLAttributes<HTMLDivElement>) {
+  const disabled = useContext(CellDisabledContext);
+  return <StyledSubLabel disabled={disabled} {...props} />;
+}