Skip to content

Commit d3783fd

Browse files
surajshetty3416surajshetty3416
committed
fix: Style cleanup
1 parent f838976 commit d3783fd

20 files changed

+58
-96
lines changed

‎frontend/src/components/BackgroundHandler.vue

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
class="absolute left-2 top-[6px] z-10 h-4 w-4 rounded shadow-sm"
1717
@click="togglePopover"
1818
:class="{
19-
'bg-gray-400 dark:bg-zinc-600': !backgroundURL,
19+
'bg-surface-gray-4': !backgroundURL,
2020
}"
2121
:style="{
2222
backgroundImage: backgroundURL ? `url(${backgroundURL})` : '',
@@ -31,7 +31,7 @@
3131
<template #body>
3232
<div class="rounded-lg bg-surface-white p-3 shadow-lg">
3333
<div
34-
class="image-preview group relative h-24 w-48 cursor-pointer overflow-hidden rounded bg-gray-200 dark:bg-zinc-700"
34+
class="image-preview group relative h-24 w-48 cursor-pointer overflow-hidden rounded bg-surface-gray-3"
3535
:style="{
3636
backgroundImage: backgroundURL ? `url(${backgroundURL})` : '',
3737
backgroundPosition: `center`,
@@ -53,11 +53,7 @@
5353
'!grid': !backgroundURL,
5454
'group-hover:grid': backgroundURL,
5555
}">
56-
<div
57-
class="rounded bg-gray-200 p-2 text-xs text-gray-900 dark:bg-zinc-700 dark:text-zinc-200"
58-
@click="openFileSelector">
59-
Upload
60-
</div>
56+
<BuilderButton @click="openFileSelector">Upload</BuilderButton>
6157
</div>
6258
</template>
6359
</FileUploader>

‎frontend/src/components/BlockPositionHandler.vue

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,17 +28,16 @@
2828
@update:modelValue="(value: string) => blockController.setStyle('left', value)" />
2929
</div>
3030
<div
31-
class="grid-col-3 grid h-16 w-16 grid-rows-3 gap-1 self-center justify-self-center rounded bg-gray-50 p-2 dark:bg-zinc-800">
31+
class="grid-col-3 grid h-16 w-16 grid-rows-3 gap-1 self-center justify-self-center rounded bg-surface-gray-2 p-2">
3232
<div
33-
class="col-span-3 row-start-1 h-2 w-[2px] self-center justify-self-center rounded bg-surface-gray-2"></div>
33+
class="col-span-3 row-start-1 h-2 w-[2px] self-center justify-self-center rounded bg-surface-gray-4"></div>
3434
<div
35-
class="col-span-3 row-start-3 h-2 w-[2px] self-center justify-self-center rounded bg-surface-gray-2"></div>
35+
class="col-span-3 row-start-3 h-2 w-[2px] self-center justify-self-center rounded bg-surface-gray-4"></div>
36+
<div class="h-5 w-5 self-center justify-self-center rounded bg-gray-400 bg-surface-gray-4"></div>
3637
<div
37-
class="surface-grabg-surface-gray-2 h-5 w-5 self-center justify-self-center rounded bg-gray-400"></div>
38+
class="col-span-1 col-start-1 row-start-2 h-[2px] w-2 self-center justify-self-center rounded bg-surface-gray-4"></div>
3839
<div
39-
class="col-span-1 col-start-1 row-start-2 h-[2px] w-2 self-center justify-self-center rounded bg-surface-gray-2"></div>
40-
<div
41-
class="col-span-1 col-start-3 row-start-2 h-[2px] w-2 self-center justify-self-center rounded bg-surface-gray-2"></div>
40+
class="col-span-1 col-start-3 row-start-2 h-[2px] w-2 self-center justify-self-center rounded bg-surface-gray-4"></div>
4241
</div>
4342
<div class="col-span-1 col-start-3 w-16 self-center">
4443
<BuilderInput

