From 0d8d56328232451a68745543dfda34e2c9bd9a75 Mon Sep 17 00:00:00 2001 From: Alex Lion Date: Fri, 23 Jan 2026 23:45:16 +0100 Subject: [PATCH] Refactor styles and components for consistency - Updated background styles in event join page to a solid color. - Simplified button styles across various components, replacing complex gradient backgrounds with utility classes. - Adjusted layout and spacing in profile dropdown and user menu for improved accessibility and readability. - Enhanced alert and badge components with new styling classes for better visual consistency. - Refined tab component styles for better alignment and spacing. - Cleaned up button component attributes for clarity and maintainability. - Improved test readability by formatting multiline statements. --- assets/css/admin.css | 42 +- assets/css/app.css | 39 +- assets/css/modern.css | 152 ------ assets/css/{theme.css => theme-config.css} | 105 ++-- .../live/embed_live/form_component.html.heex | 9 +- .../live/event_live/event_card_component.ex | 477 +++++++++++------- .../event_live/event_form_component.html.heex | 7 +- .../live/event_live/index.html.heex | 142 ++++-- lib/claper_web/live/event_live/join.html.heex | 30 +- .../live/event_live/manage.html.heex | 18 +- .../live/event_live/presenter.html.heex | 2 +- lib/claper_web/live/event_live/show.html.heex | 6 +- .../live/form_live/form_component.html.heex | 9 +- .../live/poll_live/form_component.html.heex | 9 +- .../live/quiz_live/quiz_component.html.heex | 7 +- lib/claper_web/live/stat_live/index.html.heex | 2 +- .../live/user_settings_live/show.html.heex | 3 +- .../layout/_profile_dropdown.html.heex | 79 +-- .../templates/layout/_user_menu.html.heex | 38 +- .../templates/layout/user.html.heex | 2 +- .../templates/lti/launch/error.html.heex | 5 +- .../templates/lti/registration/new.html.heex | 6 +- .../lti/registration/success.html.heex | 2 +- .../templates/user_registration/new.html.heex | 5 +- .../user_reset_password/edit.html.heex | 5 +- .../user_reset_password/new.html.heex | 5 +- .../templates/user_session/new.html.heex | 5 +- .../views/components/alert_component.ex | 12 +- .../views/components/badge_component.ex | 6 +- .../views/components/button_component.ex | 20 +- .../views/components/tabs_component.ex | 4 +- .../components/event_card_component_test.exs | 8 +- 32 files changed, 623 insertions(+), 638 deletions(-) delete mode 100644 assets/css/modern.css rename assets/css/{theme.css => theme-config.css} (55%) diff --git a/assets/css/admin.css b/assets/css/admin.css index c8d7ad5..058f756 100644 --- a/assets/css/admin.css +++ b/assets/css/admin.css @@ -1,4 +1,5 @@ @import "tailwindcss"; +@import './theme-config.css'; @plugin "daisyui"; @utility btn { @@ -20,44 +21,3 @@ @utility fieldset-legend { @apply ml-3; } - -@plugin "daisyui/theme" { - name: "claper"; - default: true; /* set as default */ - prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */ - color-scheme: light; /* color of browser-provided UI */ - - --color-primary: #140753; - --color-primary-content: #ffffff; - --color-secondary: #f4f4f4; - --color-secondary-content: #140553; - --color-accent: #8611ed; - --color-accent-content: #ffffff; - --color-neutral: #000000; - --color-neutral-content: #ffffff; - --color-info: #79bfe2; - --color-info-content: #0e3649; - --color-success: #3cb957; - --color-success-content: #143e1d; - --color-warning: #ffb62e; - --color-warning-content: #523500; - --color-error: #e7000b; - --color-error-content: #fff; - /* border radius */ - --radius-selector: 1rem; - --radius-field: 0.25rem; - --radius-box: 0.5rem; - - /* base sizes */ - --size-selector: 0.25rem; - --size-field: 0.25rem; - - /* border size */ - --border: 1px; - - /* effects */ - --depth: 1; - --noise: 0; -} - -@import "./modern.css" layer(theme); diff --git a/assets/css/app.css b/assets/css/app.css index b3d3e4d..f5e2aa5 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -2,11 +2,22 @@ @import 'animate.css/animate.min.css'; @import 'tailwindcss'; -@import './theme.css' layer(theme); +@import './theme-config.css'; @plugin "daisyui" { - themes: light --default; - include: toggle; + themes: claper --default; +} + +@utility btn { + @apply rounded-full !font-display text-small-body; +} + +@utility input { + @apply rounded-full focus:outline-none focus-within:outline-none focus:border-2 focus-within:border-2 !font-display text-small-body transition-all; +} + +@utility select { + @apply rounded-full focus:outline-none focus-within:outline-none focus:border-2 focus-within:border-2 !font-display text-small-body transition-all; } @layer base { @@ -17,6 +28,11 @@ ::file-selector-button { border-color: var(--color-gray-200, currentcolor); } + + button, + [role="button"] { + cursor: pointer; + } } * { @@ -321,23 +337,6 @@ src: url('/fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf'); } -.bg-gradient-animate { - background: linear-gradient(-45deg, var(--color-secondary-500), var(--color-secondary-600), var(--color-primary-400), var(--color-primary-400)); - background-size: 400% 400%; - animation: gradient 15s ease infinite; -} - -@keyframes gradient { - 0% { - background-position: 0% 50%; - } - 50% { - background-position: 100% 50%; - } - 100% { - background-position: 0% 50%; - } -} .arrow_box { position: relative; diff --git a/assets/css/modern.css b/assets/css/modern.css deleted file mode 100644 index 9dc3070..0000000 --- a/assets/css/modern.css +++ /dev/null @@ -1,152 +0,0 @@ -@theme { - /* Colors */ - /* Main colors */ - --color-*: initial; - --color-sky-blue: #81EBFE; - --color-teal: #14BFDB; - --color-azure: #29ACED; - --color-mauve: #8611ED; - --color-purple: #B80FEF; - --color-navy: #140553; - - /* Light colors */ - --color-cold-pink: #F3DEFA; - --color-warm-pink: #FFD2F6; - --color-yeallaw: #FFEAC2; - --color-pistacio: #D4FFF4; - --color-sky-tern: #C8EDFF; - --color-tealy: #81EBFE; - --color-earl-night: #0A7BB4; - --color-dark-night: #184992; - - /* Gradient */ - --gradient-primary: 123deg, var(--color-sky-blue) -36%, var(--color-teal) -12%, var(--color-azure) 21%, var(--color-mauve) 81%, var(--color-purple) 130%; - --gradient-secondary: 123deg, rgba(129, 235, 254, 0.9) -36%, rgba(20, 191, 219, 0.9) -12%, rgba(41, 172, 237, 0.9) 21%, rgba(134, 17, 237, 0.9) 81%, rgba(184, 15, 239, 0.9) 130%; - - /* Grayscale */ - --color-white: #FFFFFF; - --color-black: #191919; - --color-gray-20: #CCCCCC; - --color-gray-40: #9F9F9F; - --color-gray-60: #737373; - --color-gray-80: #464646; - --color-gray-100: #191919; - --color-gray-120: #000000; - - --color-platinum: #F0F0F0; - --color-platinum-20: #FFFFFF; - --color-platinum-40: #FCFCFC; - --color-platinum-60: #F8F8F8; - --color-platinum-80: #F4F4F4; - --color-platinum-100: #F0F0F0; - --color-platinum-120: #EEEEEE; - - /* Typography */ - --font-display: "Montserrat", sans-serif; - - /* Font Sizes - Desktop */ - --text-h1: 80px; - --leading-h1: 120%; - --font-weight-h1: 900; - - --text-h2: 40px; - --leading-h2: 120%; - --font-weight-h2: 700; - - --text-h3: 32px; - --leading-h3: 120%; - --font-weight-h3: 600; - - --text-h4: 24px; - --leading-h4: 120%; - --font-weight-h4: 500; - - --text-h5: 18px; - --leading-h5: 120%; - --font-weight-h5: 600; - - --text-h6: 16px; - --leading-h6: 120%; - --font-weight-h6: 500; - - --text-subheading: 20px; - --leading-subheading: 150%; - --font-weight-subheading: 300; - - --text-body-bold: 16px; - --leading-body-bold: 150%; - --font-weight-body-bold: 700; - - --text-body: 16px; - --leading-body: 150%; - --font-weight-body: 400; - - --text-small-body-bold: 14px; - --leading-small-body-bold: 150%; - --font-weight-small-body-bold: 600; - - --text-small-body: 14px; - --leading-small-body: 150%; - --font-weight-small-body: 400; - - --text-caption: 14px; - --leading-caption: 150%; - --font-weight-caption: 300; - - /* Font Sizes - Mobile */ - --text-mobile-h1: 32px; - --leading-mobile-h1: 120%; - --font-weight-mobile-h1: 900; - - --text-mobile-h2: 28px; - --leading-mobile-h2: 120%; - --font-weight-mobile-h2: 700; - - --text-mobile-h3: 22px; - --leading-mobile-h3: 120%; - --font-weight-mobile-h3: 600; - - --text-mobile-h4: 18px; - --leading-mobile-h4: 120%; - --font-weight-mobile-h4: 500; - - --text-mobile-h5: 16px; - --leading-mobile-h5: 120%; - --font-weight-mobile-h5: 600; - - --text-mobile-h6: 14px; - --leading-mobile-h6: 120%; - --font-weight-mobile-h6: 500; - - /* Spacing */ - --spacing-0: 0px; - --spacing-4: 4px; - --spacing-8: 8px; - --spacing-12: 12px; - --spacing-16: 16px; - --spacing-20: 20px; - --spacing-24: 24px; - --spacing-28: 28px; - --spacing-32: 32px; - --spacing-36: 36px; - --spacing-40: 40px; - --spacing-44: 44px; - --spacing-48: 48px; - --spacing-52: 52px; - --spacing-56: 56px; - --spacing-60: 60px; - --spacing-64: 64px; - --spacing-68: 68px; - --spacing-72: 72px; - --spacing-76: 76px; - --spacing-80: 80px; - --spacing-128: 128px; - - /* Font Weights */ - --font-weight-regular: 400; - --font-weight-bold: 700; - - /* Shadows */ - --shadow-3xl: 0px 902px 253px 0px rgba(65, 69, 124, 0.00), 0px 577px 231px 0px rgba(65, 69, 124, 0.01), 0px 325px 195px 0px rgba(65, 69, 124, 0.05), 0px 144px 144px 0px rgba(65, 69, 124, 0.09), 0px 36px 79px 0px rgba(65, 69, 124, 0.10) - -} \ No newline at end of file diff --git a/assets/css/theme.css b/assets/css/theme-config.css similarity index 55% rename from assets/css/theme.css rename to assets/css/theme-config.css index 5361f03..2b6d63c 100644 --- a/assets/css/theme.css +++ b/assets/css/theme-config.css @@ -1,19 +1,67 @@ +@plugin "daisyui/theme" { + name: "claper"; + default: true; + prefersdark: false; + color-scheme: light; + + /* Map custom colors to DaisyUI semantic tokens */ + --color-primary: #8611ed; /* primary-500 */ + --color-primary-content: #ffffff; + --color-secondary: #140553; /* secondary-500 */ + --color-secondary-content: #ffffff; + --color-accent: #507DAA; /* neutral-500 */ + --color-accent-content: #ffffff; + --color-neutral: #374151; /* gray-700 */ + --color-neutral-content: #ffffff; + --color-base-100: #ffffff; + --color-base-200: #f9fafb; /* gray-50 */ + --color-base-300: #e5e7eb; /* gray-200 */ + --color-base-content: #1f2937; /* gray-800 */ + --color-info: #79bfe2; + --color-info-content: #0e3649; + --color-success: #10B981; /* supporting-green-500 */ + --color-success-content: #064E3B; /* supporting-green-900 */ + --color-warning: #F59E0B; /* supporting-yellow-500 */ + --color-warning-content: #78350F; /* supporting-yellow-900 */ + --color-error: #E12D39; /* supporting-red-500 */ + --color-error-content: #ffffff; + + /* Border radius (preserve from admin.css) */ + --radius-selector: 1rem; + --radius-field: 0.25rem; + --radius-box: 0.5rem; + + /* Border and effects */ + --border: 1px; + --depth: 1; + --noise: 0; +} @theme { - /* Gray Colors (Tailwind default) */ - --color-gray-50: #f9fafb; - --color-gray-100: #f3f4f6; - --color-gray-200: #e5e7eb; - --color-gray-300: #d1d5db; - --color-gray-400: #9ca3af; - --color-gray-500: #6b7280; - --color-gray-600: #4b5563; - --color-gray-700: #374151; - --color-gray-800: #1f2937; - --color-gray-900: #111827; - --color-gray-950: #030712; + /* Preserve custom CSS variables for non-DaisyUI usage */ + --font-display: "Montserrat", sans-serif; + --font-family-sans: "Roboto", sans-serif; + --font-family-serif: "Merriweather", serif; - /* Primary Colors - Claper Purple */ + /* Preserve shadows from theme.css */ + --shadow-base: 0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px 0px rgba(0,0,0,0.06); + --shadow-md: 0px 4px 6px 0px rgba(0,0,0,0.1), 0px 2px 4px 0px rgba(0,0,0,0.06); + --shadow-lg: 0px 4px 6px 0px rgba(0,0,0,0.05), 0px 10px 15px 0px rgba(0,0,0,0.1); + --shadow-xl: 0px 10px 10px 0px rgba(0,0,0,0.04), 0px 20px 25px 0px rgba(0,0,0,0.1); + --shadow-2xl: 0px 25px 50px 0px rgba(0,0,0,0.25); + --shadow-inner: inset 0px 2px 4px 0px rgba(0,0,0,0.06); + + /* Typography scale from modern.css (if needed by templates) */ + --text-h1: 80px; + --text-h2: 40px; + --text-h3: 32px; + --text-h4: 24px; + --text-h5: 18px; + --text-h6: 16px; + --text-body: 16px; + --text-small-body: 14px; + + /* Primary Colors - Claper Purple (from old theme.css) */ --color-primary-50: #f3defa; --color-primary-100: #e8bef5; --color-primary-200: #d08def; @@ -25,7 +73,7 @@ --color-primary-800: #35065f; --color-primary-900: #1a032f; - /* Secondary Colors - Navy Purple */ + /* Secondary Colors - Navy Purple (from old theme.css) */ --color-secondary-50: #e8e6f0; --color-secondary-100: #c5c0db; --color-secondary-200: #9f97c2; @@ -36,8 +84,8 @@ --color-secondary-700: #0c0332; --color-secondary-800: #080221; --color-secondary-900: #040111; - - /* Neutral Colors (wedgewood) */ + + /* Neutral Colors - Wedgewood (from old theme.css) */ --color-neutral-50: #F0F4F8; --color-neutral-100: #D9E3ED; --color-neutral-200: #B9CCDF; @@ -48,8 +96,8 @@ --color-neutral-700: #314D68; --color-neutral-800: #253B50; --color-neutral-900: #1A2938; - - /* Supporting Red Colors (rose-madder) */ + + /* Supporting Red Colors (from old theme.css) */ --color-supporting-red-50: #FCEDEE; --color-supporting-red-100: #F9D5D7; --color-supporting-red-200: #F3ABB0; @@ -60,8 +108,8 @@ --color-supporting-red-700: #871B22; --color-supporting-red-800: #5A1217; --color-supporting-red-900: #2D090B; - - /* Supporting Yellow Colors (school-bus-yellow) */ + + /* Supporting Yellow Colors (from old theme.css) */ --color-supporting-yellow-50: #FFFBEB; --color-supporting-yellow-100: #FEF3C7; --color-supporting-yellow-200: #FDE68A; @@ -72,8 +120,8 @@ --color-supporting-yellow-700: #B45309; --color-supporting-yellow-800: #92400E; --color-supporting-yellow-900: #78350F; - - /* Supporting Green Colors (green-teal) */ + + /* Supporting Green Colors (from old theme.css) */ --color-supporting-green-50: #ECFDF5; --color-supporting-green-100: #D1FAE5; --color-supporting-green-200: #A7F3D0; @@ -84,17 +132,4 @@ --color-supporting-green-700: #047857; --color-supporting-green-800: #065F46; --color-supporting-green-900: #064E3B; - - /* Font Family */ - --font-family-sans: 'Roboto', sans-serif; - --font-family-serif: 'Merriweather', serif; - --font-display: 'Montserrat', sans-serif; - - /* Box Shadows */ - --shadow-base: 0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px 0px rgba(0,0,0,0.06); - --shadow-md: 0px 4px 6px 0px rgba(0,0,0,0.1), 0px 2px 4px 0px rgba(0,0,0,0.06); - --shadow-lg: 0px 4px 6px 0px rgba(0,0,0,0.05), 0px 10px 15px 0px rgba(0,0,0,0.1); - --shadow-xl: 0px 10px 10px 0px rgba(0,0,0,0.04), 0px 20px 25px 0px rgba(0,0,0,0.1); - --shadow-2xl: 0px 25px 50px 0px rgba(0,0,0,0.25); - --shadow-inner: inset 0px 2px 4px 0px rgba(0,0,0,0.06); } diff --git a/lib/claper_web/live/embed_live/form_component.html.heex b/lib/claper_web/live/embed_live/form_component.html.heex index ec67b28..14d67a7 100644 --- a/lib/claper_web/live/embed_live/form_component.html.heex +++ b/lib/claper_web/live/embed_live/form_component.html.heex @@ -54,11 +54,7 @@
-
diff --git a/lib/claper_web/live/event_live/event_card_component.ex b/lib/claper_web/live/event_live/event_card_component.ex index 1142442..bcf624c 100644 --- a/lib/claper_web/live/event_live/event_card_component.ex +++ b/lib/claper_web/live/event_live/event_card_component.ex @@ -26,187 +26,255 @@ defmodule ClaperWeb.EventLive.EventCardComponent do ~H"""
- -
+ +
<%= if @thumbnail_url do %> - {@event.name} + {@event.name} <% else %>
Claper
<% end %> +
- -
- <%= if Event.started?(@event) && !Event.finished?(@event) do %> -
- - {gettext("Live")} -
- <% end %> - <%= if !Event.started?(@event) && !Event.finished?(@event) do %> -
- {gettext("Incoming")} -
- <% end %> - <%= if Event.finished?(@event) do %> -
- {gettext("Finished")} -
- <% end %> -
- - -
-
- - - - LTI + +
+ <%= if Event.started?(@event) && !Event.finished?(@event) do %> +
+ + {gettext("Live")}
-
+ <% end %> + <%= if !Event.started?(@event) && !Event.finished?(@event) do %> +
+ {gettext("Incoming")} +
+ <% end %> + <%= if Event.finished?(@event) do %> +
+ {gettext("Finished")} +
+ <% end %> +
- -
- +
+
+ - - - - {gettext("Manager")} - - - - - - - {gettext("Attendees")} - + + + LTI
- -
-
-
-

- {@event.name} -

-

- # {@event.code} -

-
+ +
+ +
+
+
+

+ {@event.name} +

+

+ # {@event.code} +

+
- -
+ +
+ + +
+
+
+ + +
+ +
+
+ + <.link + :if={Event.started?(@event) && not @is_leader} + data-confirm={ + gettext("Are you sure you want to terminate this event? This action cannot be undone.") + } + phx-value-id={@event.uuid} + phx-click="terminate" + class="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-gray-100 text-gray-700 rounded-full font-bold hover:bg-gray-200 transition" + > + + + + {gettext("End Event")} +
-
- - -
- - - - - {gettext("Join")} - - <.link - :if={Event.started?(@event) && not @is_leader} - data-confirm={gettext("Are you sure you want to terminate this event? This action cannot be undone.")} - phx-value-id={@event.uuid} - phx-click="terminate" - class="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-gray-100 text-gray-700 rounded-full font-bold hover:bg-gray-200 transition" - > - - - - {gettext("End Event")} - -
-
- - {gettext("Processing your file...")} -
+
+ + {gettext("Processing your file...")} +
-
- {gettext("Error when processing the file")} -
+
+ + {gettext("Error when processing the file")} + +
-
- - - - - - {gettext("View report")} - +
+ + + + + + {gettext("View report")} + +
""" @@ -228,7 +296,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do <% end %>
- +
- - + + LTI

@@ -254,19 +331,17 @@ defmodule ClaperWeb.EventLive.EventCardComponent do id={"event-date-#{@event.uuid}"} phx-update="ignore" > - {gettext("Starting on")} + {gettext("Starting on")} + - - {gettext("Finished on")} + + {gettext("Finished on")} +
- +
<%= if Event.started?(@event) && !Event.finished?(@event) do %>
@@ -286,7 +361,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do <% end %>
- +
<%= if @event.presentation_file.status == "done" && !Event.finished?(@event) do %> <.link :if={Event.started?(@event) && not @is_leader} - data-confirm={gettext("Are you sure you want to terminate this event? This action cannot be undone.")} + data-confirm={ + gettext( + "Are you sure you want to terminate this event? This action cannot be undone." + ) + } phx-value-id={@event.uuid} phx-click="terminate" class="flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-full font-bold text-sm hover:bg-gray-200 transition" @@ -326,7 +405,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do <% end %> - +
<% else %> -
+
{case @action do :edit -> gettext("Save") :new -> gettext("Create") @@ -69,8 +69,7 @@ phx_click: "delete", phx_value_id: @event.uuid, data: [confirm: gettext("Are you sure?")], - class: - "w-full lg:w-auto px-6 text-center text-white py-2 rounded-md tracking-wide font-bold focus:outline-hidden focus:shadow-outline bg-linear-to-tl from-supporting-red-600 to-supporting-red-400 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500" + class: "btn btn-error w-full lg:w-auto" )} <% end %>
diff --git a/lib/claper_web/live/event_live/index.html.heex b/lib/claper_web/live/event_live/index.html.heex index 5640c0d..a931a78 100644 --- a/lib/claper_web/live/event_live/index.html.heex +++ b/lib/claper_web/live/event_live/index.html.heex @@ -26,8 +26,18 @@ >
-
- - + +
<.tabs style={:boxed}> - <:tab active={@active_tab == "not_expired"} phx-click="change-tab" phx-value-tab="not_expired"> + <:tab + active={@active_tab == "not_expired"} + phx-click="change-tab" + phx-value-tab="not_expired" + > {gettext("Active")} - <:tab active={@active_tab == "expired"} disabled={not @has_expired_events} phx-click="change-tab" phx-value-tab="expired"> + <:tab + active={@active_tab == "expired"} + disabled={not @has_expired_events} + phx-click="change-tab" + phx-value-tab="expired" + > {gettext("Done")} - <:tab active={@active_tab == "invited"} disabled={not @has_invited_events} phx-click="change-tab" phx-value-tab="invited"> + <:tab + active={@active_tab == "invited"} + disabled={not @has_invited_events} + phx-click="change-tab" + phx-value-tab="invited" + > {gettext("Shared with you")} - - + +
@@ -86,8 +110,17 @@ phx-value-view="grid" class={"p-2 rounded-full transition #{if @view_mode == "grid", do: "bg-primary-50 border-b-2 border-primary-500", else: "hover:bg-gray-100"}"} > - - + +
- - + + - - + + <.link href={~p"/events/new"} class="flex items-center gap-2 px-4 py-3 bg-primary-500 text-white rounded-full font-bold hover:bg-primary-600 transition" > - - + +
- - + +
<%= if @view_mode == "grid" do %> @@ -159,8 +219,8 @@ <% end %> <% end %> - - + + <%= if @page < @total_pages do %>
<% end %> - - + + <%= if Enum.count(@events) == 0 do %>
- - + +

{gettext("Create your first event")}

<.link href={~p"/events/new"} class="inline-flex items-center gap-2 mt-4 px-6 py-3 bg-primary-500 text-white rounded-full font-bold hover:bg-primary-600 transition" > - - + + {gettext("Create an event")} diff --git a/lib/claper_web/live/event_live/join.html.heex b/lib/claper_web/live/event_live/join.html.heex index 7b51cf0..4c20b43 100644 --- a/lib/claper_web/live/event_live/join.html.heex +++ b/lib/claper_web/live/event_live/join.html.heex @@ -1,8 +1,6 @@ @@ -24,17 +22,11 @@ {gettext("About")} <%= if @current_user do %> - <.link - href={~p"/events"} - class="relative inline-flex items-center px-4 py-1 text-base font-sm rounded-md text-white bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500" - > + <.link href={~p"/events"} class="btn btn-primary"> {gettext("Dashboard")} <% else %> - <.link - href={~p"/users/log_in"} - class="relative inline-flex items-center px-4 py-1 text-base font-sm rounded-md text-white bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500" - > + <.link href={~p"/users/log_in"} class="btn btn-primary"> {gettext("Login")} <% end %> @@ -47,17 +39,11 @@ {gettext("About")} <%= if @current_user do %> - <.link - href={~p"/events"} - class="relative inline-flex items-center px-4 py-1 text-base font-sm rounded-md text-white bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500" - > + <.link href={~p"/events"} class="btn btn-primary"> {gettext("Dashboard")} <% else %> - <.link - href={~p"/users/log_in"} - class="relative inline-flex items-center px-4 py-1 text-base font-sm rounded-md text-white bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500" - > + <.link href={~p"/users/log_in"} class="btn btn-primary"> {gettext("Login")} <% end %> @@ -86,11 +72,7 @@
- diff --git a/lib/claper_web/live/event_live/manage.html.heex b/lib/claper_web/live/event_live/manage.html.heex index 573a0e6..07303b1 100644 --- a/lib/claper_web/live/event_live/manage.html.heex +++ b/lib/claper_web/live/event_live/manage.html.heex @@ -173,7 +173,7 @@ href={~p"/e/#{@event.code}/manage/add/poll"} class="group flex select-none rounded-xl p-3 w-full hover:bg-gray-200 cursor-pointer" > -
+
-
+
-
+
-
+
#{gettext("Click here to open the presentation window. Press F in the presentation window to enable fullscreen.")}

"} data-tg-group="manage" - class="hidden lg:inline-flex items-center py-1 px-5 rounded-r-sm text-base font-medium text-white bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500" + class="hidden lg:inline-flex items-center py-1 px-5 rounded-r-sm text-base font-medium btn btn-primary" > %>
-
+
%>
-
+
%>
-
+
%>
-
+
diff --git a/lib/claper_web/live/event_live/show.html.heex b/lib/claper_web/live/event_live/show.html.heex index 4d20185..111c9d6 100644 --- a/lib/claper_web/live/event_live/show.html.heex +++ b/lib/claper_web/live/event_live/show.html.heex @@ -1,5 +1,5 @@ <%= if @started || @is_leader do %> -
+
diff --git a/lib/claper_web/templates/user_reset_password/edit.html.heex b/lib/claper_web/templates/user_reset_password/edit.html.heex index 56c11dd..2ec0904 100644 --- a/lib/claper_web/templates/user_reset_password/edit.html.heex +++ b/lib/claper_web/templates/user_reset_password/edit.html.heex @@ -44,10 +44,7 @@ />
-
diff --git a/lib/claper_web/templates/user_reset_password/new.html.heex b/lib/claper_web/templates/user_reset_password/new.html.heex index 6a94dad..028b882 100644 --- a/lib/claper_web/templates/user_reset_password/new.html.heex +++ b/lib/claper_web/templates/user_reset_password/new.html.heex @@ -29,10 +29,7 @@ required="true" />
-
diff --git a/lib/claper_web/templates/user_session/new.html.heex b/lib/claper_web/templates/user_session/new.html.heex index 47520ac..e9fefae 100644 --- a/lib/claper_web/templates/user_session/new.html.heex +++ b/lib/claper_web/templates/user_session/new.html.heex @@ -55,10 +55,7 @@
-
diff --git a/lib/claper_web/views/components/alert_component.ex b/lib/claper_web/views/components/alert_component.ex index e949847..0907836 100644 --- a/lib/claper_web/views/components/alert_component.ex +++ b/lib/claper_web/views/components/alert_component.ex @@ -8,7 +8,7 @@ defmodule ClaperWeb.Component.Alert do ~H"""
-

+

{@message}

@@ -47,7 +47,7 @@ defmodule ClaperWeb.Component.Alert do ~H"""
-

+

{@message}

diff --git a/lib/claper_web/views/components/badge_component.ex b/lib/claper_web/views/components/badge_component.ex index 1663e8f..51a63f5 100644 --- a/lib/claper_web/views/components/badge_component.ex +++ b/lib/claper_web/views/components/badge_component.ex @@ -30,7 +30,11 @@ defmodule ClaperWeb.Component.Badge do use ClaperWeb, :view_component attr :type, :atom, default: :contained, values: [:contained, :outlined] - attr :style, :atom, default: :default, values: [:default, :neutral, :primary, :secondary, :accent, :ghost] + + attr :style, :atom, + default: :default, + values: [:default, :neutral, :primary, :secondary, :accent, :ghost] + attr :size, :atom, default: :xs, values: [:xs, :sm, :md, :lg] attr :class, :string, default: nil attr :rest, :global diff --git a/lib/claper_web/views/components/button_component.ex b/lib/claper_web/views/components/button_component.ex index 20a1466..45e5b0a 100644 --- a/lib/claper_web/views/components/button_component.ex +++ b/lib/claper_web/views/components/button_component.ex @@ -30,12 +30,18 @@ defmodule ClaperWeb.Component.Button do use ClaperWeb, :view_component attr :type, :string, default: "button" - attr :style, :atom, default: :primary, values: [:primary, :secondary, :neutral, :accent, :ghost, :default] + + attr :style, :atom, + default: :primary, + values: [:primary, :secondary, :neutral, :accent, :ghost, :default] + attr :size, :atom, default: :md, values: [:xs, :sm, :md, :lg] attr :shape, :atom, default: :square, values: [:square, :circle] attr :disabled, :boolean, default: false attr :class, :string, default: nil - attr :rest, :global, include: ~w(phx-click phx-target phx-disable-with phx-value-id form name value) + + attr :rest, :global, + include: ~w(phx-click phx-target phx-disable-with phx-value-id form name value) slot :inner_block, required: true slot :icon_left @@ -72,12 +78,18 @@ defmodule ClaperWeb.Component.Button do end attr :type, :string, default: "button" - attr :style, :atom, default: :default, values: [:primary, :secondary, :neutral, :accent, :ghost, :default] + + attr :style, :atom, + default: :default, + values: [:primary, :secondary, :neutral, :accent, :ghost, :default] + attr :size, :atom, default: :md, values: [:xs, :sm, :md, :lg] attr :shape, :atom, default: :square, values: [:square, :circle] attr :disabled, :boolean, default: false attr :class, :string, default: nil - attr :rest, :global, include: ~w(phx-click phx-target phx-disable-with phx-value-id form name value) + + attr :rest, :global, + include: ~w(phx-click phx-target phx-disable-with phx-value-id form name value) slot :inner_block, required: true diff --git a/lib/claper_web/views/components/tabs_component.ex b/lib/claper_web/views/components/tabs_component.ex index db41648..c6d189a 100644 --- a/lib/claper_web/views/components/tabs_component.ex +++ b/lib/claper_web/views/components/tabs_component.ex @@ -123,7 +123,7 @@ defmodule ClaperWeb.Component.Tabs do end defp container_classes(:boxed) do - "inline-flex items-center bg-gray-100 p-0.5 rounded-full" + "inline-flex items-center bg-gray-100 rounded-full" end # Base tab classes based on style @@ -136,7 +136,7 @@ defmodule ClaperWeb.Component.Tabs do end defp tab_base_classes(:boxed) do - "px-4 py-1.5 text-sm font-normal font-display transition-all duration-200 rounded-full" + "px-5 py-3 text-sm font-normal font-display transition-all duration-200 rounded-full" end # Tab state classes (active/inactive) based on style diff --git a/test/claper_web/live/components/event_card_component_test.exs b/test/claper_web/live/components/event_card_component_test.exs index 950532c..1a70fe8 100644 --- a/test/claper_web/live/components/event_card_component_test.exs +++ b/test/claper_web/live/components/event_card_component_test.exs @@ -37,7 +37,9 @@ defmodule ClaperWeb.EventCardComponentTest do {:ok, view, _html} = live(conn, "/events") # Expired events are shown in the "Done" tab - html = view |> element("[phx-click='change-tab'][phx-value-tab='expired']") |> render_click() + html = + view |> element("[phx-click='change-tab'][phx-value-tab='expired']") |> render_click() + assert html =~ "Finished" end @@ -50,7 +52,9 @@ defmodule ClaperWeb.EventCardComponentTest do {:ok, view, _html} = live(conn, "/events") # Expired events are shown in the "Done" tab - html = view |> element("[phx-click='change-tab'][phx-value-tab='expired']") |> render_click() + html = + view |> element("[phx-click='change-tab'][phx-value-tab='expired']") |> render_click() + assert html =~ "Finished" end end