Skip to content

Commit e213989

Browse files
KatoakDRKatoakDR
committed
feat: sidebar styling
1 parent 3cc15ca commit e213989

File tree

4 files changed

+100
-98
lines changed

4 files changed

+100
-98
lines changed

‎electron/renderer/components/sidebar/accounts/sidebar-item-accounts.tsx

+34-34
Original file line numberDiff line numberDiff line change
@@ -91,50 +91,50 @@ export const SidebarItemAccounts: React.FC = (): ReactNode => {
9191
);
9292

9393
return (
94-
<EuiPanel>
94+
<EuiPanel paddingSize="none">
9595
<EuiCallOut title="My Accounts" iconType="key" size="s">
9696
Add your DragonRealms accounts here, then use the{' '}
9797
<EuiLink onClick={showSidebarCharacters}>Characters menu</EuiLink> to
9898
add and play your characters.
9999
</EuiCallOut>
100100

101-
<EuiSpacer size="m" />
101+
<EuiPanel paddingSize="s" hasShadow={false}>
102+
<EuiButton size="s" onClick={() => onAddAccountClick()}>
103+
Add Account
104+
</EuiButton>
102105

103-
<EuiButton size="s" onClick={() => onAddAccountClick()}>
104-
Add Account
105-
</EuiButton>
106+
<EuiSpacer size="m" />
106107

107-
<EuiSpacer size="m" />
108-
109-
<TableListAccounts
110-
onEditAccountClick={onEditAccountClick}
111-
onRemoveAccountClick={onRemoveAccountClick}
112-
/>
113-
114-
<EuiSpacer size="m" />
115-
116-
{showAddModal && (
117-
<ModalAddAccount
118-
onClose={closeModals}
119-
onConfirm={onAccountSaveConfirm}
108+
<TableListAccounts
109+
onEditAccountClick={onEditAccountClick}
110+
onRemoveAccountClick={onRemoveAccountClick}
120111
/>
121-
)}
122112

123-
{showEditModal && account && (
124-
<ModalEditAccount
125-
initialData={account}
126-
onClose={closeModals}
127-
onConfirm={onAccountSaveConfirm}
128-
/>
129-
)}
130-
131-
{showRemoveModal && account && (
132-
<ModalRemoveAccount
133-
initialData={account}
134-
onClose={closeModals}
135-
onConfirm={onAccountRemoveConfirm}
136-
/>
137-
)}
113+
<EuiSpacer size="m" />
114+
115+
{showAddModal && (
116+
<ModalAddAccount
117+
onClose={closeModals}
118+
onConfirm={onAccountSaveConfirm}
119+
/>
120+
)}
121+
122+
{showEditModal && account && (
123+
<ModalEditAccount
124+
initialData={account}
125+
onClose={closeModals}
126+
onConfirm={onAccountSaveConfirm}
127+
/>
128+
)}
129+
130+
{showRemoveModal && account && (
131+
<ModalRemoveAccount
132+
initialData={account}
133+
onClose={closeModals}
134+
onConfirm={onAccountRemoveConfirm}
135+
/>
136+
)}
137+
</EuiPanel>
138138
</EuiPanel>
139139
);
140140
};

‎electron/renderer/components/sidebar/characters/sidebar-item-characters.tsx

+36-36
Original file line numberDiff line numberDiff line change
@@ -138,52 +138,52 @@ export const SidebarItemCharacters: React.FC = (): ReactNode => {
138138
);
139139

