Skip to content

Commit

Permalink
fix: further styling fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Benjozork
Benjozork committed Jan 7, 2024
1 parent 8199c0b commit a4ff01f
Show file tree
Hide file tree
Showing 6 changed files with 63 additions and 69 deletions.
2 changes: 1 addition & 1 deletion src/renderer/components/AddonSection/Configure/TrackSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export const Track: React.FC<TrackProps> = ({ isSelected, isInstalled, handleSel
<div className={`w-1 h-12 rounded-r-xl transition-all duration-200 transform ${isSelected ? 'scale-y-100' : 'scale-y-50'}`}/>
<div className="flex flex-col px-3 py-2.5">
<span className="text-xl text-current">{track.name}</span>
<span className="text-3xl font-manrope font-medium text-current mt-0.5">{latestVersionName}</span>
<span className="text-3xl font-manrope font-medium text-current tracking-wider mt-0.5">{latestVersionName}</span>
</div>
{isInstalled && (
<Check className={`absolute right-4 text-cyan stroke-current`} strokeWidth={3}/>
Expand Down
12 changes: 5 additions & 7 deletions src/renderer/components/AddonSection/ReleaseNotes/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,13 @@ const ReleaseNoteCard = forwardRef<HTMLDivElement, ReleaseNoteCardProps>(({ rele
return (
<div ref={ref} className="border-2 border-navy-light p-7 rounded-lg">
<div className="flex flex-row items-center justify-between mb-3.5">
<div className="flex flex-row items-center gap-x-4">
<h1 className="text-4xl text-white font-semibold mb-0">{release.name}</h1>
<div className="flex flex-row items-center gap-x-4">
<h1 className="text-4xl text-white font-semibold m-0 p-0">{release.name}</h1>
{isLatest && (
<div className="text-cyan bg-cyan bg-opacity-20 font-semibold rounded-full px-6">
Latest
</div>
<div className="text-2xl text-cyan mt-1 bg-cyan bg-opacity-20 font-semibold rounded-full px-6">Latest</div>
)}
</div>
<div className="text-white">
<div className="text-2xl text-white">
{dateFormat(new Date(release.publishedAt), dateLayout)}
</div>
</div>
Expand Down Expand Up @@ -147,7 +145,7 @@ export const ReleaseNotes = ({ addon }: {addon: Addon}): JSX.Element => {

<h2 className="text-white">Stable Version</h2>
</div>
{ releaseComponent ?? <DummyComponent/> }
{releaseComponent ?? <DummyComponent />}
</div>
</div>
);
Expand Down
79 changes: 38 additions & 41 deletions src/renderer/components/LocalApiConfigEditUI/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { FC, useEffect, useState } from 'react';
import * as print from 'pdf-to-printer';
import { PromptModal, useModals } from '../Modal';
import { ButtonType } from '../Button';
import { Button, ButtonType } from '../Button';
import fs from 'fs';
import path from 'path';
import { Directories } from 'renderer/utils/Directories';
Expand Down Expand Up @@ -131,30 +131,15 @@ export const LocalApiConfigEditUI: FC = () => {

<div className='flex flex-row space-x-4'>
{changesBeenMade && (
<button
className='flex items-center justify-center px-8 py-2 border-2 border-utility-red rounded-md transition duration-100 bg-utility-red hover:bg-navy text-white'
onClick={handleDiscard}
>
Discard
</button>
<Button className="h-16" type={ButtonType.Danger} onClick={handleDiscard}>Discard</Button>
)}

{!isDefaultConfig && (
<button
className='flex items-center justify-center px-8 py-2 border-2 border-utility-red rounded-md transition duration-100 bg-utility-red hover:bg-navy text-white'
onClick={handleReset}
>
Reset
</button>
<Button className="h-16" type={ButtonType.Danger} onClick={handleReset}>Reset</Button>
)}

{changesBeenMade && (
<button
className='flex items-center justify-center px-16 py-2 border-2 border-utility-green rounded-md transition duration-100 bg-utility-green hover:bg-navy text-white'
onClick={handleConfigSave}
>
Save
</button>
<Button className="h-16" type={ButtonType.Positive} onClick={handleConfigSave}>Save</Button>
)}
</div>
</div>
Expand All @@ -164,8 +149,7 @@ export const LocalApiConfigEditUI: FC = () => {
<h3 className='text-white mb-0'>Server</h3>

<div className='divide-y divide-gray-600'>
<div className='flex flex-row items-center justify-between text-white py-4'>
<p>Port</p>
<SimBridgeSettingItem name="Port">
<input className="text-center" value={config.server.port} type="number" onChange={event => setConfig(old => ({
...old,
server: {
Expand All @@ -174,25 +158,24 @@ export const LocalApiConfigEditUI: FC = () => {
},
}))}
/>
</div>
</SimBridgeSettingItem>
</div>
</div>
<div>
<h3 className='text-white mb-0'>Printer</h3>

<div className='divide-y divide-gray-600'>
<div className='flex flex-row items-center justify-between text-white py-4'>
<p>Enabled</p>
<SimBridgeSettingItem name="Enabled">
<Toggle value={config.printer.enabled} onToggle={value => setConfig(old => ({
...old,
printer: {
...old.printer,
enabled: value,
},
}))} />
</div>
<div className='flex flex-row items-center justify-between text-white py-4'>
<p>Printer Name</p>
</SimBridgeSettingItem>

<SimBridgeSettingItem name="Printer Name">
<select
value={config.printer.printerName ?? ''}
onChange={event => setConfig(old => ({
Expand All @@ -202,50 +185,64 @@ export const LocalApiConfigEditUI: FC = () => {
printerName: event.target.value ? event.target.value : null,
},
}))}
className="text-base text-white w-auto px-3.5 py-2.5 rounded-md outline-none bg-navy-light border-2 border-navy cursor-pointer"
className="text-xl text-white w-auto px-3.5 py-2.5 rounded-md outline-none bg-navy-light border-2 border-navy cursor-pointer"
>
<option value=''>None</option>
{printers.map(p => (
<option key={p.name} value={p.name}>{p.name}</option>
))}
</select>
</div>
<div className='flex flex-row items-center justify-between text-white py-4'>
<p>Font Size</p>
<input className="text-center" value={config.printer.fontSize} type="number" onChange={event => setConfig(old => ({
</SimBridgeSettingItem>

<SimBridgeSettingItem name="Font Size">
<input className="text-xl text-center" value={config.printer.fontSize} type="number" onChange={event => setConfig(old => ({
...old,
printer: {
...old.printer,
fontSize: parseInt(event.target.value),
},
}))}
/>
</div>
<div className='flex flex-row items-center justify-between text-white py-4'>
<p>Paper Size</p>
<input className="text-center" value={config.printer.paperSize} onChange={event => setConfig(old => ({
</SimBridgeSettingItem>

<SimBridgeSettingItem name="Paper Size">
<input className="text-xl text-center" value={config.printer.paperSize} onChange={event => setConfig(old => ({
...old,
printer: {
...old.printer,
paperSize: event.target.value,
},
}))}
/>
</div>
<div className='flex flex-row items-center justify-between text-white py-4'>
<p>Margin</p>
<input className="text-center" value={config.printer.margin} type="number" onChange={event => setConfig(old => ({
</SimBridgeSettingItem>

<SimBridgeSettingItem name="Margin">
<input className="text-xl text-center" value={config.printer.margin} type="number" onChange={event => setConfig(old => ({
...old,
printer: {
...old.printer,
margin: parseFloat(event.target.value),
},
}))}
/>
</div>
</SimBridgeSettingItem>
</div>
</div>
</div>
</div>
);
};

interface SimBridgeSettingItemProps {
name: string,
}

const SimBridgeSettingItem: React.FC<SimBridgeSettingItemProps> = ({ name, children }) => {
return (
<div className='flex flex-row items-center justify-between text-xl text-white py-4'>
<p className="m-0 p-0">{name}</p>

{children}
</div>
);
};
33 changes: 16 additions & 17 deletions src/renderer/components/SettingsSection/Download.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,37 +16,36 @@ interface SettingItemProps<T> {
setValue: (value: T) => void;
}

const MsfsCommunityPathSettingItem = ({ value, setValue }: SettingItemProps<string>): JSX.Element => {
interface PathSettingItemProps extends SettingItemProps<string> {
name: string,
callback: () => Promise<string>;
}

const PathSettingItem: React.FC<PathSettingItemProps> = ({ value, setValue, name, callback }) => {
const handleClick = async () => {
const path = await setupMsfsCommunityPath();
const path = await callback();

if (path) {
setValue(path);
}
};

return (
<SettingsItem name="MSFS Community Directory">
<div className="text-white hover:text-gray-400 cursor-pointer underline transition duration-200" onClick={handleClick}>{value}</div>
<SettingsItem name={name}>
<div className="text-xl text-white hover:text-gray-400 cursor-pointer underline transition duration-200" onClick={handleClick}>{value}</div>
</SettingsItem>
);
};

const InstallPathSettingItem = ({ value, setValue }: SettingItemProps<string>): JSX.Element => {
const handleClick = async () => {
const path = await setupInstallPath();

if (path) {
setValue(path);
}
};
const MsfsCommunityPathSettingItem = ({ value, setValue }: SettingItemProps<string>): JSX.Element =>
(
<PathSettingItem value={value} setValue={setValue} name="MSFS Community Directory" callback={setupMsfsCommunityPath} />
);

return (
<SettingsItem name="Install Directory">
<div className="text-white hover:text-gray-400 cursor-pointer underline transition duration-200" onClick={handleClick}>{value}</div>
</SettingsItem>
const InstallPathSettingItem = ({ value, setValue }: SettingItemProps<string>): JSX.Element =>
(
<PathSettingItem value={value} setValue={setValue} name="Install Directory" callback={setupInstallPath}/>
);
};

const TempLocationSettingItem = ({ value, setValue }: SettingItemProps<string>): JSX.Element => {
const handleClick = async () => {
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/components/SettingsSection/General.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const DateLayoutItem = ({ value, setValue }: SettingItemProps<string>) => {
value={value}
onChange={event => handleSelect(event.currentTarget.value)}
name="Date Layout"
className="text-base text-white w-60 px-3.5 py-2.5 rounded-md outline-none bg-navy-light border-2 border-navy rounded-md cursor-pointer"
className="text-xl text-white w-60 px-3.5 py-2.5 rounded-md outline-none bg-navy-light border-2 border-navy rounded-md cursor-pointer"
>
<option value={'yyyy/mm/dd'}>YYYY/MM/DD</option>
<option value={'mm/dd/yyyy'}>MM/DD/YYYY</option>
Expand Down
4 changes: 2 additions & 2 deletions src/renderer/components/Toggle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ interface ToggleProps {
}

export const Toggle: FC<ToggleProps> = ({ value, onToggle, scale = 1, bgColor = 'bg-navy-light', onColor = 'bg-cyan-medium' }) => (
<div className={`flex items-center w-14 h-8 rounded-full cursor-pointer ${bgColor}`} onClick={() => onToggle(!value)} style={{ transform: `scale(${scale})` }}>
<div className={`w-6 h-6 bg-gray-400 rounded-full transition mx-1.5 duration-200 transform ${value && `${onColor}`}`} style={{ transform: `translate(${value ? '12px' : '0'}, -0.5px)` }} />
<div className={`flex text-3xl items-center w-14 h-8 rounded-full cursor-pointer ${bgColor}`} onClick={() => onToggle(!value)} style={{ transform: `scale(${scale})` }}>
<div className={`w-6 h-6 bg-gray-400 rounded-full transition mx-1.5 duration-200 transform ${value && `${onColor}`}`} style={{ transform: `translate(${value ? '12px' : '1px'}, 0)` }} />
</div>
);

0 comments on commit a4ff01f

Please sign in to comment.