Skip to content

Commit 82b530d

Browse files
sanne-sansanne-san
committed
Update details modal style
1 parent e892bea commit 82b530d

11 files changed

Lines changed: 147 additions & 55 deletions

File tree

‎assets/css/app.css‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -294,18 +294,14 @@ blockquote {
294294
display: inline;
295295
}
296296

297-
.table-striped tbody tr:nth-child(odd) {
297+
.table-striped tbody tr:nth-child(odd) td {
298298
background-color: var(--color-gray-100);
299299
}
300300

301-
.dark .table-striped tbody tr:nth-child(odd) {
301+
.dark .table-striped tbody tr:nth-child(odd) td {
302302
background-color: var(--color-gray-800);
303303
}
304304

305-
.dark .table-striped tbody tr:nth-child(even) {
306-
background-color: var(--color-gray-900);
307-
}
308-
309305
.fade-enter {
310306
opacity: 0;
311307
}

‎assets/css/modal.css‎

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -32,29 +32,6 @@
3232
overflow: auto;
3333
}
3434

35-
.modal__container {
36-
background-color: #fff;
37-
padding: 1rem 2rem;
38-
border-radius: 4px;
39-
margin: 50px auto;
40-
box-sizing: border-box;
41-
min-height: 509px;
42-
transition: height 200ms ease-in;
43-
}
44-
45-
.modal__close {
46-
position: fixed;
47-
color: #b8c2cc;
48-
font-size: 48px;
49-
font-weight: bold;
50-
top: 12px;
51-
right: 24px;
52-
}
53-
54-
.modal__close::before {
55-
content: '\2715';
56-
}
57-
5835
.modal__content {
5936
margin-bottom: 2rem;
6037
}

‎assets/js/dashboard/components/search-input.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export const SearchInput = ({
6666
type="text"
6767
placeholder={isFocused ? placeholderFocused : placeholderUnfocused}
6868
className={classNames(
69-
'dark:text-gray-100 block border-gray-300 dark:border-gray-750 rounded-md dark:bg-gray-750 w-48 dark:placeholder:text-gray-400 focus:outline-none focus:ring-3 focus:ring-indigo-500/20 dark:focus:ring-indigo-500/25 focus:border-indigo-500',
69+
'text-sm dark:text-gray-100 block border-gray-300 dark:border-gray-750 rounded-md dark:bg-gray-750 max-w-64 w-full dark:placeholder:text-gray-400 focus:outline-none focus:ring-3 focus:ring-indigo-500/20 dark:focus:ring-indigo-500/25 focus:border-indigo-500',
7070
className
7171
)}
7272
onChange={debouncedOnSearchInputChange}

‎assets/js/dashboard/components/table.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,13 @@ export const TableCell = ({
5858
align?: 'left' | 'right'
5959
}) => {
6060
return (
61-
<td className={classNames('p-2 font-medium', className)} align={align}>
61+
<td
62+
className={classNames(
63+
'p-2 font-medium first:rounded-s-sm last:rounded-e-sm',
64+
className
65+
)}
66+
align={align}
67+
>
6268
{children}
6369
</td>
6470
)

‎assets/js/dashboard/stats/modals/breakdown-table.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const BreakdownTable = <TListItem extends { name: string }>({
4141
<div className="w-full h-full">
4242
<div className="flex justify-between items-center">
4343
<div className="flex items-center gap-x-2">
44-
<h1 className="text-xl font-bold dark:text-gray-100">{title}</h1>
44+
<h1 className="text-lg font-bold dark:text-gray-100">{title}</h1>
4545
{!isPending && isFetching && <SmallLoadingSpinner />}
4646
</div>
4747
{!!onSearch && (
@@ -54,7 +54,7 @@ export const BreakdownTable = <TListItem extends { name: string }>({
5454
/>
5555
)}
5656
</div>
57-
<div className="my-4 border-b border-gray-250 dark:border-gray-700"></div>
57+
<div className="my-3 border-b border-gray-250 dark:border-gray-700"></div>
5858
<div style={{ minHeight: `${MIN_HEIGHT_PX}px` }}>
5959
{displayError && status === 'error' && <ErrorMessage error={error} />}
6060
{isPending && <InitialLoadingSpinner />}

‎assets/js/dashboard/stats/modals/modal.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useEffect } from 'react'
22
import { createPortal } from 'react-dom'
3+
import { XMarkIcon } from '@heroicons/react/20/solid'
34
import { isModifierPressed, isTyping, Keybind } from '../../keybinding'
45
import { rootRoute } from '../../router'
56
import { useAppNavigate } from '../../navigation/use-app-navigate'
@@ -78,10 +79,16 @@ class Modal extends React.Component {
7879
/>
7980
<div className="modal is-open" onClick={this.props.onClick}>
8081
<div className="modal__overlay">
81-
<button className="modal__close"></button>
82+
<button
83+
className="fixed top-3 right-6 text-gray-300 hover:text-gray-100 transition-colors duration-150"
84+
onClick={this.props.onClose}
85+
aria-label="Close modal"
86+
>
87+
<XMarkIcon className="size-10" />
88+
</button>
8289
<div
8390
ref={this.node}
84-
className="modal__container dark:bg-gray-900 focus:outline-hidden"
91+
className="bg-white p-6 my-16 mx-auto box-border min-h-[509px] transition-[height] duration-200 ease-in shadow-2xl rounded-lg dark:bg-gray-900 focus:outline-hidden"
8592
style={this.getStyle()}
8693
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
8794
tabIndex={0}

‎extra/lib/plausible_web/live/funnel_settings/form.ex‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ defmodule PlausibleWeb.Live.FunnelSettings.Form do
6464
phx-target="#funnel-form"
6565
phx-click-away="cancel-add-funnel"
6666
onkeydown="return event.key != 'Enter';"
67-
class="bg-white dark:bg-gray-900 shadow-md rounded px-8 pt-6 pb-8 mb-4 mt-8"
67+
class="bg-white dark:bg-gray-900 shadow-2xl rounded-lg px-8 pt-6 pb-8 mb-4 mt-8"
6868
>
6969
<.title class="mb-6">
7070
{if @funnel, do: "Edit", else: "Add"} funnel

‎lib/plausible_web/live/components/modal.ex‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ defmodule PlausibleWeb.Live.Components.Modal do
163163

164164
def render(assigns) do
165165
class = [
166-
"md:w-1/2 w-full max-w-md mx-auto bg-white dark:bg-gray-900 shadow-xl rounded-lg px-8 pt-6 pb-8 top-24",
166+
"md:w-1/2 w-full max-w-md mx-auto bg-white dark:bg-gray-900 shadow-2xl rounded-lg px-8 pt-6 pb-8 top-24",
167167
assigns.class
168168
]
169169

‎test/plausible_web/controllers/api/stats_controller/imported_test.exs‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -969,7 +969,13 @@ defmodule PlausibleWeb.Api.StatsController.ImportedTest do
969969
)
970970

971971
assert json_response(conn, 200)["results"] == [
972-
%{"code" => 588_335, "name" => "Tartu", "visitors" => 1, "country_flag" => "🇪🇪", "percentage" => 50.0},
972+
%{
973+
"code" => 588_335,
974+
"name" => "Tartu",
975+
"visitors" => 1,
976+
"country_flag" => "🇪🇪",
977+
"percentage" => 50.0
978+
},
973979
%{
974980
"code" => 2_650_225,
975981
"name" => "Edinburgh",

‎test/plausible_web/controllers/api/stats_controller/pages_test.exs‎

Lines changed: 49 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2720,8 +2720,20 @@ defmodule PlausibleWeb.Api.StatsController.PagesTest do
27202720
conn = get(conn, "/api/stats/#{site.domain}/exit-pages?period=day&date=2021-01-01")
27212721

27222722
assert json_response(conn, 200)["results"] == [
2723-
%{"name" => "/page1", "visitors" => 2, "visits" => 2, "exit_rate" => 66.7, "percentage" => 66.7},
2724-
%{"name" => "/page2", "visitors" => 1, "visits" => 1, "exit_rate" => 100, "percentage" => 33.3}
2723+
%{
2724+
"name" => "/page1",
2725+
"visitors" => 2,
2726+
"visits" => 2,
2727+
"exit_rate" => 66.7,
2728+
"percentage" => 66.7
2729+
},
2730+
%{
2731+
"name" => "/page2",
2732+
"visitors" => 1,
2733+
"visits" => 1,
2734+
"exit_rate" => 100,
2735+
"percentage" => 33.3
2736+
}
27252737
]
27262738
end
27272739

@@ -2754,8 +2766,20 @@ defmodule PlausibleWeb.Api.StatsController.PagesTest do
27542766
)
27552767

27562768
assert json_response(conn, 200)["results"] == [
2757-
%{"name" => "/page2", "visitors" => 1, "visits" => 1, "exit_rate" => 100.0, "percentage" => 33.3},
2758-
%{"name" => "/page1", "visitors" => 2, "visits" => 2, "exit_rate" => 66.7, "percentage" => 66.7}
2769+
%{
2770+
"name" => "/page2",
2771+
"visitors" => 1,
2772+
"visits" => 1,
2773+
"exit_rate" => 100.0,
2774+
"percentage" => 33.3
2775+
},
2776+
%{
2777+
"name" => "/page1",
2778+
"visitors" => 2,
2779+
"visits" => 2,
2780+
"exit_rate" => 66.7,
2781+
"percentage" => 66.7
2782+
}
27592783
]
27602784
end
27612785

@@ -2884,8 +2908,20 @@ defmodule PlausibleWeb.Api.StatsController.PagesTest do
28842908
conn1 = get(conn, "/api/stats/#{site.domain}/exit-pages?period=day&date=2021-01-01")
28852909

28862910
assert json_response(conn1, 200)["results"] == [
2887-
%{"name" => "/page1", "visitors" => 2, "visits" => 2, "exit_rate" => 66.7, "percentage" => 66.7},
2888-
%{"name" => "/page2", "visitors" => 1, "visits" => 1, "exit_rate" => 100.0, "percentage" => 33.3}
2911+
%{
2912+
"name" => "/page1",
2913+
"visitors" => 2,
2914+
"visits" => 2,
2915+
"exit_rate" => 66.7,
2916+
"percentage" => 66.7
2917+
},
2918+
%{
2919+
"name" => "/page2",
2920+
"visitors" => 1,
2921+
"visits" => 1,
2922+
"exit_rate" => 100.0,
2923+
"percentage" => 33.3
2924+
}
28892925
]
28902926

28912927
conn2 =
@@ -2902,7 +2938,13 @@ defmodule PlausibleWeb.Api.StatsController.PagesTest do
29022938
"exit_rate" => 80.0,
29032939
"percentage" => 60.0
29042940
},
2905-
%{"name" => "/page1", "visitors" => 2, "visits" => 2, "exit_rate" => 66.7, "percentage" => 40.0}
2941+
%{
2942+
"name" => "/page1",
2943+
"visitors" => 2,
2944+
"visits" => 2,
2945+
"exit_rate" => 66.7,
2946+
"percentage" => 40.0
2947+
}
29062948
]
29072949
end
29082950

0 commit comments

Comments
 (0)