‎frontend/src/components/BlockProperties.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
</div>
2929
</div>
3030
<div v-else>
31-
<p class="mt-2 text-center text-sm text-gray-600 dark:text-zinc-500">Select a block to edit properties</p>
31+
<p class="mt-2 text-center text-sm text-ink-gray-6">Select a block to edit properties</p>
3232
</div>
3333
</template>
3434
<script setup lang="ts">
@@ -629,7 +629,7 @@ const dimensionSectionProperties = [
629629
component: "hr",
630630
getProps: () => {
631631
return {
632-
class: "dark:border-zinc-700",
632+
class: "border-outline-gray-1",
633633
};
634634
},
635635
searchKeyWords: "",
@@ -1158,7 +1158,7 @@ const imageOptionsSectionProperties = [
11581158
getProps: () => {
11591159
return {
11601160
label: "Convert to WebP",
1161-
class: "text-base dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700",
1161+
class: "text-base self-end",
11621162
};
11631163
},
11641164
innerText: "Convert to WebP",

‎frontend/src/components/BorderRadiusHandler.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
}"
1212
@mousedown.stop="handleRounded">
1313
<div
14-
class="absolute left-2 top-2 w-fit rounded-full bg-zinc-800 px-3 py-2 text-xs text-white opacity-60"
14+
class="absolute left-2 top-2 w-fit rounded-full bg-gray-800 px-3 py-2 text-xs text-white opacity-60"
1515
v-show="updating">
1616
{{ borderRadius }}
1717
</div>

‎frontend/src/components/BuilderAssets.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,22 +19,22 @@
1919
class="relative flex translate-x-0 translate-y-0 cursor-pointer items-center justify-between overflow-hidden truncate rounded border border-transparent bg-surface-white px-2 py-1.5"
2020
draggable="true"
2121
:class="{
22-
'!border-gray-400 dark:!border-zinc-600':
22+
'!border-outline-gray-4':
2323
store.fragmentData.fragmentId === component.name ||
2424
selectedComponent === component.component_id,
2525
}"
2626
@click="selectComponent(component)"
2727
@dblclick="componentStore.editComponent(null, component.name)"
2828
@dragstart="(ev) => setComponentData(ev, component)">
29-
<div class="flex items-center gap-2">
30-
<FeatherIcon :name="'box'" class="h-4 w-4 text-gray-800 dark:text-zinc-400"></FeatherIcon>
31-
<p class="text-base text-gray-800 dark:text-zinc-400">
29+
<div class="flex items-center gap-2 text-ink-gray-5">
30+
<FeatherIcon :name="'box'" class="h-4 w-4"></FeatherIcon>
31+
<p class="text-base">
3232
{{ component.component_name }}
3333
</p>
3434
</div>
3535
<FeatherIcon
3636
name="trash"
37-
class="hidden h-3 w-3 cursor-pointer text-gray-800 group-hover:block dark:text-zinc-400"
37+
class="hidden h-3 w-3 cursor-pointer text-ink-gray-5 group-hover:block"
3838
@click.stop.prevent="componentStore.deleteComponent(component)"></FeatherIcon>
3939
</div>
4040
</div>

‎frontend/src/components/BuilderCanvas.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
v-show="breakpoint.visible"
4848
:key="breakpoint.device">
4949
<div
50-
class="absolute left-0 cursor-pointer select-none text-3xl text-gray-700 dark:text-zinc-300"
50+
class="absolute left-0 cursor-pointer select-none text-3xl text-ink-gray-7"
5151
:style="{
5252
fontSize: `calc(${12}px * 1/${canvasProps.scale})`,
5353
top: `calc(${-20}px * 1/${canvasProps.scale})`,
@@ -66,7 +66,7 @@
6666
</div>
6767
</div>
6868
<div
69-
class="fixed bottom-12 left-[50%] z-40 flex translate-x-[-50%] cursor-default items-center justify-center gap-2 rounded-lg bg-surface-white px-3 py-2 text-center text-sm font-semibold text-gray-600 shadow-md dark:text-zinc-400"
69+
class="fixed bottom-12 left-[50%] z-40 flex translate-x-[-50%] cursor-default items-center justify-center gap-2 rounded-lg bg-surface-white px-3 py-2 text-center text-sm font-semibold text-ink-gray-7 shadow-md"
7070
v-show="!canvasProps.panning">
7171
{{ Math.round(canvasProps.scale * 100) + "%" }}
7272
<div class="ml-2 cursor-pointer" @click="setScaleAndTranslate">

