feat: sidebar styling

dragonrealms-phoenix · Sep 15, 2024 · e213989 · e213989
1 parent 3cc15ca
commit e213989
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 98 deletions.
diff --git a/electron/renderer/components/sidebar/accounts/sidebar-item-accounts.tsx b/electron/renderer/components/sidebar/accounts/sidebar-item-accounts.tsx
@@ -91,50 +91,50 @@ export const SidebarItemAccounts: React.FC = (): ReactNode => {
   );
 
   return (
-    <EuiPanel>
+    <EuiPanel paddingSize="none">
       <EuiCallOut title="My Accounts" iconType="key" size="s">
         Add your DragonRealms accounts here, then use the{' '}
         <EuiLink onClick={showSidebarCharacters}>Characters menu</EuiLink> to
         add and play your characters.
       </EuiCallOut>
 
-      <EuiSpacer size="m" />
+      <EuiPanel paddingSize="s" hasShadow={false}>
+        <EuiButton size="s" onClick={() => onAddAccountClick()}>
+          Add Account
+        </EuiButton>
 
-      <EuiButton size="s" onClick={() => onAddAccountClick()}>
-        Add Account
-      </EuiButton>
+        <EuiSpacer size="m" />
 
-      <EuiSpacer size="m" />
-
-      <TableListAccounts
-        onEditAccountClick={onEditAccountClick}
-        onRemoveAccountClick={onRemoveAccountClick}
-      />
-
-      <EuiSpacer size="m" />
-
-      {showAddModal && (
-        <ModalAddAccount
-          onClose={closeModals}
-          onConfirm={onAccountSaveConfirm}
+        <TableListAccounts
+          onEditAccountClick={onEditAccountClick}
+          onRemoveAccountClick={onRemoveAccountClick}
         />
-      )}
 
-      {showEditModal && account && (
-        <ModalEditAccount
-          initialData={account}
-          onClose={closeModals}
-          onConfirm={onAccountSaveConfirm}
-        />
-      )}
-
-      {showRemoveModal && account && (
-        <ModalRemoveAccount
-          initialData={account}
-          onClose={closeModals}
-          onConfirm={onAccountRemoveConfirm}
-        />
-      )}
+        <EuiSpacer size="m" />
+
+        {showAddModal && (
+          <ModalAddAccount
+            onClose={closeModals}
+            onConfirm={onAccountSaveConfirm}
+          />
+        )}
+
+        {showEditModal && account && (
+          <ModalEditAccount
+            initialData={account}
+            onClose={closeModals}
+            onConfirm={onAccountSaveConfirm}
+          />
+        )}
+
+        {showRemoveModal && account && (
+          <ModalRemoveAccount
+            initialData={account}
+            onClose={closeModals}
+            onConfirm={onAccountRemoveConfirm}
+          />
+        )}
+      </EuiPanel>
     </EuiPanel>
   );
 };

diff --git a/electron/renderer/components/sidebar/characters/sidebar-item-characters.tsx b/electron/renderer/components/sidebar/characters/sidebar-item-characters.tsx
@@ -138,52 +138,52 @@ export const SidebarItemCharacters: React.FC = (): ReactNode => {
   );
 
   return (
-    <EuiPanel>
+    <EuiPanel paddingSize="none">
       <EuiCallOut title="My Characters" iconType="user" size="s">
         Use the <EuiLink onClick={showSidebarAccounts}>Accounts menu</EuiLink>{' '}
         to add your DragonRealms accounts, then add and play your characters
         here.
       </EuiCallOut>
 
-      <EuiSpacer size="m" />
+      <EuiPanel paddingSize="s" hasShadow={false}>
+        <EuiButton size="s" onClick={() => onAddCharacterClick()}>
+          Add Character
+        </EuiButton>
 
-      <EuiButton size="s" onClick={() => onAddCharacterClick()}>
-        Add Character
-      </EuiButton>
+        <EuiSpacer size="m" />
 
-      <EuiSpacer size="m" />
-
-      <TableListCharacters
-        onPlayCharacterClick={onPlayCharacterClick}
-        onQuitCharacterClick={onQuitCharacterClick}
-        onEditCharacterClick={onEditCharacterClick}
-        onRemoveCharacterClick={onRemoveCharacterClick}
-      />
-
-      <EuiSpacer size="m" />
-
-      {showAddModal && (
-        <ModalAddCharacter
-          onClose={closeModals}
-          onConfirm={onCharacterSaveConfirm}
+        <TableListCharacters
+          onPlayCharacterClick={onPlayCharacterClick}
+          onQuitCharacterClick={onQuitCharacterClick}
+          onEditCharacterClick={onEditCharacterClick}
+          onRemoveCharacterClick={onRemoveCharacterClick}
         />
-      )}
 
-      {showEditModal && character && (
-        <ModalEditCharacter
-          initialData={character}
-          onClose={closeModals}
-          onConfirm={onCharacterSaveConfirm}
-        />
-      )}
-
-      {showRemoveModal && character && (
-        <ModalRemoveCharacter
-          initialData={character}
-          onClose={closeModals}
-          onConfirm={onCharacterRemoveConfirm}
-        />
-      )}
+        <EuiSpacer size="m" />
+
+        {showAddModal && (
+          <ModalAddCharacter
+            onClose={closeModals}
+            onConfirm={onCharacterSaveConfirm}
+          />
+        )}
+
+        {showEditModal && character && (
+          <ModalEditCharacter
+            initialData={character}
+            onClose={closeModals}
+            onConfirm={onCharacterSaveConfirm}
+          />
+        )}
+
+        {showRemoveModal && character && (
+          <ModalRemoveCharacter
+            initialData={character}
+            onClose={closeModals}
+            onConfirm={onCharacterRemoveConfirm}
+          />
+        )}
+      </EuiPanel>
     </EuiPanel>
   );
 };

