Skip to content

Commit 9c14ceb

Browse files
melvin-chenmelvin-chen
authored
Merge pull request #30 from FormidableLabs/ui-tweaks
UI tweaks
2 parents 47e4771 + b18d94c commit 9c14ceb

24 files changed

+333
-436
lines changed

‎app.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
declare namespace svelte.JSX {
2+
interface HTMLProps<T> {
3+
onoutclick?: () => void;
4+
}
5+
}

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,9 @@
2929
"vite": "^3.0.7"
3030
},
3131
"dependencies": {
32-
"locally-unique-id-generator": "^0.1.5",
3332
"@apsc/color": "^0.0.5",
33+
"clsx": "^2.0.0",
34+
"locally-unique-id-generator": "^0.1.5",
3435
"zod": "^3.18.0"
3536
}
3637
}

‎src/App.svelte‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,6 @@
2828
const newBlob = await patchBlob(completeBlob, duration);
2929
const data = URL.createObjectURL(newBlob);
3030
31-
// return;
32-
3331
const link = document.createElement("a");
3432
link.href = data;
3533
link.download = `video.${ext}`;
@@ -90,14 +88,14 @@
9088
<ActionBar on:record={onRecordButtonPress} />
9189
</div>
9290
<div
93-
class="border-l-[1px] border-fmd-gray w-1/3 flex flex-col gap-10 px-6 dark:border-fmd-blue"
91+
class="border-l border-fmd-gray w-1/3 flex flex-col gap-10 px-6 dark:border-fmd-blue"
9492
>
9593
<SidebarThemeSection />
9694
</div>
9795
</div>
9896

9997
<div
100-
class="absolute bottom-0 right-0 p-4 flex gap-4 items-center text-fmd-navy dark:text-fmd-white"
98+
class="absolute bottom-0 right-0 p-4 flex gap-4 items-center text-fmd-black dark:text-fmd-white"
10199
>
102100
<a
103101
class="w-10 hover:text-fmd-red transition transition-colors duration-100 ease-in-out"
@@ -109,7 +107,7 @@
109107
<FormidableIcon />
110108
</a>
111109
<a
112-
class="w-7 hover:text-fmd-sky transition transition-colors duration-100 ease-in-out"
110+
class="w-7 hover:text-fmd-red transition transition-colors duration-100 ease-in-out"
113111
aria-label="GitHub logo"
114112
href="https://github.com/FormidableLabs/clips"
115113
target="_blank"

‎src/app.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,42 @@
11
@tailwind base;
22
@tailwind components;
33
@tailwind utilities;
4+
@tailwind apply;
5+
6+
.transition-default {
7+
@apply transition transition-all duration-100 ease-out;
8+
}
9+
10+
.select-parent {
11+
@apply grid justify-items-center mt-2 overflow-hidden;
12+
@apply dark:text-fmd-white;
13+
@apply border border-fmd-gray dark:border-fmd-white/20 rounded bg-fmd-white dark:bg-fmd-navy;
14+
}
15+
16+
.select-child-wrapper {
17+
@apply block relative w-full text-center;
18+
}
19+
20+
.select-child-wrapper:first-of-type .select-child-overlay {
21+
border-top-left-radius: 3px;
22+
border-bottom-left-radius: 3px;
23+
}
24+
25+
.select-child-wrapper:last-of-type .select-child-overlay {
26+
border-top-right-radius: 3px;
27+
border-bottom-right-radius: 3px;
28+
}
29+
.select-child-wrapper.not-first {
30+
@apply border-l border-fmd-gray dark:border-fmd-white/20;
31+
}
32+
33+
.select-child-overlay {
34+
@apply transition-default;
35+
@apply absolute top-0 left-0 h-full w-full pointer-events-none;
36+
@apply border border-transparent;
37+
@apply peer-checked:border-fmd-red dark:peer-checked:border-fmd-white peer-checked:bg-fmd-red-background dark:peer-checked:bg-fmd-white-background;
38+
}
39+
40+
.select-child-overlay-selected {
41+
@apply border-fmd-red dark:border-fmd-white bg-fmd-red-background dark:bg-fmd-white-background;
42+
}