‎frontend/src/components/BuilderLeftPanel.vue

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -25,26 +25,13 @@
2525
width: `${store.builderLayout.leftPanelWidth}px`,
2626
}"
2727
@click.stop="store.leftPanelActiveTab === 'Layers' && store.activeCanvas?.clearSelection()">
28-
<div v-if="false" class="mb-5 flex flex-col overflow-hidden rounded-lg text-sm">
29-
<textarea
30-
class="no-scrollbar h-fit resize-none rounded-sm border-0 bg-gray-300 text-sm outline-none dark:bg-zinc-700 dark:text-white"
31-
v-model="prompt"
32-
:disabled="generating" />
33-
<button
34-
@click="getPage"
35-
type="button"
36-
class="bg-gray-300 p-2 text-gray-800 dark:bg-zinc-700 dark:text-zinc-300"
37-
:disabled="generating">
38-
Generate
39-
</button>
40-
</div>
4128
<div v-show="store.leftPanelActiveTab === 'Blocks'">
4229
<BuilderBlockTemplates class="mt-1 p-4 pt-3" />
4330
</div>
4431
<div v-show="store.leftPanelActiveTab === 'Assets'">
4532
<BuilderAssets class="mt-1 p-4 pt-3" />
4633
</div>
47-
<div v-show="store.leftPanelActiveTab === 'Layers'" class="p-4 pt-3">
34+
<div v-show="store.leftPanelActiveTab === 'Layers'" class="p-3">
4835
<BlockLayers
4936
class="no-scrollbar overflow-auto"
5037
v-if="pageCanvas"

‎frontend/src/components/BuilderToolbar.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@
107107
</Tooltip>
108108
</div>
109109
</div>
110-
<span class="text-sm dark:text-zinc-300" v-if="store.savingPage && store.activePage?.is_template">
110+
<span class="text-sm text-ink-gray-3" v-if="store.savingPage && store.activePage?.is_template">
111111
Saving template
112112
</span>
113113
<Tooltip text="Settings" :hoverDelay="0.6">

‎frontend/src/components/CollapsibleSection.vue

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
<template>
22
<div>
3-
<div class="flex items-center justify-between text-sm font-medium dark:text-zinc-400">
4-
<h3 class="cursor-pointer text-base text-gray-900 dark:text-zinc-300" @click="toggleCollapsed">
3+
<div class="flex items-center justify-between text-sm font-medium">
4+
<h3 class="cursor-pointer text-base text-ink-gray-9" @click="toggleCollapsed">
55
{{ sectionName }}
66
</h3>
77
<BuilderButton
8-
class="dark:text-zinc-400 dark:hover:bg-zinc-700"
98
:icon="collapsed ? 'plus' : 'minus'"
109
:variant="'ghost'"
1110
size="sm"

‎frontend/src/components/ContextMenu.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
<template>
22
<Menu
3-
class="fixed z-50 h-fit w-fit min-w-[120px] rounded-lg bg-surface-white p-1 shadow-xl"
3+
class="fixed z-50 h-fit w-fit min-w-[120px] rounded-md bg-surface-white p-1 shadow-xl"
44
:style="{ top: y + 'px', left: x + 'px' }"
55
ref="menu">
66
<MenuItems static class="text-sm">
77
<MenuItem
88
v-slot="{ active, disabled }"
9-
class="block cursor-pointer rounded-md px-3 py-1 dark:text-zinc-50"
9+
class="block cursor-pointer rounded-sm px-3 py-1 text-ink-gray-9"
1010
v-for="(option, index) in options"
1111
v-show="!option.condition || option.condition()">
1212
<div
1313
@click.prevent.stop="(!option.condition || option.condition()) && handleClick(option.action)"
1414
:class="{
1515
'text-gray-900': !disabled,
16-
'bg-gray-200 dark:bg-zinc-700': active,
17-
'text-gray-400 dark:text-zinc-500': disabled,
16+
'bg-surface-gray-4': active,
17+
'text-ink-gray-4': disabled,
1818
}">
1919
{{ option.label }}
2020
</div>

‎frontend/src/components/Controls/ColorPicker.vue

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -80,10 +80,7 @@
8080
:style="{
8181
background: color,
8282
}"></div>
83-
<EyeDropperIcon
84-
v-if="isSupported"
85-
class="text-gray-700 dark:text-zinc-300"
86-
@click="() => open()" />
83+
<EyeDropperIcon v-if="isSupported" class="text-ink-gray-7" @click="() => open()" />
8784
</div>
8885
</div>
8986
</div>

‎frontend/src/components/Controls/InputLabel.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<template>
2-
<span
3-
class="inline-flex w-1/2 min-w-20 max-w-40 items-center text-xs leading-5 text-gray-700 dark:text-zinc-400">
2+
<span class="inline-flex w-1/2 min-w-20 max-w-40 items-center text-xs leading-5 text-ink-gray-6">
43
<slot />
54
</span>
65
</template>

