github.com/argoproj/argo-cd/v2@v2.10.9/ui/src/app/settings/components/appearance-list/appearance-list.tsx (about)

     1  import * as React from 'react';
     2  import {DataLoader, Page} from '../../../shared/components';
     3  import {services} from '../../../shared/services';
     4  
     5  require('./appearance-list.scss');
     6  
     7  export const AppearanceList = () => {
     8      return (
     9          <Page
    10              title={'Appearance'}
    11              toolbar={{
    12                  breadcrumbs: [{title: 'Settings', path: '/settings'}, {title: 'Appearance'}]
    13              }}>
    14              <DataLoader load={() => services.viewPreferences.getPreferences()}>
    15                  {pref => (
    16                      <div className='appearance-list'>
    17                          <div className='argo-container'>
    18                              <div className='appearance-list__panel'>
    19                                  <div className='columns'>Dark Theme</div>
    20                                  <div className='columns'>
    21                                      <button
    22                                          className='argo-button argo-button--base appearance-list__button'
    23                                          onClick={() => {
    24                                              const targetTheme = pref.theme === 'light' ? 'dark' : 'light';
    25                                              services.viewPreferences.updatePreferences({theme: targetTheme});
    26                                          }}>
    27                                          {pref.theme === 'light' ? 'Enable' : 'Disable'}
    28                                      </button>
    29                                  </div>
    30                              </div>
    31                          </div>
    32                      </div>
    33                  )}
    34              </DataLoader>
    35          </Page>
    36      );
    37  };