diff --git a/src/App.scss b/src/App.scss index 794cdfe..6b61de3 100644 --- a/src/App.scss +++ b/src/App.scss @@ -20,7 +20,7 @@ limitations under the License. background-color: $app-background; background-image: url('./imgs/background.svg'); background-repeat: none; - background-position: 50% top; + background-position: 50% 10%; } @mixin spacer { diff --git a/src/components/ClientList.tsx b/src/components/ClientList.tsx index 3fdb745..fbef28f 100644 --- a/src/components/ClientList.tsx +++ b/src/components/ClientList.tsx @@ -27,11 +27,12 @@ import './ClientList.scss'; interface IProps { link: SafeLink; + rememberSelection: boolean; } -const ClientList: React.FC = ({ link }: IProps) => { +const ClientList: React.FC = ({ link, rememberSelection }: IProps) => { const [ - { rememberSelection, showOnlyDeviceClients, showExperimentalClients }, + { showOnlyDeviceClients, showExperimentalClients }, clientDispatcher, ] = useContext(ClientContext); const { uaResults } = useContext(UAContext); diff --git a/src/components/ClientSelection.scss b/src/components/ClientSelection.scss index 3900f77..4754359 100644 --- a/src/components/ClientSelection.scss +++ b/src/components/ClientSelection.scss @@ -17,14 +17,13 @@ limitations under the License. .advanced { margin: 0 5%; + display: grid; + row-gap: 20px; + .advancedOptions { display: flex; flex-direction: column; align-items: flex-start; } - - .clientList { - margin-top: 20px; - } } diff --git a/src/components/ClientSelection.tsx b/src/components/ClientSelection.tsx index 6a15ad4..794ba0a 100644 --- a/src/components/ClientSelection.tsx +++ b/src/components/ClientSelection.tsx @@ -14,12 +14,13 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { useContext } from 'react'; +import React, { useContext, useState } from 'react'; import './ClientSelection.scss'; import { ActionType, ClientContext } from '../contexts/ClientContext'; import ClientList from './ClientList'; import { SafeLink } from '../parser/types'; +import Button from './Button'; interface IProps { link: SafeLink; @@ -27,17 +28,16 @@ interface IProps { const ClientSelection: React.FC = ({ link }: IProps) => { const [clientState, clientStateDispatch] = useContext(ClientContext); + const [rememberSelection, setRememberSelection] = useState(false); const options = (
@@ -68,10 +68,24 @@ const ClientSelection: React.FC = ({ link }: IProps) => {
); + const clearSelection = + clientState.clientId !== null ? ( + + ) : null; + return (
{options} - + + {clearSelection}
); }; diff --git a/src/components/LinkPreview.tsx b/src/components/LinkPreview.tsx index 43abb10..8796751 100644 --- a/src/components/LinkPreview.tsx +++ b/src/components/LinkPreview.tsx @@ -92,15 +92,14 @@ const LinkPreview: React.FC = ({ link }: IProps) => { (async (): Promise => setContent(await invite({ link })))(); }, [link]); - const [{ rememberSelection, clientId }] = useContext(ClientContext); + const [{ clientId }] = useContext(ClientContext); // Select which client to link to - const displayClientId = - rememberSelection && clientId - ? clientId - : link.arguments.client - ? link.arguments.client - : null; + const displayClientId = clientId + ? clientId + : link.arguments.client + ? link.arguments.client + : null; const client = displayClientId ? clientMap[displayClientId] : null; diff --git a/src/contexts/ClientContext.ts b/src/contexts/ClientContext.ts index 52da9f2..0c78807 100644 --- a/src/contexts/ClientContext.ts +++ b/src/contexts/ClientContext.ts @@ -23,7 +23,6 @@ import { persistReducer } from '../utils/localStorage'; const STATE_SCHEMA = object({ clientId: string().nullable(), showOnlyDeviceClients: boolean(), - rememberSelection: boolean(), showExperimentalClients: boolean(), }); @@ -32,7 +31,7 @@ type State = TypeOf; // Actions are a discriminated union. export enum ActionType { SetClient = 'SET_CLIENT', - ToggleRememberSelection = 'TOGGLE_REMEMBER_SELECTION', + ClearClient = 'CLEAR_CLIENT', ToggleShowOnlyDeviceClients = 'TOGGLE_SHOW_ONLY_DEVICE_CLIENTS', ToggleShowExperimentalClients = 'TOGGLE_SHOW_EXPERIMENTAL_CLIENTS', } @@ -42,8 +41,8 @@ interface SetClient { clientId: ClientId; } -interface ToggleRememberSelection { - action: ActionType.ToggleRememberSelection; +interface ClearClient { + action: ActionType.ClearClient; } interface ToggleShowOnlyDeviceClients { @@ -56,13 +55,12 @@ interface ToggleShowExperimentalClients { export type Action = | SetClient - | ToggleRememberSelection + | ClearClient | ToggleShowOnlyDeviceClients | ToggleShowExperimentalClients; const INITIAL_STATE: State = { clientId: null, - rememberSelection: false, showOnlyDeviceClients: true, showExperimentalClients: false, }; @@ -78,11 +76,6 @@ export const [initialState, reducer] = persistReducer( ...state, clientId: action.clientId, }; - case ActionType.ToggleRememberSelection: - return { - ...state, - rememberSelection: !state.rememberSelection, - }; case ActionType.ToggleShowOnlyDeviceClients: return { ...state, @@ -93,8 +86,11 @@ export const [initialState, reducer] = persistReducer( ...state, showExperimentalClients: !state.showExperimentalClients, }; - default: - return state; + case ActionType.ClearClient: + return { + ...state, + clientId: null, + }; } } );