‎src/components/ActionBar.svelte‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,15 @@
2929

3030
<div class="grid grid-cols-[auto_auto_1fr_auto] gap-x-4 gap-y-10 items-center pb-4">
3131
<div class="flex gap-2">
32-
<div class="w-12">
32+
<div class="w-14 h-14">
3333
<MicButton />
3434
</div>
35-
<div class="w-12">
35+
<div class="w-14 h-14">
3636
<WebcamButton />
3737
</div>
3838
</div>
3939

40-
<div class="w-[1px] h-16 bg-fmd-gray_darker dark:bg-fmd-blue" />
40+
<div class="w-px h-16 bg-fmd-gray dark:bg-fmd-blue" />
4141

4242
<div class="flex gap-3 items-center">
4343
<!-- Existing screen shares -->
@@ -62,7 +62,7 @@
6262
<div class="flex justify-end items-center gap-2">
6363
{#if $recordingDuration !== null}
6464
<div
65-
class="w-[100px] bg-white rounded px-3 py-1 shadow flex justify-center items-center font-medium text-lg text-gray-600"
65+
class="w-24 bg-white rounded px-3 py-1 shadow flex justify-center items-center font-medium text-lg text-gray-600"
6666
transition:fade={{ duration: 300 }}
6767
>
6868
{$recordingDuration}
@@ -77,7 +77,7 @@
7777
<div
7878
class="bg-fmd-red transition transition-all duration-300 ease-in-out {$isRecording
7979
? 'w-1/2 h-1/2 rounded-lg group-hover:shadow-xl'
80-
: 'w-full h-full rounded-[100%]'}"
80+
: 'w-full h-full rounded-full'}"
8181
/>
8282
</button>
8383
</div>

‎src/components/ActionButton.svelte‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
11
<script lang="ts">
2+
import clsx from "clsx";
23
import { clickOutside } from "../directives/clickOutside";
34
import { createEventDispatcher } from "svelte";
45
5-
export let isActive: boolean = false;
66
export let isPopupOpen: boolean = false;
77
export let extraClasses = "";
8-
export let isSquareVariant: boolean = false;
8+
export let isSquareVariant: boolean = true;
99
export let isTextVariant: boolean = false;
1010
export let showPopupUnder: boolean = false;
1111
export let rightAlignPopup: boolean = false;
1212
1313
const dispatch = createEventDispatcher();
1414
</script>
1515

16-
<div class="relative action_button {isSquareVariant ? 'h-full' : ''}">
16+
<div class="relative action_button h-full group">
1717
{#if isPopupOpen}
1818
<div
19-
class="w-[256px] absolute bg-white dark:bg-transparent {showPopupUnder
19+
class="w-64 z-20 absolute bg-white dark:bg-transparent {showPopupUnder
2020
? 'top-8'
2121
: 'bottom-20'} {rightAlignPopup
2222
? '-right-2'
23-
: '-left-2'} rounded shadow-xl action_button_popup z-10"
23+
: '-left-2'} rounded shadow-xl action_button_popup z-30"
2424
use:clickOutside
2525
on:outclick={() => dispatch("popupDismiss")}
2626
>
@@ -29,18 +29,19 @@
2929
{/if}
3030