140140
return (
141-
<EuiPanel>
141+
<EuiPanel paddingSize="none">
142142
<EuiCallOut title="My Characters" iconType="user" size="s">
143143
Use the <EuiLink onClick={showSidebarAccounts}>Accounts menu</EuiLink>{' '}
144144
to add your DragonRealms accounts, then add and play your characters
145145
here.
146146
</EuiCallOut>
147147

148-
<EuiSpacer size="m" />
148+
<EuiPanel paddingSize="s" hasShadow={false}>
149+
<EuiButton size="s" onClick={() => onAddCharacterClick()}>
150+
Add Character
151+
</EuiButton>
149152

150-
<EuiButton size="s" onClick={() => onAddCharacterClick()}>
151-
Add Character
152-
</EuiButton>
153+
<EuiSpacer size="m" />
153154

154-
<EuiSpacer size="m" />
155-
156-
<TableListCharacters
157-
onPlayCharacterClick={onPlayCharacterClick}
158-
onQuitCharacterClick={onQuitCharacterClick}
159-
onEditCharacterClick={onEditCharacterClick}
160-
onRemoveCharacterClick={onRemoveCharacterClick}
161-
/>
162-
163-
<EuiSpacer size="m" />
164-
165-
{showAddModal && (
166-
<ModalAddCharacter
167-
onClose={closeModals}
168-
onConfirm={onCharacterSaveConfirm}
155+
<TableListCharacters
156+
onPlayCharacterClick={onPlayCharacterClick}
157+
onQuitCharacterClick={onQuitCharacterClick}
158+
onEditCharacterClick={onEditCharacterClick}
159+
onRemoveCharacterClick={onRemoveCharacterClick}
169160
/>
170-
)}
171161

172-
{showEditModal && character && (
173-
<ModalEditCharacter
174-
initialData={character}
175-
onClose={closeModals}
176-
onConfirm={onCharacterSaveConfirm}
177-
/>
178-
)}
179-
180-
{showRemoveModal && character && (
181-
<ModalRemoveCharacter
182-
initialData={character}
183-
onClose={closeModals}
184-
onConfirm={onCharacterRemoveConfirm}
185-
/>
186-
)}
162+
<EuiSpacer size="m" />
163+
164+
{showAddModal && (
165+
<ModalAddCharacter
166+
onClose={closeModals}
167+
onConfirm={onCharacterSaveConfirm}
168+
/>
169+
)}
170+
171+
{showEditModal && character && (
172+
<ModalEditCharacter
173+
initialData={character}
174+
onClose={closeModals}
175+
onConfirm={onCharacterSaveConfirm}
176+
/>
177+
)}
178+
179+
{showRemoveModal && character && (
180+
<ModalRemoveCharacter
181+
initialData={character}
182+
onClose={closeModals}
183+
onConfirm={onCharacterRemoveConfirm}
184+
/>
185+
)}
186+
</EuiPanel>
187187
</EuiPanel>
188188
);
189189
};

‎electron/renderer/components/sidebar/settings/sidebar-item-settings.tsx

+24-25
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
EuiFormRow,
66
EuiPanel,
77
EuiRadioGroup,
8-
EuiSpacer,
98
} from '@elastic/eui';
109
import type { ReactNode } from 'react';
1110
import { useTheme } from '../../../hooks/theme.jsx';
@@ -14,34 +13,34 @@ export const SidebarItemSettings: React.FC = (): ReactNode => {
1413
const { colorMode, setColorMode } = useTheme();
1514

1615
return (
17-
<EuiPanel>
16+
<EuiPanel paddingSize="none">
1817
<EuiCallOut title="Settings" iconType="gear" size="s">
1918
Customize your Phoenix experience.
2019
</EuiCallOut>
2120

22-
<EuiSpacer size="m" />
23-
24-
<EuiForm component="form">
25-
<EuiFormRow label="Appearance">
26-
<EuiRadioGroup
27-
name="theme"
28-
idSelected={colorMode}
29-
options={[
30-
{
31-
id: 'light',
32-
label: 'Light',
33-
},
34-
{
35-
id: 'dark',
36-
label: 'Dark',
37-
},
38-
]}
39-
onChange={(themeId: string) => {
40-
setColorMode?.(themeId as EuiThemeColorMode);
41-
}}
42-
/>
43-
</EuiFormRow>
44-
</EuiForm>
21+
<EuiPanel paddingSize="s" hasShadow={false}>
22+
<EuiForm component="form">
23+
<EuiFormRow label="Appearance">
24+
<EuiRadioGroup
25+
name="theme"
26+
idSelected={colorMode}
27+
options={[
28+
{
29+
id: 'light',
30+
label: 'Light',
31+
},
32+
{
33+
id: 'dark',
34+
label: 'Dark',
35+
},
36+
]}
37+
onChange={(themeId: string) => {
38+
setColorMode?.(themeId as EuiThemeColorMode);
39+
}}
40+
/>
41+
</EuiFormRow>
42+
</EuiForm>
43+
</EuiPanel>
4544
</EuiPanel>
4645
);
4746
};

‎electron/renderer/components/sidebar/sidebar.tsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,8 @@ export const Sidebar: React.FC = (): ReactNode => {
100100
paddingSize="s"
101101
size="s"
102102
className="eui-yScroll"
103-
hideCloseButton={true}
103+
pushAnimation={true}
104+
hideCloseButton={false}
104105
outsideClickCloses={true}
105106
onClose={() => setShowCharacters(false)}
106107
>
@@ -115,7 +116,8 @@ export const Sidebar: React.FC = (): ReactNode => {
115116
paddingSize="s"
116117
size="s"
117118
className="eui-yScroll"
118-
hideCloseButton={true}
119+
pushAnimation={true}
120+
hideCloseButton={false}
119121
outsideClickCloses={true}
120122
onClose={() => setShowAccounts(false)}
121123
>
@@ -130,7 +132,8 @@ export const Sidebar: React.FC = (): ReactNode => {
130132
paddingSize="s"
131133
size="s"
132134
className="eui-yScroll"
133-
hideCloseButton={true}
135+
pushAnimation={true}
136+
hideCloseButton={false}
134137
outsideClickCloses={true}
135138
onClose={() => setShowSettings(false)}
136139
>

0 commit comments

Comments
 (0)