styling changes

parseablehq · Jan 21, 2025 · 84b90f4 · 84b90f4
1 parent 5791da5
commit 84b90f4
Showing 1 changed file with 16 additions and 15 deletions.
diff --git a/src/pages/Stream/Views/Manage/Settings.tsx b/src/pages/Stream/Views/Manage/Settings.tsx
@@ -241,17 +241,12 @@ const HotTierConfig = (props: {
 					/>
 				</Group>
 			</Stack>
-			<Stack style={{ flexDirection: 'row', justifyContent: 'space-between', height: '5.8rem' }}>
-				<Stack gap={4} style={{ ...(hotTierNotSet ? { display: 'none' } : {}) }}>
-					<Text className={classes.fieldDescription}>Oldest Record:</Text>
-					<Text className={classes.fieldDescription}>
-						{_.isEmpty(oldestEntry) ? 'No Entries Stored' : formatDateWithTimezone(oldestEntry)}
-					</Text>
-				</Stack>
+			<Stack style={{ flexDirection: 'row', height: '6.8rem' }}>
 				<Stack style={{ width: hotTierNotSet ? '100%' : '50%' }} gap={isDirty || hotTierNotSet ? 16 : 4}>
-					<Stack style={{}} gap={12}>
+					<Stack gap={12}>
 						{streamType === 'UserDefined' ? (
 							<NumberInput
+								w={'50%'}
 								classNames={{ label: classes.fieldDescription }}
 								placeholder="Size in GiB"
 								key="size"
@@ -266,15 +261,15 @@ const HotTierConfig = (props: {
 						) : null}
 						<Text
 							className={classes.fieldDescription}
-							ta="end"
+							ta="start"
 							style={{ ...(isDirty || hotTierNotSet ? { display: 'none' } : {}) }}>
 							{humanizedUsedSize} used | {humanizedAvailableSize} available
 						</Text>
 					</Stack>
 					<Stack
 						style={{
 							flexDirection: 'row',
-							justifyContent: 'flex-end',
+							justifyContent: 'flex-start',
 							...(!isDirty || hotTierNotSet ? { display: 'none' } : {}),
 						}}
 						gap={12}>
@@ -301,12 +296,9 @@ const HotTierConfig = (props: {
 
 					{!hotTierNotSet && streamType === 'UserDefined' ? (
 						<Stack
-							style={{ alignItems: 'flex-end', paddingTop: '0.8rem', ...(hotTierNotSet ? { display: 'none' } : {}) }}>
+							style={{ alignItems: 'flex-start', paddingTop: '0.8rem', ...(hotTierNotSet ? { display: 'none' } : {}) }}>
 							<Box>
-								<Button
-									variant="outline"
-									styles={{ root: { border: '1px solid #EAECEF' }, inner: { color: '#211F1F' } }}
-									onClick={openDeleteModal}>
+								<Button variant="outline" onClick={openDeleteModal}>
 									Delete
 								</Button>
 							</Box>
@@ -321,6 +313,15 @@ const HotTierConfig = (props: {
 						</Box>
 					</Stack>
 				</Stack>
+				<Divider orientation="vertical" size={2} style={{ ...(hotTierNotSet ? { display: 'none' } : {}) }} />
+				<Stack
+					gap={4}
+					style={{ ...(hotTierNotSet ? { display: 'none' } : { display: 'flex', justifyContent: 'flex-start' }) }}>
+					<Text style={{ fontSize: '11.2px' }}>Oldest Record:</Text>
+					<Text className={classes.fieldDescription}>
+						{_.isEmpty(oldestEntry) ? 'No Entries Stored' : formatDateWithTimezone(oldestEntry)}
+					</Text>
+				</Stack>
 			</Stack>
 		</Stack>
 	);