3131
<button
32-
class="w-full green hover:text-fmd-black flex items-center p-1.5 transition transition-all duration-150 dark:text-fmd-white dark:hover:text-fmd-white dark:border-fmd-blue dark:hover:bg-fmd-blue {extraClasses} {isSquareVariant
33-
? 'h-full rounded'
34-
: 'rounded-full aspect-square'}
35-
{isTextVariant
36-
? 'text-black hover:bg-fmd-yellow justify-start'
37-
: 'text-fmd-gray_darker border border-fmd-gray_darker hover:bg-fmd-yellow justify-center'}"
32+
class={clsx(
33+
"w-full flex items-center p-1.5 dark:border-fmd-white/20 dark:hover:bg-fmd-white-background",
34+
"hover:text-fmd-red dark:text-fmd-white dark:hover:text-fmd-white dark:hover:border-fmd-white",
35+
"transition transition-all duration-100",
36+
extraClasses,
37+
isSquareVariant ? "h-full rounded" : "rounded-full aspect-square",
38+
isTextVariant
39+
? "text-black hover:bg-fmd-white-background justify-start dark:hover:underline"
40+
: "text-fmd-gray-600 border border-fmd-gray hover:bg-fmd-red-background justify-center"
41+
)}
3842
on:click
3943
>
4044
<slot />
4145
</button>
4246

43-
{#if isActive}<div
44-
class="w-1.5 h-1.5 bg-fmd-red rounded-full absolute left-0 right-0 m-auto -bottom-3"
45-
/>{/if}
4647
</div>

‎src/components/AlignmentPicker.svelte‎

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎src/components/ColorInput.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
>
2828
<PopupContainer slot="popupContent" title="">
2929
<div class="transparent-input">
30-
<ColorPicker class="h-[256px] p-2" bind:color={value} />
30+
<ColorPicker class="h-64 p-2" bind:color={value} />
3131
</div>
3232
</PopupContainer>
3333

‎src/components/ConfigurationSection.svelte‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎src/components/Loader.svelte‎

Lines changed: 12 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,26 @@
1-
<script lang="ts">
2-
// From here: https://github.com/Schum123/svelte-loading-spinners/blob/master/src/Rainbow.svelte
3-
export let unit: string = "px";
4-
export let size: string = "60";
5-
</script>
6-
7-
<div class="flex flex-col items-center gap-0.5">
8-
<div class="wrapper" style="--size: {size}{unit}; --duration: 1.5s;">
9-
<div
10-
class="rainbow border-l-fmd-gray border-b-fmd-gray border-t-fmd-yellow border-r-primary-fmd-yellow dark:border-t-fmd-navy dark:border-r-primary-fmd-navy"
11-
/>
1+
<div class="flex flex-col items-center gap-2 w-full">
2+
<div class="h-0.5 w-full bg-fmd-gray relative">
3+
<div class="h-0.5 w-12 bg-fmd-red slide absolute" />
124
</div>
135
<div class="text-sm font-medium text-gray-700 dark:text-white"><slot /></div>
146
</div>
157

168
<style>
17-
.wrapper {
18-
width: var(--size);
19-
height: calc(var(--size) / 2);
20-
overflow: hidden;
21-
}
22-
.rainbow {
23-
width: var(--size);
24-
height: var(--size);
25-
/*border-left-color: transparent;*/
26-
/*border-bottom-color: transparent;*/
27-
box-sizing: border-box;
28-
transform: rotate(-200deg);
29-
border-radius: 50%;
30-
border-style: solid;
31-
animation: var(--duration) ease-in-out 0s infinite normal none running
32-
rotate;
9+
.slide {
10+
animation: 1200ms linear slide infinite;
3311
}
34-
@keyframes rotate {
12+
13+
@keyframes slide {
3514
0% {
36-
border-width: 10px;
37-
}
38-
25% {
39-
border-width: 3px;
15+
left: 0;
4016
}
17+
4118
50% {
42-
transform: rotate(115deg);
43-
border-width: 10px;
44-
}
45-
75% {
46-
border-width: 3px;
19+
left: calc(100% - 48px);
4720
}
21+
4822
100% {
49-
border-width: 10px;
23+
left: 0;
5024
}
5125
}
5226
</style>

0 commit comments

Comments
 (0)