‎frontend/src/components/Controls/OptionToggle.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="flex w-full items-center justify-between">
33
<InputLabel v-if="label">{{ label }}</InputLabel>
44
<TabButtons
5-
class="w-full min-w-[150px] [&>div>button[aria-checked='false']]:dark:!bg-transparent [&>div>button[aria-checked='false']]:dark:!text-zinc-400 [&>div>button[aria-checked='true']]:dark:!bg-zinc-700 [&>div>button]:items-center [&>div>button]:dark:!bg-zinc-700 [&>div>button]:dark:!text-zinc-100 [&>div]:h-7 [&>div]:dark:!bg-zinc-800"
5+
class="w-full min-w-[150px] [&>div>button[aria-checked='true']]:dark:!bg-surface-gray-4 [&>div>button]:items-center [&>div]:h-7"
66
:buttons="options"
77
:modelValue="modelValue"
88
@update:modelValue="$emit('update:modelValue', $event)"></TabButtons>

‎frontend/src/components/ImageUploadInput.vue

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
@upload="setImageURL"
3030
@remove="setImageURL('')"
3131
:image_url="imageURL"
32-
class="absolute right-0 top-5 rounded-r-md bg-surface-gray-2 pl-2 dark:bg-gray-900"
32+
class="absolute right-0 top-5 rounded-r-md bg-surface-gray-2 pl-2 dark:bg-transparent"
3333
:file_types="['image/*']" />
3434
</div>
3535
</div>
@@ -49,7 +49,7 @@
4949
<img
5050
:src="imageURL || '/assets/builder/images/fallback.png'"
5151
alt=""
52-
class="image-preview relative h-24 w-48 cursor-pointer bg-gray-200 dark:bg-zinc-700"
52+
class="image-preview relative h-24 w-48 cursor-pointer bg-surface-gray-2"
5353
:style="{
5454
'object-fit': imageFit || 'contain',
5555
}" />
@@ -59,12 +59,7 @@
5959
'!grid': !imageURL,
6060
'group-hover:grid': imageURL,
6161
}">
62-
<BuilderButton
63-
class="rounded bg-gray-200 p-2 text-xs text-gray-900 dark:bg-zinc-700 dark:text-zinc-200"
64-
variant="solid"
65-
@click="openFileSelector">
66-
Upload
67-
</BuilderButton>
62+
<BuilderButton variant="solid" @click="openFileSelector">Upload</BuilderButton>
6863
</div>
6964
</div>
7065
</template>

‎frontend/src/components/ObjectEditor.vue

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,19 @@
44
<BuilderInput
55
placeholder="Property"
66
:modelValue="key"
7-
@update:modelValue="(val: string) => replaceKey(key, val)"
8-
class="rounded-md text-sm text-gray-800 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200 dark:focus:bg-zinc-700" />
7+
@update:modelValue="(val: string) => replaceKey(key, val)" />
98
<BuilderInput
109
placeholder="Value"
1110
:modelValue="value"
12-
@update:modelValue="(val: string) => updateObjectValue(key, val)"
13-
class="rounded-md text-sm text-gray-800 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200 dark:focus:bg-zinc-700" />
11+
@update:modelValue="(val: string) => updateObjectValue(key, val)" />
1412
<BuilderButton
15-
variant="outline"
13+
class="flex-shrink-0 text-xs"
14+
variant="subtle"
1615
icon="x"
17-
class="p-2 dark:border-zinc-600 dark:bg-zinc-800 dark:text-gray-100 dark:outline-0 dark:hover:bg-zinc-700 dark:hover:text-gray-100"
1816
@click="deleteObjectKey(key as string)"></BuilderButton>
1917
</div>
20-
<BuilderButton
21-
variant="subtle"
22-
label="Add"
23-
class="dark:bg-zinc-800 dark:text-gray-100"
24-
@click="addObjectKey"></BuilderButton>
25-
<p
26-
class="rounded-sm bg-gray-100 p-2 text-2xs text-gray-800 dark:bg-zinc-800 dark:text-zinc-300"
27-
v-show="description">
18+
<BuilderButton variant="subtle" label="Add" @click="addObjectKey"></BuilderButton>
19+
<p class="rounded-sm bg-surface-gray-1 p-2 text-2xs text-ink-gray-7" v-show="description">
2820
<span v-html="description"></span>
2921
</p>
3022
</div>

