Skip to content

Commit a2999c4

Browse files
nifalconicoladarci
nifalconi
and
coladarci
authored
Feature/new theme (#27)
* misc: ignore elixir ls artifacts * feat: add alert component * feat: add toast component * feat: add icons components * feat: add theme * feat: add core components css * misc: add assets to mix file configuration * misc: update gettxt library * refactor: change component based ui definition for in line tailwind directives * Formatting * Make this conditional * feat: add core components flash theme * fix: typo * feat: add workbreaks for flashes * refactor: moving sdk from kit started to sdk * feat: erase icons from flash notifications * feat: move css from started kit to sdk * refactor: delete toasts * fix: close button on toasts display * refactor: rename flash-(client-error/server-error) to just client-error/server-error * refactor: toast, use classes instead of ids * refactor: add support from old configuration --------- Co-authored-by: Greg Coladarci <coladarci@gmail.com>
1 parent 3ea103c commit a2999c4

17 files changed

Lines changed: 1252 additions & 43 deletions

File tree

‎.credo.exs‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -117,8 +117,7 @@
117117
{Credo.Check.Refactor.NegatedConditionsInUnless},
118118
{Credo.Check.Refactor.NegatedConditionsWithElse},
119119
{Credo.Check.Refactor.Nesting, max_nesting: 3},
120-
{Credo.Check.Refactor.PipeChainStart,
121-
excluded_argument_types: [:atom, :binary, :fn, :keyword], excluded_functions: []},
120+
{Credo.Check.Refactor.PipeChainStart, excluded_argument_types: [:atom, :binary, :fn, :keyword], excluded_functions: []},
122121
{Credo.Check.Refactor.UnlessWithElse},
123122

124123
#

‎.formatter.exs‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
[
2-
import_deps: [:joken, :tesla],
3-
inputs: ["*.{ex,exs}", "{config,lib,test}/**/*.{ex,exs}"]
2+
import_deps: [:phoenix],
3+
plugins: [Phoenix.LiveView.HTMLFormatter],
4+
line_length: 140,
5+
inputs: ["*.{heex,ex,exs}", "{config,lib,test}/**/*.{heex,ex,exs}", "priv/*/seeds.exs"]
46
]

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,5 @@ erl_crash.dump
2525
# Ignore package tarball (built via "mix hex.build").
2626
peek_app_sdk-*.tar
2727

28+
# Ignore ElixirLS build artifacts
29+
.elixir_ls/

‎assets/components/core-components.css‎

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
@layer utilities {
2+
.fieldset .label {
3+
@apply text-sm font-normal text-neutrals-300 mb-2 block;
4+
}
5+
6+
.fieldset .input,
7+
.fieldset .textarea {
8+
@apply w-full border border-neutrals-200 bg-neutrals-100 hover:border-neutrals-250 rounded-md px-3 py-2 text-neutrals-400;
9+
@apply focus:outline-none focus:ring-5 focus:ring-interaction-100 focus:border-interaction-300 focus:bg-neutrals-0;
10+
}
11+
12+
.fieldset .input .disabled {
13+
@apply opacity-50 cursor-not-allowed pointer-events-none;
14+
}
15+
16+
.fieldset .input-error {
17+
@apply border-warning-300;
18+
@apply focus:outline-none focus:ring-4 focus:ring-warning-100 focus:border-warning-300 focus:bg-neutrals-0;
19+
}
20+
21+
.fieldset .textarea-error {
22+
@apply border-warning-300;
23+
@apply focus:outline-none focus:ring-4 focus:ring-warning-100 focus:border-warning-300 focus:bg-neutrals-0;
24+
}
25+
}
26+
27+
@layer utilities {
28+
.checkbox {
29+
@apply bg-neutrals-100 border-neutrals-200;
30+
@apply hover:bg-neutrals-100 hover:border-neutrals-250;
31+
@apply focus:outline-none focus:ring-4 focus:ring-interaction-100 focus:border-interaction-300;
32+
@apply text-interaction-300;
33+
}
34+
}
35+
36+
@layer utilities {
37+
.select {
38+
@apply bg-neutrals-100 border-neutrals-200 text-neutrals-300 appearance-none;
39+
@apply hover:bg-neutrals-100 hover:border-neutrals-250;
40+
@apply focus:outline-none focus:ring-4 focus:ring-neutrals-100 focus:border-neutrals-200;
41+
@apply active:bg-white active:border-interaction-300 active:ring-4 active:ring-interaction-100;
42+
43+
/* boilerplate chevron */
44+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%233957EA' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
45+
background-position: right 0.5rem center;
46+
background-repeat: no-repeat;
47+
background-size: 1.5em 1.5em;
48+
padding-right: 2.5rem;
49+
}
50+
}
51+
52+
@layer utilities {
53+
.btn {
54+
@apply focus:outline-none focus:ring-4 focus:ring-interaction-100 border-none;
55+
@apply bg-interaction-300 text-neutrals-0 hover:bg-interaction-400 rounded-lg;
56+
@apply shadow-none;
57+
border-radius: 6px;
58+
}
59+
60+
.btn.disabled {
61+
@apply opacity-50 cursor-not-allowed hover:bg-interaction-300;
62+
@apply pointer-events-none; /* Prevent hover, a little hacky but work */
63+
}
64+
65+
.btn.btn-secondary {
66+
@apply bg-neutrals-100 text-interaction-300;
67+
@apply hover:text-interaction-400;
68+
@apply focus:text-interaction-300;
69+
}
70+
71+
.btn.btn-tertiary {
72+
@apply bg-neutrals-0 border border-solid border-neutrals-200;
73+
@apply text-neutrals-300;
74+
@apply hover:border-neutrals-250 hover:text-neutrals-350;
75+
}
76+
77+
.btn.btn-danger {
78+
@apply bg-neutrals-0 border border-solid border-danger-300;
79+
@apply text-danger-300;
80+
@apply hover:text-danger-400;
81+
@apply focus:ring-danger-100;
82+
}
83+
}
84+
85+
/* Error message component with warning icon */
86+
p.mt-1\.5.flex.gap-2.items-center.text-sm.text-error {
87+
@apply text-neutrals-300;
88+
}
89+
90+
p.mt-1\.5.flex.gap-2.items-center.text-sm.text-error .hero-exclamation-circle {
91+
-webkit-mask: none !important;
92+
mask: none !important;
93+
background-color: transparent !important;
94+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23f9aa00'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z'/%3e%3c/svg%3e") !important;
95+
background-repeat: no-repeat;
96+
background-position: center;
97+
background-size: contain;
98+
width: 1.25rem;
99+
height: 1.25rem;
100+
}
101+
102+
header h1.text-lg.font-semibold.leading-8 {
103+
@apply text-neutrals-350;
104+
letter-spacing: -0.025em;
105+
margin-bottom: 0.5rem;
106+
}
107+
108+
/* Force table-zebra to use simple-table styling */
109+
table.table.table-zebra {
110+
@apply w-full border-collapse;
111+
}
112+
113+
table.table.table-zebra th {
114+
@apply text-neutrals-300 font-semibold p-3 bg-neutrals-50 border-b border-neutrals-300;
115+
}
116+
117+
table.table.table-zebra td {
118+
@apply p-3 border-b border-gray-200 bg-neutrals-0;
119+
}
120+
121+
@layer utilities {
122+
/* tables */
123+
.simple-table {
124+
@apply w-full border-collapse;
125+
}
126+
127+
.simple-table th {
128+
@apply text-neutrals-300 font-semibold p-3 bg-neutrals-50 border-b border-neutrals-300;
129+
}
130+
131+
.simple-table td {
132+
@apply p-3 border-b border-gray-200 bg-neutrals-0;
133+
}
134+
135+
/* Checkbox fieldset styling - only for labels containing checkboxes */
136+
.fieldset label:has(input[type='checkbox']) {
137+
@apply inline-flex items-center w-fit text-neutrals-300 hover:text-neutrals-400 focus:text-neutrals-400;
138+
}
139+
140+
.fieldset label:has(input[type='checkbox']) input[type='checkbox'] {
141+
@apply flex-shrink-0;
142+
}
143+
144+
.fieldset label:has(input[type='checkbox']) span.label {
145+
@apply text-base;
146+
position: relative;
147+
padding-left: 2rem; /* Space for checkbox */
148+
}
149+
150+
.fieldset
151+
label:has(input[type='checkbox'])
152+
span.label
153+
input[type='checkbox'] {
154+
position: absolute;
155+
left: 0;
156+
top: 50%;
157+
transform: translateY(-50%);
158+
}
159+
160+
.fieldset label:has(input[type='checkbox']) span.label::before {
161+
content: '';
162+
@apply w-1 h-5 bg-interesting-pink rounded-full;
163+
position: absolute;
164+
left: 1.5rem;
165+
top: 50%;
166+
transform: translateY(-50%);
167+
}
168+
}
169+
170+
.toast.toast-top.toast-end {
171+
@apply fixed top-4 right-4 z-50 w-96;
172+
}
173+
174+
.toast .alert {
175+
@apply bg-white rounded-lg shadow-lg border-l-4 p-4 w-full;
176+
@apply flex items-start justify-between gap-4;
177+
border: none;
178+
border-left: 4px solid;
179+
}
180+
181+
.toast .alert-info {
182+
@apply border-l-success-300;
183+
}
184+
185+
.toast .alert-error {
186+
@apply border-l-danger-300;
187+
}
188+
189+
.toast .alert-error svg {
190+
@apply text-danger-300;
191+
}
192+
193+
.toast .alert p:first-of-type {
194+
@apply font-bold text-neutrals-350 mb-1;
195+
word-wrap: break-word;
196+
overflow-wrap: break-word;
197+
word-break: break-word;
198+
}
199+
200+
.toast .alert p:last-of-type {
201+
@apply text-sm text-neutrals-300;
202+
word-wrap: break-word;
203+
overflow-wrap: break-word;
204+
word-break: break-word;
205+
}
206+
207+
.toast .alert svg {
208+
@apply w-5 h-5 flex-shrink-0 mt-0.5;
209+
}
210+
211+
.toast .alert button {
212+
@apply text-gray-400 hover:text-gray-600 transition-colors duration-200 flex-shrink-0;
213+
}
214+
215+
.toast .alert button svg {
216+
@apply w-5 h-5;
217+
}
218+
219+
.toast .alert span.hero-information-circle,
220+
.toast .alert span.hero-exclamation-circle {
221+
display: none !important;
222+
}

‎assets/js/odyssey.js‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
11
const Hooks = {
22
OdysseyActivityPicker: {
3-
mounted() {
4-
const picker = this.el.querySelector("odyssey-product-picker")
3+
mounted () {
4+
const picker = this.el.querySelector('odyssey-product-picker')
55

66
if (picker) {
7-
picker.addEventListener("click", (event) => {
7+
picker.addEventListener('click', event => {
88
event.preventDefault()
99
event.stopPropagation()
1010
})
1111

12-
13-
picker.addEventListener("change", (event) => {
12+
picker.addEventListener('change', event => {
1413
event.preventDefault()
1514
event.stopPropagation()
1615

1716
const hiddenInput = this.el.querySelector('input[type="hidden"]')
18-
hiddenInput.value = event.detail.selectedIds.join(",")
17+
hiddenInput.value = event.detail.selectedIds.join(',')
1918

2019
// Trigger a change event on the hidden input to notify Phoenix
2120
hiddenInput.dispatchEvent(new Event('input', { bubbles: true }))
@@ -25,4 +24,4 @@ const Hooks = {
2524
}
2625
}
2726

28-
export default Hooks
27+
export default Hooks

0 commit comments

Comments
 (0)