Skip to content
This repository has been archived by the owner on Oct 19, 2022. It is now read-only.

Commit

Permalink
Update components
Browse files Browse the repository at this point in the history
  • Loading branch information
@Levminer
Levminer committed Jul 12, 2022
1 parent 081b67c commit c779f8d
Show file tree
Hide file tree
Showing 5 changed files with 51 additions and 10 deletions.
3 changes: 3 additions & 0 deletions interface/components/buildNumber.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<div class="build sticky top-0 z-20 w-full bg-black p-1 text-center">
<p class="buildContent text-lg font-bold">You are running a pre release version of Authme.</p>
</div>
5 changes: 3 additions & 2 deletions interface/components/details.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@
<Disclosure let:open>
<DisclosureButton class="transparentHover flex w-full items-center justify-between rounded-xl px-6 py-3 text-left text-2xl font-medium text-white outline-none duration-200 ease-linear focus:outline-none focus-visible:ring-4 focus-visible:ring-purple-500">
<span>More options</span>
<ChevronUpIcon class={`${open ? "rotate-180 transform" : ""} h-5 w-5 text-white`} />
<svg xmlns="http://www.w3.org/2000/svg" class={`${open ? "rotate-180 transform" : ""} h-5 w-5 text-white`} fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
</svg>
</DisclosureButton>
<Transition enter="transition duration-200 ease-out" enterFrom="transform scale-95 opacity-0" enterTo="transform scale-100 opacity-100" leave="transition duration-200 ease-out" leaveFrom="transform scale-100 opacity-100" leaveTo="transform scale-95 opacity-0">
<DisclosurePanel class="px-4 pt-4 pb-2 text-left text-lg text-gray-200">
Expand All @@ -14,5 +16,4 @@

<script lang="ts">
import { Disclosure, DisclosureButton, DisclosurePanel, Transition } from "@rgossiaux/svelte-headlessui"
import { ChevronUpIcon } from "@rgossiaux/svelte-heroicons/solid"
</script>
12 changes: 6 additions & 6 deletions interface/components/navigation.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@
</Link>

<Link to="/import">
<button on:click={() => changeClasses("codes")} class="import menuButton mx-3 mt-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<button on:click={() => changeClasses("import")} class="import menuButton mx-3 mt-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M14 3v4a1 1 0 0 0 1 1h4" />
<path d="M5 13v-8a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2h-5.5m-9.5 -2h7m-3 -3l3 3l-3 3" />
Expand All @@ -21,8 +21,8 @@
</Link>

<Link to="/export">
<button class="menuButton">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-export" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
<button on:click={() => changeClasses("export")} class="menuButton export">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M14 3v4a1 1 0 0 0 1 1h4" />
<path d="M11.5 21h-4.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v5m-5 6h7m-3 -3l3 3l-3 3" />
Expand All @@ -32,7 +32,7 @@
</Link>

<Link to="/edit">
<button class="menuButton">
<button on:click={() => changeClasses("edit")} class="menuButton edit">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
Expand Down Expand Up @@ -62,7 +62,7 @@
</div>

<script lang="ts">
import { Link } from "svelte-navigator"
import { Link } from "svelte-routing"
let currentRoute = "codes"
Expand Down
4 changes: 2 additions & 2 deletions interface/components/toggle.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<SwitchGroup as="div" class="flex items-center space-x-4">
<SwitchLabel class="text-xl">{checked ? "On" : "Off"}</SwitchLabel>

<Switch as="button" {checked} on:change={(event) => (checked = event.detail)} class={({ checked }) => classNames("focus:shadow-outline relative inline-flex h-7 w-12 flex-shrink-0 cursor-pointer rounded-full border-2 border-white transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-4 focus-visible:ring-popup-magenta", checked ? "bg-white" : "bg-transparent")} let:checked>
<span class={classNames("relative top-[4px] left-1 inline-block h-4 w-4 transform rounded-full bg-white transition duration-200 ease-in-out ", checked ? "translate-x-[21px] bg-black" : "translate-x-0")} />
<Switch as="button" {checked} on:change={(event) => (checked = event.detail)} class={({ checked }) => classNames("focus:shadow-outline focus-visible:ring-popup-magenta relative inline-flex h-7 w-12 flex-shrink-0 cursor-pointer rounded-full border-2 border-white transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-4", checked ? "bg-white" : "bg-transparent")} let:checked>
<span class={classNames("relative top-[4px] left-1 inline-block h-4 w-4 transform rounded-full bg-white transition duration-200 ease-in-out ", checked ? "translate-x-[21px] !bg-black" : "translate-x-0")} />
</Switch>
</SwitchGroup>

Expand Down
37 changes: 37 additions & 0 deletions interface/components/updateAlert.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<div class="updateAlert w-full bg-popup-blue">
<div class="container mx-auto flex items-center justify-between px-6 py-4">
<div class="flex items-center justify-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z" />
</svg>

<p class="updateText mx-1 text-lg font-bold">New Authme version available. Starting the update...</p>

<button type="button" class="updateRestart smallButton">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
<span data-loc>Restart</span>
</button>

<button type="button" class="smallButton">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
</svg>
<span data-loc>Release notes</span>
</button>
</div>

<button class="updateClose transform duration-200 hover:text-black" on:click={hidePopup}>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>

<script>
const hidePopup = () => {
document.querySelector(".updateAlert").style.display = "none"
}
</script>

0 comments on commit c779f8d

Please sign in to comment.