‎frontend/src/components/PanelResizer.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
'right-0': side === 'right',
99
'top-0': side === 'top',
1010
'bottom-0': side === 'bottom',
11-
'bg-gray-300 dark:bg-zinc-700': dragActive,
11+
'bg-surface-gray-3': dragActive,
1212
}"
1313
@mousedown.prevent="resize">
1414
<slot />

‎frontend/src/components/PlacementControl.vue

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="items-top relative flex justify-between">
33
<InputLabel class="items-center">Placement</InputLabel>
44
<div class="relative h-fit w-fit">
5-
<div class="group grid grid-cols-3 rounded-sm bg-gray-200 p-1.5 dark:bg-zinc-800">
5+
<div class="group grid grid-cols-3 rounded-sm bg-surface-gray-2 p-1.5">
66
<div
77
v-for="option in placementOptions"
88
:key="option"
@@ -32,19 +32,19 @@
3232
(option === 'bottom-left' || option === 'bottom-middle' || option === 'bottom-right')),
3333
}">
3434
<div
35-
class="rounded-sm bg-gray-500 dark:bg-zinc-500"
35+
class="rounded-sm bg-surface-gray-5"
3636
:class="{
3737
'h-2 w-1': direction === 'row',
3838
'h-1 w-2': direction === 'column',
3939
}"></div>
4040
<div
41-
class="rounded-sm bg-gray-500 dark:bg-zinc-500"
41+
class="rounded-sm bg-surface-gray-5"
4242
:class="{
4343
'h-3 w-1': direction === 'row',
4444
'h-1 w-3': direction === 'column',
4545
}"></div>
4646
<div
47-
class="rounded-sm bg-gray-500 dark:bg-zinc-500"
47+
class="rounded-sm bg-surface-gray-5"
4848
:class="{
4949
'h-2 w-1': direction === 'row',
5050
'h-1 w-2': direction === 'column',
@@ -60,19 +60,19 @@
6060
'align-items': alignItems,
6161
}">
6262
<div
63-
class="rounded-sm bg-gray-600 dark:bg-zinc-400"
63+
class="rounded-sm bg-surface-gray-6"
6464
:class="{
6565
'h-1 w-2': direction === 'column',
6666
'h-2 w-1': direction === 'row',
6767
}"></div>
6868
<div
69-
class="rounded-sm bg-gray-600 dark:bg-zinc-400"
69+
class="rounded-sm bg-surface-gray-6"
7070
:class="{
7171
'h-1 w-3': direction === 'column',
7272
'h-3 w-1': direction === 'row',
7373
}"></div>
7474
<div
75-
class="rounded-sm bg-gray-600 dark:bg-zinc-400"
75+
class="rounded-sm bg-surface-gray-6"
7676
:class="{
7777
'h-1 w-2': direction === 'column',
7878
'h-2 w-1': direction === 'row',

‎frontend/src/pages/PageBuilder.vue

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,15 +33,13 @@
3333
class="canvas-container absolute bottom-0 top-[var(--toolbar-height)] flex justify-center overflow-hidden bg-surface-gray-2 p-10">
3434
<template v-slot:header>
3535
<div
36-
class="absolute left-0 right-0 top-0 z-20 flex items-center justify-between bg-surface-white p-2 text-sm text-gray-800 dark:text-zinc-400">
36+
class="absolute left-0 right-0 top-0 z-20 flex items-center justify-between bg-surface-white p-2 text-sm text-ink-gray-8">
3737
<div class="flex items-center gap-1 text-xs">
3838
<a @click="store.exitFragmentMode" class="cursor-pointer">Page</a>
3939
<FeatherIcon name="chevron-right" class="h-3 w-3" />
4040
{{ store.fragmentData.fragmentName }}
4141
</div>
42-
<BuilderButton
43-
class="text-xs dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700"
44-
@click="saveAndExitFragmentMode">
42+
<BuilderButton class="text-xs" @click="saveAndExitFragmentMode">
4543
{{ store.fragmentData.saveActionLabel || "Save" }}
4644
</BuilderButton>
4745
</div>

‎frontend/src/pages/PageBuilderDashboard.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@
196196
</div>
197197
</div>
198198
<BuilderButton
199-
class="m-auto mt-12 w-fit text-sm dark:bg-zinc-900 dark:text-zinc-300"
199+
class="m-auto mt-12 w-fit text-sm"
200200
@click="loadMore"
201201
v-show="webPages.hasNextPage"
202202
variant="subtle"

0 commit comments

Comments
 (0)