diff --git a/electron/renderer/components/sidebar/settings/sidebar-item-settings.tsx b/electron/renderer/components/sidebar/settings/sidebar-item-settings.tsx
@@ -5,7 +5,6 @@ import {
   EuiFormRow,
   EuiPanel,
   EuiRadioGroup,
-  EuiSpacer,
 } from '@elastic/eui';
 import type { ReactNode } from 'react';
 import { useTheme } from '../../../hooks/theme.jsx';
@@ -14,34 +13,34 @@ export const SidebarItemSettings: React.FC = (): ReactNode => {
   const { colorMode, setColorMode } = useTheme();
 
   return (
-    <EuiPanel>
+    <EuiPanel paddingSize="none">
       <EuiCallOut title="Settings" iconType="gear" size="s">
         Customize your Phoenix experience.
       </EuiCallOut>
 
-      <EuiSpacer size="m" />
-
-      <EuiForm component="form">
-        <EuiFormRow label="Appearance">
-          <EuiRadioGroup
-            name="theme"
-            idSelected={colorMode}
-            options={[
-              {
-                id: 'light',
-                label: 'Light',
-              },
-              {
-                id: 'dark',
-                label: 'Dark',
-              },
-            ]}
-            onChange={(themeId: string) => {
-              setColorMode?.(themeId as EuiThemeColorMode);
-            }}
-          />
-        </EuiFormRow>
-      </EuiForm>
+      <EuiPanel paddingSize="s" hasShadow={false}>
+        <EuiForm component="form">
+          <EuiFormRow label="Appearance">
+            <EuiRadioGroup
+              name="theme"
+              idSelected={colorMode}
+              options={[
+                {
+                  id: 'light',
+                  label: 'Light',
+                },
+                {
+                  id: 'dark',
+                  label: 'Dark',
+                },
+              ]}
+              onChange={(themeId: string) => {
+                setColorMode?.(themeId as EuiThemeColorMode);
+              }}
+            />
+          </EuiFormRow>
+        </EuiForm>
+      </EuiPanel>
     </EuiPanel>
   );
 };

diff --git a/electron/renderer/components/sidebar/sidebar.tsx b/electron/renderer/components/sidebar/sidebar.tsx
@@ -100,7 +100,8 @@ export const Sidebar: React.FC = (): ReactNode => {
           paddingSize="s"
           size="s"
           className="eui-yScroll"
-          hideCloseButton={true}
+          pushAnimation={true}
+          hideCloseButton={false}
           outsideClickCloses={true}
           onClose={() => setShowCharacters(false)}
         >
@@ -115,7 +116,8 @@ export const Sidebar: React.FC = (): ReactNode => {
           paddingSize="s"
           size="s"
           className="eui-yScroll"
-          hideCloseButton={true}
+          pushAnimation={true}
+          hideCloseButton={false}
           outsideClickCloses={true}
           onClose={() => setShowAccounts(false)}
         >
@@ -130,7 +132,8 @@ export const Sidebar: React.FC = (): ReactNode => {
           paddingSize="s"
           size="s"
           className="eui-yScroll"
-          hideCloseButton={true}
+          pushAnimation={true}
+          hideCloseButton={false}
           outsideClickCloses={true}
           onClose={() => setShowSettings(false)}
         >