Random frontend changes. (#197)

* Only countup on first load.

* random fixes

packages/interface/src/components/settings/SettingsContainer.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+interface SettingsContainerProps {
+	children: React.ReactNode;
+}
+
+export const SettingsContainer: React.FC<SettingsContainerProps> = (props) => {
+	return <div className="flex flex-col flex-grow max-w-4xl space-y-4 w-ful">{props.children}</div>;
+};

packages/interface/src/components/settings/SettingsHeader.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+interface SettingsHeaderProps {
+	title: string;
+	description: string;
+}
+
+export const SettingsHeader: React.FC<SettingsHeaderProps> = (props) => {
+	return (
+		<div className="mt-3 mb-3">
+			<h1 className="text-2xl font-bold">{props.title}</h1>
+			<p className="mt-1 text-sm text-gray-400">{props.description}</p>
+			<hr className="mt-4 border-gray-550" />
+		</div>
+	);
+};

packages/interface/src/screens/Settings.tsx

@@ -33,7 +33,7 @@ const Heading: React.FC<{ className?: string; children: string }> = ({ children,
 export const SettingsScreen: React.FC<{}> = () => {
 	return (
 		<div className="flex flex-row w-full">
-			<div className="h-full border-r max-w-[200px] border-gray-100 w-60 dark:border-gray-550">
+			<div className="h-full border-r max-w-[200px] flex-shrink-0 border-gray-100 w-60 dark:border-gray-550">
 				<div data-tauri-drag-region className="w-full h-7" />
 				<div className="p-5 pt-0">
 					<Heading className="mt-0">Client</Heading>
@@ -84,7 +84,7 @@ export const SettingsScreen: React.FC<{}> = () => {
 					</SidebarLink>
 				</div>
 			</div>
-			<div className="">
+			<div className="w-full">
 				<div data-tauri-drag-region className="w-full h-7" />
 				<div className="flex flex-grow-0 w-full h-full max-h-screen custom-scroll page-scroll">
 					<div className="flex flex-grow px-12 pb-5">

packages/interface/src/screens/settings/ExperimentalSettings.tsx

@@ -3,6 +3,8 @@ import React from 'react';
 import { useStore } from '../../components/device/Stores';
 import { Toggle } from '../../components/primitive';
 import { InputContainer } from '../../components/primitive/InputContainer';
+import { SettingsContainer } from '../../components/settings/SettingsContainer';
+import { SettingsHeader } from '../../components/settings/SettingsHeader';
 
 export default function ExperimentalSettings() {
 	// const locations = useBridgeQuery("SysGetLocation")
@@ -10,12 +12,9 @@ export default function ExperimentalSettings() {
 	const experimental = useStore((state) => state.experimental);
 
 	return (
-		<div className="flex flex-col flex-grow max-w-4xl space-y-4">
+		<SettingsContainer>
 			{/*<Button size="sm">Add Location</Button>*/}
-			<div className="mt-3 mb-3">
-				<h1 className="text-2xl font-bold">Experimental</h1>
-				<p className="mt-1 text-sm text-gray-400">Experimental features within Spacedrive.</p>
-			</div>
+			<SettingsHeader title="Experimental" description="Experimental features within Spacedrive." />
 			<InputContainer
 				mini
 				title="Debug Menu"
@@ -33,6 +32,6 @@ export default function ExperimentalSettings() {
 					/>
 				</div>
 			</InputContainer>
-		</div>
+		</SettingsContainer>
 	);
 }

packages/interface/src/screens/settings/GeneralSettings.tsx

@@ -6,17 +6,18 @@ import React, { useState } from 'react';
 import { InputContainer } from '../../components/primitive/InputContainer';
 import Listbox from '../../components/primitive/Listbox';
 import Slider from '../../components/primitive/Slider';
+import { SettingsContainer } from '../../components/settings/SettingsContainer';
+import { SettingsHeader } from '../../components/settings/SettingsHeader';
 
 export default function GeneralSettings() {
 	const { data: volumes } = useBridgeQuery('SysGetVolumes');
 
 	return (
-		<div className="flex flex-col flex-grow max-w-4xl space-y-4">
-			<div className="mt-3 mb-3">
-				<h1 className="text-2xl font-bold">General Settings</h1>
-				<p className="mt-1 text-sm text-gray-400">Basic settings related to this client</p>
-				{/* <hr className="mt-4 border-gray-550" /> */}
-			</div>
+		<SettingsContainer>
+			<SettingsHeader
+				title="General Settings"
+				description="Basic settings related to this client."
+			/>
 			<p className="px-5 py-3 mb-3 text-sm text-gray-400 rounded-md bg-gray-50 dark:text-gray-400 dark:bg-gray-600">
 				<b>Note: </b>This is a pre-alpha build of Spacedrive, many features are yet to be
 				functional.
@@ -64,6 +65,6 @@ export default function GeneralSettings() {
 			</InputContainer>
 
 			{/* <div className="">{JSON.stringify({ config })}</div> */}
-		</div>
+		</SettingsContainer>
 	);
 }

packages/interface/src/screens/settings/LibrarySettings.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 
 import { Toggle } from '../../components/primitive';
 import { InputContainer } from '../../components/primitive/InputContainer';
+import { SettingsContainer } from '../../components/settings/SettingsContainer';
+import { SettingsHeader } from '../../components/settings/SettingsHeader';
 
 type LibrarySecurity = 'public' | 'password' | 'vault';
 
@@ -10,14 +12,12 @@ export default function LibrarySettings() {
 	const [encryptOnCloud, setEncryptOnCloud] = React.useState<boolean>(false);
 
 	return (
-		<div className="flex flex-col flex-grow max-w-4xl space-y-4">
-			{/*<Button size="sm">Add Location</Button>*/}
-			<div className="mt-3 mb-3">
-				<h1 className="text-2xl font-bold">Library database</h1>
-				<p className="mt-1 text-sm text-gray-400">
-					The database contains all library data and file metadata.
-				</p>
-			</div>
+		<SettingsContainer>
+			{/* <Button size="sm">Add Location</Button> */}
+			<SettingsHeader
+				title="Library database"
+				description="The database contains all library data and file metadata."
+			/>
 			<InputContainer
 				mini
 				title="Encrypt on cloud"
@@ -27,6 +27,6 @@ export default function LibrarySettings() {
 					<Toggle value={encryptOnCloud} onChange={setEncryptOnCloud} size={'sm'} />
 				</div>
 			</InputContainer>
-		</div>
+		</SettingsContainer>
 	);
 }

packages/interface/src/screens/settings/LocationSettings.tsx

@@ -2,6 +2,8 @@ import { Button } from '@sd/ui';
 import React from 'react';
 
 import { InputContainer } from '../../components/primitive/InputContainer';
+import { SettingsContainer } from '../../components/settings/SettingsContainer';
+import { SettingsHeader } from '../../components/settings/SettingsHeader';
 
 const exampleLocations = [
 	{ option: 'Macintosh HD', key: 'macintosh_hd' },
@@ -13,14 +15,15 @@ export default function LocationSettings() {
 	// const locations = useBridgeQuery("SysGetLocation")
 
 	return (
-		<div className="flex flex-col flex-grow max-w-4xl space-y-4">
+		<SettingsContainer>
 			{/*<Button size="sm">Add Location</Button>*/}
+			<SettingsHeader title="Locations" description="Manage your settings related to locations." />
 			<InputContainer
 				title="Something about a vault"
 				description="Local cache storage for media previews and thumbnails."
 			>
 				<div className="flex flex-row space-x-2"></div>
 			</InputContainer>
-		</div>
+		</SettingsContainer>
 	);
 }

packages/interface/src/screens/settings/SecuritySettings.tsx

@@ -2,10 +2,13 @@ import { Button } from '@sd/ui';
 import React from 'react';
 
 import { InputContainer } from '../../components/primitive/InputContainer';
+import { SettingsContainer } from '../../components/settings/SettingsContainer';
+import { SettingsHeader } from '../../components/settings/SettingsHeader';
 
 export default function SecuritySettings() {
 	return (
-		<div className="space-y-4">
+		<SettingsContainer>
+			<SettingsHeader title="Security" description="Keep your client safe." />
 			<InputContainer
 				title="Vault"
 				description="You'll need to set a passphrase to enable the vault."
@@ -15,6 +18,6 @@ export default function SecuritySettings() {
 					{/*<Input className="flex-grow" value="jeff" placeholder="/users/jamie/Desktop" />*/}
 				</div>
 			</InputContainer>
-		</div>
+		</SettingsContainer>
 	);
 }