feat: ui for reset application

package.json

@@ -217,4 +217,4 @@
 	"msw": {
 		"workerDirectory": "public"
 	}
-}
+}

src/components/FollowedRepositories/FollowedRepositories.svelte

@@ -27,7 +27,7 @@
 <section>
 	<AccountTitle>
 		Followed repositories
-		<button title="Share you list" on:click={() => (shareDisplayed = true)}
+		<button title="Share your list" on:click={() => (shareDisplayed = true)}
 			><Icons.Share /></button
 		>
 	</AccountTitle>

src/components/Modale/Modale.svelte

@@ -30,8 +30,6 @@
 		left: 50%;
 		z-index: 2;
 		width: calc(100vw - 10rem);
-		height: 100%;
-		max-height: calc(100vh - 10rem);
 		transform: translateX(-50%) translateY(-50%);
 		border-radius: 8px;
 		border: 1px solid rgba(255, 255, 255, 0.1);
@@ -40,6 +38,7 @@
 
 	.fullHeight {
 		height: calc(100vh - 10rem);
+		max-height: calc(100vh - 10rem);
 	}
 
 	button {

src/components/Settings/Settings.svelte

@@ -1,15 +1,18 @@
 <script lang="ts">
+	import AccountTitle from 'components/AccountTitle';
 	import Fieldset from 'components/Fieldset';
 	import Icons from 'components/icons';
+	import Modale from 'components/Modale';
 	import Range from 'components/Range';
 	import Switch from 'components/Switch';
 	import { ThemeEnum } from 'models/skizzle';
 	import SkizzleCache from 'shared/cache';
 	import { remote } from 'shared/remote';
-	import { isElectron, settings } from 'shared/stores/default.store';
+	import { isElectron,settings } from 'shared/stores/default.store';
 	import { onMount } from 'svelte';
 
 	let currentPlatform: string = navigator.platform === 'Win32' ? 'Windows' : 'macOS';
+	let isWarningDisplayed:boolean = false;
 
 	$: progressState = { enabled: false, percent: 50 } as {
 		enabled: boolean;
@@ -108,6 +111,27 @@
 			<Switch bind:active={$settings.compact} label="Compact mode" />
 		</Fieldset>
 
+		<Fieldset title="Theme" intro="Change Skizzle user interface main color.">
+			<div class="field">
+				{#each Object.values(ThemeEnum) as value}
+					<input
+						name="color"
+						id={value}
+						type="radio"
+						checked={$settings.theme === value}
+						on:change={() =>
+							settings.update(settings => ({
+								...settings,
+								theme: value
+							}))}
+					/>
+					<label class="ui" for={value}>
+						<Icons.UI color={value} />
+					</label>
+				{/each}
+			</div>
+		</Fieldset>
+
 		{#if $isElectron}
 			<Fieldset
 				title="Advanced versions"
@@ -128,34 +152,24 @@
 		</Fieldset>
 
 		<Fieldset
-			title="Applications Data"
-			intro="If you encounter any dysfunctional behavior from Skizzle, cleaning the all application data is maybe necessary."
+			title="Reset application"
+			intro="Reset all application settings and data."
 		>
-			<button class="button" on:click={() => remote.clearApplicationsData()}
-				>Clean the application and refresh</button
+			<button class="button danger" on:click|preventDefault={() => {isWarningDisplayed = true}}
+				>Reset application</button
 			>
 		</Fieldset>
 
-		<Fieldset title="Theme" intro="Change Skizzle user interface main color.">
-			<div class="field">
-				{#each Object.values(ThemeEnum) as value}
-					<input
-						name="color"
-						id={value}
-						type="radio"
-						checked={$settings.theme === value}
-						on:change={() =>
-							settings.update(settings => ({
-								...settings,
-								theme: value
-							}))}
-					/>
-					<label class="ui" for={value}>
-						<Icons.UI color={value} />
-					</label>
-				{/each}
+		{#if isWarningDisplayed}
+		<Modale fullHeight={false} onClose={() => {isWarningDisplayed = false}}>
+			<AccountTitle>Do you confirm to reset Skizzle ?</AccountTitle>
+			<p>If you confirm, you will lose all your settings, and will need to login again to your Github or Azure accounts.</p>
+			<div class="bar">
+				<button class="button danger" on:click|preventDefault={() => remote.clearApplicationsData()}><Icons.Trash color="#fff"/> Yes, reset Skizzle.</button>
+				<button class="button clear" on:click|preventDefault={() => {isWarningDisplayed = false}}>Cancel</button>
 			</div>
-		</Fieldset>
+		</Modale>
+		{/if}
 	</form>
 </div>
 
@@ -256,6 +270,8 @@
 	}
 
 	.button {
+		display: flex;
+		align-items: center;
 		padding: 0.5rem 1rem;
 		color: #fff;
 		font-size: 1rem;
@@ -265,6 +281,10 @@
 		transition: opacity linear 0.2s;
 	}
 
+	.danger {
+		background-color: red;
+	}
+
 	.progress {
 		text-align: center;
 		background-color: #666;
@@ -288,4 +308,19 @@
 	.state p {
 		margin-left: 0.5rem;
 	}
+
+	.bar {
+		display: flex;
+		justify-content: center;
+		width: 100%;
+		margin-top: 1rem;
+	}
+
+	.bar .button {
+		margin: 0 0.5rem;
+	}
+
+	.button.clear {
+		background-color: #333;
+	}
 </style>

src/components/icons/Trash.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	export let color = '#000';
+</script>
+
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="delete_forever_24px">
+<path id="icon/action/delete_forever_24px" fill-rule="evenodd" clip-rule="evenodd" d="M14.5 3L15.5 4H19V6H5V4H8.5L9.5 3H14.5ZM12 12.59L14.12 10.47L15.5299 11.88L13.4099 14L15.5299 16.12L14.12 17.53L12 15.41L9.88 17.53L8.46997 16.12L10.59 14L8.45996 11.88L9.87 10.47L12 12.59ZM6 19C6 20.1 6.90002 21 8 21H16C17.1 21 18 20.1 18 19V7H6V19ZM16 9H8V19H16V9Z" fill={color}/>
+</g>
+</svg>

src/components/icons/index.ts

@@ -15,6 +15,7 @@ import UI from './UI.svelte';
 import Copy from './Copy.svelte';
 import Share from './Share.svelte';
 import Logo from './Logo.svelte';
+import Trash from './Trash.svelte';
 
 // Providers
 import AzureDevOps from './AzureDevOps.svelte';
@@ -59,5 +60,6 @@ export default {
 	Copy,
 	Share,
 	Visibility,
-	VisibilityOff
+	VisibilityOff,
+	Trash
 };

src/views/Intro/Intro.svelte

@@ -52,7 +52,7 @@
 		</div>
 	</div>
 	<div class={`step ${step === 1 ? 'current' : ''}`}>
-		<AccountTitle>Ajouter un compte à Skizzle.</AccountTitle>
+		<AccountTitle>Connect Skizzle to your providers</AccountTitle>
 		<p>
 			Skizzle supports Github and Azure DevOps, in order to use the app, you have to set at least one account. Choose a provider and let yourself guided.
 		</p>